大师级别的UE设计细节

当用户第一次浏览一个网站或使用一个APP时，前5秒异常重要，使用者是关闭它还是继续使用它也许就在这一瞬间做了决定，除了功能是否满足外，页面是否美观、操作是否傻瓜顺畅成为重要因素。否则，一旦用户形成了第一印象（沉锚效应），后面再想扭转将会花费更多的成本。正如Jesse James Garrett所说：“在进行系统设计时，提供优质的用户体验是一种重要的、可持续的竞争优势，往往决定产品的市场走向。”

每个时期都会有不同的设计风格盛行，比如随着苹果产品的热销，扁平化的注重细节设计的思想也在逐步影响和约束着各行各业的UE设计师，但是真正成为Master不光要有灵感，还有不可小觑的细节操控能力。正如苹果设计大师乔纳森·伊夫一直秉承的苹果设计理念：“在苹果，创新已经是生活的一部分；除此之外，专注细节、遇见问题、决心要解决问题都是十分重要的，是逐日积累的经验。”

下面就来看看一些大师级别的细节设计，我从国内外众多优秀的网站案例中，按照不同的设计内容挑选了一些优秀的例子（请原谅我无法在有限的篇幅里放置更多的优秀案例，只能按类别选取一些更有特点、且风格不一的案例），这些分类包括导航、框架、色彩、搜索、按钮、视图、标签、分类、表单、编辑器、图片、登录和注册、消息和购物车等14个方面。

Ø  1-导航 Navigator

导航是网站信息架构里最为重要的设计要素之一，是引导用户需求的主要方法，也多为网站的信息架构的顶层设计。比如下面的导航条设计就是一个典型的二级模式，其设计的亮点是在二级导航里放入一些有价值的信息（LATEST ARTICLES），方便用户及时了解最新的资讯。

这种设计也常常在政府机构的网站里面可以见到，比如CIA的门户，只不过二级导航里添加的是导航分类的详细解释和插图。

eBay的导航设计亮点在于：在显著的位置添加了MyFeed和eBay Today两块内容，突出了对于信息的有效组织和对于用户所关注内容的细节设计。另外，在二级导航区域，通过放置一些简约直观图标让商品类目更为便于识别；在右侧放置了大幅的图片广告区块，吸引用户点击进入，以提升销量。

对于企业网站而言导航设计相对简单，主导航一级足够了，在不需要多级导航的情况下，有时候需要一些快捷的信息分类引导作为补充，比如Telefonica网站，就将Global Services放置在网站顶部，采用下拉式的导航设计。这种设计的理由是：一方面这类信息不是最为核心的内容，但是用户也会经常使用到；其次，这类信息往往数量繁多，在不常用的前提下不适合放置在页面的主要显著位置而影响用户浏览体验。

并非所有的主导航条都是千篇一律的设计模式，比如TESCO的导航设计，顶部的快捷导航条是功能性的所以被弱化了，而真正的主要导航采用了TAB的方式进行展现，每个TAB标签页内部通过左侧的二级栏目进行细分引导，而主区域留给了图片广告。而TAB在设计上也采用了标题+图片的方式方便识别。

再看看微软的导航设计，微软更注重的是内容引导，比如一级导航划分为Shop、Product、Downloads和Support，是非常清晰整洁的分类。在二级导航里，Shop按照用户群体分为了For Home和For Business，如此一目了然，不管从色调、信息架构设计还是软文，都属于毫无累赘的极简设计典范。

当用户进入Shop后，shop的导航按照产品的分类进行设计，并将主打产品的精美大幅图片作为分类的索引放置在顶端，下方是每个产品线的详细产品细分。

我们再来看看另外一种导航的设计，有些网站纯做内容，不愿意牺牲页面宝贵的篇幅去放置导航，因此就藏了起来，比如花瓣，他们将导航隐藏起来放置在页面的最左上角，用一个小的图标来示意用户这里可以点击，而导航区域伸展开后，用户会发现原来网站竟然有这么多内容分类。

有些网站就不像花瓣那么隐晦，他们更希望用户进入网站后就立刻找到要去的地方，比如yoho，采用了电商网站比较流行的主辅导航并行设计模式，页面顶端是频道导航（业务线导航），左侧按照商品类目（Catalog）或特性（Feature）提供导航。Yoho的导航设计不同在于，在左侧同时提供了Photo、市集、STYLEBOOK三类不同的导航汇聚方式，可以说将信息做了深入的挖掘和提炼，这也让用户的浏览体验变得更简单。

AOL的邮箱产品在设计导航时，围绕功能展开并从用户的操作体验上下了不少功夫。在左侧是主体的功能导航，比较好的是将搜索放置在导航顶端，第一个不是常用的INBOX功能而是Today on AOL，这是为AOL的内容服务做推广。在顶端是常用的二级功能导航条，这些是跟随左侧的主导航而变化的。右侧还有一个隐藏的功能导航菜单，将一些不常用到的功能收起并组织在一起，当用户有需要并点击后才会展开。

有些网站喜欢用大幅的图片作为背景，这类网站往往希望突出轻松休闲的自然或人文气息，比如Travel+，他们的网站导航是浮在图片背景上的，这种设计也挺有意思，文字内容很少，但丝毫不缺少让人向往的元素。当然，他们的背景图片可以是经常变化的，比如配合营销需要，换上不同地方的旅游风景图片。

再看看一些另类的导航设计，比如下面网站就充分的利用了导航的区域，将丰富的推荐内容放置在导航里面，与其说是导航到不如说更像是一种精彩内容推荐。

下面的网站将导航设计的较为复杂，包括一级导航，二级导航和分类导航。分类导航MAGAZINE\LIBRARY\SUBSCRIBE和一级导航之间并无逻辑联系。而在二级导航里面，会有一个经典的FIND信息推荐功能。

CFO的网站导航更为复杂，我理解主要是因为数据信息量过大而导致分类繁多，作为该领域的垂直信息门户，其导航设计按照了信息的类型和专业领域分类来设计多维导航。按照Conferences、Webcasts、Research、Benchmarks、WhitePapers、Video、Blogs、Jobs Training、Newsletters、Magazine等不同信息类型作为分类依据之一；另外，按照学术范畴划分了另外一个导航纬度，按照ACCOUNTING&TAX,BANKING&CAPITAL MARKETS,RISK COMPLIANCE等专业域设计了另外一套导航，而且每个具体的业务领域都有一个二级的聚合页面来归集并展现这些信息。从设计上看，专业导航是网站的主导航，在其二级导航里面也放入了LATEST STORIES导读推荐内容。

下面是Disney的网站，其导航设计的最大亮点是将主导航的具体分类内容做了一个明细的页面并隐藏起来，在用户需要的精确浏览的时候，点击导航按钮Disney.com即可展现这个导航全局视图，而全局导航视图和主导航目录是一一对应的，也是相辅相成的。

还有一些导航的设计重在布局，比如POPPHOTO，其导航和网站LOGO及搜索框挤在一块，而且LOGO如此抢镜，但你丝毫不觉得导航被弱化了。这是因为在设计时，除了在色彩上的反差处理得当外，字体的大小和间距拿捏的很好，很值得借鉴。

国家地理杂志的网站导航设计比较有意思的是它右侧的SHOP导航，这个应该是网站希望推荐的一个内容，虽然加上了一些劣质的雪花效果，但是展开后还是比较有特点的。比如，他们充分的考虑到用户的操作习惯，当点击SHOP时鼠标已经在网页的右侧，则二级导航分类也放置在右侧，以减少用户的鼠标移动距离；主打的产品放置在中间，BestSellers放置在最左侧。

麦当劳网站的设计是比较清新和精细的，其主导航和M的Logo相映成辉，这种设计大气而稳重，二级导航更多的使用图片来刺激用户的选购欲望，在图片中配以醒目的按钮来提示用户点击。还有一个更赞的细节，其导航的颜色是采用的渐变色，上面的主要功能显得更为醒目，下面的非主要功能则略显灰暗，也让网站显得层次分明。

还有的导航设计直接使用了字母顺序表，这种方式适用于二级导航分类较多的情况。

关于导航，最后看看一些电商网站的经典设计。

天猫的设计突出了商品分类是如何分层展现、如何利用有效空间来配合营销的复杂设计理念。

新蛋的导航设计中规中矩，但是导航顶部醒目的“BLACKFRIDAY”容易让用户找到重点。

亚马逊的导航设计突出了宣传的意味，分类下面的软文都是字字珠玑。

而亚马逊导航最下方提供了Full StoreDirectory页面导航链接，不管是做商品细分研究还是做类似的交互设计，这个页面都值得好好的学习。

京东的导航严格遵循从左至右，从上至下的习惯约束，也不失为一种合规的设计。

另外，在站内二级或更低级别的页面设计时，这类电商网站都会将导航默认收起，在鼠标悬停时展开商品分类导航。

Lightinthebox的导航设计将商品的数量统计出来并显示在分类名称的后面。

 

Ø  2-框架 Framework

页面框架是五层用户体验要素模型的核心内容之一，页面框架的设计决定着信息展现逻辑、设计师的设计思维以及网站的战略运营需要。

先来看看比较典型的也是较为流行的一种简约框架设计，比如SalesForce的企业网站首页面采用平铺直叙的单列模式，包括1-头部（导航、搜索、Logo、注册登录等）；2-广告；3-采用TAB方式呈现重要业务信息介绍；4-采用slide左右滑动方式呈现次要的信息内容；5-Footer。

这种垂直的设计被很多设计师所推崇，比如Billboard的网站，1-简约的头部设计；2-滚动的图片头条；3-最新的滚动文字信息；4-歌曲或歌手的推荐或得奖信息；5-榜单榜首信息；6-相关视频；7-News and Features。还有WEBPOP网站的设计也是当下较为流行的一种简约+灰色调+图文设计风格。

 

对于交互性更强的页面，其框架的设计也更为复杂一些，比如Yammer，其页面为三列框架结构，左侧是功能导航，中间是信息展现区域，右侧是辅助的多个小信息展现区块。

而对于政府机构的门户网站，其设计的核心是面向服务和信息公开。比如，首尔市政府的门户，其页面框架看起来就非常直观和温馨。其采用了两列的页面框架布局，顶层最显著的是导航和搜索，主体区域左侧顶部是图片新闻，以展现最重要的信息公示，下面是分栏目的最新信息的汇聚，右侧上部是常用的服务快捷链接，右侧下方是重要的视频信息、服务窗口链接，快捷联系方式，社交媒体服务帐号等；最下方是相关联的机构站点的服务地址。

有些网站会采用头部吸附悬浮的方案，比如当用户滚动页面，屏幕下移后，头部会变窄并吸附在顶部，以悬浮的方式一直存在，有时也会用一些透视效果来处理。以突出页面的主体内容区域，提升用户的浏览体验。

下面是悬浮的头部效果。

采用这种效果的网站还有很多，比如EBONY。

页面向下滚动后，头部会悬浮，并将LOGO，日期，广告等内容做了简化设计。

还有一些比较cool的页面框架设计，比如下面的站点就用了横向的页面框架，除了左侧的信息展现区域固定外，其它整个页面内容都采用横向拉伸方式并形成一个整体，需要拖动滚动条进行向右浏览，这种体验让用户有翻书或看一部电影的享受。

下面的例子采用左侧固定，右侧向下滚动的框架设计。

页面框架的设计主要还是为内容服务的，这一点BIO设计体现了亮点，其中间的信息广播条设计采用了抽屉的交互设计框架，当用户点击右侧的展开按钮时，TONIGHT的内容会随即展开。

这些内容如果配上精致的设计，效果相当的惊艳。当用户点击CLOSE SCHEDULE时，此消息面板将被收起。

Ø  3-色彩

UI设计师最显功力的就是色调搭配，既需要符合企业文化，衬托信息内容，又要高端上档次，还不能刻意抄袭模仿。所以，这个活做的好真不容易。

这里举一些经典的范例，比如绿色的典范BETTERHOMES。

TIME的红色和简单的页面设计风格搭配和谐。

Disney的多彩文化做到了极致。

Parents的红绿蓝三色系色调搭配的有理有条，看起来很个性也很温暖。

TasteofHome的红色不仅仅是Logo，包括广告图片都做了过渡色的处理，让网站看起来很统一。

ESSENCE是一个以黑人为主题的网站，其色调也以黑色为主色调，当黑色搭配上紫色时，看起来就不那么单调了。

Shape也是红色系为主色调，其搭配的是黑色，看上去也很精致，符合大部分女性受众群体的需要。

VEDA的色调搭配的很有想法，当然他们主推的咖喱风味浓郁的印度菜。

蓝色搭上绿色系的设计也很清新。

 

Ø  4-搜索

搜索是网站提供信息导航导航非常有效的一种工具，特别是当网站信息容量比较大时，能够帮助用户更好的找到所需要内容。但是，搜索的界面入口设计是看起来简单其实并不简单，比如既要设计的醒目，又要符合整体页面的布局要求，既要方便用户输入又要有良好的交互响应。当然，搜索的准确命中率也是交互体验的一个硬性标准，只是不放在本文中讨论。

这里推荐一些不同风格的搜索框设计。

先看看简洁的搜索框设计，微软的设计总是毫无累赘。

Digg的搜索是隐藏的，点击后才向左侧伸展出输入框。

SHAPE也是这种设计模式。

YOHO的搜索框支持语音识别输入。

Linkedin的搜索框设计的比较好，主要是其对搜索内容进行了分类，并提供Advanced搜索功能。

知乎的搜索框设计的最大优势就是醒目，紧靠LOGO，是最为聚焦的位置。

当然如果说醒目，知乎和Desina比较，则小巫见大巫了。

沪江英语搜索的特定是双按钮，除了搜索按钮外，添加一个最为常用的查词按钮。

Billboard的搜索框采用的是无框设计，当获得输入焦点后会出现搜索的边框。

 

Ø  5-按钮

按钮的设计就像一块pizza上洒下的配料，可以很无序，也可以让食者食欲大增。

比如，下面的按钮设计看起来非常的协调，无疑增加用户点击的可能。

还有麦当劳的按钮和页面整体设计浑然一体，显得自然和醒目。

还有下面的这些按钮设计，也值得推荐。

视图中的按钮设计：

   

 

整页中的按钮设计：

 

Ø  6-视图

视图是页面中布局的重要组成部分，视图设计的风格需要和整体网站风格保持一致，同时有需要体现独有的性质，比如表格，排行，信息，图片，分栏，文字，嵌入，调查，焦点，输入，视频，表单，人物等。下面就每个不同的风格特性推荐一些优秀的案例。

1-表格：

表格的视图设计最为考究，网站看起来是否专业，表格设计是检验标准之一。看看下面的两个经典设计案例。

 

2-排行：

排行视图是很多内容网站的必须项，设计时如果不拿捏好分寸，会让视图失去该有的效果，比如数据量过大显得臃肿不堪，或信息显示不完整让排行失去了该有的价值。下面的几个排行视图风格不一，但都是设计的可参考范例。

 

3-信息：

信息列表视图要求的是文字设计合理，内容条目数量适中，标题和辅助信息项的配合协调。比如下面的视图设计就非常的简介清晰，让读者看起来体验良好。

4-图片：

包含图片的视图设计要求图文搭配协调，读懂图片的内容比图片花哨更重要。

5-分栏:

分栏设计最突出的要求是整洁而不散乱，下面的设计方案可以被借鉴。

分栏还有一些设计细节，包括VIEW MORE和BACKTOTOP的设计。

 

6-文字：

文字放在页面上，可以很干瘪，也可以很鲜活，比如下面的例子就是正面积极的案例。

7-嵌入：

下面是嵌入Twitter视图的例子。

8-调查：

这类视图往往采用最为简单直接设计方式，这样会让用户不受干扰而愿意参与调查，简单当然也是最有效的。

 

 

9-输入：

如果视图中有需要用户输入的内容，可以参考下面的案例设计，细节设计真心不错。

10-视频：

下面的两种视频视图设计，配上文字后会让页面显得异常丰满。

 

11-表单：

表单视图设计的好不好要看细节，下面的例子设计就非常的细腻，大家可以慢慢的品味。

12-人物：

黑色素描线条的漫画式人物形象给读者多了几分亲近感，另外与边框的色彩及样式配合看非常搭。

下面这种人物介绍视图样式比较流行，大头白底清新风格照+动态的交互效果，配上信息提示框，很好的设计。

 

Ø  7-标签

标签设计也是网站导航的工具之一，特别是以UGC存活的网站和产品，用户自定义的标签体系能有效的帮助网站对信息进行组织。

在设计标签时，需要考虑标签的输入和展现两个方面。

标签的输入大都如下面的设计方式，可以自由输入多个标签，采用逗号或空格分隔。（注意，标签的图标是有行业标准的，可不能乱用）

而标签的展现则各式各样，比如：

还有一些较为个性化的标签云设计，比如

除了标签，这里特别推荐和标签意义类似也被常用的一种工具：分享快捷方式。下面的例子设计如果分开看大同小异，但放到网站中却有着那么一些点缀的意味。

下面这个案例我认为设计的很有特点，简单直观、看起来很舒适，。

 

Ø  8-分类

当网站存在大量信息条目需要展现时，如何让用户拥有良好的浏览体验，就需要用到信息分类设计了。比如常见的电商网站，信息分类网站，信息服务类网站等都避免不了有这类设计，以帮助用户能逐步渐进的精确找到目标。

先来看看通常的设计模式：搜索框+分类导航+信息过滤和排序工具

有些网站采用了TAB分类设计方式：

还有下面的这种按照销量和特性来进行二次分类的设计。

当然最为成熟和复杂的分类设计还要属电商网站，在商品标准化的基础上，将各种属性提炼并作为信息分类和过滤的依据，在用户与商品之间搭建了更为精确的关系桥梁。

 

Ø  9-表单

如果网站需要用户一次性输入较多的内容，一般采用分栏、分步骤或情景式的表单设计模式，比如下面的两个例子分别采用了分栏和分步骤的设计模式。

 

有些表单较为简单，但设计师处理细节时很认真，比如下面的表单就设计的比较考究。

还有一些扁平化的表单设计，比如下面的大家可以经常看到的Comments设计。

 

Ø  10-编辑器

富文本编辑器是web2.0网站的必要输入工具。

比如，知乎的编辑器设计的就非常简单，除了简要的格式设置和图片等多媒体上传功能外并无其它繁杂特性，这和其网站的内容性质有关系，毕竟提问和回答并不需要太多的输入特性。

而百度百科的输入则显得非常专业，这也和其属于WIKI这种专业性知识内容的特性有关。

而社交类型的腾讯，其日志编辑器则加入更多娱乐互动元素，比如信纸、头像，图片，音乐等。

而在企业应用中，很多产品都使用了下面的开源编辑器（KINDSOFT和TinyMCE），这类编辑器中规中矩，功能齐全可定制，关键还是开源的，所以得到了大量应用。

 

Ø  11-图片

如何让用户在浏览图片时拥有更好的体验，除了图片本身的内容和显示质量外，也需要交互上的精细设计。一般会采用类似下面案例的实现方式，将多组图片和文字搭配，文字作为图片的介绍和导航，采用图片翻动（用户也可自由浏览）交互方式进行展现。

有些设计更为细腻，比如下面的例子中，从视图边框设计、文字色彩、“ALL”设计、到左右按钮的设计都非常精致，让用户在进行图片浏览体验时感觉愉悦。

还有下面的这个Disney例子，如此优质的图片已经非常吸引人了，再配上圆形的边框设计，及文字搭配效果，让人印象深刻。

对于单张图片的交互设计上，Disney提供了精致的案例。当鼠标悬停在图片上，图片会向右滑动出一个QuickLook的蓝色条出来，提示用户点击进行快速浏览。

还有一些更为宏大的图片处理方式，比如下面的MidWestLiving网站，最显眼的就是中间的大幅图片浏览区域，其设计方式是5张图片顺序排列，当显示其中一张图片时，其它四张图片以半透明方式仅显示该图片左侧四分之一小区域，就好像不管你看哪张图片，其它四张都会以背景的方式起到衬托的功效，这的确是非常靓丽的设计。

有些图片需要作为商品的展示或介绍用途，这时就需要有一些细节处理，比如，局部放大功能。类似下面的例子，这里除了需要选择好背景图片外，还需关注一些细节，比如右侧的放大显示框的位置在设计时最好不要遮挡商品的主要属性（商品名称、价格、打折信息就属于主要属性）。

对于社交类网站的图片处理，除了图片加载效率要求非常严格，在设计时也需要考虑操作便捷，比如腾讯在这方面就做的非常好。图片浏览区域够大，对于图片的主要操作放置在显目的位置，右侧一小半空间留给了浏览者，可以对图片发表意见或和作者进行交流。

 

Ø  12-登录和注册

我一直认为登录和注册是最反人类的体验，如果每个网站都要注册才能登录，你想想用户一辈子得浪费多少时间在输入密码，记忆密码、忘记密码和修改密码的过程中度过。更何况，用户还要担心信息隐私被泄漏，所以需要至少3-5个不同组的注册帐号和密码，这太费事了。

回头来看，虽然反感，且登录和注册功能已经毫无新意，但是在交互设计上还是可以精益求精，有一些精彩的例子值得推荐。

比如，at&t的网站，登录框整体设计看起来显得很安全。特点在于用了黑色的Title配上黑色的锁图标；有着细致的文字说明提示；对忘记用户名和忘记密码都有相应的处理通道。

当你第一次注册时，at&t会让你一目了然注册的环节和步骤，并配以详尽文字和视频说明链接，方便用户学习如何注册。

我们再看看salesforce，网站的登录页面做的并无大多新意，更吸引我的是登录后的体验。

当注册后第一次登录时，salesforce会提供多种角色让用户选择，基于不同的角色，系统会提供适合的功能和操作模式，这的确很人性化。

再看看AOL的登录框设计的很简约清新，试想一下，不管背景广告换成什么色调的图片，这个输入框都会搭配的很好。

再看看下面的注册页面，设计的中规中矩，看起来很专业。让注册的人也更放心。特别是输入框前面的小图标，让整个页面显得更为鲜活和大气。

还有一些网站允许使用第三方的公共帐号进行本站访问验证，比如较为普遍的facebook帐号，下面就是这种场景的登录设计。

如果是弹出式的登录或注册框，该如何设计，下面是很好的例子。

简约弹出设计：

精细弹出设计：

简约和精致相结合的设计风格：

情景式的注册页面，也是很好的设计方法。

还有一些靓丽的设计风格，比如，下面的登录框就和广告设计为一个整体，也非常协调。

还有的网站将登录框直接放在了页面头部，不过一般很少这么设计。

 

Ø  13-消息

网站上的消息一般可归于两种功效：提醒和推广。

先看看提醒类消息设计，一般包括用户间的互动类提醒，关注的内容更提醒等等。知乎将提醒消息分作了三类：评论或回答，关注，赞同。

还有一种是推广性质的消息，比如下面的设计就非常典型，在页面的顶部搜索框边上放置一个消息栏，循环滚动网站的推广信息，让用户更容易聚焦。

这种消息栏也可以设计的更独立，比如下面的例子，在导航和页面内容之间塞了一个横向的消息栏。

如果消息是为了展现一些数据，也可以参考下面的两个例子。，

 

 

Ø  14-购物车

最后，我们看看购物车的经典设计。

Desina的设计亮点在于图标设计和醒目的购物数量及价格，并在购物车可以直接删除不要的商品，并没有那些隐晦的设计思维干扰，的确是面向用户的设计。

下面的购物车设计将shipping信息直接显示出来。

下面购物车设计案例将商品的信息罗列的很详细，便于用户在不用点击查看商品详情也可以决定是否继续付款。

当用户的购物车空无一物时，也许看看有什么新货是很好的推荐方法，类似下面的设计。

 

很遗憾还有很多好的设计案例没有来得及摘入和分析，不过我相信在日后会有更多更好的网站涌现，有一批新的Master设计师出现，让后来者在设计网站或产品时有更好的设计灵感和借鉴。