设计实战：以不变应万变，交互规范的制作与思考

设计语言

为了输出的统一性，规范应该有自己的基本原则，并围绕原则进行制作。有点校训、宣言、口号的感觉。以下是举两个案例，可供参考。

– 《网易移动交互规范》

Aesthetic Integrity 整体美学、Consistency 一致性、Direct Manipulation 直接操作、Feedback反馈、Metaphors 隐喻 、User Control 用户控制

– 《iOS Design Principles》

规范的规范

我们在做规范，那在设计规范时候更应该有自己的规范。每位设计师都有自己的设计风格，但我们在做同一件事情，需要统一交互文档内的所有内容形式，在文档排版部分，需要统一标题字体、内容字体、段落分部、流程链接；在交互说明部分，需要包含组件场景、交互流程、用户行为、交互样式、界面元素和样式。下图参考：

团队协作

如果团队内有多个交互设计师去做设计规范，产出物质量和统一性就至关重要。质量可以通过加入审核环节达到目的，统一性则要依赖协同以确保各个设计师的信息以及手中资料同步。

现在的交互原型软件都是有在线协同功能，设置在一个服务器中就可以。协同时需要注意，要保留每一次的修改记录和设计联系方式，修改完毕最好要告知其他设计师，如果是多个控件组件大改，则需要通知到所有人。如下图参考：

持续迭代

在设计任何产品都不可能一次就完美，在设计交互规范时也需要按照优先级排期。基础的、必要的放在第一期，复合型、复杂的向后放，随着产品的逐渐完善，我们的交互规范也会越来越完整。

迭代的时候可以从三个方面入手：

• 每个模块自身的优化。在之前的版本投入使用后可以找用户收集使用反馈，模块是否有用，是否通用，能够提高多少效率，能不能做到直接使用……针对反馈意见进行模块优化。

• 丰富模块。将更多内容池中的组件模块规范化。

• 更多应用场景。经过一系列迭代后交互规范可能进入维护阶段，更新频次降低。这时候就需要将其“产品化”，可能是一本白皮书《交互设计规范》，可能是和视觉样式、前端代码封装组合的前端设计指南，将自己的设计规范扩散到更多领域。

推广使用

规范要真正有人用才能体现价值，从规范的效益模型中也能看出，对于团队和企业来讲，使用规范的人数是与规范带来的效益是成直接正比的。使用的人越多，越能够削弱制作规范的边际成本。 推广时（主要是企业内推广，企业外推广就更复杂了）可以包含但不仅限于以下方法：

• 媒体渠道：宣讲会、公司知识论坛、团队公众号、海报展架、EDM、手册；

• 行政渠道：通过各个团队负责人进行推广；

• 个人渠道：规范使用过程中的口碑宣传，尤其对于刚进如团队和企业的新人最为有效；

• 资源互换：与其他规范，如视觉设计规范、前端规范等绑定推广，以及相关团队内部的互相推广；

三、设计方法

前面说了基本的设计流程，本章会介绍组件的设计。 在这里套用一个不算过时的方法论-Atomic Design 原子设计。概念很简单，就是将复杂的组合拆解成最小的单元素，再将这些元素重新组合，变成新的分子。原子设计的五个阶段分别是：

• 原子：为网页构成的基本元素。例如标签、输入，或是一个按钮，也可以为抽象的概念，例如字体、色调等；与我们相对应的是基础元件

• 分子：由原子构成的简单UI组件。例如，一个表单标签，搜索框和按钮共同打造了一个搜索表单分子；与我们相对应的是基础组合控件。

• 组织：由原子及分子组成的相对复杂的UI构成物；与我们相对应的是复合组件。

• 模版：将以上元素进行排版，显示设计的底层内容结构；与我们相对应的是模式，各类功能模块。

• 页面：将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例；最后是整体的页面。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!