UI设计师小白入门交互规范教程

有很多指标作为参照，最直观的问题可以归结成有没有出过交互规范。交互涉及到逻辑性，心理学，视觉设计等多个领域，具体到项目需要把控细枝末节，同时也具备归纳总结提炼的功力堪称完美。

每天充斥着各种会议，需求沟通，整段的时间都少之又少，再不会归纳总结可能觉得每天都在打酱油吧。曾经有句经典对白，不会做视觉规范的设计师只能算是个美工。设计师看到「美工」这两个字眼，就像开发工程师看到「bug」一样会瞬间燃起斗志，交互的范畴同理适用。

 

先有产品，后有规范？

这就像是先有鸡还是先有蛋一样，众说纷纭。规范顾名思义在经历了不同产品模块，不断迭代的过程中，对于产品设计者和开发者来说都需要一个实施标准来说服对方。当陷入到拉锯战，双方站在天平的两端都没有答案的时候，急需标准化的东西来推进产品发展。

同时在不断迭代的历程中，很多模块为了保住功能做了一些修改，这些小的修改积累到一定程度就会对产品整体的一致性方面提出挑战。

产品中的需求功能点不断完善的过程中，涉及到业务流程的场景也会丰富起来，很多的组件适用于不同场景也成为产品中必不可少的一部分。统一的对这部分已经积累下来的真实组件形成规范有利于开发和再利用。

所以先有产品，后有规范更为合理。

规范从哪儿开始？

交互规范分为web端和移动端以及其他配合产品使用的设备端，比如iwatch等。web端规范需遵循诸如一致性，连续性，用户可操控性的交互原则，熟悉windows和Mac的操作方法。相对于移动端以及其他设备端口需要熟悉平台本身的交互设计规范。

• iPhone 交互设计规范
• material design交互规范
• iwatch 交互设计规范

熟悉了平台规则，来建立产品自己的规范体系吧。

 

划分规范体系

规范是产品系统化的产出，从大的方面产品的整体框架层面说起，包括标题栏、顶部导航、底部操作栏等，共同部分包括各类信息提示和组件，到产品各个模块相关的业务组件等。

整体框架规范

• 界面规范
• 标题栏
• 顶部导航
• 底部操作栏
• 页面跳转逻辑

提示信息规范

• 预先信息提示
• 操作类提示
• 谨慎类信息提示
• 警示类信息提示
• 悬浮类信息提示

因为产品类型不同，组件列表在这里就不一一列出了，大家可以尝试总结一下。交互规范对每种组件进行详细描述，包含三部分内容：

• 构成元素，控件由哪些元素组成（文字，icon，操作按钮等等）。
• 使用场景，控件应用于哪些场景，什么时候会使用到，触发条件等。
• 细节说明，描述控件具体内容，在不同场景中如何呈现，特殊场景描述等。

小结

规范是形成体系化的标准，制定标准需要遵循4方面原则。

• 统一性和标准性，导航结构一致、响应方式一致、文案表达方式保持一致、信息提示一致、功能名称保持一致。
• 信息清晰，导向明确，主次布局合理、逻辑清晰、导航层次清晰。
• 反馈及时有效，用户操作及时反馈、准确、简单、直白、具有导向性，don’t make me think。
• 防止错误，不可修复操作及时提示，预防纠正错误，错误页面可及时返回，掌控权留给用户。