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

2017-12-15 08:59:00

呈现功能和定义框架

前言

上章我们主要学会通过构建故事版，把人物模型带入场景，来描绘交互过程。并从过程中提炼需求点。那接下来便要开始设计了。

通过之前的准备，我们详细的知道产品目标，适用人群，常见场景，已经主要需求和功能点，及交互的流程操作。集合全部内容开始设计的时候，应该采用自上而下的方式，先全局再细节。过早陷于细节妨碍构建框架，增多无效的开发。

我们要先开始制作低保真但不包含具体细节的方案。这样才能保证再开始设计阶段遵循设计原则，满足人物模型的目标和需求。

当形式设计和行为设计必须保持一致的时候，我们需要提前定义视觉框架和交互框架。

一. 定义交互框架

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

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

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

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

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

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

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

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

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

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

最有效的满足用户的目标；
最有效的满足设计原则；
最适合当前技术和成本考量；
能满足其他条件。

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

3. 确定功能和层级

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

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

比如哪些元素需要大面积使用？
哪些元素可以优化工作流？
元素使用顺序能否改变？
是否符合交互原则？
元素的排布是否有助于人物模型做出决策。

4. 勾画交互框架

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

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

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

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

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

6. 验证性场景检查

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

二. 定义视觉框架

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

1. 开发视觉体验特征

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

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

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

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

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

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

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

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

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

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

2. 开发视觉语言研究

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

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

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

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

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

读书笔记

三. 验证与测试

按照上述步骤进行完整后，需要进行测试。

 测什么：      1). 命名     ：部件／按钮标签是否合理？某些词语反响是否更好？ 2). 组织     ：信息是否进行有意义的分类？用户能否在想找的位置找到特定的部件？常用项目是否易于新用户的寻找？指令是否清晰、必要初次使用和可发现性。 3). 有效性     ：顾客能否有效完成具体任务？有没有犯错？哪里出错？是否经常发生？ 何时测：

测试时间不晚不早，最勾画原型中途测，加最终成型后最终测交替进行。

四. 结论感悟

不仅在工作中，生活中做任何事情都期望有清晰的流程，明确的指导步骤，有助于慌乱紧急下遗漏或顾此失彼。而模型有助于理清头绪，不失去主目标。

本章内容清晰可执行的步骤，每一句都明确指出步骤的意义和操作，解答了很多工作流程中的疑惑，对于如何设定交互框架，视觉框架，如何测试反馈修改，如何做，为什么做，怎样做，原则是什么？答案似乎明了于心，就看实际中如何去执行。

你想要的，你迷惑的，好奇的都已在文章中，只需要学会灵活运用和取舍来投入到实际中去即可。

前期回顾：

下章预告：如何设定良好产品的行为基础

我是糕小糕，糕小糕，正在用思维导图阅读法，攻克经典书籍。希望整理的对你有用。

正所谓：书宜杂读，业宜精钻

你知道吗，你的赞，会让我欣喜若狂
作者糕小糕
公众号糕小糕（gxgoal）