UI设计系统

什么是UI设计系统, 为什么需要(或不需要)以及如何设计系统, 模式库和样式指南可以使用

卡门·M照片. Freile
卡门·米. Freile 用户体验设计师
2020年3月06

设计系统最近在设计领域越来越受欢迎. 现在使用的术语太多了, 术语,如“模式库”或“组件库”, “风格指南”或“设计系统”. 我听说过它们互相交换或一起使用.

就我个人而言, 我觉得有时候设计行业过于重视这三个术语的区别. 然而, 每个术语都有一个具体的定义,了解每个术语的含义是很有用的, not so much for terminology’s sake but to know how to make the most out of each and understand what you might need.

在这篇博文中,我将定义这些术语,并概述设计系统可能带来的好处, 以及一些缺点. 我还将谈到为您的项目创建一个定制的系统是多么重要.

在时博体育官网开始之前, it is important to understand that the most important thing when creating a design system is for your team to be on the same page. 可能有些设计师对于风格指南的理解略有不同, 模式库或设计系统. 这并不罕见,因为这两个术语经常重叠. 然而, the key takeaway is that everyone on the team should speak the same design language by having terminology that everyone agrees on and uses.

风格指南

风格指南与品牌指南密切相关. 设计系统的风格指南包括与色彩相关的信息, 排版, 图标风格等. 根据我的经验,颜色和版式是最重要的. 风格指南只考虑了传统品牌指南的相关方面. 它不包括印刷材料的规则).

你如何创建风格指南以及你在其中包含的内容可能也取决于各种因素,例如:

  • 您使用的开发交接工具 (eg. Zeplin, DSM, Avocode等). All tools have their unique features as well as limitations and each allows you to organise information slightly differently (I will talk about dev hand-off plat形式 later on this post).

  • 项目需求: 每个项目都是不同的,因此风格指南的内容也会有所不同. Some projects might need special attention to typographic rules while they might not have many icons and therefore a section addressing icon style might not be needed.

模式库

模式库就是这样,一个模式库. When designing a complex (and not so complex) website or app it is 经常 not viable to design every single page, 这也不是一种有效的工作方式. 最终, 如果你单独设计每个页面, 在设计上,你会让位于更多的不一致和重复. 创建模式库或组件库意味着整个设计被分解成多个部分, 就像一个谜. 每一块都可以在设计的多个实例中使用和重用. 在这种情况下,时博体育官网并不会为每一个出现在时博体育官网面前的元素创造一个新的设计.

为了更好地理解模式库是如何构建的,有必要研究一下“原子设计”。, 这个术语是由布拉德·弗罗斯特提出的. 原子设计将化学与设计相提并论. The concept is based around the idea that an interface is composed of very small components (atoms) which then get together to form bigger, slightly more complex ones (molecules) which then combine to create what could be understood as a more distinct section of the interface (organisms). 这些有机体结合起来创建模板,然后发展成特定的页面.

原子设计
布拉德·弗罗斯特的原子设计

与样式指南相关的模式库

模式库中的组件受样式指南的影响,并遵循其颜色规则, 排版, 利润率, 等. 时博体育官网可能在模式库中找到的一些组件是按钮, 形式, 不同类型的卡片, 导航和其他项目,如传送带或分页组件. The style guide applies the relevant elements of the branding while pattern libraries apply layout and structure. 最终,样式指南向模式库的组件提供适当的样式.

设计系统

概述 简·托曼 设计系统是将所有内容整合在一起的地方. 设计系统是由样式指南和模式库提供的更大的画面. Sometimes the style guide and pattern library form that design system and other times the design system takes existing rules and expands on them. 其中一些规则可能与内容原则有关, 信息架构, 不同元素的可能组合, 等.

设计系统的好处

The main goal of a design system is to safeguard consistency and aid on the maintenance and potential expansion of the site or app. 然而,设计系统对于不同类型的用户有不同的好处.

对于客户(网站或应用程序的用户):

For the users of the website or app it’s all about usability which can be partly achieved by having consistency. 在一个大型网站或应用程序中,有许多声音参与进来,创造最终的结果. 如果没有适当的预防措施,这可能会导致支离破碎的界面和许多不一致的地方. 设计系统可以帮助你做到这一点. 它们所创造的一致性能够以多种方式帮助用户:

  • 学习曲线减少: Reducing the number of representations for a certain action or element within the interface avoids the user having to learn new representations for each action or task they undertake.

  • 避免混淆: By striving for a consistent user interface that follows standards and conventions we are making the users’ lives easier. 用户带着自己的一套期望进入一个网站,这些期望是基于他们在其他地方学到的东西. 如果没有必要,时博体育官网就不应该做无用功,因为这将挑战他们的期望, 这可能会导致混淆.

  • 更快的经验: 通过使用模式库中的组件,用户也将拥有一个更快的, 精简的经验. 这是因为更少和更一致的组件意味着更干净的代码, 这反过来又意味着更好的性能.

团队:

用于创建网站或应用程序的设计师和开发人员团队, 设计系统意味着更有效率. 这种效率可归因于:

  • 尊重品牌准则(设计师): 通过设计系统, 时博体育官网可以确保所有组件都遵循样式指南规定的某些规则.

  • 保持一致性(设计师): Having a design system helps us keep our designs consistent which in turn means leaner and faster design as we don’t have to think of a new design for each new element.

  • 未来设计文件(设计师): 当需要新的设计时,时博体育官网有一个设计系统可以开始.

  • 更少的代码(开发人员)

  • 独立开发人员: 通过设计系统 we can avoid potential blockers where the dev team might be waiting for a specific person to provide designs and documentation. 所有组件对整个团队都是可用的.

  • 为开发人员文档: 好的文档将帮助开发团队理解何时以及如何使用每个组件.

业主或机构:

对于组织来说,设计系统可以帮助:

  • 降低成本: 通过重用组件,从而重用功能.

  • 更快乐的用户和吸引新用户的潜力: 通过设计系统,你的产品将更加一致,这将转化为更好的可用性, 让用户更快乐.

  • 寿命: Having a design system will also mean a longer life span for the website as new elements are easier to create and tweaks are easier to implement.

设计系统的缺点

为了公平起见,时博体育官网列出了设计系统的一些缺点. 我不得不说,利大于弊,这是肯定的. 尽管如此,还是有一些缺点:

  • 如果不随着时间的推移进行修改,设计系统可能会变得僵化.

  • 当一个设计系统存在一段时间后,它可能会导致反射的减少, 探索和新的创意.

  • 维护一个设计系统可能会非常耗费时间. 每一个变化都必须被解释,这最终是手工工作. Having a design system that is always up to date is especially difficult for products which are constantly being iterated.

有人可能会认为设计系统可能是一种限制. 尽管这可能是真的, 根据我的经验,这些限制促使我更有创造力,并提高我的工作的可用性. 事实是, 经常, the statement of wanting to have complete freedom and creativity is an excuse that we put to ourselves to justify our unwillingness to follow a set of rules. 有时候,没有规则的设计更容易. 然而, 当你制定了一套规则并坚持执行时, 总的结果决定着质量, 和谐, 和一种没有限制的设计不会有的坚固感.

我已经学会不把规则视为限制,而是把它们理解为指导. When you don’t have any rules you get to a point where you are frustrated because nothing fits together perfectly, 而创造一个与整体相匹配的新元素则成为一种不必要的挑战. 通过创建一个系统, those restrictions put my design work on a more focused path and give my creativity a reasonable framework to express itself without putting the usability of the product at stake.

像专业人士一样学习规则,这样你就能像艺术家一样打破它们——巴勃罗·毕加索

你是否需要一个设计系统?

This is the first question you should be asking yourself before you jump in to creating a design system for the sake of having one. 并不是所有的项目都需要一个. 可能你正在做的项目是一个非常简单的营销网站. In this case a design system might still be beneficial but it could be that it’s faster to fully design all the pages of the site rather than spend your time in creating a complex design system.

可能需要一个简单的设计系统. 也许, a style guide with colour and 排版 and a couple components in your pattern library will be more than enough to have that useful documentation and guidance.

This brings me to the next section which is making a design system that works for you and your project’s needs.

一个适合你的设计系统

我想强调创建自己的设计系统的重要性. 我的意思是,并不是所有的设计系统看起来或工作起来都是一样的. 不同的项目和客户有不同的需求.

例如,一个内容丰富的网站可能需要更多的注意排版的使用, 而营销网站可能需要更多关于色彩和布局的指导. 您的设计系统应该进行相应的调整, 在需要额外文档的领域提供额外的支持.

当时博体育官网谈到UI和开发之间的过渡时, 值得一提的是,这两个阶段之间存在着沟通上的差距. 这种差距会让设计师和开发者都感到沮丧, 这可能会导致产品出现问题.

拥有一个设计系统能够极大地弥补这一差距. It will help organise things and provide good documentation for the dev team to understand the underlying rules of the design. 然而, 即使有最全面的设计系统和交接说明, 从项目的开始到结束都要一起工作,这很重要, 甚至在实现了设计之后,也要确保没有解释的空间.

Something that has helped me a lot when building design systems is trying to identify common problems within this gap and producing specific documentation to address them. 这都是关于定制你的设计系统. 例如, 作为一名设计师,我经常看到许多关于间距的错误(文本样式之间的间距), 视觉元素, 填充等.). 为了解决这个问题,我提供了这个领域的额外文档.

icons8.com

设计系统和开发交接平台

现在有许多开发交接平台. 正如本文开头所提到的,它们都有独特的功能和各自的局限性. 在Fruto,时博体育官网使用Zeplin. 使用这些工具时, 尽管您在创建一个非常完整的设计系统时会遇到一些限制, 您可以随时以自己的格式添加一些额外的文档.

例如 Zeplin has a great way of organising components but in my opinion it lacks a space for describing certain rules and elements (ie. 你不能在字体比例上重新排列文本样式,也不能添加相应的描述). 为了帮助解决这个问题, 我所做的就是在Sk等h上创建一个单独的画板,并在那里添加我需要交流的规则. 然后我将把这个画板作为另一个页面上传并为它创建一个名为" Guidance "的部分. These ‘sticker sheet’ artboards can contain anything you need to explain or even function as a summary of what could otherwise be appreciated in the components area (ie. 交互元素状态的概述).

结论

设计系统的两个主要元素是样式指南和模式库. 这两个规则提供了在设计系统中扩展的其余规则. 创建一个设计系统有一些明显的好处:主要是一致性. 这增加了团队的效率,并最终提高了用户的可用性. Most of this consistency comes from having a set of rules that apply across the website or app through the design system. 这些限制有助于时博体育官网专注和完善时博体育官网的工作.

关键是你要让你的设计系统为你手头的项目工作, 你会想办法让它尽可能的完整和有用. It is also very important that the whole team understands and agrees on the same terminology within the design system, 以及它的每个组成部分的术语.

卡门·M照片. Freile

关于作者

卡门·米. Freile

一个设计负责人, 卡门的设计处在美学和功能的十字路口, 为用户创造有意义和愉快的体验. 她喜欢举办网络研讨会和研讨会,并定期撰写与设计相关的博客. Carmen拥有雷丁大学印刷术和平面传播学士学位.

请阅读本文作者的更多内容
友情链接: 1 2 3 4 5 6 7 8 9 10