交互设计实用指南系列(1) – 操作入口明确_网页设计教程

推荐：交互设计实用指南系列(0) – 我们眼中的交互设计
交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场

“操作入口明确”，就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”，指的是产品内部不同模块之间的转接元素，例如在Web产品中，按钮控件、输入框、文字链等都属于操作入口；“明确”指的是入口的视觉感是清晰的、可识别的；“合理”是指入口的出现是符合用户操作逻辑的，适时的。

之所以要提出“操作入口明确”，是因为用户在使用产品的过程中，往往遵循的是可分析的行为逻辑。对于产品本身而言，必须有相对应的操作提示来引导用户最有效地获取信息，还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户，那么操作入口就是连接各个子页面的枢纽。设计师的终极目的， 就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。

对于基于WEB的电子商务而言，核心价值是信息资源，而能否将这些海量数据合理地推送给用户，则是产品生存的关键。操作入口的设计，甚至可以看做 “通过对引导方式的优化间接达到对信息资源的归类”——这很像图书馆中的书类标签管理，用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的，功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感，使其绝望地湮没在茫茫的信息海洋中。所以，明确合理的操作入口设计，是对产品“有效性”的保障，更是对用户体验的尊重。

那么，在具体的设计中如何做到“操作入口明确”呢？

1、强化重点，弱化周边

星爷《唐伯虎点秋香》中的精彩片段，一声“美女”换来诸多牛鬼蛇神的壮观回眸和秋香MM的惊鸿一瞥——“美女这东西是要需要比较地”。WEB产品也 一样，尤其是海量信息的电子商务网站，由信息架构衍生出的各类功能入口相当复杂，部署在页面的各个角落，一不留心就被疏漏。通常有两种方法来解决这类问题：一是增加入口数量，即“广撒网”，同样的功能入口有多个，以此增加功能模块的使用率，不过这种方法存在较大隐患，后面会详细分析；二是“强化重点，弱化周边”，即在视觉上将入口模块凸显出来，采用精妙的布局，并适当弱化周边的信息展示，加大二者的权重对比，客观上增加用户识别的准确性。

例如地球人最熟悉的Google首页：

www.google.com

浓郁艺术气息的LOGO作为唯一的色彩元素有效地抓住了浏览者的视觉中心，输入栏和Button作为功能核心占据了页面的心脏位置，这种组合让用户 通过第一视觉便能够准确理解页面所表达的信息逻辑——“输入关键词”+“点击按钮”=“Everything you want”。

再看一个反例，如图：

download.pchome.net

面对这样一个下载页面，面对这样一个抢眼的大Button（标记②），相信即使是电信用户，也会很大方地支持下网通……但是，点击之后弹出的却是下载遨游浏览器的窗口，崩溃之余再仔细查看，终于发现在华丽的广告位旁边蜷缩着一个毫无特色的“立刻下载”（标记 ①）——刹那间，无数用户被这种饱含“让贤”哲理的设计深深震撼了！

2、入口信息明确易识别

上面提到，增加入口数量虽然在一定程度上有助于提高功能模块的使用率，但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”， 入口越多，选择越多，“过多的选择等于没有选择”，这势必会造成用户使用产品时的疑惑：这几个链接和按钮好像都一样啊，该选哪个呢？所以，要根据页面本身 的信息量严格控制同功能入口的数量，保证有效的识别性，让用户迅速找到正确的入口。

这次用我们可爱的兄弟产品“支付宝”为例，看看改版前后的细节变化：

改版前

改版后

通过对比，我们可以发现，管理页面中部分相同功能的入口出现了多个，对于新手用户来说，很可能造成不必要的困惑；而在新版本中，每个功能模块只有一个入口，明晰简洁。

另外，对于入口元素本身而言，需要通过适合的展现形式来提示用户此入口的功能属性。例如，一个标准的按钮控件，用户会知 道“可以点击”，但点击后会发生什么交互行为，需要通过其他视觉元素进行信息提示（如按钮上的文字或者具有标识性的ICON），告诉用户当前的情况和可行的操作方案，这点有些类似生活中的“指示设计”。

下图是eBay首页的注册区，通过按钮文字和辅助文本信息，新手用户也能够很清楚地了解眼前这两个Button代表的意义。

www.ebay.com

3、根据用户定制合适的入口

交互设计离开用户研究便是闭门造车，在设计产品操作入口的同时，要充分考虑到不同用户的需求。用户划分维度很多， 《About Face3.0》中根据与产品的相关度将其分为“新手”、“中间用户”和“专家”。这三类用户对产品的了解程度并不一致，操作行为习惯也大相径庭，若再通 过其他维度将其细分（如“有无目的”、“性别年龄”等），会相当复杂，在对产品进行进一步优化时，应当考虑到操作入口对不同用户的适用性。

“在交互和界面设计中，如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。虽然大多数中间用户倾 向于保留在这一类型中，但新手不会永远是新手。要维持高水平的技术程度很困难，因此专家门也在快速变化。新手的变化更快，新手和专家随着时间推移都会倾向 于成为中间用户。”（《About Face 3.0》第三章），所以针对用户的定性研究和定量分析会显得尤为重要。不过，无论如何划分用户人群，有一点共性是至始至终的——产品操作入口设计的终极目 的是让用户迅速有效地完成核心需求。

小 结

综上所述，对于信息庞杂的电子商务网站而言，出色的操作入口设计好似科幻片中的“星际之门”，能让用户随心所欲地抵达任意空间，享受完美的交互体验；同样，失败的设计也能让用户犹如坠入希腊神话中恐怖的克里特岛迷宫，郁闷不可自拔。“操作入口明确”，是所有优秀交互产品的 共性之一，也是每一个设计师“想用户之所想”的职责所在。

分享：网页界面设计速成