资讯动态-如何构建设计语言

如何构建设计语言

2019-11-11 13:57:38

为何构建设计语言

1、品牌形象

随着公司发展会衍生一系列线上产品以及线下物料，设计语言的构建大大统一传达了公司品牌形象，产品后续迭代中也不会混乱，更有效的维护企业品牌形象，加深用户印象，有效提升用户体验。

2、用户体验

线上产品的设计语言更注重用户体验，比如不同的界面边距和字号大小，产品的基调也会不同，用户的情绪感受也不一样。所以在构建设计语言时，首先要了解产品特性以及使用场景和使用人群，确定好产品方向再着手构建设计语言如何传达给用户合适的设计体验。

3、开发效率

统一的设计组件可以大幅度提高开发者的时间效率以及项目周期，还有就是在项目后期迭代或修改时，统一的样式可以快速修改。减轻了设计对接和开发实现的负担。

语言构建

1、颜色

无论UI还是平面，颜色是视觉传达的最核心也是最基本的语言，不同的主色，会给人不同的视觉感受，同样的主色不同的配色，视觉感受也会不同。在设计中确定好主色后，配色的选择也较为关键。界面设计中除了背景色、字体颜色、图标以外，后期上传的产品图以及轮播图都要规范。

2、字体

字体的设定包括字号、字重、行距、颜色对比以及界面间距留白的协调性。Material Design对字体标题和内容文字的大小刚好是1.6倍，接近黄金比例，所以字体的处理也要有所考究。构建文字在界面美观和基调同时，更要注重用户可读性，分清主次关系。字体种类在界面中应存在一种或者两种，不可出现三种字体。字号和字颜色避免过于接近，导致无法分清关系。正文行间距一般为字号的1.5~1.8倍之间。

3、形状

形状的使用在界面设计中也最为常见，最多的就是直角和圆角，以及带有品牌元素的形状。不同的形状传达的情绪也不同，比如说尖锐的和弧度的，包括圆角大小不同视觉感也不同。根据重复原则，如果某个形状在界面中重复使用时很容易加深用户对于产品的印象，就像很多设计师设计icon时结合产品特性以及logo的设计基因相结合。

4、图标

接着上面形状的理解，图标的风格设计也要和界面的其他设计元素应保持统一的设计语言，实现产品界面中所有视觉设计的一致性。图标设计构成通过形状、边框、颜色、圆角、大小、肌理等来延续传达在界面的基调和品牌基因。

5、网格

网格系统目前比较成熟的设计布局工具，设计中使用一套规范的间距，来保持产品的一致性，网格间距以倍数方式，比如1X，2X，3X，4X。比如现需设计一个让用户感受到轻松愉悦的页面，可以使用较大的栅格间距比例，以12为基准，比如间距一律使用12,24,36,48。如果是信息较为紧密的，则可以使用8的倍数，如8,16,24,32等。不同的界面信息承载使用网格也不同，界面空间留白不同，界面风格也会不同。比如：Airbnb界面边距48px，整体产品调性简约大气；马蜂窝的界面，侧重于突出图片，因此页面内容区域比例会比较大。