当前位置：首页 > 工作总结 > 其他总结> Alibaba国际站首页改版小结交互设计

Alibaba国际站首页改版小结交互设计

时间：2023-07-25 08:25:11 其他总结收藏本文下载本文

Alibaba国际站首页改版小结交互设计（精选19篇）由网友“到灯塔去”投稿提供，以下是小编收集整理的Alibaba国际站首页改版小结交互设计，仅供参考，欢迎大家阅读。

篇1：Alibaba国际站首页改版小结交互设计

阿里巴巴国际站（Alibaba.com）是全球最大、最有影响力的B2B电子商务平台，是阿里巴巴集团的旗舰公司，长期以来，阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变，呈现在用户面前的，依旧是稍显过时的设计风格。随着用户需求和公司业务的压力，对网站的视觉重构就成了迫在眉睫的事情，是时候来一次激动人心变革了！

一. 目前线上版本分析：

改版前Alibaba国际站首页

上图为目前线上版本，较的版本，总体设计风格和信息结构没有太多的变化：

首页没有传递出Alibaba.com的业务方向和核心价值；

随着业务方向发展，不能满足业务需求；

设计风格过时，设计风格不统一。

二. 用户需求分析：

分析用户需求之前，一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些，Alibaba对应这些环节有哪些相关配套服务。

通过用户调研分析，目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低，所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务。

三. 信息推导——框架结构

大牛William Strunk和E. B. White的《The Elements of Style》里写到：”越精简的文字越有力。一句话里不应该有多余的词儿，一段话里不应该有多余的句子。同样，一幅画里不应该有多余的线条，一台机器也不应该有多余的零件。”对首页信息进行重新梳理，去掉长期没人运营的冗余信息；重新调整信息结构，核心位置传递网站核心价值信息；只专注那些用户最需要的功能，用20%的基本功能去满足80%用户的需求。

新首页最终线框图

Alibaba.com主要功能区，全站性买家主功能入口（顶部导航，类目，搜索）；

核心服务，网站服务以及用户教育，对新买家的初步教育以及价值展示，老买家的流程引导和网站服务介绍；

网站运营区域（次banner运营活动，Bargain Buys，GSD产品区域）；

推送热门产品，展示和买家浏览行为相关的产品；网站Site Map以及应用拓展。

四. 视觉推导——风格、色彩

新视觉风格探索主要从以下几个维度考虑

1. 色调，感受，明亮的，柔和的，还是暗沉的；

2. Icon，字体，统一性，传达的感觉，Icon和字体要有连续；

3. 松紧度，留白，行间距，字间距，宽松度；

4. 结构，整齐的，流式的，开放的，还是闭合的，

设计趋势

近几年来，随着Metro风格的简洁与直观、Goole全新的UI体验、Android 4.0系统的平面化，各大主流界面的风格都趋向于简洁，结构清晰，信息突出，减少噪音。

新首页视觉关键字

寻找新色彩

通过视觉关键字寻找新色域

确定配色

蓝色是灵性知性兼具的色彩，在色彩心理学的测试中发现几乎没有人对蓝色反感。明亮的天空蓝，象征希望、理性、理想、独立等。ColourLovers.com公布了一项调查结果，美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种。

五. 设计展示

我们把用户需求转化成信息结构，并在用户群体的生活空间里寻找到网站的颜色趋向，接下来，我们把理论转化为交互和视觉的表现方式，新的国际站设计风格从而顺利诞生了。

Alibaba国际站新首页

一致性和标准化

一致性意味着产品界面的不同模块要有相似的外观、感觉和行为。这次改版，我们对网站核心页面同时进行了优化，为用户提供无缝而舒服的浏览体验。

Alibaba国际站新首页_2

Icon重绘

老版本的Icon一是样式不统一；二是原来的Icon质感太重。在新版设计中，我们对新Icon全部采用扁平化处理，用实色填充新绘制的Icon更加能体现出新版本的简洁、清新。

Icon重绘

重新绘制UI组件

简单和统一是体验的关键。新绘制的UI组件，尽可能的去减低UI元素的强度；新绘制的Button采用CSS3实现圆角和渐变；每个组件有2-3个不同的尺寸，尽最大可能为用户带来统一的体验。

重新绘制UI组件

六. 效果反馈

由于考虑到时间和篇幅问题，这次小结还有很多细节没有分析到，比如首页为什么采用990px网格系统，布局上采用怎样的逻辑路径是合理而有效的等。后续会继续给大家分享。新首页发布后，做了A/B测试，做了针对新首页的用户调研，新的视觉风格也得到了多数用户的肯定。引用一位归国华侨对阿里巴巴国际站改版的评论。新首页改版只是我们跨出优化阿里巴巴国际站体验的第一步，后续还会对整站其他页面继续分期进行优化。

感谢大家长期以来对阿里巴巴国际站UED的关注和支持，有任何建议和意见欢迎在此跟帖回复，您的参与和支持将是阿里巴巴国际站UED进步的动力！

篇2：阿里巴巴UED：Alibaba国际站首页改版小结

阿里巴巴国际站(Alibaba.com) 是全球最大、最有影响力的B2B电子商务平台，是阿里巴巴集团的旗舰公司，长期以来，阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变，呈现在用户面前的，依旧是稍显过时的设计风格。随着用户需求和公司业务的压力，对网站的视觉重构就成了迫在眉睫的事情，是时候来一次激动人心变革了!

一. 目前线上版本分析

上图为目前线上版本，较20的版本，总体设计风格和信息结构没有太多的变化：

1. 首页没有传递出Alibaba.com的业务方向和核心价值;

2. 随着业务方向发展，不能满足业务需求;

3. 设计风格过时，设计风格不统一。

二. 用户需求分析

分析用户需求之前，一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些，Alibaba对应这些环节有哪些相关配套服务。

通过用户调研分析，目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低，所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务，

三. 信息推导——框架结构

William Strunk和E. B. White的《The Elements of Style》里写到：”越精简的文字越有力。一句话里不应该有多余的词儿，一段话里不应该有多余的句子。同样，一幅画里不应该有多余的线条，一台机器也不应该有多余的零件。”

对首页信息进行重新梳理，去掉长期没人运营的冗余信息;重新调整信息结构，核心位置传递网站核心价值信息;只专注那些用户最需要的功能，用20%的基本功能去满足80%用户的需求。

新首页最终线框图

四. 视觉推导——风格、色彩

新视觉风格探索主要从以下几个维度考虑

1. 色调，感受，明亮的，柔和的，还是暗沉的;

2. Icon，字体，统一性，传达的感觉，Icon和字体要有连续;

3. 松紧度，留白，行间距，字间距，宽松度;

4. 结构，整齐的，流式的，开放的，还是闭合的。

设计趋势

近几年来，随着Metro风格的简洁与直观、Google全新的UI体验、Android 4.0系统的平面化，各大主流界面的风格都趋向于简洁，结构清晰，信息突出，减少噪音。

新首页视觉关键字

篇3：alibaba的help首页改版心得

Help项目结束了，写了一份心得，与大家共勉，不知道大家是否有用过或看过之前我们的help频道，下面截了几张改版前后的屏幕截图：

老help首页：

改版后help首页根据用户群的不同区分为新用户首页和老用户首页：

新用户看到的：

老用户看到的：

具体为什么这么改，我这里没有讨论，在这里跟大家分享的更多的是做这个项目的过程中所体会到的，所学到的有关如何做项目的一些体会，希望对大家有帮助，

下面把我的一些个人感受写下来，其目的一是为了对自己工作的一个总结，项目的心得体会只有总结提炼出来才是自己的宝贵财富，才是自己的积累；其二是想把工作中自己遇到的一些问题写出来，可能这些问题不光我会遇到，其他的同学也会遇到相似的问题，写出来跟大家交流分享。

篇4：改版，可以让设计先行交互设计

参与过很多次的改版，但这次的尝试是觉得比较成功的一次。

一个大新的网站，在新的内容、功能架构还没有正式出来之前，

界面设计可以提前模拟出未来。

在4个月前，我们做了一套网站可视化系统配色提案（节选）：

前言

汽车生活是丰富多彩的，几乎包含了世界中的所有颜色，

红绿灯是汽车生活的典型元素，蓝色也在交通指示牌中被经常使用。

颜色与心理暗示

不同的颜色搭配会有不同的心理暗示，

这一些暗示的产生是因为生活中的景物对心理认知的影响：

颜色与产品对应、区分

我们尝试将颜色、以及心理感受和我们不同的产品属性对应起来，

以让网友更容易的理解自己的在网站中的位置，

将颜色应用到不同产品中

红、黄、绿，3中颜色在整个页面中起到点缀作用，更多的背景色、主色调是蓝色，

我们尝试A、B、C，3种不同的蓝色与红黄蓝的搭配。

前期界面模拟原型方案：

让设计先行，很好的控制了后期的界面设计工作的走向。

每个频道根据自己的属性进行设计，很少出现领导，产品经理，部门内部关于设计的多余讨论。

沟通成本降到最低。

严格的控制下，最后的结果还是让人满意的：易车网新版.

本文来自：hi.baidu.com/ui88/blog/item/d07ab402a8158b054afb512b.html

篇5：三言两语：美国雅虎首页改版网页设计

昨天美国雅虎正式宣布网站首页的新版，这也算互联网一件大事，尤其是对设计的朋友们，而且现在的美国雅虎的情况也不是很好的情况下有大刀阔斧的进行改版，也算是要有一些魄力了。其实这次新版早在几个月前就已经在某位同行的博客中透露出来，不过当时没有过多注意。昨天宣布正式改版以后，上去逛了一圈，才仔细的研究了一下。总体的评价就是这次的改版就相当于Vista到Win7，也就是说内核不变，但是在交互和体验上下功夫。

1.布局

新版的布局和旧版的布局，几乎没有任何区别，顶部搜索框，左侧导航，中间重要新闻资讯。主要是右侧，新版去掉了很鸡肋的个人信息区块，把登录信息放到了顶部右侧一条。把旧版放到右侧最下面的热门搜索关键字替换，放到了右侧上面变成第一区块。

2.搜索

雅虎是一个门户，雅虎是一个搜索引擎。这次新版中，进一步把顶部的搜索框进行了优化。

2.1.提高位置：新版中的一个核心就是更加突出搜索功能的重要性，那么出现的位置就是第一重要的，所以雅虎干脆把一直品牌核心的logo放在了右侧，把搜索功能提到了整个页面的最有优先的位置，这样用户一打开页面一个大大的搜索框经映入眼帘。

2.2.加大面积：要想引起人的注意，一个更直接的处理方式就是让物体看起来更大。所以雅虎为了让用户对搜索框更加注意，就再一次加大了搜索框的大小。

2.3.视觉效果：看得出雅虎的设计师为了这个搜索框可谓是煞费苦心，而新版的设计理念我理解为是让搜索框本身更突出，而不是搜索区域。我们可以对比一下旧版和日本、韩国版的搜索功能设计。这些设计都是为了让搜索功能更加突出，所以加大了整个搜索功能区块的视觉效果。也就是以整体区块效果突出，带动整个功能突出。而新版去掉了浓重的背景色，更加突出了搜索框的视觉效果。也就是用局部关键控件的效果突出，带动整个功能的突出。

2.4.切换：在这个搜索功能区域除了搜索按钮以外，最常用的就要是搜索类型切换了。而切换功能往往是一般设计中不太被重视的。从旧版、日版、韩版都可以看出。切换类型只是用了很简单的文字链接而已。而新的设计中为了让切换点击起来更有手感，不仅加大了文字的尺寸，而且采用了tab的方式与搜索框融为一体。

3.导航

从上一次改版以后，雅虎把原来顶部的导航放到了右侧。而我觉得这一次改版最大的亮点就是左侧导航。我们都知道雅虎是一个门户网站，但是雅虎还是世界上最早的网络目录。如果你要问什么是网络目录？看看hao123.com就知道了。

网络目录（web directory）是网页链接的列表。

门户网站（web protal）是人们上网的起点网站，

电脑资料

所以为了凸显门户网站的搜索特性，所以上面说道搜索部分采用了新的设计。而为了凸显门户网站目录的特性，雅虎这次改版也从新设计了左侧导航。左侧导航不仅可以自定义雅虎本身提供的服务，还可以自定义当下其它站点的服务，譬如ebay，facebook，mysapce等。而这次雅虎最关键的一点不仅是解决定制的问题，而且还试图解决信息问题。就是说不仅希望用户可以自定义网站目录，而且还可以在上面处理这些站点的信息。

我们发现其实这个概念并不新鲜，在美国有好多站点都提供类似的服务，最有代表性的就是Google的IG。IG通过用户自定义一些站点Widget放到首页上，形成自己的个性首页。不过有意思的是所以提供类似服务的网站几乎都是采用widget的方式。也就是说同一种理念和同一样的设计模式。

而雅虎这次采用了全新的交互设计模式来处理这个问题，把目录和信息浏览有基的结合一起。当用户有鼠标悬浮在左侧导航上时，右侧出现这个站点的最新消息和最常用的操作。那这个和上面的widget有什么不同呢？

虽然Widget看上去很好，但是真的要用起来确实不那么爽，不爽的就原因就是虽然我可以琳琅满目的把整个页面布置的很满。但是这个页面最关键的作用就是快速处理最新信息，并且快速操作。也就是监控信息，操作需要处理的信息。而Widget全部扔在一个页面上，如果数量比较多，根本很难进行监控，既然很难监控也无从谈起对信息的操作了。再有一个用户的页面空间是有限的，所以每一个widget的大小都是固定的，而且相对来说都是比较小，这样就更加不容易进行信息的监控和处理了。

那我们看看雅虎的处理方式的特点：拿雅虎信箱为例，当我打开雅虎首页，浏览左侧导航，就可以迅速查看雅虎标签是否有数字提示，如果有就证明是有新的邮件了，如果没有就证明没有新的邮件。然后把鼠标悬浮到标签上右侧上，可以用效大的区域显示最新的邮件标题，然后进行处理。

可见雅虎新的左侧导航，不仅可以让用户自定义收藏常用的网络服务，还可以迅速的筛选那些服务需要有信息处理，并且提供信息处理快捷的操作方式。也就是“快交互”+“信息片段”结合的处理方式。这种设计理念的最经典案例就是Twitter和新版的Facebook登录后首页。

4、视觉风格

新版的视觉风格继承了上一版低调华丽的特质，同时又处理的更加清新。最明显的一个处理方式就是去掉了标题栏的渐变效果，采用最朴实的文字无背景。并且为了更加突出视觉效果，加大了这些标题文字的字号。去掉了左侧导航整体纹理渐变方式，采用一个目录标签一个小按钮的设计。不仅单独一个目录标签做为小按钮很突出，而且整体叠加以后效果也很协调舒服。

总体来说这次美国雅虎改版是否成功，这个还要看正式运行以后的数据，但是我认为总体效果要比上一个版本要好很多。并且对不断努力创新的设计师表示钦佩。

本文来自：blog.d8in.com/posts/515.html

篇6：网站改版与老用户习惯交互设计

很多网站在改版的时候，非常担心用户习惯，

有的担心是合理的，有的担心是多余的。担心之前，先搞清两个问题：

首先，你有没有老用户？有多少老用户？如果网站本身就是提供给walk-up-and-use（走来即用）类型的用户的，比如某某博物馆门口的参观指导系统，它完全就是面向新用户的，根本就没有老用户。另外，有的网站本身很烂（可能是产品烂也可能是易用性烂），来看一眼的人就不会再回来，那么随便怎么改都不会有老用户习惯的问题。

其次，用户使用该网站的频繁程度，如果是一个频发事件，每天、每周、每月都会上去看那么一两次，改版确实要考虑老用户的习惯问题，

比如Gmail、豆瓣、MSN、新浪等。

但也有不少网站，尤其是电子商务类网站，用户并不是每月都会上来的，而是到了有需求的时候才上来，比如当当，比如携程，比如PPG。这种网站，用户甚至记不住你的主色调，更不用说你的预订流程有哪些步骤了（能记住你的域名就不错了）。

这时，也无须一厢情愿地在那里担心老用户的习惯问题，有多余的精力不如投入到扩展用户入口（比如SEO、比如交换链接、比如网站联盟、比如开放API……）上去。

来自：hi.baidu.com/dengrong/blog/item/aa505ab5333ca8cb37d3ca2c.html

篇7：alibaba help频道改版项目中的一点心得网页设计

Help项目结束了，写了一份心得，与大家共勉，不知道大家是否有用过或看过之前我们的help频道，下面截了几张改版前后的屏幕截图：

老help首页：

改版后help首页根据用户群的不同区分为新用户首页和老用户首页：

新用户看到的：

老用户看到的：

具体为什么这么改，我这里没有讨论，在这里跟大家分享的更多的是做这个项目的过程中所体会到的，所学到的有关如何做项目的一些体会，希望对大家有帮助。下面把我的一些个人感受写下来，其目的一是为了对自己工作的一个总结，项目的心得体会只有总结提炼出来才是自己的宝贵财富，才是自己的积累；其二是想把工作中自己遇到的一些问题写出来，可能这些问题不光我会遇到，其他的同学也会遇到相似的问题，写出来跟大家交流分享。

一、接需求

现在我们在接到一个需求后，先不要急于了解需求具体要做什么要改什么，要先了解了解需求前提，这个需求提出的原因，为什么会有这个需求，为了解决什么样的问题，不解决会有什么后果，解决了会带来什么好处，需要多少代价解决，把需求要解决的问题拿来作为以后项目实施的检验物，在具体做的时候多想一想这样做是否真的能解决问题，项目发布后也可以拿来做结果的验证，通过项目是否真的解决了这个问题。

然后去仔细了解项目/需求具体要做些啥，需求所涉及到的改动范围，涉及到的功能点，针对每一个改动点做细化，深入了解其骨髓。例如：在help改版需求里有一个要增加help搜索功能的改动点，表面上看起来很简单，只要在search框上添加一个help下拉菜单就可以了，实际实现这个改动并不简单，首先我们的help detail数据跟news数据一样，都是通过news后台输入的，如果用户在help里用search,通过什么样的方式过滤掉news 而只调help的数据，如果用户在community里用search来搜news,如果他用的词是news和help交叉的词汇搜索，会把news和help一并搜出来，这时候是否要过滤掉help，如果过滤是否技术可行，投入成本如何，如果不过滤那是否要在前台展示层面做区分。这些问题只有做了深入了解并加以解决，需求才能实施顺利。

二、出方案

在仔细了解过需求后，下面就是出方案了，在具体做方案前，先做一个前期的research,这个可长可短，根据项目实际情况而定。但还是要有的，有必要花一些时间去看一些同类网站同类产品做为参考，可以扩展自己的思路。也能为自己穷举方案提供借鉴。

具体出方案要做到全面，之前做需求出方案往往只出个首页，里面页面认为简单就基本省略了，其实线框方案出全面，有两个好处。一，对自己来讲，有利于将自己脑子里想的东西输理一遍形成于纸上，从而让自己的观察角度放在一个频道整体去看，而不是仅仅在做一个首页的改版；其二，对于线框图方案确认后做精确化时间预估时，为前端估资源提供一个明确的依据，在help项目里这点上其实是做的不好的，help基本上是只出了2种状态的 help首页，里面的页面并没有出最终版的线框图，导致后来新前端进来，对要做的工作是不清楚的，也就没有办法做出资源评估，

当然最后的解决办法是只让新前端评估和制作首页的部分，其他的页面是只存在在自己脑子里的东西，就只有自己清楚了，这部分工作是只有自己去搞定了。

三、制定可执行时间计划表

方案确认后，根据方案将需求进行拆分，分解出项目/需求各节点/里程碑，拆分的越精细项目就越可控。需要考虑的是每个节点所需的参与方及具体参与时间，在这个节点上需要协调的因素，然后就到项目中的执行了。

四、项目中的执行

在这一阶段就是去执行你的时间计划表了。逐一对项目各节点进行把控。就像安装windows的进度表，整体进度拆分成若干段逐段完成，控制住了这些节点/里程碑，也就控制了整个项目。要是真的在这中间有什么问题发生，也能清晰的看见是发生在项目的哪个环节，从而方便我们后续分析跟进，找出问题原因并解决。

五、发布后的总结，后期数据检验

项目发布后，看看项目进度表，针对项目各环节里出现的问题，想一想下次如何改进，写项目心得，将体会和感受提炼出来，这样才是自己的。

后期通过数据采集，去检验项目之前制定的目标是否达到了，要解决的问题是否真的解决了，如果没有，需要进一步去分析原因，总结经验。

附注团队里其他同学给的建议的一些节选：

From Heidi:

这些心得，若是我们在书上见到或者听别人说，也许都会觉得稀松平常，经常念叨着，而只有自己亲身经历得到的，才能够引发共鸣，记忆深刻。

Jacky这篇心得，看似也是很简单，但是在日常项目里，也许我们还会不自觉走向反面：

1. 一接到需求不多问几个为什么就迫不及待去做方案

2. 想得不够详细，方案只出了一层皮，日后修修补补

3. 方案缺乏说服力——因为调研不够，在评审的时候，别人问你有没有看过竞争对手的网站，才慌不迭去“研究”

4. ……

最简单的往往是最容易被忽视的，也往往是最重要的，就像所有知识和技能的“基础”一样。

From rita:

喜欢新版本help，附上的心得体会也很方法论，讲求方法可以帮助我们少走很多弯路，顶“先了解需求前提”，往往很多时候被忽略，一开始就钻进细节里，先把握大局可以让方向更准确。

From yama:

“人类总得不断地总结经验，有所发现，有所发明，有所创造，有所前进。 ”

通过总结可以把零散的、肤浅的感性认识上升为系统、深刻的理性认识，从而得出科学的结论，

以便发扬成绩，克服缺点，吸取经验教训，使今后的工作少走弯路，多出成果。

本文来自：www.aliued.com//07/07/206/

篇8：再说“双向”好友。(谈豆瓣好友改版)交互设计

豆瓣在“友邻”里增加了“我的朋友”功能，体验后感受到如下问题：

1、在“广播”和“豆邮”之后，豆瓣首页的右侧又多了一个“类信件”的模块 ── “需要你处理的请求”，使我的“信件来源”过于分散。

2、“别人‘关注’了我”，会用豆邮通知我，豆邮是在主导航上的。可别人“加我为好友”这个“更重要点的事”却只是在首页安排一句话的通知。

3、原本一个“友邻”的概念拆分成了“好友”和“关注”，我重新理解的成本至少是3：“友邻被拆分了”，“什么是关注”，“什么是朋友，如何成为朋友”。

4、“朋友”和“关注”逻辑上看来是一个不错的规划，但这个“不错”是对新用户来说，对老用户并不一定合适。

这个问题类似于：有些人盖楼的时候先盖一两层，以后更有钱了再在上面加盖几层，加盖的过程可能会影响到原来的楼房，评估“加盖”方案是否合理的标准是：“对原有两层楼的影响有多大，影响的时间有多长”。

5、很多人和我已经是“互为友邻”的人了，现在这么一改我们还得再经过一次双方确认才能成为“朋友”，后果就是几乎所有的老用户都得重新倒腾一遍自己的友邻。就像正在饭馆吃饭的时候，老板说“我们觉得这个单间不好，你们现在到另外一个房间去吃”，于是所有人都屁颠屁颠端着碗筷和盘子换个房间吃饭…

6、是不是让别人看到我的某些信息”，确实应该由发出去信息的人说了算（不只是“广播隐私设置”，也可以是“能否看我的好友列表”等）。但，“是不是要收到某些信息”，应该由收信息的人说了算。靠让发信息的人把友邻分级然后设置要什么人看到什么信息，只解决了“隐私”问题，并没有解决“干扰”的问题。

其实最大的问题根源应该来自于豆瓣在强调的“双向好友”。

1、我个人认为豆瓣的好友添加过程和绝大多数好友添加过程一样：根本不需要“双向确认”。

虽然豆瓣很需要“双向好友关系”来拉动社区的体系，但现在已经有了一种“关注”的弱关系，某种程度上使得“双向”变成了一种相互麻烦确认的一种形式。

有些用户并没有区分“朋友”和“订阅”的需求，而且大部分人在决定“什么人该放在什么类别里”的时候界限很难划清（信息分类向来是设计中最难的问题，更何况是按照“别人”的规划来分类，而且还只有两个类。），非得生硬的把“朋友”和“关注”区分开，不过只是设计者的一厢情愿。

2、之前写过关于好友的看法，引发了麦田和魏武挥的讨论，我又重点说过“双向”还是“单向”的观点。“双向”本来就是一个不符合正常思维逻辑的事情。

3、我一直认为：“双向”只是一个“统计结果”，而不是一个过程，更不一定是“双方”都认为的结论（我认为柴静是我的朋友。她就是。就算她认为不是，我照样认为是）。

4、（不要说facebook的好友就是“双向”。facebook不一定就是对。而且facebook对于隐私的要求特别高，豆瓣并没有那么高。）

也许豆瓣认为“友邻中会有不少人‘不一定是认识的’，可能只是为了关注他/她的评论或是推荐，但也需要加他为‘友邻’”，所以在这次改进中特意比较强调“朋友”和“关注”的不同关系。我觉得这实在没有必要。

1、只需要给用户提供一种功能让他们可以方便的将“认识的好友”和“只需要关注”的人分开即可，没有必要非得问用户“他是你的朋友还是只需要关注的？”（现在的设计确实有些“非得问用户”的感觉。）

2、对于产品的设计者来说“朋友”和“关注”的概念区分清楚，对于概念区分后的好处也很明白。但对于用户来说并不一定“有”这个概念和意识，一般只有尝试过“痛苦”（很多好友导致杂乱）的人才有。而尝试过痛苦的人根本不需要我们如此强调，他一样会去用。

比如，以前我参与的某个社区的好友有默认的几个分组（朋友、同事、家人、默认），后来数据显示用户一开始并不按照我们想像的去给自己的好友分组，甚至直接把我们给他的组删除了。

同样，flickr默认把好友分好了组，但实际上用他那个组的人并不多一样（这个没有数据证明，只是观察判断所得）。

3、很多时候加一个人是因为我“喜欢他”。比如，我在豆瓣上发现“柴静”，于是我会去点那个我最希望的──“加为朋友”，而柴静并不认识我，收到“我加她为朋友的请求”便去看了我的资料，对我有点兴趣想“关注”我，可按照豆瓣现在的设计逻辑她会去点“忽略(加为朋友的请求)”。。

矛盾来了：对我来说，“就算柴静不加我为“朋友”，那我“关注”也行，可以一般情况下我点了“加为朋友”就会很欣喜而忽略去点“关注”，(因为这个时候是很有信心会被她‘加为朋友’的)”；对于柴静来说，她忽略了我但想关注我，她必须再专门去我的页面点“关注”。

可见，把“加为朋友”和“关注此人”放在一起的后果可能是：一部分的“关注”会变得麻烦或者不去使用，一定程度上降低了“整体数量”。（起码“加为朋友的请求”处理那里，可以加一个“只关注此人”的按钮）

4、“关注的人”和“朋友”是两套东西，但老用户是把原来的友邻改成朋友，如果他们后悔了需要再改成只是关注，目前没有好的解决办法，只能删除朋友，然后再去关注一下。

如果我设计这个功能改进的话：

1、保持原有“我的友邻”不变，在里面增加一个“我的朋友”。而且这个增加只是在“我的友邻”列表的上面加一个“分组”，不会做到主导航上去，等于“增加了一个友邻的高级分组”。

要给用户的感觉是1+1：你原来有一间房子，我现在在旁边又给你盖了一间，你可以选择把部分人放进去然后制定不同的“政策”。

现在豆瓣的做法感觉是1/2：你有一间房子，我把他拆分成了两小间，默认把你原来房子里面的人都放进去了其中比价“低级”的那一间了。（用户会觉得“你侵犯了我”，把我的房子给拆分了）

2、好友的添加过程不考虑“双向”，但在好友列表里用一种不是十分明显的办法告诉用户“你这个好友是不是也加你为好友了”。系统在“推荐机制”算法时提高“互为友邻”的权重。

3、针对于“我的朋友”和“我的友邻”，用户可以自由设置“是否显示他们的各种广播”和“是否让他们看到我的各种信息”。简单说就是：“我想不想听你说话”和“我让不让你听到我说的话”，这样即解决了隐私问题，又解决了信息干扰的问题。现在豆瓣只解决了隐私问题。

4、用户添加好友的时候依然只有一个按钮“加为友邻”，然后弹出选择“分组”。添加后的通知依然保持不变。

豆瓣在几千人的时候其实是在自己给自己设计产品，需要什么就加什么，(设计)架构上似乎并没有什么大的规划。但现在是在给百万人设计产品，设计人员甚至已经不能称为典型用户了，必须克服两个最大的困难：

1、依然“为自己设计”，强行把自己的逻辑和习惯套给所有用户，不考虑是否合适也不经过“简化和编译”；

2、不是在现有架构的基础上进行优化然后做扩展和调整，而是重新开始规划产品架构（往往重新做一个比改一个容易，但重新做了以后可能也要面临着去改…），过多的打翻老用户的已有习惯。

每一层新楼都得建在现有的“楼顶”上。基数越大，“改版”的风险成本就越大，时间越长系统越繁杂，往往也越“难用”。

豆瓣最近的升级和改动很多，每一次改动都会带来很多老用户的不适应，也会带来新的设计问题。但愿豆瓣能够更好的平衡系统设计、新用户发展、老用户习惯等各方面问题。

同时建议豆瓣正式把“实验版”弄出来，让每一个新功能经过专门的实验版让更多用户开放性的参与一下，有助于在正式上线的时候减少问题，有助于优化设计，更有助于减少部分老“活跃用户”的意见。

网友评论(26)

DeadFire- 08/02/02 5:45 PM

真难为白鸦了，我每天没啥事情忙，可是仍然没有时间去看豆瓣，更别说要对这个网站做这么细致的研究和深入分析了。

白鸦看样子应该很忙，可是仍然写了这篇文章，真是厉害厉害。得给大家透露透露时间管理的方法，

还是说写这些其实就是每天要做的工作？或者这个是专门应豆瓣网的请专门写的？

蓝皮- 08/02/02 5:51 PM

豆瓣这个调整用户感受相当不好，最重要是增加了用户成本。

我觉得豆瓣在意图复制现实中的朋友等级关系，可能接下来要有更大动作了。

打个比方吧，我和你现在互为友邻，但是要加你为朋友，我得揣测你对我们关系的看法。如果我加你，而你不加我，岂不是心理感受很不好。所以，我干脆还是不加好了。

这篇文章转到“我是用户”小组了：www.douban.com/group/topic/2584017/

白鸦- 08/02/02 5:52 PM

@DeadFire 我每天有16-18个小时在上网，阅读时间4，做“用户”的时间8，具体工作时间4。

不是豆瓣邀请的，我基本上不写“命题作文”，自己有感受了才会去写自己真实的感受。没有就不写。

十三香- 08/02/02 6:15 PM

我要是豆瓣的UE就好了，有这样的高手关注

有时间请光临www.poco.cn多提宝贵意见哦哦！

langmuir- 08/02/02 6:47 PM

惊叹于白鸦旺盛的精力。

豆瓣在UE方面很下工夫。

挥雨- 08/02/02 7:09 PM

好文章。分析得很好，我也不喜欢这次的改版，让人不知道朋友的定义是什么。

尤其最后还给出了可借鉴的建议：“建议豆瓣正式把“实验版”弄出来，让每一个新功能经过专门的实验版让更多用户开放性的参与一下，有助于在正式上线的时候减少问题有有助于优化设计，更有助于减少部分老“活跃用户”的意见”

jesea- 08/02/02 7:51 PM

facebook的好友设计是一个典范，以我个人经历，不管是在技术/功能逻辑/实现逻辑上，都做的非常好,minifeed和notify按不同功能分开。分别告诉用户完成了什么，其它还有什么需要去完成，其中notify中可以是好友邀请（类似于谁成为了你的fans）。

而目前douban在原来关注的基础上再加入好友功能这一设定明显是典型的模仿facebook的作法，并不是模仿就不可取，而是douban的系统在最初并不是这么设计的，现在在原来关注功能的基础上再加入双向好友这一功能，显得非常的生硬，个人感觉与其这样改，还不如改进原来的关注功能,做个双向关注如何？这样也不会导致已经习惯原来系统功能的用户在出现新的好友功能后不知何去何从!~

一句话，douban的这一功能设计是一大败笔！~

jesea- 08/02/02 8:09 PM

PS1:对于任何增加用户操作量的功能都要三思而后行,包括目前douban这次好友改版，以及白鸦提出的”保持原有’我的友邻’不变，在里面增加一个’我的朋友’”.

PS3:白鸦博客评论提交很慢,所以有时提交会以为没响应，点两次“确定发表”…建议提交时可以disable button

Ami- 08/02/03 10:09 AM

作为一个每天都去豆瓣的用户，我觉得豆瓣无疑是在牺牲我们的感受为迎合更多的新用户。

但同时我也怀疑，这样子的豆瓣新用户也能上手么？

草根网- 08/02/03 10:13 AM

好文，收藏至20ju.com

白鸦- 08/02/03 10:47 AM

Keso在他的豆瓣广播里这样说：好像点击“加为朋友”按钮的比例，要远远多于点击“关注此人”的比例。在我这里，大概是5:1的比例。是不是加为朋友这种说法显得更亲近，更磊落，而关注此人好像有点偷偷摸摸？

我回复：@keso 我觉得原因是：关注你的人一般都是希望成为你好友的人，所以他们会去点“加为朋友”。虽然他们也能同时再点关注你，但往往更多人在这个时候做的是“单选” 而不是“全选”。 … 如果假设豆瓣的用户20%是“领袖”，80%是“平民”的话，“关注”实际上更多是在为“领袖”服务的，领袖才需要将友邻分成三六九等，而平民一般不需要（他们需要“分组”，等不是“等级”）。

则鸣- 08/02/03 11:23 AM

恩，今天上豆瓣发现多了个“加为朋友”的功能按钮，觉得挺陌生，原来是改动啊~

zheng- 08/02/03 11:35 AM

关键在于，豆瓣是object导向的SNS，不是类似Facebook导向的，所以双向的确认很滑稽，当然了，除非豆瓣在为未来的转型准备。

Flickr其实的方案其实对于豆瓣很好的，但是有个问题，flickr中有些需要给朋友、有些需要给家人，而在豆瓣上，是不需要的。。。

viviangel- 08/02/03 11:45 AM

会拉远网络ID之间的距离。

nickyhu- 08/02/03 12:42 PM

无疑，这是为以后的更多功能铺路。不完成这个，后面功能没法推啊。

所以用户体验其次，产品形态更加重要。

bbbush- 08/02/03 1:38 PM

好友和关注不是一回事，正常人会关注好友关注的东西，却不会关注关注对象的好友或者关注对象。我觉得还可以说是友谊和隐私的区分：好友就是要让渡一部分隐私。在 LiveJournal 上可以把好友分类，douban 是对 LJ 的延伸。

» links for -02-04 卡尔胃弱: 卡尔胃弱又懦弱- 08/02/04 10:26 AM

[…] 白鸦 » 再说“双向”好友。(谈豆瓣好友改版) (tags: 产品豆瓣) […]

lecause- 08/02/04 6:35 PM

白鸦老师提出的解决方法其实就是flickr嘛……

我认为一个社区建立之初的好友关系不能做太大的改版，否则真的很麻烦。twitter的friends->followings就是一个例子，虽然底层没动，但是光改一个名字也够人受的

leee- 08/02/08 7:00 PM

白鸭老大能不能联系上帆哥，让他帮我域名abada.cn续费，款汇到农行了

我的豆瓣好友解决方案 - 九翼青鸟 - 九翼青鸟的二进制世界——专注于电子商务与用户体验研究- 08/02/12 10:37 AM

[…] 然后白鸦又写下了洋洋洒洒的千字长文《再说双向好友》。 […]

九翼青鸟- 08/02/12 10:39 AM

洋洋洒洒千字长文。个人却觉得没这么复杂。

请见《我的豆瓣好友解决方案》

d9wing.com/89

欢迎来批！

九翼青鸟- 08/02/12 10:40 AM

20楼的评论为误发，麻烦连同本条评论一同删除。

不好意思。

醉中仙- 08/02/13 2:15 PM

好友的事情，各W站理不一致，^大了。

最好好事者，搞一什麽强制实牧耍MD。

redfall- 08/02/15 3:19 PM

好久没去豆瓣了，刚才去转了圈发现改了很多，添加了很多功能，感觉以前好用些，

现在是尝试的去点击，惴惴不安的体验过程很不爽！

引用几句话给豆瓣：

“用户的注意力是有限的资源。

添加的任何一项功能都将有可能是用户找到另外一项功能的绊脚石。

如果必须添加一些功能，试图替换掉另外一项类似的功能。

经常需要为了一些功能的易用性牺牲另外一些功能。”

图书城- 08/02/29 9:15 AM

很多人对豆瓣最近的改版向sns的转换有自己的看法，其实我觉得这是豆瓣发展路上的必经之路，豆瓣由一个纯书评网站发展为现在国内首屈一指的社区网站，而且拿到了数百万的投资，如果仅靠卖书的那点提成，在收入上很难形成快速的增长。还有，我向你推荐一个新的书评网站：图书城（www.TuShuCheng.com）。图书城是专业的图书搜索和比价网站，还结合了各大网站的书评内容。有些类似豆瓣，但在图书方面更加专业化，页面更快速简洁，希望大家去看看，也可以注册一下试着建立你的读书档案：）

大森林的blog » Blog Archive » 设计“好友“- 08/03/01 11:23 AM

[…] 白鸦借豆瓣改版又写了一篇blog：《再说“双向”好友。(谈豆瓣好友改版)》。借豆瓣的好友问题再一次的强调双向好友不符合人们的现实生活规律。 […]

来自：uicom.net/blog/?p=713

篇9：广告交互设计:网站首页大屏幕广告交互设...

文章描述：首页大屏广告交互设计探讨.

一、使用场景

用于大型活动推广，频率控制在一季度或一年度一次为宜，

二、设计目标

1、效果好！尽量让每位用户都注意到这个活动。

2、干扰小！把对活动不感兴趣的用户的干扰降到最小。

三、设计要点

1、是否要遮盖网站内容？

不要遮盖。从我们监测的历次大屏广告点击数据来看，广告的点击在首页总点击的占比分布在2% – 20%之间。这意味着：有至少80%以上的用户对活动并不感兴趣，他们中大部分是带着明确目的来网站使用特定产品的。如果广告内容遮盖了网站内容，将严重干扰这部分用户的正常使用。他们所能做的是无奈地等待广告收起或立即关闭（如果提供了关闭按钮）。不排除有少量用户会因为你的强制遮挡而被迫点击广告，但我们绝不应该为了这几个少量的转化而得罪大部分用户。

2、如何加载？

比较好的一个方式是在页头上方铺开，这样不会破坏页面整体性，可以大胆使用大尺寸的广告，只要不把页头（LOGO和导航）挤出首屏，都是可接受的，用户总是能快速扫描到网站的页头，

广告区域在前端样式中声明高度，特别要强调的是不要使用高度伸缩动画展开方式，使得广告下方的网页正文部分能稳定在窗口的固定位置上，避免被广告的加载过程干扰而变换在窗口的位置让用户无法在广告加载完毕之前精确点击正文部分的链接。总之，大一点没关系，但不要乱晃。

3、是否要提供关闭功能？

必须的。还要在cookie中记录下来，用户再次来到这个页面时不要再次出现。

4、是否需要在一段时间后自动关闭？

不需要。因为用户阅读广告所需时间的个体差异很大，我们不能为用户统一设置这个时间的长度。下图是最近一次我们检测用户主动关闭广告的时间，验证了我们的设想。图中x轴表示时间，y轴表示经过对应时间后关闭广告的用户数。

如果某些特殊情况下需要自动关闭，可以考虑在广告上显示倒计时，让用户预知还有几秒会自动关闭广告。

5、被关闭后，是否要提供重新展开功能？

常规交互原则：操作可撤销，状态可恢复。提供重新展开功能可以给部分用户提供在完成主任务后再点回来看看的机会。关闭和重新展开都可以配合动画，以增强页面变动的平滑度。

四、线框图，供参考

篇10：工具型网站首页的设计思考交互设计

什么是工具型网站

我们先从上了解三组概念：

工具：是指能够方便人们完成工作的器具，

application：用来帮助用户完成某个单独的或是一组相关的工作的计算机软件。

web application：指通过使用Web和Web浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用Web浏览器。

由此可见，应用就是计算机领域的工具，工具型网站可定义为承载了一个或多个网页应用的网站。它专注于让用户完成一系列的任务，如注册、支付等。

首页的用户需求

首页的用户大体说来可分为三类：不了解的新用户、有兴趣的新用户、老用户。

对于新用户而言，他们势必会问到这些问题：

我在这能做些什么？

这个网站能提供哪些对我很重要的东西？

对于已经有兴趣的用户也会有些其他的疑问：

我应该怎么开始？

我是否必须注册？如果是，应该怎样注册？

总得来说，首页应该解答新用户的疑惑并且帮助他们找到功能的入口；而对于老用户，则需要更明显、快捷的登录入口。

首页的目标

《designing for the social web》一书将用户的使用分为几个步骤：不了解——感兴趣——第一次使用——常规使用——有情感。而首页对于前面三个步骤至关重要！

这样看来，首页有两个目标：

1. 让不了解的用户了解网站并产生兴趣，最终促成用户使用。

2. 让有兴趣的用户尽快开始使用。

首页的设计

在实际工作中我们会碰到几种不同类型的工具型网站，针对其网站内容的不同，其首页的表现形式也大不一样。

集中应用型

这类网站本质上是一组或者多组web app，功能多且相对简单，不会产生大量用户数据。

1. 核心结构

将使用最多的功能展示在首页对于用户来说就是最快的入口。用户通过logo、banner、网站声明等了解网站性质，然后就是找到自己要的功能。

2. 注册/登录模块

因为用户不想分散精力去记起用户名和密码，或者是他们太专注在自己要做的事情上，原则上只在必要时才让用户登录。但如果大部分功能都需要先登录，那么在首页直接展示登录表单是有必要的。

3. 案例

58同城

有两级目录：城市目录、功能目录。用户通过这两级目录很容易找到想要的功能。但使用这些功能大都不用注册，所以首页并没有明显的登录模块。

腾讯充值中心

首页的核心模块依旧在目录结构，用户由此了解网站主要业务以及如何开始自己的任务。

去除一些运营性需求，可以得到一个更加纯粹的充值网站：

数据管理型

这类网站本质上一个大的web app，

功能流程复杂，会产生大量数据，往往承载了强大的数据管理功能。

核心框架

为了方便用户掌控及管理自己创建的内容，首页的策略一般会先引导用户创建账户或下载客户端（下载客户端的下一步也是注册），然后再开始任务。为了说服用户开始任务，它一般会包括以下几个模块：

价值声明：说明网站提供的功能及意义，快速打消访问者疑虑。

投入产出：告诉用户能得到什么，使访问者对产品的使用有预期，并建立信心。

视频介绍：让用户快速全面地了解网站。

权威推荐/典型用户：让用户产生同理心，增强对产品的信赖。

行动号召：当访问者产生兴趣时，适时地让他们开始使用。

这些模块其实分三个等级层层深入地说服用户使用产品：

尽管列出了这些模块，但实际情况中并不都必要，最终得看用户对产品的信心。Evernote在等级一就能说服用户，dropbox的页面则只有一个视频介绍。

1. 注册/登录模块

这类网站注册和登录模块都非常重要，一方面已注册用户数一般远远大于新用户数，另一方面首页很大一部分程度是为了注册的，老用户有固定的入口即可。但在首页我们需要强调哪一个？

这个问题更多地取决于产品的商业目标。受产品策略的影响，同样是拥有大量已注册用户且用户登录频繁的产品，gmail的首页强调登录，而facebook的首页则强调注册。我们也看到115网盘和华为网盘的首页明显就不同：

但无论如何，登录模块最好不要跳转页面，否则会增加老用户的操作成本。

2. 案例

mailchimp

首页包含价值声明、投入产出、视频介绍、典型用户、行动号召等模块，极力说服用户开始使用产品。

独立操作型

这类网站往往是一个几步就能完成任务的小型web app。

1. 核心框架

往往只有几个简单的控件和操作说明就能完成任务。由于使用成本不高，用户也会很乐于尝试使用。

2. 注册/登录

这类网站一般不需要注册或是简单的注册，也可以将注册需要的内容贯穿在任务操作中从而摒弃注册模块。

3. 案例

Minus

用户进入页面后能很快理解这是个分享类网站，只要将图片拖入到网页中并填写资料即可开始使用。

Senduit

简单的步骤指引告诉用户网站的功能和操作方式，使用时无需注册。

结语

网站的首页需要回答用户一些非常重要的问题，才能让新用户愿意使用我们的产品。

本文主要探讨了工具类网站首页的设计目标以及三种设计框架。而在实际项目中还需对更具体的场景进行分析、考虑运营性的需求、对单个模块的交互进行推敲，最终才能得到一个能吸引用户、留住用户的有效首页。

篇11：随身携带的设计手机浏览器手机小结交互设计

可以随身携带，是移动设备具备的优势，虽说“随身携带”跟设计本身并无太多关系，但想想我们的设计又的确是大家随身携带的，心里不禁有点暗自窃喜，同时，也因此对移动设备的产品设计的要求会更高，因为凡是大家随身携带的东东，必然是大家日常所必需、所钟爱、或者常用的，自然对这些东东的要求就会更高，希望它能够彰显自我的，所以，做随身携带的设计其实更难。

说到手机浏览器，从preview到 beta1版本发布，到目前即将出炉的beta2版本，已经做了近一年的时间，个人感觉麻雀虽小，五脏俱全，手机软件看起来很小，其实做起来复杂程度一点都不亚于pc端的软件产品，或者更甚，跟进期间遇到了不少问题，同时也积累了一部分经验，下面主要通过几个典型案例和设计过程中的几个环节的做一下简单的分享。

问题1：视觉表现与开发实现的平衡点

提起移动设备的设计，难免想起目前火热的iPhone，微软的windows mobile系统，以及很多时不时让你大饱眼球的新颖、时尚的产品，其整体的印象感觉是前卫、酷炫和充满科技感的。

多说无宜，相信大家随处都可以看到类似的惊艳设计，这里要强调的一点就是，手机软件需要兼顾到多个手机操作系统，而目前主流的智能手机操作系统有很多如诺基亚的Symbian、微软的Windows Mobile，PALM、Linux，还有Blackberry OS、iPhone OS，以及Java和MTK等等，况且每个系统会不断更新升级出多个版本，比如Symbian系统又根据不同的硬件特性分为S40、S60、S80、S90等不同版本，这些系统和版本都具有不同的特性，所支持的界面表现也都不尽相同。所以在进行视觉设计的时候，要对不同系统有所了解，不能一味强调视觉上的表现力，单纯追求酷炫的视觉效果而失去了兼容性。

同时，手机软件亦会受到硬件设备的限制。我们可以注意到不同的品牌占据了整个手机市场，其中占有率高的有诺基亚、索爱、三星、摩托罗拉，还有多普达、苹果等后起之秀。整个手机行业更新换代非常快，新的型号很快出来，旧的型号又不会马上被淘汰，所以手机软件开发还要细化到不同品牌的不同型号。

而且，要关注到产品开发的成本。目前QQ手机浏览器的开发还属于前期阶段，目标是快速打造简洁快速、轻便易用的手机浏览器，简约的设计是与当前目标相符的。我们不用刻意追求外在表现，而是设计一款实用为主、性能第一的浏览器。手机浏览器沿用了手机QQ的界面实现机制，同时也因为操作系统的原因，现在还不支持半透明的效果；在质感表现上，主要以单向渐变为主；另外对安装包的体积有严格的控制，尽量少的使用贴图元素和动态效果。

问题2：围绕核心价值进行设计

浏览器的核心功能是页面浏览和内容呈现，用户在使用浏览器上网的时候，浏览器的任务便是对用户查看网页进行解析并快速正确的呈现网页内容，而网页的样式及风格则是网站建设者需要考虑的事情。这里要提到在preview版本里曾设定的手机QQ风格的主题皮肤，其中对网页浏览窗口的背景色也进行了定义，即与起始页一致的深蓝色，在实现和测试的过程中，我们发现这个深色的背景影响到了部分网页的浏览。比如，CCTV的wap网站使用样式表将网页文字定义为深色，在明暗度很接近的背景色值下，基本无法看清文字。因此preview版本我们暂停了该主题的实现，在beta2版本中我们将该主题的浏览窗口背景色调整为浅色。

控件设计也遇到了类似的问题，开始控件样式是跟当前应用的主题风格统一的，默认蓝色主题的控件是蓝色的，粉色主题的控件就是粉色的，但这在通用性上就比较差，比如在一个蓝色风格的网页中，想区分出蓝色的输入框就有点困难，

因此，我们最终定义了一套通用的手机浏览器的标准控件，可以应用在各个主题里面。

站在巨人的肩膀上

公司已经有一些比较成熟的无线产品，如手机QQ项目就积累了丰富的移动设备设计的经验，在手机浏览器项目的前期我们与手机QQ项目的设计师进行了多次的交流和学习，在后期的设计过程中也非常感谢他们的经验分享和热心支持。其它还有手机QQ音乐、手机QQ影院等产品也有值得我们学习的地方，后续我们会增强各项目间的交流和技术分享，共同提高。

多渠道的学习移动设备相关的设计知识是很有必要的，特别推荐下诺基亚论坛(forum.nokia.com)，其中的Design and User Experience栏目中有大量的交互设计和视觉设计的文章，同时Library中的规范建设文档也十分的全面和完善，是很好的设计参考资料。比如其中几篇关于Vertical List、Horizontal List和Tabbed List的讨论文章，就对手机浏览器beta2版本的起始页的列表设计提供了很大的帮助。

还有目前比较流行的手机浏览器产品，如UCweb、Opera等，相对来讲已经比较成熟，对浏览器的整体体验已经有很好的把握，并且吸引了相当很多忠实用户，我们也可以通过吸取他们设计的优点来提升产品的体验。

另外，参考优秀的手持设备软件设计是一个很好的捷径，正如前面所说的手机软件会受到操作系统、硬件设备等的很多限制，而优秀的设计已经较好地避免了许多问题。

过程保证结果

手机屏幕的显示效果与电脑屏幕的差别非常大，不同型号的手机的色差也很大，我们在进行视觉设计的时候需要在不同手机上调试设计稿的色调和对比度，通过不断测试保证最终的显示效果。为了节省测试和调整效果图的时间，这里建议使用数据线连接，这样在pc和手机间传输图片的速度会快许多，并尽量多的在不同手机上查看效果，因为很多手机的颜色显示没有达到真彩色，有些色值会不被正常显示。

手机浏览器是多部门合作的项目，在设计过程中难免会出现各方面的意见分歧，通过严格的评审流程可以保证最终设计质量以及合理的解决意见分歧。设计稿首先要通过设计中心的专家评审，然后在项目组内进行二次多方评审并最终确认，最后提交开发实现。

为方便开发同事快速高质量的进行界面实现，以及后续功能模块的添加和维护等工作，我们制定了需要制定详细的规范。规范制作对后续的工作开展有着重要的意义，比如新主题的增加，界面实现的检查等。

其它的补充

手机软件的界面设计中要特别注意内容、结构的层次清晰，尽量能适合在不同场景下的表现，因为手持设备的特点就是很方便的在不同的场合使用。

手机和pc端的设计原则是共通的，关键是将不同设备的特性发挥出来。

手机字体相关规范还需要进一步完善补充。

最后的话

手机浏览器项目对于移动设备的设计来讲，仅仅是迈出了第一步，尚有很广阔的空间需要去拓展，对于手机软件设计的经验积累现在也还只是杯水车薪，要靠大家一起来补充，随身携带的设计，我们可以让你爱不释手。

本文来自：cdc.tencent.com/?p=1572

篇12：豆瓣FM产品体验小结交互设计

1 以目标为导向，为用户提供优雅的体验

豆瓣FM的用户使用目标是听音乐，当我们进入一个音乐网站，如一听音乐，一般用户的操作流程是搜索浏览-选歌-打开-听歌，如果想换歌还需要反复上面的操作，相对于其他竞争对手产品，豆瓣FM单纯地关注于音乐本身，用户不需要繁琐的操作流程，打开网站的瞬间就有音乐飘入耳朵中，最新版本的豆瓣FM为注册用户提供了私人频道、公共频道和DJ频道，用户可以根据自己喜好进行调频换台，整个完整的操作流程打开网站-听歌-调频体现了产品的收音机隐喻设计理念，更符合用户的心理操作模型，为用户提供了轻便而优雅的使用体验，

2 极简的界面设计，交互的及时响应性

豆瓣的界面设计极为简洁，界面设计只关注音乐本身，整个界面分为四大块，从左到右分别是三个频道、播放器、用户听歌信息及社交分享，去除了其他无关紧要的功能。豆瓣的交互设计多采用鼠标悬停时颜色有变化，提示用户可以操作，响应及时，让用户具有强烈的操作感，播放器设置面板上提供五个操作，右上角是暂停按钮，不过新版的暂停按钮有点小了，每次使用起来很不方便，要是我设计的话，我会把暂停按钮设计的大一点，至少是目前的两倍，

中间播放进度下面是调节声音按钮，这是一个亮点设计，这也是我最爱豆瓣产品的原因，追求极致的简洁，当鼠标悬停在调节声音处时，会自动弹出调节条，用户可以拖动至合适的音量，当鼠标离开时，页面中只剩下了声音的logo标志，保持了界面的简洁。最下面是红心、删除和下一曲按钮，主要是用户听音乐过程中的操作。

3 个性化音乐推送算法

豆瓣的亮点功能是根据用户的收听行为，为用户推送类似或者相近的音乐，这个过程不需要用户过多的参与，用户在听歌的过程中，只需每首歌进行标记诸如红心，删除，还有用户在豆瓣音乐上的社会化行为，比如有哪些音乐标签，喜欢哪些歌手，在听哪些，想听哪些，乐评等。

4 新功能不干扰用户，需要用户渐进式操作

豆瓣为用户提供了分享入口，可以将自己喜欢的音乐分享到豆瓣、微博、MSN、开心网、人人网，这些功能前提都是不干扰用户听音乐，需要用户渐进式的操作。

5 豆瓣的缺点

数据库曲目较少，歌曲重复播放率较高，推送算法还需要改进优化，同一首歌无法连续听一次。

篇13：百度百科改版，看百度WUI未来发展趋势交互设计

百度百科于4月21日正式上线—— 首先恭喜“百度百科”终于把“测试版”的帽子摘掉啦！

百科地址：b.baidu.com （大伙可以先去体验下，再看此文！）

自4月“百度百科”推出公测以来，其团队一直在不停的完善着百科的产品体验……2年后的今日，终于，百度百科正式版上线，引起很多wiki爱好者的瞩目，网站每一次重大改版，在体验上给人带来惊喜的同时，也制造了一些困扰，这都是不可避免的，百度百科也不例外，此次变脸在用户体验上是否成功呢？

带着这个问题，我们来看一下百科是如何从雏形走向成熟的！

初出茅庐的百科

昨天的百科

今天的百科

从上图可清晰看出百度百科的Web UI在上线前后判若两站，其风格鲜明，和其他百度web产品的UI截然不同。究竟是什么让百度的UED team下此决心动这么大的外科手术呢？Raymond不得而知，但可以肯定的是——这次百科改版对于百度WUI团队今后的设计风格影响意义重大，树立了百度UI的里程碑，而此后的UI风格表现上是否会朝着更多元化，更细腻的方向上走，有待时间考验，但至少这种尝试是值得推崇的，仅此颇让人欣慰。

新版上线后，视觉体验上也会存在一些多多少少的问题，Raymond的观点有以下几个：

一增删

删：删掉了百度百科的简介（估计百度认为是用户对“百科（baike）”两字的品牌认知度已经完全理解，就像百度的mp3栏目,不会放“什么是mp3”一样的问题）

增：图片的数量和密度比以前明显增多。

一屏内的“精彩词条”栏目的中下部位还安置了“图片滚动栏”，此举在wiki网站中非常罕见，猜想其目的是使“百科”到的内容更视觉形象化。但代价有三：版式乱，无重点，不明晰。

（1）版式乱: 看起来累眼，参考Tony的网站的视觉路径和版式设计，不再冗述，

（2）无重点: 愈想使每个图都醒目，其产生的结果是每个图都不醒目（还是那句老话 —— 花多不艳）。

（3）不明晰: 用户在浏览此处的时候，不明晰此图是何含义，就算由于好奇而产生的盲目瞎点，其结果必然是迅速关闭。

然后将鼠标拖动至二三屏，”按开放分类浏览“，优质词条，待完善词条等栏目排列整齐，结构明晰，感觉还是蛮不错的。

调：链接字体颜色调整的更加柔和。

新版链接字体用的颜色代码是“r 51 g 102 b 204， #3366CC” ，而非使用百度的默认字体色“R 38 G 38 B 220 #261CDC”，这使链接看起来不那么刺眼。

二导航栏

UE方面做的最大的调整，莫过于增加了二级导航栏。

意在突出3大入口：

1.尝试编辑实验（不会用百科的新手）；2.开始创建新词条（掌握技能后的进阶用户）；3.参与完善词条（对词条功能熟悉的老鸟）。

初衷是好的，可导航栏的设计和内容栏的UI元素明显不太搭，导航按钮也首次采用48×48的大图标按钮（这好像印象中是百度首次在其子栏目的导航栏里采用这么大的图片按钮吧？之前一直是”文字按钮“）。每个按钮的单独看细节表现的确棒，但放在整个页面中看，导航的过多修饰，让整个页面有一种头重脚轻的感觉。

三阅读情绪的转变

新版所营造的娱乐性体验更强一些，而国内其他wiki网站的则比较简约权威。改版后色彩更艳丽，一屏内使用了大面积的过渡色，模块的边角修饰使用的是圆角，而非方角……等诸多细节，在很大程度上使用户的阅读情绪发生了很大改变，莫非是想让百科的用户们也High起来？这就说回到百科的用户群。我们来分析一下这部分人来这的目的是什么？是来玩的？还是目的性很强来学知识、解疑惑的？

我觉得可能是后者居多吧，那为何要费功夫做这么多花哨且不实用的装饰呢？

（ps：以上仅代表Raymond的个人观点，相信百度WUI团队本身对于用户的理解远比我个人要深入，百度在做改版的前，一定是有充分的调查分析和充足的UE&UI经验这样双保险的前提下，设计出正式版百科的Layout的。希望由我的观点而引出一些大伙自己的想法，分享之，欢迎不同声音，欢迎讨论）

来自：百度百科改版,看百度WUI未来发展趋势

相关文章：百度百科首页大改版测试版转为正式版

篇14：拍卖出价流程浮窗设计小结交互设计

之前在交互周会上，作为项目分享了之前做过的拍卖线的出价流程，由于讲的比较匆忙，所以还是想整理成文字，累积下，做多了日常以后，常常觉得如果不多做字面的积累，很多看似瞬间的累积，很快就会被更多的项目淹没~~

之所以把这个项目分享出来，是因为觉得我们在工作中所做到的大小日常，99%的都不是“无中生有”的，都具有一定的历史，也一定有一定的痛点，一定也有新的业务变化在里面，如何在短时间内把握这些因素，迅速转化为一个合理的方案，是有一定方法的，虽说方法不一定完美，但希望给大家一些思路。

开始正题，大概介绍下这个出价流程的背景：拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的，随着拍卖业务的发展，觉得有必要以更简单的形式来进行操作，所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断，而之前做的一版浮窗出价流程并没有交互设计完整的参与，导致了页面逻辑中有一些问题，所以需要交互再次参与进来将这个出价流程梳理好，但另一方面，之前尽管有问题的出价流程由于业务需要，却正在上线中……

首先，从项目的背景中，就可以总结出这个项目有几个特点：1，有大概的交互形式，且已经不能修改（尽管当时也有人觉得浮窗形式不是很好，但一切都在上线中，所以暂时也无法改变）2，发展中的业务和要求革新的心态（这在很多项目中都存在，我们通常不喜欢一成不变，但面对发展中业务，多变也是一个挑战）3，没有原始页面数据（这是最无奈的一点，因为看不到用户的反馈，让我们少了很多依据）

其次，这个项目从交互角度出发，这个项目有几个挑战：1，浮窗形式的界面（区别于一般也页面，对信息的分类和呈现要求更高）2，需要对流程做出完整的梳理（一般涉及到前后步骤的页面，最好有完整的流程图有助于检验页面） 3，之前的版本出自非专业人士（势必需要纠正一些浅显的问题，这也是之后开始着手的切入点）

总结了以上几点，确定了这次项目的主要核心点，即原有流程的提升和修正，修正原有出价流程中错误的地方，提升原有流程页面的交互体验。

由于接到这个任务的时候对拍卖业务还不是很熟悉，所以一方面与PD沟通了解拍卖业务，另一方面让QA把准备上线的拍卖浮窗的每个状态给到我（因为之前的版本没有完整的交互稿）如之前所说，先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题，以此归纳出具有针对性的方法。

1，文字引导与输入框距离太遥远

2，同类信息被放置在不同的地方

是否设置成代理出价是和用户的出价有关的信息，应该归类显示。

1、2两点，实际上都牵涉到了信息归类显示的问题。在一个页面中，一些相关的信息（例如同类的，行为上可以连续操作的）尽量可以放在一起，但其中要避免相同形式表达的信息（例如都是数字的形式）则要分开展现，以免互相混淆。

3，操作行为的起始和完成逻辑不通

在上图中有修改的点击操作但在接下来却没有“确定”或“修改完成”的操作，而是直接通过整个确认出价的动作作为结束，一定程度上并没有给于用户一个操作闭合，很容易让用户搞不清楚自己正处在修改资料还是出价哪种行为，

4，浮窗文案提示并未从用户角度出发

在这个首先提示用户“出价成功”，但随即又告知用户其他用户的出价已经超过了他，然后让用户重新出价，这个充满矛盾的页面，就是因为没有站在用户的角度出发。这里所谓的“出价成功”仅仅只是后台有此次出价的记录，而对于用户来说实际应该是“出价失败”。

在浮窗的操作体验过程中，由于遇到的情况会很多，很有可能在页面跳转中流失一定的用户，所以，避免给予用户挫折感。并且，不论在哪一步文案的表达都应该站在用户的角度，更便于在整个拍卖过程中传达正确的信息。

5，文案展现上主次不明

上图的浮窗中用非加粗的字体表达了一句比较重要的话，而下图的浮窗却用加粗的字体表达一句不是那么重要话。可能在大的页面中这些都不会这么凸显出来，但由于浮窗区域比较小，错误就显而易见了。

6，文案上表达有欠缺

上图浮窗的“建议您设置一个更高的价格并重新出价”语义表达重复而累赘，下图浮窗中的话也是类似问题。而且同样都是让用户重新出价，使用的确是两种不同文字的button。

4、5、6点都是文案上表达的问题，对于浮窗中的文案，一方面可以通过视觉上不同层次的文案做区分，另一方面文案本身也要符合逻辑。

7，一些必要信息的缺失

例如浮窗中的单位“元”不见了，这种常见的问题也很容易被我们忽视。

由于分别找出了原有页面中的一些问题，接下来的思路也显现出来，将浮窗页面的信息做大概的功能区隔，并对具体区块中的信息做规范表达。

将浮窗分为三大区域：橙色区域是有关出价的信息/最主要的信息提示；蓝色区域是保证金和客户信息/信息补充区域；绿色区域是判断区域/出价按钮或关闭窗口的位置。

橙色区域还细分成三个部分，第一行显示和数字相关的信息/表示当前最主要状态的信息；第二行为重新出价设置；第三行为设置代理价。第二和第三行的信息在一些状态中是没有的，所以相应会不做显示。

功能区域的分割只种维度上的，我还在视觉表达层次上做了规范，尽量让有用的信息更加凸显出来。通过这个方法即在交互的表现层面上有了一定的规范，在视觉进行的时候也可以有效减少对原有交互设计的误解。

做了以上两步的同时，在与PD的沟通下，也对整个增加拍的逻辑做了充分的梳理，当然过程中少补了的是Qa同学的辅助，因为QA更加了解业务逻辑中的一些细节，在此基础上做出了一份逻辑图。最后就是按照之前制定的规则，将相应的信息“填写”到相应区域即可。

上线的页面请大家有空参与淘宝拍卖会上拍品活动：www.paimai.taobao.com即可看到。如果有任何疑问都可以通过页面右侧的意见入口，给我们提宝贵的意见，相信这个拍卖产品的好的体验是大家一同参与下得出的结果，我们也会不断根据用户的反馈给予产品最及时和有效的改进！

琳韵撰于.12.23

篇15：携程无线 UI风格改版――废稿1交互设计

启动画面同样保持了携程旅行网的蓝色海洋基调（蓝色较前一版略有加深，以期在iphone的屏幕上有更好的色彩表现），

网站logo位于中央，视觉上最为均衡，结构稳固。

蓝天、白云、沙滩、阳光，这些视觉元素在第一时间便能打动用户的心，让人不禁想去计划一次旅行！放飞心情，还给自己一个自由的空间。

右下角新增一对可爱的卡通吉祥物，仔细一看，原来是携程吉祥物——游游，正享受着阳光浴！

这怎能不让人为度假而心动呢！

OK，打住。

确实，整体色彩更优美了；

确实，机票、酒店等图标更精致了；

但对比之前的版本：buyiui.com/66.html

虽然之前里面的图标都比较平，背景也没有现在的美，

所这稿也仅是优化，木有超越！还木有！

那么，可以从哪些角度去超越呢？

没有无线专属logo，目前用的是携程网站logo，那就做一个专属无线的logo！

现在的启动画面是很优美，但很复杂，那换个方向，国际化的简洁的！大牌的！

还有，好的图形要能说话，现在启动画面在品牌价值营造上，还有欠缺，难以形成一个标志性传播话语。

这3点，解决了就是一定程度上的超越吧。

请期待超越版！

篇16：从淘宝网首页看内容随机展示应用交互设计

开始之前先解释下相关概念，当然都是按自己的理解杜撰的，

什么是随机展示？为什么会有这种需求？

从下图可以看到，现在的网站，特别是电子商务网站，都有内容切换模块。基本上分为两种，一种是tab内容切换/js轮转切换，都是用户可以手动点击切换或自动切换，用户可以查看所有内容，但一次只能查看一个单元内容，称之为“显性隐藏”；一种是没有切换按钮，后台有一个一定容量的内容池子，在当前模块区域内只能显示固定数量的内容，除非用户刷新网页，用户看不到其余的内容，称之为“隐形隐藏”。

不管是显性隐藏还是隐形隐藏，都需要用户交互互动后才能看到全部内容或者更多内容，即使是自动切换的也是需要用户等待一段时间才能达到前面的目标（看到全部内容或者更多内容）。但从数据统计来看，没有交互的设计才是最好的，因为用户真的很“懒”，没有多少人原因去点击切换，有隐藏等交互的内容区域，除去设计和内容的因素之外，往往第一个显示模块的点击率比其它的内容要高很多。

在这种情况下，如何保证每个切换模块的内容的展示机会均等？那就是随机展示，不管是显性隐藏还是隐形隐藏，通过程序来控制每次用户第一次打开的内容都是不一样的，这样就能保证自然状态下，每个内容的展示机会是均等的，从而避免从宏观上来看很多内容根本就没有和用户见面的机会。

说了这么多，回归正题来看看淘宝首页是怎么做的，从截图来看，淘宝首页一共有10个显性隐藏或者隐形隐藏区域（有广告图片、促销信息、单品、功能，但都可归类为内容），基本上都是采用随机展示的方式来保证每个内容模块的展示机会是一样的，大家可以手动刷新看看，每个显性隐藏或者隐形隐藏区域第一次展示的内容都是不一样的，

对于上面的情况做了个统计，从统计情况看显性隐藏中有不同的切换方式：

不过一个页面有这多的隐藏展示区域，个人感觉从易用性来说并不好，还是要掌握好一个度，毕竟用户“懒”是一个方面，另一方面太多的隐藏内容也会影响加载速度。特别是自动切换的展示方式更应该慎用，如果一屏之类有太多的动态切换，对用户干扰太大。当然自动切换的方式也有很多种，国内的都喜欢带点动画，要么上下要么左右，动作挺大的，一屏之内如果超过2个区域都这样子的话，用户就很难集中精力去看他想看的内容了。关于这一点，棒子做的比较好，尽管棒子的网站从上到下都是隐藏/显示的区域，但人家的切换方式比较低调，只换内容，不带动作，就是简单的显示隐藏切换，这样视觉上来看变化不大，甚至有时候悄无声息的。当然从网站定位来看，taobao首页作为超级入口，又有超级多的用户做后盾，有这么多的隐藏切换区域也很正常。而棒子的网站另当别论，可能棒子用户适应这样的感觉，再说人家的带宽也够给力。

可以看个棒子的网站，首页居然有13个隐藏展示区域，当然都是采用随机方式，切换方式很低调，显示和隐藏，不带过渡动画。

附带几个棒子网站地址，感兴趣的同学可以看看：

www.11st.co.kr

www.bandinlunis.com

www.shilladfs.com

www.lotte.com

篇17：从目标用户到设计目标――淘宝装修市场改版分析交互设计

互联网行业快速发展，产品快速更迭，设计师们经常会遇到界面改版的需求，产品改版并不是头痛医头脚痛医脚的事，如果只解决表面上的问题，不久后，肯定会有新的问题产生。

去年，淘宝UED做了一次含金量特别高的分享，主题是《从目标用户到设计目标》，阐述了挖掘出目标用户之后，如何明确用户需求，进而分析出用户体验目标，从中分解出可以达成目标的关键因素，最后在这些因素中寻找出哪些因素是可以通过设计来解决的，那么这些因素就可以定义成设计目标，通过设计的各种方法，最终解决用户最根本的问题。

这次淘宝装修市场的改版，就应用了这种方法，希望能从根本上解决用户使用中的问题。

一、从目标用户到设计目标的方法

从目标用户到设计目标的方法，简单可以概括为下图：

1、定义目标用户

目标用户是直接和产品产生交互，是一个有典型特征的群体。比如汽车方向盘的目标用户是驾驶员，而不是乘客，只有驾驶员才跟方向盘产生交互。可通过建立人物角色模型等方法定义目标用户。

2、明确用户需求

用户需求是外在的表象，是目标用户按照自己的经历、理解、处境、需要，所期望的产品形态。可以通过用户访谈等方法明确用户需求。

3、分析用户体验目标

用户体验目标是用户需求的本质，是目标用户使用产品所期望得到的成果，是需求背后蕴藏的原因。可以通过认知心理学、行为学、用户体验研究等方法定义出用户体验目标。

4、分解达成目标的关键因素

关键因素是决定目标用户是否能达成用户体验目标的关键原因或条件。它应该对达成目标有决定性作用，且符合使用场景。

5、确定设计目标

设计目标是设计师通过一系列的界面影响，让用户达成目标的关键因素。可以通过灵活使用交互设计模式、符合用户心智模型等方法达成设计目标。

二、以装修市场为例

结合实际，我们来分析一下淘宝装修市场的现状是怎样的。

1、目标用户

根据产品定位，确定目标用户为需要购买模板的淘宝卖家，

2、用户需求

通过搜索、筛选等方式找到合适自己店铺的模板。此处的合适可以定义为符合自己的旺铺版本、定价可接受、视觉风格美观、功能模块可满足需求。

3、用户体验目标

用户调研显示：不使用旺铺装修市场和不满意的主要原因都是很难选择到适合自己的模板，其次是模板的相似性太高、买了模板后应用过程太麻烦。

用户体验目标是用户需求的本质，是目标用户使用产品所期望得到的成果。通过调研，分析出用户体验目标为：快速找到合适模板。

4、关键因素

通过分析用户体验目标和用户调研报告，分解达成目标的关键因素为：成本（时间、效率）、版本匹配度、类目匹配度、识别度（布局、颜色、标题、设计师）等。

5、设计目标

设计目标是设计师通过一系列的界面影响（降低/改善/激发／…），让用户达成目标的关键因素。

设定设计目标为：降低选购成本，提高版本、类目的匹配度，提高不同模板间的识别度。

以上分析可表示为下图：

6、设计方案

根据以上分析，针对设计目标提出设计方案：

三、界面原型

根据以上设计方案，产出原型：

四、视觉稿

最终线上效果：zx.taobao.com

篇18：新浪、网易、腾讯等门户们改版之后的首页浅谈网页设计

从10月12日的网易新首页的率先推出，到1月15日TOM.COM新首页在结构上的巨大改变，再到203月25日腾讯推出更年轻时尚化的腾讯新首页，然后是新浪也不甘寂寞的紧随着腾讯选择在4月1日这个愚人节加入了首页改版的行列，3个月后的7月1日一直号称以技术为主的“中国最大门户网站”搜狐也对其首页进行了调整，最后是7月9日中国雅虎完成了加入阿里大家庭之后首页最大的一次变脸，

半年多的时间下来，国内的综合门户们相继的都对各自的首页进行了调整改变，不管其目的是出于战略意图的改变，还是出于对时尚潮流的追赶，或者是其它的原因，门户们对其首页的改版有一个目的是不变的，那就是吸引更多的用户，留住更多的用户。

门户们改版之后的新首页，不论是从UI还是从交互上来说，相较于旧版的首页都是一种进步，门户们的新首页正朝着为用户提供更好的服务前进。

1、网易改版之后的新首页是在月12日推出，是国内最早一个改版的综合门户，与那些在年改版的门户们的首页来说，有着很多的不同点。在这些综合门户中，网易新首页是唯一一个还停留在800*600分辨率的窄屏时代的首页，其他门户们都选择了提升自己新首页的宽度，即使曾经的中国雅虎可由用户自行切换宽屏与窄屏，但在新首页里并没有保留这个功能而是直接采用了宽屏。宽屏是在保留同样的内容下，减少首页整屏高度的最好的方法；

2、腾讯首页改版带来的最大的变化并不是它时尚型的UI或者是伪宽度的宽屏，而是它对首页新闻标题的字体提升了一号，相较于网易跟TOM.COM的“小字”来说，腾讯的“大字”具有更高的易读性。加大字体型号这一特点也在腾讯之后改版的门户们中流行开来，新浪、搜狐、中国雅虎纷纷对自己着页的新闻标题字体进行了加大，

可是搜狐新首页对字体型号的处理却很怪异，同样的新闻标题，却又有大小号字体之分，这显然给视觉造成了困扰；

3、一直不喜欢新浪跟搜狐的首页，除了其在版式上让内容显得臃肿之外，还有很大的一个原因就是新闻标题全都加有下划线，一眼望去整屏的下划线。在有链接的文字下面加下划线，是浏览器默认的渲染样式，也是网民心中默认的链接样式。可是首页新闻标题的链接是否应该显示下划线呢？当在满是文字的信息内容里对其中的链接加下划线对用户来说算是一种提示，提示这里有其它内容的链接。可是在首页出现的文字基本上都是新闻标题，整个首页的文字基本上都具有链接性，有下划线对其来说并不具备提示的作用，相反的给视觉带来一定的疲劳感；

4、因为TOM公司的战略的改变，TOM.COM的新首页无疑是众多门户之中改动最大的，同时也是最特别最个性的。腾讯新首页的UI无疑是那些依然停留在传统门户中最漂亮最时尚的，这与腾讯QQ的用户群体大部分在青少年这个年龄阶段有着很大的关系。同样的道理，新浪的新首页仍然是那么的板板正正。搜狐新首页的特点除了跟新浪一样的板板正正外，还在于它将奥运溶入了其中。穿上阿里系颜色服装的中国雅虎，终于摆脱了美国YAHOO的影子；

5、如何让首页的版式看起来简洁，让内容看起来清晰明了，网易首页是个很好的样本，网易首页对于滑动门标签的高度使用是其在窄屏下保持首页整屏高度的最好方法，如果把标签展开或者减少整合，那么如此两栏结构版式的网易首页高度将变得很长很长。即使换上了新首页，新浪与搜狐的首页版式仍然显得臃肿；

6、TOM.COM的新版首页偏向于WEB2.0，形式上更偏向于个人门户型，除网站提供的默认首页内容外，用户可自行定制首页内容。可是这个WEB2.0就像腾讯首页的伪宽屏一样并不是真正意义上的WEB2.0，用户自行定制的首页内容依然由TOM.COM网站提供，充其量也最多也就是个WEB1.5，而事实上WEB2.0在国内并没有真正被应用起来。马云在中国雅虎中溶入了口碑网的服务，中国雅虎的重点更多的是转向了服务领域而不再是综合门户。这是一种求变；

来自：www.prower.cn/interaction/229

篇19：完美瞬间――QQ电脑管家6.0项目小结交互设计

2010年5月31日，QQ电脑管家发布第一个4.0版本，一年来，我们欣喜地看到管家的用户量和口碑在逐渐提升，而随着功能和特性的不断增加，产品细节体验所暴露的问题也越来越多、越来越迫切。由此，产品、CDC设计团队在7、8、9月启动“QQ电脑管家用户体验季”，在界面视觉风格、界面布局、功能引导、智能贴心、信息呈现等方面，集中改进产品细节体验问题。在此期间，设计团队通过封闭设计，对管家目前的体验问题进行集中梳理，将目前管家的体验问题逐一解决。

从去年开始，QQ电脑管家团队每月定期举行用户体验会和专家体验会，对当月版本进行走查体验，同时通过论坛、微博等收集用户反馈，将这些发现的问题并梳理，并在下个版本中着手解决。

首页作为安全体检和其他功能模块的入口，也是用户看到管家的第一个界面，在这次体验优化中做了重点优化。

这次对于引导过程的优化，设计师和产品一起将每个功能的引导wording都进行了检查，之前的wording是简洁风格的，语言会较生硬。这次优化，我们在简洁的基础上，增强了引导的清晰性，同时将语言定位在偏重口语化的风格。

例，如下图所示，一个过程页面的引导wording，必须包含3个部分：

用户在使用管家时，会看到很多和电脑安全相关的信息，之前在内部体验时收到反馈，很多信息因为写的太专业，不理解是什么意思。那么这次针对信息展现优化以下2点：

1. 展现让用户看的懂的信息

将计算机方面的专业术语尽量的翻译成用户可以理解的语言。这次优化，将管家主tab上的功能的信息都做了优化，例如将木马查杀的“自定义扫描”优化为“指定位置扫描”。

2. 弱化非重要的操作按钮。

非重要、不常用的操作按钮在界面中重复出现，会使得界面不简洁。在这次优化中，将非重要操作按钮默认不显示，鼠标mouseover后才显示，

如下图：

反复体验之前的木马查杀，发现一个很小的瞬间：每次开始快速扫描后，在切换tab使用其他功能时，总是不知道扫描何时会完成，于是总是频繁切换tab查看。

怎么办呢？设计师在发现了这个小的细节后，和开发同学一起，将主tab的图标变成了可以动态展现的样式。当用户在进行木马扫描，切换tab后，木马查杀tab会有扫描的动画，告知用户正在扫描。在扫描结束后，同样会将扫描结果展现在图标上。这样，用户就不需要频繁切换tab就知道是否扫描完成了。