>>>  創業先鋒 眾人拾柴火焰高  >>>

簡體     傳統

小早注：本文为作者斜阳君阅读《破茧成蝶：用户体验设计师的成长之路》后的写下的读书笔记。

从抽象的需求落实到具体的交互界面并不是一件简单的事，其中的关键就在于处理信息和任务。需要展现哪些信息，如何组织信息结构，如何引导用户完成任务，仔细分析这些问题后，需要将解决方案用一系列相关联的界面草图表达出来；然后再细化草图为具体界面，同时要考虑如何让用户轻松、愉悦、高效地浏览和操作；最后，再做一些锦上添花的设计，让用户惊喜于美妙的产品体验。这就是设计规划的过程。

信息的组织与任务的设定

（选图以电影票产品为例）

信息分类：除了逻辑归类以外，卡片分类也是一种不错的方法。简单来说就是将需要分类的信息写在卡片上，招募用户来对卡片进行分类，以检验设计的信息结构是否合理。

导航：导航有三个关键点，其一是要让用户明确知道自己在信息结构中所处的位置，其二是深广度的平衡，其三需要为常用功能设置快捷入口。

设计主要任务与次要任务：主要任务即主线流程，如电商产品中的购买流程；次要任务则是在完成主要任务时可能涉及到的任务，如购买过程中的浏览，比价，收藏等。确定了任务流程，才能设计页面流和具体交互细节。

分解任务：确定了主要任务后就需要在设计中突出主要任务，而第一步就是将所有的用户任务分解为具体的行为操作（子任务）。

任务分解

排布任务优先级：分解完后就可以排优先级了，可按使用人数，使用频率，重要程度来排。这里的优先级顺序并不是操作流程顺序。

任务优先级

组织合并相关任务：将次序相同，操作类似，界面类似的任务组合起来，合并为同一组模块展现。根据优先级，将重要任务放置在重要位置，同时进行视觉突出。

组织合并相关任务

引导用户：引导用户完成任务的方法有许多。相似性引导是利用相似的颜色或样式暗示用户某些元素的关联性，方向性引导是利用指向性箭头或清晰的视觉纵线指明流程的方向，运动元素引导则是利用运动元素的轨迹牵引用户的视觉往下一步走，向导控件用来为多步操作中的用户提供预期。

向导控件

易用的界面

简化复杂操作：减少冗余步骤和干扰项，将复杂操作转移给系统（如地图app的自动定位起点），简化操作方式（Chrome浏览器在地址栏直接进行Google搜索），优化操作过程（提供合适的默认选项，适时的帮助提示和及时的反馈）。

处理过大的信息量：界面的层次感（逻辑相关的在视觉上分为一组，内容或重要程度不同的在视觉上体现出差异，逻辑上有包含关系的在视觉上进行嵌套），突出重点信息&隐藏次要信息。

感性的界面：要做到人性化的设计就不能将产品逻辑原封不动地展示给用户，而是要在理性规划的基础上用情感打动用户，此谓感性的界面。如某些网站的登录界面用精致的大图吸引用户，某天气应用用颜色的深浅体现气温的变化。切记逻辑正确的设计可以保证产品是可用的，但未必易用。

纸面原型

规划好信息组织和任务设定后，先别急着打开原型设计软件，可以在纸上先画画。纸面原型可以看作是最终设计方案的雏形。其中，最需要关注的是框架、流程、基本功能和内容，可以忽略设计细节。

标准原型

标准原型一般包括以下几个部分。

信息结构：内容功能在页面层级中的分布，综合考虑产品逻辑和用户习惯。

任务流程与页面流程：任务流程展现用户使用产品时各种操作的结果和相应的系统反馈。页面流程更为细化，展现用户操作过程中具体页面的表现和跳转。

线框图与交互说明：线框图代表原型中静态的部分，而交互说明则代表动态的部分。动态效果有时候没有交互说明来得便捷，某些特殊动画效果可用交互说明与动态效果相配合的方式来说明。

线框图+交互说明

交互说明类型：
限制：范围值，极限值（字数，是否折行）
状态：默认状态（初始值等），常见状态（如未登录和已登录），特殊状态（如内容为空）
操作：常见操作，特殊操作（极端情况下的操作，可与开发一同商讨），误操作（如选择错误的值），手势操作（移动产品）
反馈：提示，跳转（是否为新窗口打开，app转场方式），动画

一些app的转场方式

线框图技巧

通过明暗对比表达界面元素优先级。

不使用截图与颜色，以免对视觉设计师造成干扰。

合理的布局：在确定界面布局时，提前和视觉设计师沟通商量，避免不必要的返工。

遵守栅格规范：交互稿中的字号、间距尽量符合视觉要求（如间距最小为10像素等）

栅格布局

Web页面标记第一屏高度：在1024像素×768像素分辨率下，第一屏高度的极限情况可定为570像素（考虑到不同浏览器的高度不一致）

整理样式规范：定义好通用的样式规则，清楚地表达元素优先级，减少视觉设计师的工作成本，同时也有利于帮助他们完善视觉规范。

样式规范举例

了解视觉趋势，并应用到线框图设计中。

交互说明技巧

尽量使用真实、符合逻辑的数据内容，以防开发人员的困扰。

不遗漏特殊状态的描述。

某些特殊状态

避免过长的流水账式的说明（可用流程图描述流程，用表格罗列状态，用if...else和case等程序语言组织说明文字，制作动态效果）。

将重复出现的元素模块化，只说明一次即可。

有改动要保持更新。

设计规范

设计规范包含很多内容，比如交互规范、色彩规范、logo规范、UI图标规范、控件规范等等。完善的设计规范可以保持产品的一致性，给用户营造熟悉的环境，同时也提高了设计工作效率（功能组件的复用），对品牌的建设也有很大的好处。

审核设计稿

核验视觉设计师对交互稿的理解是否正确（美观性与逻辑性的平衡）。

拒绝毫无发挥的视觉设计。

关注交互细节和状态标注（按钮的各种状态，间距等）。

在审美方面不要过分干涉。

对接开发

设计阶段：了解是否会有技术难点。

设计完成后：当面沟通设计要点。

开发阶段：持续跟进，解答问题。

对设计稿进行尺寸标注和规范的整理，减少前端的工作量。设计走查确认页面细节是否符合设计稿，包括交互和视觉两方面。

交互：交互动作，控件的各种状态，极限和出错情况，默认值，悬停状态等。

视觉：视觉样式，颜色，尺寸间距，图片质量，不同分辨率下的展现等。

可用性测试

上线前一般用可用性测试检验设计方案是否靠谱，以下是一些技巧：

给出使用目标，而不是直接的操作。

尽量选择最重要，最频繁的任务进行测试。

用户数量的选择：一般小的功能点，测试3～5名用户即可。新产品、较大的改版和重要功能，可以测试5～10名用户。

鼓励用户采用「出声思维法」。

不要忽视现场反应，如表情和下意识的动作和语言。

考虑使用场景，尤其是移动端产品。

灵活运用可用性测试，可以邀请不熟悉项目的同事或朋友，一般低保真原型即可。

可用性准则

可用性问题严重等级

可用性测试考量标准

A/B测试

预上线阶段一般用A/B测试的方法检验设计方案是否靠谱。

A方案和B方案要保证同时发布，同一用户应该自始至终只看到其中一种方案，同时要保证单一变量。

用户反馈和产品数据

上线后一般通过用户反馈和产品数据来评判设计的优劣。

用户反馈的来源有很多，主要包括客服（产品反馈入口），各大社交平台，应用市场等等。收集好用户反馈后做好过滤和分类，然后按重要程度去解决问题。

产品数据综合反映了设计，技术，运营的合力，设计关心的主要是用户的行为数据，如页面间的跳转率，某按钮的点击量等。

本文作者：斜阳君    文章来源：简书

小早注：《破茧成蝶：交互设计师的成长之路》由资深的一线用户体验设计师编写，书中融入了宝贵的职业经验和专业思考，对于交互设计师、视觉设计师、用户研究员等具有一定参考价值和借鉴意义；同时，该书也适用于产品经理、运营、开发等用户体验相关人员以及相关专业的学生阅读思考。作者刘津，现为阿里巴巴交互设计专家，北京大学数字艺术系硕士。作者李月，网易移动中心交互设计师，设计艺术学硕士。

互联网er的早读课 2015-08-23 08:43:39