《交互》如何呈现功能和定义框架

姓名：王怀帅  学号：16040410035

转载自：http://www.jianshu.com/p/6ae497a5a3ec=有修改

【嵌牛导读】：通过构建故事版，把人物模型带入场景，来描绘交互过程，并从过程中提炼需求点，紧接着开始设计

【嵌牛鼻子】：交互、功能、定义框架

【嵌牛提问】：当形式设计和行为设计必须保持一致的时候，我们如何来定义视觉框架和交互框架？

【嵌牛正文】：一.定义交互框架

交互框架是指利用场景和需求来构建屏幕和行为草图，完成框架的设计。

按照以往管理，每块内容都有明确详细的操作步骤，来指导大家如何完成一件事，如何把一件复杂的事情分门别类的拆分，从而组合成一个明确的流程。

同样交互设计框架主要分为6大步骤。

1.定义形势姿态和输入法

交互设计的最终内容主要呈现在界面上，而界面的载体千差万别，有手机，电脑，仪表盘，机械操作盘，智能家具等一系列有界面的产品。

再开始定义框架前要详细的了解所设计的平台的熟悉，分辨率，尺寸，交互硬件的，是否彩色，以及再哪些场景下使用。比如车载系统，就要注意为不妨碍司机的注意力，内容要简洁且字体大明显，防止过多关注而发生交通事故。

2.定义功能性和数据元素

功能性和数据元素是指把具体的需求转化成界面上的语言，呈现给用户。使用用户能够理解的语言层级交互来设计界面，完成用户的任务。

我们需要从故事板和场景中提取功能和数据元素，把人物模型想象成真人，来描述他整个操作流程，如何一步步的完成目标。会遇到哪些问题，如何解决，如何反馈给用户。

在这过程中需要遵循设计四原则：

最有效的满足用户的目标；

最有效的满足设计原则；

最适合当前技术和成本考量；

能满足其他条件。

而且再把需求转化成界面时，一定要遵守设计和交互原则，不要轻易改变，迎合用户习惯，减少学习成本。

3.确定功能和层级

当我们有了解平台和功能数据时，就要开始分门别类，根据平台的大小，属性，姿态，外型使用环境，内容优先级进行组织和安排。

同一个界面为了达成一个目标，需要一系列的连环操作，需要确定优先层级顺序。

比如哪些元素需要大面积使用？

哪些元素可以优化工作流？

元素使用顺序能否改变？

是否符合交互原则？

元素的排布是否有助于人物模型做出决策。

4.勾画交互框架

把功能内容数据，以及相关组织和层级确认好后，心中已经有了大致的框架内容，此时只需要拿笔把他快速的画出来，变成视觉稿，来进行反复的敲酌。

勾画交互框架从先整体全局开始，多次反复的修改确认，先忽略细节，关键要快速协作可视性强，及时迭代更新。

5.构建关键路线和情景剧本

为了避免空想臆想，而乱了方向。需要以目标为导向，把人物模型放入场景构件一个故事板，详细具体的描绘操作流程，一步步的如何点击，具有多细节的场景。

第五步和第四步需要反复修改迭代细节，便想象场景便构件故事板，从故事板中想出最优解决方案，勾画原型落实视觉，共同商讨，继而不断精修。

6.验证性场景检查

前面我们主要考虑的是主要操作流程，常用场景，为了兼顾替代场景，不常用但又必须的场景（比如删除功能），边缘场景，我们需要把前面的确认方案放入这类场景做检测，而评估兼容性，以及为额外情况找出专门解决方案。

二.定义视觉框架

视觉框架主要是针对视觉语言，品牌概念，产品领域的风格等研究确定。

1.开发视觉体验特征

视觉特征主要包括产品的音调，语音和品牌承诺。下面有9个具体步骤清晰的列出如何确认视觉体验特征。

1). 收集竞品，形成品牌大纲；

2). 收集大品牌，某领域的巨头，研究如何在产品设计中贯彻品牌元素；

3). 研究同类竞品产品的界面内容和服务；

4). 定性研究受访者，是否“友好”“容易”；

5). 讨论示例的成功，失败或争议，寻找原因；

6). 确定定义，产品所需要的少量形容词，比如年轻，活力，稳重等；

7). 记录多义词的具体含义；

8). 思考竞品，在自己产品上保证有独特性；

9). 团队一起互相协助讨论产品特性。

2.开发视觉语言研究

视觉语言主要包括定义颜色，类型，控件。此时一般拿出3-5种完全不同的视觉方案，包含主要操作流程和主要界面，选择合适的视觉方案，确认后延续到后续的设计中，保持视觉的统一性。

把市场营销风格指导转换成对用户交互产品或网站有意义的形式和感觉。

3.将已选择的视觉风格用于屏幕原型

把确认好的视觉方案放入实际使用场景中，综合协调把控整体感觉。

还有两种是定义工业和服务框架，主要是工业设计中涉及多种多样的载体和场景，而非手机，电脑大众化的场景，则需要专门的研究对待。