关闭

解密 Design System

时间: 2019-04-21阅读: 1180标签: 设计

简介

设计系统的产生是为了某领域内产品在不同平台和设备上都保持设计和交互风格的统一。既然是一个系统 ,那必须具有相应的完整性。它为产品设计,产品内容等方面提供相应的指导。总体来看,整个设计系统由Design Principle, Design Language, Code Library 和一些相关的Tools组成。从以下的图可以更直观的看到它的组成部分。


主流风格

目前业界广泛使用的visual language包括Material Design, Metro Design 等等。可以想象有一个数轴,数轴一端是扁平风格,另一端是拟物风格。目前大部分的设计风格都分布在这条数轴之间。

Material Design

Google的Material Design是一个使用广泛的视觉语言(visual language). 统一了google系产品的视觉风格,并且能对其进行一定程度的客制化。

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

与Apple先前的拟物化设计不同,Material Design 把设计风格从拟物化的一端往扁平化的方向拉了拉,但却不是完全的扁平。它保持了物理世界的一些特质和纹理,并从X轴、Y轴、Z轴 三个维度描述一个物体. 在Z轴上的投影模拟了光的照射和基于此形成的阴影, 从而使设计元素有了立体的感觉。譬如Button的设计便是在底部利用shadow使按钮有略微上浮的感觉从而形成立体感。Card设计也是类似,利用border和shadow使整个Card从屏幕中上浮出来一般。

Material is the metaphor

Materail是一种隐喻。纸张和油墨先于电子屏出现在人们的生活中。中国汉代发明了造纸术,纸张作为书写材料得以普及,北宋的活字印刷术把文字低成本的放到了纸上,纸张上的信息得以较为广泛的传播。如今大量的信息从物理世界的纸张转移到了电子屏幕上。Materail Design 借用了纸张的隐喻并从传统的印刷方案中得到启发,元素具有纹理、质感、阴影、折叠等纸张的特性并且拥有排版、颜色、字体上的规则。点击元素触发的水波纹犹如魔法棒施加魔法的过程,等待着水波纹褪去后的惊喜,这大概便是连接虚拟世界和现实世界的魔法。

Design language

Design language较为重要的组成部分便是Design Principle, Design Pattern和Design Components这三部分。 Design Principle给出了高级别的抽象,是整个Design language的精神指导,就像某种文化一般,贯穿在设计与开发的所有环节。Design Pattern则是组合Design Components来解决现实中一类问题的规则。交互设计师和产品经理都可以利用这些规则来进行相应的交互和产品上的设计。

Design Principle

Design Principle描述了某个领域内业务形态或者操作形态的一系列规则。它体现的是某种精神,你的产品设计,UX/UI设计等都需要围绕着这些精神。不同的公司甚至不同的团队都会有不同的Principle,但是也可能具有相同的Principle。google提出的Meteral Design, 便许多公司都遵从着这套方案,但是也会根据自己的业务做一定的修改,从而形成自己独有的精神。 例如某通讯公司的Design Principle是:

  • High Efficiency(高效)
  • Communicating Authentic(沟通真实)
  • Build Trust(可信)
  • Stay Stable(稳定)

在产品及UX设计过程中,都需要去遵循这些原则。一个行为交互是否能应用在产品上,首先要考虑是否符合这些原则。譬如一款通讯软件,右侧列表里是否需要对单聊群聊分为两个不同的类别,对于服务于企业的通讯软件,在企业内部合作过程中,经常会对某个项目或者问题建立一个讨论组或者项目组,所以或许对两个类别进行分类会更高效。这里的考虑便是是否遵守了High Efficiency。

Design Pattern

Design Pattern是对某一类问题解决方案的抽象。用GUI程序开发的角度去看的话,它应该是对应于业务组件。既然是业务组件,那么就是针对了某一类具体业务的解决方案。一个具体的交互场景是用户利用表单来提交数据。用户的操作无非是:

但是用户在进行这两个步骤时,会出现数据校验,包含校验规则,校验失败和成功的提示, 提交数据前的确认对话框,提交数据后的反馈(成功或者失败提示)。这些共同构成了表单数据提交场景下的Pattern。简而言之,Design Pattern就是利用基础组件解决某一类问题的方案。

Design Components

Design Components是一系列的基础原件。就web领域来说,它可能是浏览器上的输入框,按钮,复选框,弹出框等一系列的不带有具体业务的基础组件。而对于一个组件来说,需要定义它在不同交互操作时的不同表现的规范。拿最常见的组件Button(按钮)来说,它在点击(active), 鼠标移到它的上方(hover), 禁用(disabled)时的具体表现,包括颜色变化,动画效果等都需要在Design Components里进行详细的定义,这样才能说一个Design Component是完整的和可用的。

Code Library

Code Libray的基本组成便是Components。 理想状态下,代码中库Components是实现了Design Language中的大部分的Design Components和Design Pattern,当然在现实情况下会视情况而定。在开发基于某个Design Language的代码库时,需要针对该Design Language建立基本的Foundation, Design token, 最后才在此基础上开发相应的Components

Foundation

在建立代码库时,首要的便是先要建立Foundation,这便需要与交互设计师进行反复沟通,确定基本的布局,颜色,字体字号等。一旦确定后,之后组件的开发都会利用Foundation里定义好的规范来进行。在代码实操中,Foundation主要会包含Theme和相应的辅助函数

Design token

Design token是设计尺度的固化,它描述了在这个设计系统中的颜色,字体,边框等一系列设计规格的所有可能取值。Design token与计算机语言里的枚举的概念有些类似,在用代码实现的一套组件的过程中,可以将Design token 分为名称和值两部分。名称一旦定下来,便不可改变,值则可以根据需要进行配置。譬如可以用如下代码描述一个字体的Design token

// 定义名字
interface FontSize {
  small: string;
  medium: sting;
  large: string;
  xlarge: string;
}
// 定义值
const fontSize: FontSize = {
  small: '12px';
  medium: '14px';
  large: '16px';
  xlarge: '18px';
}

在上面的定义中,我们规定了在一个设计系统中字体大小的取值只有四种: small, medium, large, xlarge, 在用代码来实现的组件库中,字体的大小只能取这四个类型,每个类型对应于一个特定的值。值的可配置化是设计系统客制化的重要组成部分。得益于这些token的建立,各个角色对遵循于此设计系统的产品在设计上能达到一定程度的共识。  

Theme

Theme定义了一个设计系统的主题调,它包含所有的Design token以及一些相应的计算规则。譬如Button的圆角,颜色,大小会利用Design token进行组合,并且当鼠标悬浮至一个button上时,背景色会根据button原有的色值按照一定的规则进行计算。  

interface Palette {
  ...
  primary: #ffffff;
  action: {
    hover: Function;
  }
}

const palette: Palette = {
  action: {
    // 将透明度变为0.8
    hover: (color) => color.setAlpha(0.8);
  }
}

这里定义了primary的颜色,而且定义了一个hover的规则,当鼠标悬浮到一个button上时,button的色值的透明度便会变成0.8;  

Components

Components主要是组成一个界面的最基础元素以及相应的Design Pattern。在代码层面,需要高度的还原Design Language中定义的组件,以及需要符合软件开发的规范。譬如灵活性,鲁棒性等。就最常用的Button来说,如下是一种定义组件的方法:  

interface BtnProps {
  variant: 'round' | 'plain';
  size: 'small' | 'medium' | 'large';
  color: 'primiry' | 'secondary';
  loading?: boolean;
  children: any;
}

class Button extends Component <BtnProps> {
  .....
}

export default Button

这里主要定义了Button组件的variant,size,color,loading四种属性,在使用过程中,通过控制这四种属性来便可以控制组件的形态。

 这便是一个Design System的主要组成部分。当然在实际开发过程中,可能会遇到很多跨角色沟通,跨team合作等沟通合作的问题,也会遇到很多软件质量和设计上的问题,这些都是在构建一个Design System时需要解决和考虑的。


来自:https://juejin.im/post/5cb163c85188251b203d00e9


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2971

关闭

前端如何和设计师成为好朋友?

分享一些和设计师成为好朋友的个人经验,注意,这些经验技巧只适用于技术开发人员。如果有事情找设计师商量,千万不要站在设计师的背后

设计师该不该学Web前端?_究竟需不需要了解HTML和CSS

先说说大家平时最苦恼的设计稿还原度问题,一个视觉超赞的稿子,怎么到了前端手里,字体边距就乱七八糟呢?为什么没对齐,为什么没加粗,还有说好的动效怎么都没上,完全不是情感化设计了啊。

UED与UCD_用户体验设计/设计思考模式

User Experience Design(用户体验设计),简称UED。UED是以用户为中心的一种设计手段,以用户需求为目标而进行的设计。以用户为中心的设计, 英文叫做User-Centered Design 缩写为UCD,他是UED的一种具体的设计实现理念。

专业Web设计师应该避免的6个关键错误

互联网的诞生彻底改变了世界。以前习惯于在电视和报纸广告上一掷千金的企业开始渐渐意识到互联网带来的变化。他们不得不改变他们的投资方向,把他们的钱投向更有潜力,更能为客户带来利润的地方

设计师常用的几个资源网站分享

如果你是一名设计师,你的电脑上可能存储了很多的设计网站,但是对于一些新手小白来说,刚接触设计的时候应该怎样进行绘制呢?难道要自己去一笔一笔的进行绘制吗?下面给大家分享几个设计网站

纯CSS Material Design风格按钮

其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓。

网页设计需要学那些东西?

初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫?

前端程序员要懂的 UI 设计知识

在本文中,我们介绍了七个主要的设计基础:留白,颜色,对比,比例,对齐方式,版式和视觉层次。它们对于 UI 都同样重要——如果缺少这些元素中的任何一个,都会损害整个用户体验。

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终,却不知道真正的故障出自于哪里。虽说有这么多的设计书籍,但即使都读了,也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——事实上,只是做好单个部分就是一个难点。

设计原则之依赖倒置js

高层模块不应该依赖低层模块,二者都应该依赖其抽象;抽象不应该依赖细节;细节应该依赖抽象。什么叫高层模块,什么叫底层模块,什么叫抽象,什么叫细节

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!