设计协同工作流：设计系统

设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包，用于搭建和组合产品与服务。

为什么需要搭建设计系统？设计系统解决了以下问题：

1）设计高效率：快速了解产品设计全貌（包括设计原则、风格，样式、组件）多人协作如Google docs共享的方式高效。

2）协作高效率：对齐研发的实现距离单位，高还原度，及跨学科跨岗位间的高效沟通。共享的词汇表，有用的文档使测试更容易，并作为未来协作友好的基础。

1. 什么是设计系统？

设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包（UI 模式库和代码），用于搭建和组合产品与服务。鼓励岗位之间的合作，减少沟通障碍。一个好的风格指南可以帮助设计人员和开发人员了解他们工具箱的工具，并为如何正确使用他们提供规则和最佳实践。

2. 设计系统的前世今生

从1977年ChristopherAlexander在《A Pattern language》中首次提出模式的概念anirbnb、Salesforce 、Atlasssian、Spotify、AntDesign、Fusion Design先后对外公布的设计系统，历经了43年的演练。

3. 设计系统的构成

设计系统由风格指南，基础构件，模式库，规则组成。据不同项目，构成要素可以相应重构与取舍，但风格指南，组件库，设计原则必不可少。搭建完成后在项目中的版本迭代若只是视觉改版则只需改风格指南。模式库的组件是大量在UI设计师日常工作中，组件分为：按钮卡片、图标、导航、列表、下拉框、搜索框、表单、分页、进度栏、弹框、加载、侧边栏等。

我们创建各种组件，用于构成界面，那么关于组件：

• 什么是组件？组件是可以在你的设计中反复使用的页面元素。
• 何时创建组件？在界面设计中发现两个页面中出现了重复的元素时可考虑是否要将它转换为组件。
• 如何创建组件？根据「原子设计Atomic Design」理论将组件进行原子级的结构拆分,这不是一个线性过程，而是一个思维模型。

4. 如何搭建设计系统

搭建要点：创建可维护的设计系统，要建立长远成功的设计系统。

• 建立设计体系团队，合适的人员和流程来确保系统的稳定发展。
• 适应性强，使其易于维护。

新模式的请求是如何处理的？发现错误的时候会怎样？谁批准设计系统的变化？负责保持文档更新的是谁？改变系统的UI模式？团队如何了解变化？

搭建步骤流程：

• 共创者：UI+ UI Dev
• 创建工具：Sketch(UX设计工具) + Zeplin（团队协作工具+ Storybook（github设计系统开源框架）
• 协作方式：设计师与研发不再是线性的瀑布式协作模式，而是共创的协作模式

步骤：（以调色板为例）

• 统一命名通过点击Sketch顶部菜单栏Plugins-Zeplin-Export Selected可配色版的色值直接同步至Zeplin的style guide。
• 前端研发可在Zeplin style guide tab: Color & Text Styles下查看，并把产品配色封装为配色的变量保存至storybook。

1）规则

设计原则：有助于塑造我们的设计方法，并协助我们在产品设计过程中评估权衡。jared M.Spool的提出验证原则的方法“6个违反直觉的测试”：

• 它直接来自研究吗？
• 它在大多数情况下是否可以帮助您说“不”？
• 它是否将您的设计与竞争对手区分开？
• 在将来的发行版中您可能会扭转吗？
• 您是否对该项目进行了评估？
• 它的含义是否被不断测试？

好的设计原则应具备：

• 足够具体以进行衡量；
• 在整个产品流程中工作；
• 激励您的团队创造更好的结果；
• 挑战中等和半定结果；
• 简单而令人难忘；
• 将您的产品与竞争对手区分开来。

定义出色的产品原则：研讨会的想法。

材料：便利贴，钢笔，墙，零食；参与者：召集项目中的利益相关者：首席工程师，产品经理，设计师，市场营销等。在10分钟内写下至少需与竟品区别8种品质贴在墙上，将类似的便利贴放在一块做聚类。回答以下内容并让每个人都在注释中进行解释。（如果我们的产品是动物/一个人 /公司/电影/产品，那就是______又为什么呢？）要特别注意区分产品的原因和任何描述性属性后聚类。

花10分钟描述希望产品对用户的感觉的3-5条原则，写下希望产品避免使用的2-3个描述符并介绍自己的原则。最后列出8–15个潜在原则，共享利益相关者，在项目中沟通磨练形成最佳内容，确定后尽一切努力贯彻在项目团队意识中。

2）风格指南

虽然风格识别指南是相当触觉的，设计语言指导方针更难确定。设计语言风格指导阐明一般的设计方向、哲学和方法具体项目或产品。设计师萨曼莎·沃伦(Samantha Warren)在设计 style tiles 时做出了回应，这是一款比情绪板更有形的可交付产品。

在视觉设计语言中，发散视觉风格推荐 The 20 second gut test 方法论。这个练习使涉众在早期接触到各种美学，通过品味差异有助于达成一些共同的审美价值。视觉设计师可抓住这些洞察开始将这些美学价值转化为项目的视觉方向。

在项目启动一部分会议上，向涉众每20秒/个，展示20个相关网站，选择特定于行业的站点及视觉上有趣的站点，为了增加可信度将网站logo改为项目logo。

（编辑：晋中站长网）

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