产品经理设计协同工作流：设计系统

1、设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包，用于搭建和组合产品与服务。为什么需要搭建设计系统？设计系统解决了以下问题：1）设计高效率：快速了解产品设计全貌（包括设计原则、风格，样式、组件）多人协作如Google docs共享的方式高效。2）协作高效率：对齐研发的实现距离单位，高还原度，及跨学科跨岗位间的高效沟通。共享的词汇表，有用的文档使测试更容易，并作为未来协作友好 的基础。设计系统包括完整的设计价值观和原则、设计标准、场景定义 以及一套工具包（ UI 模式库和代码），用于搭建和组合产品与服务。鼓励岗位之间的合作，减少沟通障碍。一个好的风格指南可以帮助设计人员和开

2、发人员了解他们工具箱的工具，并为如何正确使用他们提供规则和最佳实践。从 1977年 ChristopherAlexander在 A Pattern language 中首次提出模式的 概念 anirbnb、Salesforce、Atlasssian Spotify、AntDesign、Fusion Design先后 对外公布的设计系统，历经了 43 年的演练。设计系统由风格指南，基础构件，模式库，规则组成。据不同项目，构成要素可以相应重构与取舍，但风格指南，组件库，设计原则必不可少。搭建完成后在项目中的版本迭代若只是视觉改版则只需改风格指南。模式库的组件是大量在 UI 设计师日常工作中，组件分

3、为：按钮卡片、图标、导航、列表、下拉框、搜索框、表单、分页、进度栏、弹框、加载、侧边栏等。我们创建各种组件，用于构成界面，那么关于组件：搭建要点：创建可维护的设计系统，要建立长远成功的设计系统。新模式的请求是如何处理的？发现错误的时候会怎样？谁批准设计系统的变化？负责保持文档更新的是谁？改变系统的 UI 模式？团队如何了解变化？搭建步骤流程：步骤：（以调色板为例）1）规则设计原则：有助于塑造我们的设计方法，并协助我们在产品设计过程中评估权衡。 jared M.Spool 的提出验证原则的方法 “6 个违反直觉的测试” ：好的设计原则应具备：定义出色的产品原则：研讨会的想法。材料：便利贴，钢笔，

4、墙，零食；参与者：召集项目中的利益相关者：首席工程师，产品经理，设计师，市场营销等。在10 分钟内写下至少需与竟品区别 8 种品质贴在墙上，将类似的便利贴放在一块做聚类。回答以下内容并让每个人都在注释中进行解释。（如果我们的产品是动物/ 一个人/公司/电影 /产品，那就是 又为什么呢？）要特别注意区分产品的原因和任何描述性属性后聚类。花 10 分钟描述希望产品对用户的感觉的 3-5 条原则，写下希望产品避免使用的2-3个描述符并介绍自己的原则。最后列出8 T5个潜在原则，共享利益相关者，在项目中沟通磨练形成最佳内容，确定后尽一切努力贯彻在项目团队意识中。2）风格指南虽然风格识别指南是相当触觉的

5、，设计语言指导方针更难确定。设计语言风格指导阐明一般的设计方向、哲学和方法具体项目或产品。设计师萨曼莎 沃 伦（Samantha Warren并设计style tiles时做出了回应，这是一款比情绪板更有形 的可交付产品。在视觉设计语言中，发散视觉风格推荐The 20 second gut tes齿法论。这个练习使涉众在早期接触到各种美学，通过品味差异有助于达成一些共同的审美价值。视觉设计师可抓住这些洞察开始将这些美学价值转化为项目的视觉方向。在项目启动一部分会议上，向涉众每20 秒/个，展示20 个相关网站，选择特定于行业的站点及视觉上有趣的站点，为了增加可信度将网站logo 改为项目log

6、o。对每个网站每人投票范围1-10，得分1 表示 “如果这是我们的网站，我就辞职 ” 。得分10“如果这是我们的网站，我一定会欣喜如狂” 。发起者考虑参与者感兴趣的视觉属性，比如：排版，颜色，密度，布局，插画风格和总体氛围。快速将分数加起来，聚类结果。谈论得分最低的 5 个网站，得分最高的 5 个网站及争议最大的网站。发起者应该解释参与者为什么会被某个特定的网站吸引或排斥，并与团队一起解决意见上的分歧。3）基础构件字体排版规范：首先，了解产品需要支持哪些媒介：手机/平板 /电脑 /HMI 车载屏等，其次，需要考虑如何定义Font-Color ， Font-Size&Line-Height ，

7、Font-Size， FontFamily布局规范：间距公式：8的倍数在Sketch里建立运用删格系统基于1366*768空间最大化利用 y=8+8*n n0 （eg: 8,16,24,32,64px对于诸如列表，表格，卡片，表格等常见内 容区域存在一个或多个部分和面板组成的系统，这些部分共同协作以创建一致 的视觉布局。带侧边栏的三1440像素屏幕的草图布局计算：带侧边栏的三1440像素示例计算：无侧边栏的三1440像素屏幕的草图布局计算：带侧边栏的三1440像素示例计算：偏移=0 -仅选择居中”4）模式库原子设计方法论：组件的建立中，重点聊聊原子设计，原子设计方法论由五个不同的阶段共同工作，