从需求到设计：框架和细化

读《About Face3》

《交互设计精髓》是一本很全的交互设计指南书，第一遍读这本书时感觉十分枯燥，能一次性从头看到尾很需要勇气，但不得不说书中的每个章节都非常实用。刚刚回顾了一遍本书的第七章，分享一下自己的读书笔记。

设计框架

毫无疑问，从需求到设计，首先要定义框架。对于互联网产品，通常需要定义交互框架和视觉设计框架，有时也会包括工业设计框架。

回忆一下自己刚开始做项目时的经历，过早地把注意力放在小细节的部分的确会影响对整体框架的把握，直接后果…当然是视觉稿做的差不多又回来改框架啦。

在定义框架的时候，手绘线框图也是很赞的，这样的草图弱化了视觉方面的细节，有利于鼓励大家对所提设计方案进行讨论。书中提到了Carolyn Snyder 的《Paper Prototyping》，没有中文版，但的确值得一看。

定义交互框架

通常情况下，主要有以下六个步骤，3－5的顺序往往因设计师的习惯而异。

1. 定义外形因素、姿态和输入方法

这是第一步，实际项目中这一步往往很快就能出结论，尤其是移动端App。

2. 功能和数据元素

• 数据元素通常是交互产品中的一些基本主体，比如图片、电子邮件、便签、订单等，他们是符合用户心理模型并可以进行操作的基本对象。数据元素之间也会有包含与被包含关系，如电子邮件中包含的图片。

• 功能元素包括对数据元素操作的工具，以及输入或放置数据元素的位置。
  从数据元素到功能元素，我们的设计开始变得清晰起来。

我们可以把即将设计出来的这款产品想象成人类，他需要和其他人类（用户）打交道，并帮助人类完成一些事情。照着这个思路，产品当然就更符合用户的心理预期啦。

3. 决定功能组和层次

决定好了数据和功能元素，现在要考虑将它们按不同层级进行分组。在分组时，我们需要思考诸如以下问题：块区大小，容器相互的包含关系，如何组织能优化工作流程等。

这个阶段可以做一份信息架构图草图，并逐渐进行完善。

4. 勾画出大致的交互框架

先在纸上绘制草图，这个过程可能需要反复修改原型，直到草图上的内容能基本确定，这个时候就可以开始使用如Axure 等原型工具来绘制原型图啦。

5. 构建关键线路场景剧本

使用故事板来展现场景剧本，在这个过程中可以充分地想象和描绘我们的软件如何来帮助用户完成他们的操作或使用目标。同时，故事板也为自己的设计提供了依据，若发现不合适的地方可以尽早在设计稿中进行修改。

6. 通过验证性的场景剧本来检查设计

区别于上一步的关键线路场景剧本，这一步我们需要构件验证性的场景剧本来证实设计方案的可行性。举个栗子：小明每天晚上用微信和女朋友聊天，但是今天小明有个好消息要和女朋友分享，他不想输入文字聊天，而是想用语音电话来分享开心事，这算是一项关键线路的变种场景剧本。

除了⎡关键线路的变种场景剧本⎦，还有⎡必须使用的场景剧本⎦、⎡边缘情形使用场景剧本⎦。必须使用的场景是必须要被执行但又不常发生的情况，比如清空应用缓存、系统设置等；至于边缘情形使用场景剧本，是指必须有但不太常被碰到的情形，这往往是程序员的关注重点，但设计师不值得在这方面花太多功夫。

有关常见的iOS界面框架，自己曾经小结过 →简书链接

定义视觉设计框架

定义视觉设计框架通常分为两步：

1. 开发视觉语言研究

关注颜色、类型、小控件样式，以及界面风格的确定，如MD 风格、拟物风格等。
在向相关人员展示视觉风格方案时，通常需要3-5 套进行比较和筛选。若觉得不同方案差别不显著，我们可以出1-2 套“极端”方案：使用夸张的颜色让不同方案之间的区别更明显，这种方法据说很凑效。

2. 将选好的视觉风格变成屏幕原型

将视觉风格移植到几个主要界面上，稍作调整，至此视觉风格就基本定下来了。

定义工业设计框架

移动端或Web 端几乎不会涉及到工业设计框架，自己也没有接触过产品工业设计流程，这里就先略过。

细化外形和行为

定义好各种框架，接下来就是细化外形和行为，具体来说就是高保真原型和交互文档的产出。

原型的高保真程度因项目需求和时间周期而有不同，对于有设计规范文档的公司或团队，这一步会进行地很快。

设计验证和可用性测试

可用性测试用来发现用户操作过程中的细节问题：标签分层、操作顺序、优先级等，在产品上线之前，这个过程可帮助我们完善产品的细节体验。