在我们用QQ进行聊天的时候，在聊天记录与文本输入框中，只要你用鼠标选中一些文字。即可进行复制和搜索2个动作。搜索整合了腾讯的soso产品。这里还有个很好细节设计值得说下，“复制”与“搜一下”这2个选项采用了不一样的颜色。“复制”是系统默认，是用户选中文字本能的一个交互动作，同时是一个非连接的按钮，所以采用了黑色。而“搜一下”是用户可以连接到腾讯的搜索产品进行搜索的交互行为。所以采用了一个连接颜色-蓝色。

从这个细节上可以看出：
1、腾讯的交互设计还是非常严谨的。
2、腾讯的各个不同的产品之间无缝整合，一直是做的比较深、比较细的。值得业内同行学习。

搜狐新闻 + 搜狐微薄

这个产品设计思路与以上腾讯QQ聊天的例子相似。就不做赘述。

大家可以点击浏览一下连接，然后试着用鼠标选中一段文字。进行体验。
http://it.sohu.com/20100706/n273305875.shtml

虽然这种思路很值得学习，但假若在产品设计过程中过度使用这个功能。结果会恰恰相反的。如选中文字后，你给出太多选择，可能会让用户造成抵触情绪。上面举例的2个对用户都只给出一个产品的选择。

这个幻灯片是去年我在公司做的一个团队分享，在之前，每当公司有新产品上线的时候，总缺乏一套较成成熟的产品测试方案。在无意之间拜读了臭鱼的UPA2008讲稿后，细细消化、提炼，才恍然大悟。在这需要感谢臭鱼。

通过分享，很高兴得到公司BOSS的认可，并令将其任务走查法打印成海报帖子公司墙面上，让大家天天面对，将此方法牢记在心。在此我和大家分享这个PPT。

“以用户任务为线索，以可用性准则为依据。是的，这个说话很好记，类似“以事实为依据，以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中，需要操作者依据主观判断制定用户任务，而不是通过用户研究。这虽然有可能造成更大的 误差，但同时节约了时间成本。实际工作中，参与这个产品设计的同学坐在一起讨论一下，通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指：页面表达原则、信息构架原则、视觉表现规范，这三部分。页面表达原则和信息构架原则就是前面提到的，视觉表现规范是专门 针对视觉设计而制定的。这个方法要处理的问题是现有产品，因此，不同于产品原型，更多了视觉表现这一环，在视觉设计过程中出现的问题也应该在走查中一起发现。” — 臭鱼

Plurk

在去年年底，发生MSN 中国“抄袭门”- 聚酷抄袭 Plurk事件。足以证明Plurk是有独特之处。Plurk，中文名称为噗浪，是一个提供基于时间轴的可视化微博客服务的多种语言支持的社交网站,类似于twitter，由一个称为A-team的组织创 建。其最大的特色就是在一条时间轴上显示自己和好友的更新，并能在时间轴上对内容进行直接互动。用户还可以自定义时间轴的背景。这样赋予了时间轴的多样性，也满足了用户的个性需求。目前噗浪在港澳台相当流行，中国大陆地区2009年4月起暂时无法使用，噗浪官方已在协商中。

Google实时搜索

GOOGLE(en)的最新实时搜索结果也采用了与时间轴的融合，这也是最近我非常喜欢的一个设计。时间轴上峰值条显示的高度与密度都取决于实时信息的量。信息量越大，峰值条高度越高、宽度越密，在这个时间轴通过左右移动蓝色框，可以灵活定位时间域。还有年月日的选择。这样的一个时间轴设计是对信息可视化一种很好表现。另外有一个很有意思的细节设计。当用户刚打开实时搜索结果是最右侧栏会显示相关新闻Top Links，Top Links是来自左边这些更新频繁的博客、微博客、论坛里分享的链接地址，那些最多被分享的链接就会出现在Top Links里。而当用户自定义时间轴具体位置后，Top Links会消失。这样设计可能是考虑信息噪音的影响吧。

Google百宝箱-时光隧道

去年5月份，Google发布的搜索百宝箱首批推出的包含的时光隧道等，用户只要输入一个简单关键词，百宝箱中的时光隧道就可以根据用户的意图，按网页内容的时间属性重新提炼或者组织，将所有信息按照时间重新排序并呈现在用户面前。相比百度等其他搜索引擎，Google推出的百宝箱，能根据用户搜索查询的不同出发点，提供不同的搜索结果。这是一种极具革新的搜索改变。目前Google考虑到用户习惯，百宝箱默认是关闭。在以后的不久百宝箱将慢慢的在不影响用户习惯的前提下默认打开。

Google 十周年大事年表

google十周年的大事记页面，通过简简单单的滚动条+时间轴的结合。展现google从注册域名到成为世界级互联网公司的这10年当中的历史性的一些重大时刻。

Digg Labs(365)

通过界面中的时间罗盘。指定某天、月或年。以可视化方式帮助用户轻松捕获热门咨讯。切换年份后，按月份对应的颜色显示10条年热门事件。也可按故事的类别查看。

flickr clock

flickr clock一个以图片和视频结合时间轴的产品。通过时间轴上的定位可以查看那该时段的图片或视频。时间轴的峰值条高度、密度与宽度，都取决于数据量。

最后，让我们思考一下 – 时间维度的意义。

1、有时间轴的融合内容展现更有空间感、历史感。
科学家有过这么一个构想，说所有的维度都是由时间构成，没有时间，就没有空间。因为没有时间，空间本身的存在就没有任何意义，因为时空本身就是不能分割的整体。根据爱因斯坦相对论所说：我们生活中所面对的三维空间加上时间构成所谓四维空间。
2、另一种阅读、检索信息的方式。
引入时间轴的这种信息可视化设计，对用户来说。阅读信息内容无疑又多一种全新的方式。以时间维度来组织内容、组织记忆是人类一直使用的方法。例如我们历史上的“九一八事变”、“512四川大地震”。。。。

面对信息检索。除了tag、社会化分类、情景式分类以外，如果时间要能结合信息可视化设计，应该也是一个非常好的分类和检索方式。

kimi觉得虾米网的导航过于复杂、没有把虾米网的核心功能和价值突现出来。

对于虾米网的顶部导航我是有同感，记得有一次我邀请完同事注册完虾米，他竟然一时半会没找着登录入口。

我想这些都只是交互层面的问题。下面开始进入正题

问题一、导航过于复杂、层数过多，进入个人页面在同一个视觉块有4层导航！不是不能有4层，如果能合理控制在3层，我觉得最好。在一这样的四层关系1也并非就是这个信息结构的最顶级，1和2是应该可以属于同一级。区别只是在于1是个人，2是整站而已。

问题二、个人导航分离、不完整、使用不方便。1和2本该就是一个整体。这样分离是为了突出同步微博客和账户？

我觉得可以这样处理，下图中2的“个人设置”可以改成“我的设置”，“虾米账户”可以改成“我的账户”，然后一起归属到1中的“我的”下面。然后1和2合并，统一放到下图中2的位置，和为一层，这样很合理，并且前面中的4层导航也就可以精简成3层。

另外在个人主页增加账户和微博客绑定的简单显示和管理入口。

一点和导航无关的话：如果在豆瓣听虾米！不用装什么插件，直接能听的话，我想虾米网在流量和用户上都将会大大提高。虾米的BD赶紧出动吧，搞定豆瓣。嘿嘿。

第二步：输出原型图 – 根据前一步的脑图分析结果，产生出初期首页原型图(界面原型图)，然后以此，进行团队沟通和意见收集。确定最终首页原型图。

第三步：输出界面 – 根据原型图，视觉设计和交互设计。

第四步：输出页面 – 根据界面和原型图，进行前端制作，输出最终页面。

现在简单对以上四步做一下说明和记录。

首页结构、元素分析：

输出原型图

经过对原型图的视觉和交互设计。最终新版首页的页面是出来了。交付给kelvin完成最后的程序调用。新版首页终于与2009年4月24日下午上线。

这次首页改版，从脑图到原型图到界面，最终到页面。我想这一次提高的不单单是设计层面。

第一次将mindjet – mindmanager 应用到了页面设计项目中。事实证明MM很好很强大。在梳理页面结构和产品元素元素上给了我很大的帮助。顺便在这里给大家分享一个在线脑图提供商：Mindomo 。记得07年低联想实验室也曾研发过WEB画图，不过现在好像都不能打开了。估计是关闭了。

第一次使用Balsamiq Mockups 画初期原型图。事实证明Balsamiq很适合做初期原型，简单、高效。谢谢小老头分享的key。

第一次使用CSS Sprite技术完成首页页面制作。页面目前完美兼容IE6IE7FirefoxGhrome。

不足之处：页面在IE8下有部分地方不对齐，看来只有IE8 hack来解决了。

老版：

上面就是改版之前的导航，老版不足之处就不一一例举了。
新版导航+图示说明：