翻译自
Medium,初稿链接

本文首发于公众号:设计新手村

原文标题:How to construct a design system

初稿作者:Colm Tuite

文章翻译:村长道哥

怎样构建一个设计规范

只能承认的凡,人们为我了解有关设计规范的次数比较其他点如多得差不多。因此,在过去的几年里,我直接当盘算如何计划、构建并出示像
Marvel、Bantam 和 Modulz
这样产品之规划系统,我眷恋自己该分享部分本身以上学过程中的经验了。

嗬是设计规范?

良明朗每个设计师都喜欢使用一个企划良好的 UI
套件。然而,除了将工具包和体制指南组合在一起之外,似乎最近更多之设计师关注于旨在以尽产品捆绑于共的计划性系统。像
Shopify 和 Intercom
这样的店铺都在成立专门造设计系统的内部组织。人们开始察觉及系统性设计之要害。这是可是个大快人心的孝行啊。没准儿有雷同天我们采用的统筹工具就是还为未用我们新建一个文档后从零开始画打了。

设计规范(因为同技能活有关)不仅仅是一个框架、UI
工具确保或机件库,也不仅是一个样式指南或平等多样代码指南,它还是于干的这些总和还要多。设计规范是一个缕缕变动的规则集,用来治本产品的逐一部分。

任何可以之设计规范都可以体现于博方——从店文化/使命开始,一直顶品牌、文案、组件库和另外的设计语言。更尖端的点或者是具备规划系统受尽关键的有方,但这些并无是本文所谈论的靶子,我拿如作为一个商厦来阐述——你掌握乃是何人,你的重任是啊,你的成品应有是呀体统,应该负有怎样的感觉与当怎样实现力量。

假若您掌握了这些关键因素,你就是好拿这些知识转化为平种出凝聚力的设计语言。

筹一个样式板

每当我们开始计划酷炫的零件之前,先要吧这些零部件做有基础工作。我们需要将产品说明成一个个太极致简便易行的形式。

即便是无比简易的标题组件,也是多独可选用样式的汇。

咱们要拿东西分解分解再解释,直到上不克再解释的最小限度,也就是是极度极端核心的品格。一个好之左侧练习是
CSS
样式属性的完整列表,这些性大多只有领一定的价值,因此可以每个网站上重复使用。接受由定义值的性才是最后差异化的基本,因为这些性可以以我们的成品及任何产品分别开来。这些自定义之值就是我们全局样式板的专业,而全局样式板是咱之所以来统筹及构建全部活之每一个方面的参照工具。

当我们成功总体样式板的规划后,产品遭无应该来外一个体是全局样式板中尚无底。

颜色

受咱打极度明显的体制属性开始——这个特性似乎是现代筹工具所能领略的唯一的体属性,它好被命名、存储和录取,它就是是:颜色。

对此品牌的主色,我们挑选蓝色。对于咱们的品牌的辅助色,让咱们来瞧主色的补色,也尽管是橙色。

品牌之水彩

行使颜色来发挥成功与黄是一个宽广的设计模式,所以叫咱们将绿色及革命添加到我们的调色板中。像黑色及黄色这样的颜料吗是是的选择。

马到成功与破产的颜料

末段,我们得部分灰的水彩。大多数 UI 基本都见面用以下几种灰色:

* 非常浅的灰色,用于背景色

* 稍微深一点之灰色,用于边框、线条、笔画或分隔线

* 中度灰,用于切标题和援

* 深灰,用于主标题、正文和背景

本你也许得再行多的灰色,你或要三栽不同的灰色用当刚刚文中,你也许钟情于少数栽不同之描边灰色,这还在你的需求。但此处的如说的是,无论预先定义的体是哪些的,都可以事后的工作面临于一切产品受重复使用这些样式。

末尾我们兴许还想也各级一样种植颜色添加色彩要阴影的更动,当干到规划组件,比如补充加亮色的背景或暗色的描边,这些变化还是异常实用之。

末了的调色板

阴影

黑影是 UI
中其他一样种植常用之体制属性。据我观察,很多设计师在设计组件的时候还见面毫无来由地动阴影。实际上大部分外的体裁属性也起这种现象。像这样的孤立设计反复会将来同样学不相同的
UI。

深受咱们退一步想转我们用阴影来贯彻之靶子是呀。显然,我们怀念也 UI
添加一些看透效果,但非常可能多别的零部件都得运用这个力量。所以,让咱们用以此样式从单个组件中减掉出来,放到大局样式板中。

下这四种影子应该可以对网遭到之每个组件进行样式化:

免绝明确的阴影,来提升组件的交互性并增加效果可见性

复明了的阴影,用于组件的悬浮效果,

万分显眼的影子,可以给下拉菜单、弹窗或其它类之零部件增加透视效果

限制十分之影子,用于模态组件

黑影范围由小至大

书的高低

以在每个屏幕上开创恰当的可视层次结构,我们需要定义许多不同大小的字体。

纵然比如乐里之音符一样,我们的书体应该是据音阶来设计的,这促进维持一个稳定之韵律。乍一关押这样做好像有些叫人心慌,但万幸的是,一些雅聪明的人数早已帮咱缓解了之问题。Tim
Brown 建立了一个坏强的网站来显示各种字体的百分比。Adam Morse
开源了他的“全音阶”的字体表。我个人发现,“大三度”音阶的字体比较适用于多数之
Web 产品。

下同样步就是是控制用的字体大小,然后拿它们填入到我们的“大三度”字体比例中。

正式文本的默认大小(1em)会并发于营销网站及 UI 等等的浩大地方。16px
是默认的浏览器字体大小,所以即使因此这尺寸作为参考。

* 稍微大一点点的字,用于博客的正文。

* 更甚一些底书,用于标题和可标题。

* 非常很的书体,用于章节标题。

* 特别好之字,可能会见因此在价格页面及之数字上

* 一些于小之字,用在输入提示或其它救助文字及

字体大小

圆角半径

连片下去,只待以一律之经过采用至每个使用于定义值的体制属性被即使可以了。对于圆角,我们要如下的圆角半径值:

* 小的半径,用于小的预制构件,例如复选框,属性标签和文件标签。

* 中等的半径,用于按钮和输入框等看似之零件。

* 大的半径,用于卡片、模态对话框和其它较充分之零件。

2px, 4px and 8px 底圆角半径

专注:有时候我们需要用50%底圆角半径来写圆形的组件,比如头像。

间隔的高低

以具有的计划性受到,最常用之样式属性就是距离。无论我们是以脑部被隔多单链接,还是于网格中隔一个个种类,还是当头像和链接之间加一些相距,或者是增加下拉菜单组件内容的间距——产品面临如无其他间距的讲话那就是印证这规划是从来不倒脑子的。

与书一样,通过本间距的比例,我们好管每个组件和布局都是均等的。我无比欣赏的区间是
Material Design 的8dp网格。Elliot Dahl
有同样篇有关8pt网格系统及其好处的篇章。

动用 8dp
这个基本值,我们好整合产生多间距的大大小小,这些价值好就此来计划我们的成品套件中之每个组件和布局。

咱还得利用这些间距值来定义宽度、高度与行高,这些性可以据此来调整按钮、表单输入框、头像和其他类组件的尺码大小。由于这些零件经常在出现在
Web
产品中,所以只要它们还能够按照相同之尺寸比例,就可避免出现任何不必要之筹划矛盾。

字间距

正巧而自眼前提到的,字体大小并无是概念文本组件所用的绝无仅有样式属性。字间距是其余一个那个有效之性质,我们可用她来收紧大题目,或者给多少题目一些呼吸的上空。

三四栽字间距的价值应该就是可以达到目标。

制一个组件库

兹我们已形成了大局样式板,我们得以使用这些积木开始增加建筑一个组件库了。一般的话,设计组件并无是一个创造性的过程——我们只是略地拿预定义的体映射到零部件中虽好了。

每当是路,我们不应该下无在样式板中定义之体裁。创意的经过有在体制板的设计阶段。所以据悉以上的规范,无论是颜色、字体大小、外边距同内边距、宽度与惊人还是另的旁样式,在设计组件和布局的时候每一样种样式且该从样式板中甄选。这个等级几乎从不啊新物要给引入了。这任起来也许有些太甚至无成立,但相反,我当这正是许多口误会的地方。

Dave Rupert 最近在 Twitter
上展开了同起问卷调查:如果一个按钮位于一个模态组件内,那么修改是按钮样式的代码应该写在何?

Harry Roberts 之后在外协调的篇章里说了外的想法。Jonathan Snook
做出了越来越的讨论。虽然本人同意 Harry 和 Jonathan
的结论,但实际,我看凡事理论都是绝非必要之。

坐当全局环境遭到重复使用的目的来计划一个零件,然后于成品之某特定的片被改者组件,而就是互相矛盾的,这虽失了创办全局组件库的初衷。只要本人看来某个样式覆盖了其余的样式,我就是知就通常是要为使该符合为一个一环扣一环的半空中,要么是因当首的设计阶段没有足够的计划,所以于一个组件的变体上展开改动。

各国一样糟当某某部分被盖全局组件的行为,都见面损坏整个规划系统的一致性。如果对分流于产品相继组成部分的机件进行了汪洋底零碎修改,那么即使无容许保持一个一致性的筹划系统,你拿走的可只有是一个不过混乱到处是污物的宏图系统。

吃咱来看望有宽广的组件,并收押一下争下我们在点的样式板中定义的体来构建它。

不值一提的按钮

为我们由一个略的按钮组件开始,展示如何以我们在样式板中预定义的样式来搭建组件。

重多的零部件

同一,这些颜色、字体大小、阴影和边距都是打我们地方预先定义之样式板中直接获取的。

给我们品尝一些再度有意思之东西

当我们筹并构建了片零部件后,我们尽管可组成多单零件来创造更扑朔迷离的零件,比如下拉菜单组件。

本条下拉菜单使用的还是咱之前定义的基本样式板里之体制。通过这种艺术,我们好计划来一个完完全全的组件库,然后使到还怪范围的布局中,直至下到一切屏幕上。

填坑的片多少贴士

某些零部件会采取部分在样式板中没概念了之价,例如边栏的宽窄。有时这些价值只有为视口(viewport)宽度的1/3。有些上这些价值是随便的,而且不可重用,但当下都是常规的。关键是使考虑什么样式应该是不过选用的(大多数),哪些样式不需要用。

于组件去做团结欠做的事。不要试图给按钮、输入框、标题或其它零件添加边距。在组件的级别及,应该一味去规定在该零件的每个实例中的体,而这些体应该是千篇一律的。由于外地距应看到情要自然,所以最好应用包装器
div 来设定边距的值,Harry Roberts 有雷同篇是的章证实了当时一点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图