大师级别的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相映成辉，这种设计大气而稳重，二级导航更多的使用图片来刺激用户的选购欲望，在图片中配以醒目的按钮来提示用户点击。还有一个更赞的细节，其导航的颜色是采用的渐变色，上面的主要功能显得更为醒目，下面的非主要功能则略显灰暗，也让网站显得层次分明。

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

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

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