<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>第8音 PD  ID  UE &#187; google</title>
	<atom:link href="http://blog.d8in.com/posts/tag/google/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.d8in.com</link>
	<description>Design is a  Life Style</description>
	<lastBuildDate>Wed, 10 Mar 2010 12:44:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>为什么这么设计：Google Wave</title>
		<link>http://blog.d8in.com/posts/603.html</link>
		<comments>http://blog.d8in.com/posts/603.html#comments</comments>
		<pubDate>Mon, 02 Nov 2009 06:56:36 +0000</pubDate>
		<dc:creator>xw</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[wave]]></category>

		<guid isPermaLink="false">http://blog.d8in.com/?p=603</guid>
		<description><![CDATA[终于弄激活了Wave邀请，在这里十分感谢moming同学。在试用了一下以后，虽然不知道这款产品以后是否能成功，但是她的交互方式以及设计思想，还有很多值得我们学习的，下面我们就来详细的看看。
一.布局
Wave界面布局和理念设计是真正的一页式体验，所有的操作都是一个页面完成。而在web产品中一页式体验最常用的就要数Email产品了。而Gmail更是将之发挥到极致。至于SNS产品譬如，Facebook首页和Twitter首页其实也是一页式体验的典型代表。
下面是几张不同应用的布局对比
 
由上面的布局对比我们可以看出，Wave是介于IM、Email、Twitter之间的一种全新的产品。不仅技术上采用了最新的HTML5，而且这种三列的布局明显是为了大屏幕，宽屏幕设计的。

二.交互细节
1.滚动条

当我最开始使用wave的时候，觉得最有意思的就是这个滚动条，虽然这种滚动条好像曾经在那个软件上看到过，但是出现的Web产品上还是第一次看到。
由于现在屏幕越来越大，那么就意味着传统滚动条的整体就越来越长，拖动还还好，但是要点击向上和向下箭头确实不是一件很容易的事情，每次一次点击，鼠标都要移动很大的距离。而Wave的滚动条，把向下、向上和拖动合并到一起，这样就能很好的解决这个问题，再加上拖动的算法，设定一个阀值，这样一般情况下用户之需要传统滚动条一半的距离就可以完成整个内容的拖动操作。
2.区块缩放

Wave中的每个区块都是可以缩小的，缩小以后会自动到顶部，当你最小化后的区块，不是直接最大化，而是显示出缩小后的操作界面，你可以直接在这里进行对区块内容的操作。这点设计十分类似于Windows7的Superbar。在这个时候你每开一个Wave就相当于一个新的窗口，这样就你可以快速的切换几个主题进行交互。初始的布局很适合新用户，当用户变成中级用户以后，就会发现初始的这种布局很有限制性，那么这种最小化的方式就很适合为中级和高级用户使用。
3.选项

在左上角的Navigation区域中，当鼠标悬浮到一个选项的时候最右侧会出现一个箭头，单击箭头会出现快捷操作，Movie Up，Movie Down，Set color。虽然这种悬浮快出现经常看到，但是一般都是在客户端或者表格操作中。在左侧导航确实很少。说到表格操作，通常的设计是把譬如编辑，删除，更新。默认不出现，当悬浮的时候直接出现，这三个操作的名字。我觉得这种设计很容易干扰用户，而wave这种把所有的操作隐藏到一个小箭头下就非常好，既可以完成操作，又不会干扰用户，而且便于以后功能扩展。
三.Wave到底带来了这么？
IM是对真实聊天的一种模拟，Email是对真实信件的模拟，这两种产品做得再好也只是模拟而已。而搜索引擎则不一样，他不存在与真实世界，他只存在于互联网，他是互联网中原生态的产品。同样，Facebook也是如此，Twitter也是如此。那么Wave呢？，其实Wave也是如此。Facebook和Twitter被誉为是Email的升级产品能，甚至有言论说Email会消失等等。那么Wave呢？属于IM的升级产品？还是Facebook和Twitter的升级产品？现在还真的很难看出，但是无论怎样Wave是一种全新的人和人之间的沟通工具或者说是沟通模式，而这种沟通模式只存在于互联网。google search是：机器-&#62;信息；而google wave是：人-&#62;信息。
ps：有网友指出，布局其实和Outlook2007一样。其实更准确的说是和Live Mail一样，都是三列信息级联筛选的模式。不过我之所以要指出特别之处，是布局中有了用户列表，而其实wave的整个信息组织方式也是用户组的方式。
]]></description>
			<content:encoded><![CDATA[<p>终于弄激活了Wave邀请，在这里十分感谢moming同学。在试用了一下以后，虽然不知道这款产品以后是否能成功，但是她的交互方式以及设计思想，还有很多值得我们学习的，下面我们就来详细的看看。</p>
<p><strong>一.布局</strong></p>
<p>Wave界面布局和理念设计是真正的一页式体验，所有的操作都是一个页面完成。而在web产品中一页式体验最常用的就要数Email产品了。而Gmail更是将之发挥到极致。至于SNS产品譬如，Facebook首页和Twitter首页其实也是一页式体验的典型代表。</p>
<p>下面是几张不同应用的布局对比</p>
<p><a title="google wave by xwgemini, on Flickr" href="http://www.flickr.com/photos/xwxw/4067086839/"><img src="http://farm3.static.flickr.com/2511/4067086839_9838943b9d_o.png" alt="google wave" width="422" height="1211" /></a> </p>
<p>由上面的布局对比我们可以看出，Wave是介于IM、Email、Twitter之间的一种全新的产品。不仅技术上采用了最新的HTML5，而且这种三列的布局明显是为了大屏幕，宽屏幕设计的。</p>
<p><span id="more-603"></span></p>
<p><strong>二.交互细节</strong></p>
<p><strong>1.滚动条</strong></p>
<p><a title="2009-11-02_144245 by xwgemini, on Flickr" href="http://www.flickr.com/photos/xwxw/4067838448/"><img src="http://farm4.static.flickr.com/3519/4067838448_5c7a54ae45_o.png" alt="2009-11-02_144245" width="186" height="265" /></a></p>
<p>当我最开始使用wave的时候，觉得最有意思的就是这个滚动条，虽然这种滚动条好像曾经在那个软件上看到过，但是出现的Web产品上还是第一次看到。</p>
<p>由于现在屏幕越来越大，那么就意味着传统滚动条的整体就越来越长，拖动还还好，但是要点击向上和向下箭头确实不是一件很容易的事情，每次一次点击，鼠标都要移动很大的距离。而Wave的滚动条，把向下、向上和拖动合并到一起，这样就能很好的解决这个问题，再加上拖动的算法，设定一个阀值，这样一般情况下用户之需要传统滚动条一半的距离就可以完成整个内容的拖动操作。</p>
<p><strong>2.区块缩放</strong></p>
<p><a title="2009-11-02_144312 by xwgemini, on Flickr" href="http://www.flickr.com/photos/xwxw/4067838536/"><img src="http://farm4.static.flickr.com/3515/4067838536_4b106eb8ce_o.png" alt="2009-11-02_144312" width="493" height="287" /></a></p>
<p>Wave中的每个区块都是可以缩小的，缩小以后会自动到顶部，当你最小化后的区块，不是直接最大化，而是显示出缩小后的操作界面，你可以直接在这里进行对区块内容的操作。这点设计十分类似于Windows7的Superbar。在这个时候你每开一个Wave就相当于一个新的窗口，这样就你可以快速的切换几个主题进行交互。初始的布局很适合新用户，当用户变成中级用户以后，就会发现初始的这种布局很有限制性，那么这种最小化的方式就很适合为中级和高级用户使用。</p>
<p><strong>3.选项</strong></p>
<p><a title="2009-11-02_144452 by xwgemini, on Flickr" href="http://www.flickr.com/photos/xwxw/4067087163/"><img src="http://farm3.static.flickr.com/2618/4067087163_501836dd2e_o.png" alt="2009-11-02_144452" width="262" height="160" /></a></p>
<p>在左上角的Navigation区域中，当鼠标悬浮到一个选项的时候最右侧会出现一个箭头，单击箭头会出现快捷操作，Movie Up，Movie Down，Set color。虽然这种悬浮快出现经常看到，但是一般都是在客户端或者表格操作中。在左侧导航确实很少。说到表格操作，通常的设计是把譬如编辑，删除，更新。默认不出现，当悬浮的时候直接出现，这三个操作的名字。我觉得这种设计很容易干扰用户，而wave这种把所有的操作隐藏到一个小箭头下就非常好，既可以完成操作，又不会干扰用户，而且便于以后功能扩展。</p>
<p><strong>三.Wave到底带来了这么？</strong></p>
<p>IM是对真实聊天的一种模拟，Email是对真实信件的模拟，这两种产品做得再好也只是模拟而已。而搜索引擎则不一样，他不存在与真实世界，他只存在于互联网，他是互联网中原生态的产品。同样，Facebook也是如此，Twitter也是如此。那么Wave呢？，其实Wave也是如此。Facebook和Twitter被誉为是Email的升级产品能，甚至有言论说Email会消失等等。那么Wave呢？属于IM的升级产品？还是Facebook和Twitter的升级产品？现在还真的很难看出，但是无论怎样Wave是一种全新的人和人之间的沟通工具或者说是沟通模式，而这种沟通模式只存在于互联网。google search是：机器-&gt;信息；而google wave是：人-&gt;信息。</p>
<p>ps：有网友指出，布局其实和Outlook2007一样。其实更准确的说是和Live Mail一样，都是三列信息级联筛选的模式。不过我之所以要指出特别之处，是布局中有了用户列表，而其实wave的整个信息组织方式也是用户组的方式。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.d8in.com/posts/603.html/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>无招胜有招的设计</title>
		<link>http://blog.d8in.com/posts/313.html</link>
		<comments>http://blog.d8in.com/posts/313.html#comments</comments>
		<pubDate>Tue, 28 Apr 2009 23:37:23 +0000</pubDate>
		<dc:creator>xw</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[谷歌]]></category>

		<guid isPermaLink="false">http://blog.d8in.com/posts/313.html</guid>
		<description><![CDATA[武侠小说里面经常写：高手过招，无招圣有招。而对于网站设计来说也是如此，当到达一个境界的话就是一个子&#8221;无&#8221;。虽然现在有更多的交互技术flash，flex，silverlight，因为宽带的普及，我们在设计上可以用更多质量更高的图片，因为大屏幕液晶显示器的普及，我们现在的网页可以在一个屏幕中设计更多的元素。但是我们发现那些真正NB设计，就像武林高手一样处事低调，无招圣有招。
一、空白 不知道什么时候起，开始流行&#8221;空白&#8221;风潮，国内好多设计师的blog也都一一变成&#8221;白板&#8221;。而google的首页和flickr的设计更是把&#8221;空白&#8221;发挥到了极致。


从上面的设计可以看出，设计者把用户最想要最想看的东西呈现出来，其它一切都可忽略。
 
二、低调的华丽 现在时尚界貌似很流行&#8221;低调的华丽&#8221;，而网站设计也是如此，apple站点和yahoo首页就是&#8221;低调华丽&#8221;的典范 

从上面的截图可以看出，整个页面只用了一种色调，只不过简单的做了一下渐变处理，让整个页面的元素更加有质感。 三、朴素 虽然现在的网站设计已经有很多手段把网站打造异常的华丽，异常的五彩缤纷，而有这么一些网站一直保持着我行我素&#8221;朴素&#8221;的作风。而facebook和twiiter就是这个群体的代表。

 从上面可以看出，他们并没有用渐变，也没有用更多的颜色，而是用大块大块的春色的色块，虽然看起来并不耀眼，但是也不单调，反而有自己的味道。 上面这些设计虽然各有不同，但是我们发现从某个角度来说他们都有相同的理念，用尽量少的装饰图，突出表现内容，注重设计基本原则的使用（对比，重复，对齐，亲密性）。所以可见，无招并不是没有招数，也不是几招必杀，而是把最基础的设计理念深深的融合到产品设计中。
]]></description>
			<content:encoded><![CDATA[<p>武侠小说里面经常写：高手过招，无招圣有招。而对于网站设计来说也是如此，当到达一个境界的话就是一个子&#8221;无&#8221;。虽然现在有更多的交互技术flash，flex，silverlight，因为宽带的普及，我们在设计上可以用更多质量更高的图片，因为大屏幕液晶显示器的普及，我们现在的网页可以在一个屏幕中设计更多的元素。但是我们发现那些真正NB设计，就像武林高手一样处事低调，无招圣有招。</p>
<p><strong>一、空白</strong> <br/>不知道什么时候起，开始流行&#8221;空白&#8221;风潮，国内好多设计师的blog也都一一变成&#8221;白板&#8221;。而google的首页和flickr的设计更是把&#8221;空白&#8221;发挥到了极致。</p>
<p><img src="http://farm4.static.flickr.com/3355/3482240542_2d6c691617.jpg" style="DISPLAY: inline" height="251" width="500"/></p>
<p><img src="http://farm4.static.flickr.com/3390/3481426931_20d9f556c9.jpg" style="DISPLAY: inline" height="500" width="246"/></p>
<p>从上面的设计可以看出，设计者把用户最想要最想看的东西呈现出来，其它一切都可忽略。</p>
<p> <span id="more-313"></span>
<p><strong>二、低调的华丽</strong> <br/>现在时尚界貌似很流行&#8221;低调的华丽&#8221;，而网站设计也是如此，apple站点和yahoo首页就是&#8221;低调华丽&#8221;的典范 <br/><img src="http://farm4.static.flickr.com/3373/3481425289_4c337f2052.jpg" style="DISPLAY: inline" height="500" width="299"/></p>
<p><img src="http://farm4.static.flickr.com/3643/3482239610_2d15f64a92.jpg" style="DISPLAY: inline" height="500" width="459"/></p>
<p>从上面的截图可以看出，整个页面只用了一种色调，只不过简单的做了一下渐变处理，让整个页面的元素更加有质感。 <br/><br/><strong>三、朴素</strong> <br/>虽然现在的网站设计已经有很多手段把网站打造异常的华丽，异常的五彩缤纷，而有这么一些网站一直保持着我行我素&#8221;朴素&#8221;的作风。而facebook和twiiter就是这个群体的代表。</p>
<p><img src="http://farm4.static.flickr.com/3649/3482276836_50878226d5.jpg" style="DISPLAY: inline" height="500" width="263"/></p>
<p><img src="http://farm4.static.flickr.com/3589/3482234184_3645a3ccfe_b.jpg" style="DISPLAY: inline" height="1024" width="419"/> <br/><br/>从上面可以看出，他们并没有用渐变，也没有用更多的颜色，而是用大块大块的春色的色块，虽然看起来并不耀眼，但是也不单调，反而有自己的味道。 <br/><br/>上面这些设计虽然各有不同，但是我们发现从某个角度来说他们都有相同的理念，用尽量少的装饰图，突出表现内容，<strong>注重设计基本原则的使用（对比，重复，对齐，亲密性）</strong>。所以可见，无招并不是没有招数，也不是几招必杀，而是把最基础的设计理念深深的融合到产品设计中。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.d8in.com/posts/313.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>关于Google“音乐泡泡”三言两语</title>
		<link>http://blog.d8in.com/posts/279.html</link>
		<comments>http://blog.d8in.com/posts/279.html#comments</comments>
		<pubDate>Thu, 16 Apr 2009 02:16:51 +0000</pubDate>
		<dc:creator>xw</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[sony]]></category>
		<category><![CDATA[vaio]]></category>
		<category><![CDATA[谷歌]]></category>
		<category><![CDATA[音乐]]></category>

		<guid isPermaLink="false">http://blog.d8in.com/posts/279.html</guid>
		<description><![CDATA[
最近Google音乐搜索上线了，推出了一个很有意思的工具&#8221;音乐泡泡&#8221;。打开界面左边是五颜六色的音乐泡泡，右边是一大堆选项，看上去很是&#8221;专业&#8221;，我起初点击打开的时候就误认为是一个随机播放列表，不过用着用着不对，原来是用音色本身来进行的音乐搜索工具。但是如果这么去理解的话那么这个工具就完全没有任何用途了，因为对于一个一般用户有谁能从节奏，声调，银色这三个方面准确的区别出歌曲呢。这个产品的设计貌似感觉Google在展示他们有多么多么强大的音色搜索功能，而不是给用户有实际用途的一个产品。 我的本子是Sony Vaio Sr16，Sony的本子一般会自带很多软件，但是一般都是OEM的，唯独只有音乐和视频这个地方的软件之由自己开发的，也是他们的强项。在我的机器中有这么一款音乐播放器叫Vaio Musicbox。这款软件的介绍：通过索尼12音阶分析编码技术，本软件可以在分析声波数据后将音乐自动归类到24个音乐频道中，并根据您的活动场所、情境甚至心情，智能地选择合适的音乐播放。旋律与心情紧密相连的全新音乐欣赏方式将从VAIO开始。
 

Vaio Musicbox这个音乐播放器通过核心的音频分析器自动搜索到指定文件夹的音乐文件，进行金品分析归类成，晴天、阴雨、活力四射、慢品人生、休闲乐、古典、都市、极端金属、民歌、怀旧、不插电音乐、电子乐、器乐、声乐、早安、晚安、派对时光、漫步、跑步、沉思。把音乐和听歌的场景的联系起来，自动形成播放列表。
Google的&#8221;音乐泡泡&#8221;是一个很强大的音乐音色搜索工具，但是对于一般的用户是没有什么用处的。就像Google的搜索引擎一样，默认不会一一大堆搜索选项，大多数的用户之需要一个搜索框而已。从另一个角度来说&#8221;音乐泡泡&#8221;的设计过多的把&#8221;实现模型&#8221;展现给了普通用户和普通用户的&#8221;心智模型&#8221;相差很大。 改进建议 1、让界面像个播放器 这个音乐泡泡虽然看上去很绚，但是第一眼貌似和音乐扯不上任何关系。每点一次就会自动冒出几个所谓的音乐泡泡，而且还是五颜六色，我到现在也没有搞清楚那颜色和音乐本身有什么关系。从界面上来说我觉得是一个很失败的隐喻设计。建议倒不如设计成一个播放器+播放列表，播放器可以做的绚一些。虽然这不算什么创新，但是起码比现在的这种泡泡效果要好得多。 2、简化搜索 这里可以借鉴我上面提到的Vaio Musicbox的方式，利用Google自身后台的强大搜索能力，把音乐也按照情景进行分类处理，用户在使用的时候直接选择一种身临其境的场景就可以得到相应的音乐结果，这不是很爽的一件事情吗？ 当然现在的搜索方式也可以保留，只不过应该扔到一个小角落里面起一个类似&#8221;高级查找&#8221;的功能就好了。不过放心，不要奢望有多少人去使用它。 
]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm4.static.flickr.com/3594/3437142201_7945179564.jpg" style="DISPLAY: inline" height="242" width="500"/></p>
<p>最近Google音乐搜索上线了，推出了一个很有意思的工具&#8221;音乐泡泡&#8221;。打开界面左边是五颜六色的音乐泡泡，右边是一大堆选项，看上去很是&#8221;专业&#8221;，我起初点击打开的时候就误认为是一个随机播放列表，不过用着用着不对，原来是用音色本身来进行的音乐搜索工具。但是如果这么去理解的话那么这个工具就完全没有任何用途了，因为对于一个一般用户有谁能从节奏，声调，银色这三个方面准确的区别出歌曲呢。这个产品的设计貌似感觉Google在展示他们有多么多么强大的音色搜索功能，而不是给用户有实际用途的一个产品。 <br/><br/>我的本子是Sony Vaio Sr16，Sony的本子一般会自带很多软件，但是一般都是OEM的，唯独只有音乐和视频这个地方的软件之由自己开发的，也是他们的强项。在我的机器中有这么一款音乐播放器叫Vaio Musicbox。这款软件的介绍：通过索尼12音阶分析编码技术，本软件可以在分析声波数据后将音乐自动归类到24个音乐频道中，并根据您的活动场所、情境甚至心情，智能地选择合适的音乐播放。旋律与心情紧密相连的全新音乐欣赏方式将从VAIO开始。</p>
<p> <span id="more-279"></span>
<p><img src="http://farm4.static.flickr.com/3353/3437949698_552629403a_o.png" style="DISPLAY: inline" height="257" width="468"/></p>
<p>Vaio Musicbox这个音乐播放器通过核心的音频分析器自动搜索到指定文件夹的音乐文件，进行金品分析归类成，晴天、阴雨、活力四射、慢品人生、休闲乐、古典、都市、极端金属、民歌、怀旧、不插电音乐、电子乐、器乐、声乐、早安、晚安、派对时光、漫步、跑步、沉思。把音乐和听歌的场景的联系起来，自动形成播放列表。</p>
<p>Google的&#8221;音乐泡泡&#8221;是一个很强大的音乐音色搜索工具，但是对于一般的用户是没有什么用处的。就像Google的搜索引擎一样，默认不会一一大堆搜索选项，大多数的用户之需要一个搜索框而已。从另一个角度来说&#8221;音乐泡泡&#8221;的设计过多的把&#8221;实现模型&#8221;展现给了普通用户和普通用户的&#8221;心智模型&#8221;相差很大。 <br/><br/><strong>改进建议</strong> <br/><strong>1、让界面像个播放器</strong> <br/>这个音乐泡泡虽然看上去很绚，但是第一眼貌似和音乐扯不上任何关系。每点一次就会自动冒出几个所谓的音乐泡泡，而且还是五颜六色，我到现在也没有搞清楚那颜色和音乐本身有什么关系。从界面上来说我觉得是一个很失败的隐喻设计。建议倒不如设计成一个播放器+播放列表，播放器可以做的绚一些。虽然这不算什么创新，但是起码比现在的这种泡泡效果要好得多。 <br/><br/><strong>2、简化搜索</strong> <br/>这里可以借鉴我上面提到的Vaio Musicbox的方式，利用Google自身后台的强大搜索能力，把音乐也按照情景进行分类处理，用户在使用的时候直接选择一种身临其境的场景就可以得到相应的音乐结果，这不是很爽的一件事情吗？ <br/>当然现在的搜索方式也可以保留，只不过应该扔到一个小角落里面起一个类似&#8221;高级查找&#8221;的功能就好了。不过放心，不要奢望有多少人去使用它。 <br/><br/></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.d8in.com/posts/279.html/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
