打造UI/UX 设计系统的8个注意事项和方法技巧

我们在很多项目中都一直致力于构建独特的设计系统，在项目过程中一直在不复盘项目中学到的经验和沉淀的数据，本文将介绍在打造UI界面设计系统中的8个设计注意事项和方法技巧。

一、识别出可复用的组件
识别产品里不同用户旅程中的，并可重复使用的组件，同时定义出视觉样式，比如：颜色、字体、图标、网格和排版等核心元素，这是迈向设计系统的第一步。
技巧提示：
a.确定整个旅程中使用的主要组件有哪些？
b.分析主要组件的构成，如果要实现原子设计，就开始分解成基本原子。
c.定义使用的主要原子是什么。
d.检查某些成分是否只是更复杂、更大分子的变体。
e.排除独特的和旅程特定的案例。
f.为每个组件定义一些基本规则和模式。

方法是打印出每一个旅程并将其放在布告栏/白板上，回到会议室，召集相关设计师和开发人员进行添加注释，质疑不同组件的布局和功能，并定义出基本规则、核心元素、原子和模版。

二、设计系统中有哪些元素或组件？
这无疑是构建设计系统中最困难的部分，因为并非所有创建的东西都应该包含在设计系统中。
在大多数情况下，我们使用三法则：
如果一个元素或组件可以在不同的旅程中使用至少 3 次，那么它可以被纳入到设计系统库中。
技巧提示：
a.使用诸如“三法则”或“五法则”之类的设计方法原则，或者更好地制定出符合自己产品特征的设计原则。 

三、定义一种通用的设计语言——命名约定
一旦您同意将组件添加到系统中，你需要和上下游人员进行命名约定，指定一套大家都看得懂的名字，否则会增加很大的沟通成本和相互推诿的风险，这就是为什么团队拥有共同的设计语言非常重要的原因。
技巧提示：
a.一个优秀的UED设计团队了解组件的本质，一起给它起一个有意义且非常具体的名称，以避免误解。

b.永远不要假设其他人都知道你指的是什么。 

四、任命工具包“负责人”或调解员——沟通是关键
在团队中指定“工具包负责人”。这是正确的！喜欢你的人，对设计系统充满热情，可以促进信息流动，鼓励讨论，并确保每个团队的代表（设计师、开发人员、业务分析师、测试等）参加会议。

并不是每个人都对参加设计系统会议感兴趣，但要确保不断地交流或找到一种与人交谈的方式，是的，从字面上与参与项目的每个人交谈。与其他设计师交谈，与在不同平台上工作的开发人员交谈，与业务分析师交谈，与产品负责人交谈，与用户测试人员交谈……并提出一个合作计划。
技巧提示：
a.提示确保您每周与调解员和团队的主要成员进行会议，以获得持续的反馈。
b.保持会议简短，清晰简洁。为您将在会议上讨论的内容和不打算讨论的内容制定议程。
c.如果有什么事情引起了问题，不要等到情况变得更糟，尽早开始对话。
d.如果需要，请项目负责人或经理将某些会议列为强制性会议。
e.尝试平衡与会者，确保每次都有不同团队的代表参与决策。

五、反复定义和审核自己的设计流程
使用您自己的设计系统项目来定义流程并审核人们如何使用它。您能做的最好的事情就是尝试不同的流程并根据您的需要进行调整。 在让自己头疼试图自己找到答案之前，先与人交谈，寻求团队的支持和反馈。 提出问题，不要害怕这样做。您是否能够浏览文档？你能理解特定组件的用途吗？您有什么想要添加或删除的内容，为什么？
技巧提示：
a.鼓励同事讨论正在进行的过程。
b.发送用户调查或进行非正式聊天以了解设计文档是否有意义。
c.不要害怕变更设计流程。
d.从新人那里获得反馈，因为他们可以提供新的观点。
e.保持简单，不要试图重造出一套 “Ant 设计”，并不不要。

六、让你的文档看起来美观且一致，起一个名字
由于设计系统是一个活生生的东西，应该得到一个比通常的“工具包”更好的名字。这会给你的设计系统赋予更多的意义，更多的目的，让其更正式化，甚至拥有了自己的品牌。
技巧提示：
a.提示 为您的设计系统找到一个有意义的名称并定义一个品牌。
b.使用尽可能多的工具来减少工作量，例如开发人员和测试人员使用了Zeplin，为产品所有者和业务分析师使用了inVision ，为设计师使用了Sketch、Photoshop、Figma 和 Principle等。
c.为组件添加跟踪系统
d.组件库是您最好的朋友。为设计师创建组件库。
e.为您的文档创建一个库或模板。 在您的文档中添加链接，以便在需要时参考其他重要资源，例如可访问性指南、材料设计和iOS 人机界面指南。

七、在您的设计系统中嵌入可访问性指南
使用不同组件的示例在整个文档中提供可访问性要求或在需要时添加注释，从而生成一个内部库供每个人参考。不要等到最后。这将节省大量时间，并允许设计人员在投入生产之前解决组件问题。
技巧提示：
a.拆分工作。例如，用户体验设计师查看的视线顺序，用户界面设计师查看颜色对比，开发人员查看元素名称（适用的平台特定可访问性标签）等等。
b.在需要时添加辅助功能说明。
c.为未来的我设计，年龄会给以后的生活带来什么问题？
d.在您的设计系统中添加一个可访问性部分，您可以在其中突出显示使您的产品符合 AA/AAA 标准所需的要求列表。
e.如果您是或拥有业务中的无障碍总监，请确保与团队的其他成员一起审查旅程和组件。
f.定期进行用户测试。

八、不断迭代和改变
一旦您为每个人都遵循预期奠定了基本准则或核心基础，使用它的人就可以改进现有组件并使用它创建新的灵活组件。您可以让同步设计系统在相同的基础上相互平行发展。没有完美的方法可以做到这一点，但您不应该停止设计系统的发展，尤其是在技术发展迅速且用户体验比“万能”更加个性化的情况下。请记住，设计系统的存在是为了参考、保持一致性、奠定基础、了解注意事项、改进设计、快速有效地开发，并最终在内部进行创新。
技巧提示：
a.提示确保您的设计系统基础良好，以便发展。
b.添加尽可能多的你认为重要的东西作为设计系统的一部分，例如可访问性原则、研究、工具等。
c.使您的设计系统易于共享，使其成为网站。

写在最后，好的设计系统可以大幅提升基于业务条线下数字化产品的生产和运行工作效率，同时还可以提升产品的品牌价值，不同类型的产品都有属于自己的也更适合自己的设计系统。