原则|聊一聊那个高大上的设计系统( 二 )


为了对抽象的设计原则有更具像化的体会,我们再来看看几个比较有名的设计系统的原则。

  • 苹果公司:美学整体,一致性,直接的操作性,反馈,隐喻,用户可控。
  • 微软公司:自然而然的,符合直觉和有力的,引人入胜且沉浸。
  • 谷歌公司:材料是一种隐喻,明显、图形化和有目的性的,有意义的动效。
原则|聊一聊那个高大上的设计系统

图3:三大设计系统的原则
突然发现就苹果公司没给自己的设计系统专门取一个名字啊~
可以发现,虽然三家公司的设计原则各有不同,但几乎都是从通用的设计原则中提炼优化的。
建设一个设计系统一定需要设定自己的设计原则吗?我认为它不是必须的。虽然设计原则很重要,但在设计系统初期的时候,遵循现有基础和通用的设计原则来指导建设整个系统也是可以的。总好过随随便便从基础通用的设计原则中拿出一些词语润色一下,简单地堆砌一些高大上的词语、空泛地放在那里,等着它们逐渐变成别人口中的“玄学”吧?
正因为原则是设计系统高度抽象化的结晶,所以它需要基于大量实际设计经验再去生成,不然,很难起到指导设计系统达到增加效率的目的。
2. 设计风格和规范设计风格,是这个设计系统给人形成的一种代表性的图形印象。设计规范,是用于协调统一性的规则和范式。在60年代的《美孚品牌手册》和70年代的 《NASA 图形使用规范》中,就已经包含“颜色、字体、图形、用法和示例”等内容。
原则|聊一聊那个高大上的设计系统

图4:设计规范
有了设计风格和设计规范并不一定就能让使用这个设计系统的产品建立统一的品牌调性,只有当设计系统具有了一定辨识性的设计风格、并在设计规范指导下进行长期的设计产出后,才能够让使用这个设计系统的产品形成统一的品牌调性。
3. 设计组件和模式对于设计系统里,我们最熟悉和常用的应该就是设计组件了,也就是UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。是组成界面的最小元素和这些元素的常用集合体。
原则|聊一聊那个高大上的设计系统

图5:UI kits
设计模式,比元素更复杂一些,是完成任务所使用的一些基础的、常用的交互方式,是可以解决问题的小型设计方案。比如Material design 里的Confirmation and acknowledgement,它提供的就是为机器在执行操作之前向用户确认的一系列设计方案。
原则|聊一聊那个高大上的设计系统

图6:设计模式
简单点来说,设计组件就是一些元素,主要给设计师用的,设计模式就是一些交互方式,主要给研发工程师看的。由于两者很相似,如今更多地会把两者合起来看。
2013年,前端工程师 Brad Forst 将原子理论运用在界面设计中,形成一套设计系统后,设计组件得到进一步扩展,可以形成比原来最初出现设计模式这个概念时更高层次的集合体,例如,大到几个完整的页面及其包含的交互方式,也可以成为某个设计系统的其中一个组件。
当然,由于各个产品的需求、场景和定位等不同,越大的合成组件将会越复杂。
原则|聊一聊那个高大上的设计系统

图7:原子设计理论
4. 内容资产在某些设计系统的定义里,可能会把内容资产作为设计规范的一部分,但我这里想强调的是其作为资源的一部分。
由于设计系统是一个有机的整体,在它不断地服务于各产品线的同时,也一定会需要不断填充不同的内容,比如应用里使用的图标、字体、插画、模型等等,这些内容积累下来,也应该成为这个设计系统的一部分。如果有其他的应用或产品需要,就可以直接取用,从而提高整体的工作效率。