1回答

0收藏

设计规范详解 (一)!!!

数字艺术学院 数字艺术学院 642 人阅读 | 1 人回复 | 2021-01-28

1.1 定义

作为一个B端产品,为了应对公司快速迭代开拓市场和一部分购买者的定制化需求,与此同时还要保障产品间的用户体验一致性,近年来设计规范这一解决方案不断升温,如Salesforce,antdesign、等纷纷推出了自己的设计规范。那么到底什么是设计规范呢?和设计语言、设计原则、组件库等有什么关系呢?

我认为的设计规范是以下的定义:

设计规范由设计原则、设计语言和组件库构成,在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。


设计原则:即整个设计规范所要遵循的全局规则,为设计提供方向指导。以下给出几个例子:

设计语言:包括色彩,文字、图标等

组件库:分为基础组件(按钮,下拉列表等)及业务组件(商品模块)。

在做设计语言和组件库时,有一个基本原则是,少即是多(less is more),用尽可能少的样式来实现设计目标,例如按钮提供三种尺寸即可,在适应不同场景需求的同时保证体验的一致性;另一方面,保持克制的设计规范可以进一步减少设计师的决策时间,提高设计效率。



1.2 理论基础-原子设计

1.2.1 什么是原子设计

原子设计是构建设计规范的核心指导理论。2013年,Brad从化学中得到了灵感,创建了原子设计理论。在化学中,所有的物体都是由原子构成,原子构成分子,进而构成宇宙万物。对应到界面中,界面也是如此,所有的元素都是由文字、颜色等最基本的元素构成的。这些基本元素构成组件,组件构成页面。

原子设计概念的提出使得设计规范演变成为了一种更为高效、科学的设计规范,极大的改善了设计师与前端工程师的工作体验。



1.2.2 原子设计系统的五个层次

原子设计包含五个同时工作的阶段,以更慎重和更具层次的方式创建界面设计规范。

原子:原子是构成界面的最小元素,例如颜色、文本、图标、线条。它们在在界面这个维度上不能再被细分。例如图标,本身是可以继续细分的,但是对于界面而言,图标细分得到的元素是没有任何意义的。

‌分子:原子按照一定的规律组合就构成了分子,它们拥有独特的功能,例如下拉列表,步进器等。

‌组织:在界面中组织体现为由分子原子组成的模块,例如数据概览的卡片。

‌模板:在界面中,模板的体现是原型图,是页面的基本形态,可以让我们快速试错,搭建出一个功能良好的整体。

‌页面:在模板的基础上将占位符更换为真实内容,并进行视觉优化即为页面。



1.3 为什么需要设计规范
1.3.1 软件危机

在讲述设计规范之前,我想先讲述一个互联网史上的真实事件——软件危机。

19世纪80年代,软件的复杂度进一步提升,大规模软件甚至会由由数百万行代码组成,有数以百计的程序员参与其中,抽象语言解放了程序员的生产力和想象力,人们可以像写文学小说一样随意发挥地去写代码。摆在面前的问题是如何高效且可靠地维护与迭代如此庞大的软件。之后C++、Java等我们熟知的面向对象的编程语言诞生了。

面向对象这种模式有一个很重要的特征是封装。这就好比当你在写王者荣耀的代码时,小兵是出现频率较高的模块,你可以提前把王者荣耀里的一个小兵封装成一个代码块,当你需要用到它时,不必重新一行一行写,只需要把它整体调用即可。

纵观软件发展史,20世纪60年代的第一次软件危机创造了“模块”概念;20世纪80年代第二次软件危机引出了“面向对象编程”,创造了“对象”概念;模块与对象本质上都是对软件进行拆分与封装,只是对象拆分的粒度更大,维度更高。这点与原子设计的原理不谋而合,从色彩文字等基础元素,到按钮、选择器等基础组件、再到典型模块,也是对大型软件的设计元素不同粒度的拆分与封装。



1.3.2 设计规范的优势

设计层面:解决用户体验一致性,减少设计成本,提高设计效率,使得设计师可以快速承接新需求。沉淀设计资产,使得设计更加持续地输出价值,减少一次性设计,同时使设计师从样式中解放出来,站在更高的层面上来思考业务与体验。

开发层面:与设计规范同步形成研发资产,避免重复造轮子,保证代码质量,降低维护和拓展的成本。

测试层面:避免重复的无意义走查。之前遇到过一个深色模式的需求,尽管只换了颜色,但是测试仍然把所有组件都测试了一遍,加上重复的设计、开发量,导致原本一个很简单的需求,居然花费了12人天的工作量。

产品层面:提高产品迭代与优化效率,降低试错成本。

协作层面:降低不同设计师之间以及设计师与开发工程师之间的沟通成本。



1.4 为什么要自己做设计规范

这个时候可以会有小伙伴问,目前市面上有这么多的第三方设计规范,例如antdesign,element,有必要自己重复造轮子做一遍吗?答案是非常有必要。原因如下:

  • B端自身的业务性决定了市场上没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。

  • 大家都在使用第三方设计规范时,产品的同质化便不可避免。为了避免这种情况发生,我们必须要从设计语言开始,设计自己的规范。


那些大厂的成熟的组件库该如何用呢?我认为应该把它当成一个字典,有不会的地方,可以去参考人家的成熟的解决方案。



1.5 设计规范的落地
1.5.1 落不了地的原因

1.设计层面:

a. 组件扩展性弱:有的设计师做出来的组件虽然看着很好,但是实际上使用时,适配效率很低,用组件去扩展和重新做的效率差不多。

b. 脱离业务:大部分时候设计师手中都有任务,于是这个任务就落在了实习生的肩上,但是实习生不了解业务,做出来的是空中楼阁,抛开业务谈设计规范的都是耍流氓。

c. 缺乏开发思维:设计师不了解开发的实现方式,可能会做出来开发较难实现的组件。

2.开发层面

缺少开发资源:设计规范的作用是巨大而缓慢的,不能即时产出很大的价值,另外一方面,设计规范的落地会增加开发工程师很多的工作量,且无法量化收益。这也导致很多时候无法争取到足够的开发资源来做这件事,导致达不到预期的效果。



1.5.2 如何落地

说完了落不了地的原因,那么如何落地呢?我认为要从以下四个方面来推进:

  • 写一份设计规范的价值的提案给领导,争取到足够的开发资源。

  • 借鉴敏捷开发的思想,小步迭代快速推进,将设计规范的覆盖放在每次迭代过程中。

  • 把设计规范的开发交给熟悉业务的设计师来做,通过业务提炼复用率高的典型元素,优先开发,最大化投入产出比。

  • 设计师在做设计规范时,要不断与开发工程师沟通,保证设计规范的还原度。




B端UI界面的视觉设计是一种偏向与排版的设计类型,而其中对于文字的使用更是重中之重。文字包括字体,字重,字号,行高、颜色五个属性。一般情况下,字体采用系统自带的字体(例如苹方、微软雅黑、思源黑体),另外对于B端来说,一般都会有较为重要的数据,这时可以采用特殊字体给与一定的强调,最常用的便是DINpro。还有一点要注意,我们使用的字体一般是基于用户有什么字体,而由于win和Mac默认字体不同,所以要提前预留好字体风格类似的多种字体。并且可以设置多个字体,通过逗号隔开,如果第一个字体用户没有,那么会自动替换成下一个字体。

字号上,精简为主,可以用字重和颜色来表现层级,就不要用字号来体现。淘宝在2019年的改版中便升级了这一点。将原来的11个字体层级缩减至了7个。

行高上,我们目前采用的方案是行高是字体行高为150%字号,取4的倍数。

但是目前会遇到额外间距的问题。

前段时间谷歌发布了新的CSS更新“”leading trim,可能会是之后的行高解决方案。感兴趣的小伙伴可以点击链接了解一下(https://blog.csdn.net/weixin_39781930/article/details/111576051

字重上,以开发的视角来看的话,包括从100-900的九个字重。一般我们只采用regular、medium、semibold三个字重。


3.1 基本介绍

3.1.1 色彩的作用

B端产品中,颜色不仅仅用来传达品牌调性,更多的是用来传达以下信息:

  • 反馈信息 通过不同的颜色给予信息反馈,例如红色代表错误信息,绿色代表成功信息。

  • 突出层级 通过色彩可以对内容信息进行分层级展示,提高用户读取信息的效率。

  • 表明状态 通过颜色来区分某个事物处于何种状态。




3.1.2 组成

在真实的设计场景中,对色彩的复杂度要求是非常高的。色彩规范应该基本覆盖一套产品对用色的所有场景。

一套完整的色彩规范,包括品牌主色、语义色、中性色。

  • 品牌主色:通常,一套产品只有一个品牌主色,是界面中出现最多的颜色,在需要用色强调而且没有其他要求时,一般都会选择主色,例如tab的选中态,图表的颜色等。

  • 语义色:即功能色,借助人们的对色彩的心理模型,帮助人高效获得信息。例如绿色代表通行、成功,红色代表禁止、错误,橙色代表警告、

  • 中性色:除文字外,中性色还被大量运用在分割线、边框、背景等场景中。




3.1.3 色彩系统的原则

  • 理性的

      我们在选色时,尽可能避免个人的设计风格,减少配色的主观性,理性有逻辑地选色。

  • 可扩展的

      使用这种选色方法可以扩展生成更多的颜色,以适应不同的变化。

  • 和谐的

       色彩规范中的颜色互相搭配使用时,应该是和谐的。



3.2 如何制作色彩规范

在开始制作色彩规范之前,先介绍一下HCL色彩空间。

HCL (Hue-Chroma-Luminance) 与 RGB、HSB一样同属色彩空间的一种,因为最早由国际照明协会 CIE 提出,又被称作 CIELch。

目前大家常用的色彩数值可视化的色彩空间是HSB,设计师可以通过H(色相),S(饱和度),B(明度)三个数值来量化色彩,实现理性配色。但是传统的HSB色彩空间的缺点是,明度数值是基于计算机元件而言,而非人眼。另外,计算机的明度与人眼感觉到的明度并非线性匹配,这就导致在不同颜色中,即使色相相同,我们感觉到的明度(即感官明度)也是不一致的。而HCL就避免了这个缺点,在HCL中,只要两种颜色的L相同,感官明度就是相同的,HCL可以完美的量化我们对色彩明度的感觉。但是目前主流的设计软件基本上不支持HCL色彩空间配色,因此要借助插件或者网站。这里给大家推荐Figma的一个插件:HCL color。不用figma的小伙伴可以去这个网站http://tristen.ca/hcl-picker/#/hcl/12/1.03/000000/F69877



3.3 落地

落地分为两个方面:设计方面和开发方面。


3.3.1 设计方面

将颜色生成样式库,并规定设计同事不可以手动调色,只可以从设计规范中取色。



3.3.2 开发方面

在前期与开发同事沟通,将每个颜色定义为一个变量,在代码中不使用具体的色值,而是例如red-100的的色值,这样做的好处是,

  • 在需要替换某个色值时,只需要在底层对变量改变即可实现全局的更改,提高了很多效率。



  • 开发同事完全从库中取色,保证了色彩的准确性,提高了设计稿的落地率。





回答|共 1 个

Z炒米粉

发表于 2021-1-28 15:49:39 | 显示全部楼层

点赞~太棒了!!
回复

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则