「交互设计」设计框架的六个步骤！！！

Q：什么是设计框架？

设计框架（design framework）  

概念：定义了用户体验的整个结构，包括底层组织原则，屏幕上功能元素的排列，工作流程，产品交互，传递信息的视觉和形式语言，功能性和品牌识别等（包括 交互框架，视觉设计框架，工业设计框架）

---

Q：什么是交互设计框架？

交互框架设计（interaction framework）：交互设计师利用场景和需求来创建屏幕和行为草图。（简单的说就是绘制界面交互线框图）

---

Q：如何定义交互框架？

交互框架定义了高层次的屏幕布局，产品的工作流，行为和组织。

---

Q：交互框架定义的六个过程？

1.定义形式要素，姿态和输入方法（什么端的产品，用户如何交互，输入的方式是怎样的）

2.定义功能性和数据元素（将功能转换为界面上的具体表现--例如  需求：发送邮件，在界面上要呈现的功能元素：发送按钮）

3.确定功能组和层级（将所有的功能元素分组，排列优先级）

4.勾画交互框架（画图）

5.构建关键线路情景剧本（常用／重要功能的走查）

6.运用验证性场景来检查设计（不太频繁／不太重要功能的走查）

框架定义的过程

---

Q：这六个过程具体如何实施？

步骤一：定义形式要素，姿态和输入方法（什么端的产品，用户如何交互，输入的方式是怎样的）

1.形式要素（form factor）指在产品设计前期考虑产品是web应用，手机端应用还是公共场所的信息亭等 。考虑每种形式要素对设计暗含了什么限制

2.考虑产品的基本姿态（posture），确定该系统的输入方法。

产品姿态是指用户会投入多大的注意力和产品互动，以及产品的互动会对用户投入的注意力作出何种反应

输入方法是用户和产品互动的方式。（同时受到产品外形和姿态，人物模型的态度，能力和喜好的驱使）。包括：键盘，书包，小键盘，拇指板，触摸屏，声音，游戏杆，遥控器，专门的按键等

确定该产品的主要输入方法（例如大多数电脑应用／网站都需要键盘和鼠标两种输入方法，而ipad通常是用手指触摸或者是手绘笔）

---

步骤二：定义功能性和数据元素  （将功能转换为界面上的具体表现--例如  需求：发送邮件，在界面上要呈现的功能元素为：发送按钮，存入草稿按钮等）

功能性和数据元素代表着界面中要展示给用户的功能和数据。

功能元素具体指的是我们将需求转化为具体的功能元素，继而展示在界面上的内容。（简单的说就是，我们将整理好的需求转化为具体的功能点以后，具体呈现在界面上的东西。）

---

步骤三：确定功能组和层级 （将所有的功能元素分组，排列优先级）

具体步骤为：将列出的功能按照重要性进行优先级的分组

此时需要考虑以下主要问题：

1.哪些元素需要大片的视频区域，哪些不需要？

2.哪些元素能够容纳其他元素？

3.容器如何组织才能优化工作流？

4.哪些元素需要捆绑使用？哪些不是？

5.相关联的元素使用时顺序如何？

6.哪些元素有助于人物模型作出决定？

7.采用何种交互模式和原则？

8.人物模型的心理模型如何影响元素组织？

---

步骤四：勾画交互框架（画图）

开始阶段关注整体，不要局限在细节。可以以纸面原型，做前期的沟通，等确认后再输出细节。

这个阶段根据具体操作为：根据我们确定的功能元素，以及给功能元素排布的优先级，在界面上进行排版。最先开始是以纸面原型（手稿）绘制整体，不断的调整再用Axure或其他线框软件绘制出基本确定的交互线框图，跟其他同事沟通进行交互稿的调整

---

步骤五：构建关键线路情境剧本（常用／重要功能的走查）

本步骤的目的：交互的走查，针对具体任务进行用户使用流程的走查，继而对交互进行调整

关键线路情境剧本描述了人物模型如何使用交互框架词汇同产品进行交互。人物模型最频繁使用界面的主要路径，通常是每天都使用的路径（例如QQ邮箱，关键线路活动包括了读写邮件）

用关键线路情境对用户动作和产品反应中更为具体的细节进行仔细考量。关键线路情境以任务为导向，必须在细节上严谨地描述每个主要交互的精确行为，并提供每个主要线路的走查。

故事板

采用低保真草图和关键线路情境剧本的叙述，可以充分的描绘设计方案如何帮助人物模型完成其目标。

故事板借用了电影制作和动画片中的技巧，通过类似的过程对设计想法进行计划和评估。

产品和用户间的每个交互都可以用一个或多个框架或者幻灯片来描述，通过故事板，我们可以使交互的连贯性和整个过程接受现实的检验。

---

步骤六：通过验证性的场景来检查设计 （不太频繁／不太重要功能的走查）

本步骤的目标：针对不太频繁使用和不太重要的交互上，通过验证性场景，指出设计方案的漏洞，并根据需要进行调整

按照如下顺序，解决三类主要的验证性场景

1.替代场景  指人物模型决策过程中，关键路径某个点的替代／分岔点（例如用户A 决定通过电子邮件而不是电话回复用户B）

2.必需使用的场景   指那些必须要执行，但又不经常发生的动作 （例如 清空数据，升级设备）

3.边缘情形场景  指的是非典型情形下一些产品必须要有却不太常用的功能（例如 用户A想添加两个重名的联系人  就是一个边缘情境场景）

---

以上。

缘小蛋

文章内容来自《aboout face 4》 重点／读书笔记

---

推荐阅读

「交互设计」需求定义的五个方法！！！

欢迎设计师小伙伴们 关注／交流／一起玩设计～(●'◡'●)ﾉ♥