恕我直言不懂这些没法做系统
编辑导语:利用设计系统,设计师可以更高效率地达成目标,结合设计系统进行设计,产品也可以给用户带来更好的使用体验。那么设计系统包括哪些内容?在做设计系统时,又容易出现哪些常见误区?本文作者就此进行了总结,一起来看一下。

一、 设计师眼中的设计系统都有哪些
为了给用户带来良好的用户体验,设计系统是其中的一个重要环节,一组基本设计体系大致包括风格、内容、基础、组件、模式5大部分,其中的基础与组件又是我们身为设计师接触最频繁的两个部分。win10激活密钥

1. 风格
谈到风格,相信大家都不会陌生,像设计语言一样,设计原理讲的都是风格问题。许多设计系统网站上,都可以看到企业对设计系统风格的标注说明。
风格应用在创建界面或其他设计交付物阶段时候,对视觉参考和设计原则的品牌风格的指导。风格部分主要承担着两个主要的任务:
对内部:对设计师来说需要自己梳理产品应该具有什么样的风格个性,产品外观为什么要设计成这种风格(风格)。
对外部:对于外部用户来说,如何将企业品牌形象有效地传递给用户是风格的使命。
总之,好的品牌风格能够对内辐射产品定位,对外辐射企业的宣传推广。很多设计系统中都会有对风格的定义,像国外的苹果设计系统的风格语言定义为“完整,一致,简约”,国内的贝壳设计系统风格语言定义为“生长、触摸、关联”。win10企业版激活

一些企业在产品手册中会强调“一致性”的设计原则,比如美团外卖这款产品,不管是线下的物料宣传还是线上产品,都大量采用了“黄色”这个颜色,为团队设计提供清晰的设计指导,让用户的感官标准一致,感受到“一致性”的设计理念。

2. 内容
内容指的是我们在产品界面中使用的文案,也就是人们常说的“微文本”,一些影音产品还会注重其文案的语气、语调,并根据用户的属性为设计成员编写词汇用法表,避免设计文案时给用户带来的焦虑情绪。
许多产品在内容设计上都花了不少心思,比如即刻APP的弹窗设计,新版本的弹窗则用更有趣、更易懂的文案“保存并继续”来取代枯燥乏味“一下步”的文案,并且跟随一小段“请根据提示引导完成后续操作”的提示,清楚地引导用户进行操作。
再比如哔哩哔哩这款产品,在输入密码的场景中,根据用户输入密码的场景选择了合适的表达方式,当用户输入登陆密码时,产品的吉祥物就会将眼睛捂住。这样的设计不仅能很好地表达产品的个性,也能传达产品的温度。

假如你认为内容的改版仅仅是提升体验,那么你就错了,有这样一个典型的案例会给企业带来巨大的收益。
比如在 Google酒店搜索中,一开始用“Book a room(预定房间)”这个词来吸引用户点击,随后的改版中将“Book a room(预定房间)”修改为“Check Availability(查看可用房间)”后,成功地将这一功能的交互点击率提升17%。所以说内容(微文案)改版不仅仅提升用户的体验,还可以给产品带来数据的提升,从而带动企业收益的增长。win10激活

3. 基础
基础可以理解为是设计表现层当中最小颗粒度的合集,简单地理解就是将一页中的元素不断地拆解,拆解到无法拆解的状态之后,剩下的元素就是“基础”,比如字体、颜色、图标、布局(间距)、声音、动效等等。

“基础”的搭建马虎不得,因为他是最小的构件,应该用最科学的方法来设计。例如在搭配颜色这个元素时,我们可以采用拓展公式计算方法、手工叠加、公式计算、色彩曲线工具等方法来设定精确的色值。

4. 组件
组件也称之为组件库,组件库是身为设计师接触最多的事物了,也是设计系统的灵魂所在了,主要可以分为设计组件库和代码组件库两这两个大部分。

设计组件库相信大家都不会陌生,这里我推荐两个工具网站semantic-ui.和tetrisly,尤其是tetrisly它包含sketch与figma的组件使用很方便。
https://semantic-ui.com/
https://tetrisly.com/figma/

代码组件库主要是前端开发人员使用,会有一些代码规范的说明。这里我推荐QMUI工具和Bit.dev两款工具。win11激活密钥

重点推荐Bit.dev,这是一种由第三方组件构建的平台,它有一个叫做组件共享的功能,即当鼠标悬停在一个组件上时,会产生高亮状态,以提示该组件的名称、版本和父区域。

假设鼠标点击按钮此组件时,还将跳转到相关联页中显示这些按钮组件的范围,有兴趣的同学可以体验一下。

一套完整的设计组件库一般是由公共组件和业务组件构成的,它和设计系统一样,只是作为参考的规范使用,组件库也是要根据业务进行微调整,需要不断进行优化的,所以并不是一尘不变的。
随着业务和产品的数量增多,公共组件库的数量也一定会增加,因此搭建组件库时候有两个问题特别值得注意:
注意点一:在组件库搭建时候尤其要注意公共组件库的使用效率问题,如果使用率较低的组件总是出现,那么公共组件库就会很臃肿,所以要及时去除不通用的组件保留常用组件。
注意点二:公共和业务组件并不是越多越好,盲目地追求“大而全”一定是不可取的,要时刻提醒自己“合适的组件库要比全面的组件库更为重要”。