如何构建设计语言

“风格来来去去。 好的设计是一种语言,而不是一种风格。”——MassimoVignelli。一整套作品从完成到后期的更新迭代,都需要一套规范的文档,这样会节省团队设计师之间的冗余工作。

为何构建设计语言

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,整体产品调性简约大气;马蜂窝的界面,侧重于突出图片,因此页面内容区域比例会比较大。

6、图片比例

对于图片比例,设计师有的往往凭感觉设定,但最好合理的使用图片规范,常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618这些比例经过前辈验证也是做合适视觉尺寸。

界面呈现

由于界面和产品需求不可预期性,构建设计语言无法100%的的满足所有界面,根据界面最终呈现在不影响设计方向前提下,以及产品后期可迭代空间,可以进行局部调整设计方案。

总结

我觉得好的设计语言是有生命,就好像在为每个人诉说自己的故事,传达自己的情绪,希望每个人了解自己。背后的塑造它每一位设计师都在努力让它变得更好,让它更易于与别人沟通。

推荐

推荐几个大厂的设计语言,大家可以进一步深入了解:

站酷

作者:枫桥良夜

(0)

相关推荐

  • 如何建立设计语言系统

    引言 随着公司业务的飞速发展,产品线逐渐增多,跨部门的合作也越来越频繁,设计的统一性问题越发凸显.在这样的一个前提下,想要创造连贯一致的用户体验,其难度会随着人员的扩充而呈指数增长.所以,寻求一套简单 ...

  • win10预览版9901:Modern设计语言将全面改进升级

    Windows8的Modern界面之前曾被称作“Metro”,现在改进后的Modern设计语言会在明年1月的Win10发布会上正式亮相。在之前发布的Windows10预览版9879中,其界面图标设计相 ...

  • Material Design设计语言的APP模板下载!

    小编:这次带来的是由ui8出品的遵循Material Design设计语言APP模板,一共有7套类型的APP设计,有电商.注册登录.导航.数据等等的···虽然只是预览版.对于咱们学习Material ...

  • 设计语言—按钮01

    一个简单的按钮需要经历无数次推敲,才能整合为设计语言.今天主讲设计语言中的基础部分,组件部分的其中一个部分-按钮.设计语言从结构上分为:基础部分.规则规范部分和业务部分.本文章干货较多,分为上下篇,感 ...

  • 设计语言-按钮02

    这篇是上篇<设计语言-按钮01>的延续,内容完全不同. 讲的更细化,实操性更强.列举具体例子,让大家更清晰明白按钮设计规范:按钮的网格基数.宽高.字符.曲度.功能等. 目录 1.解构按钮 ...

  • 设计语言 – 表单(登录/注册)

    设计语言中的表单中的登录与注册部分.大致讲完了按钮.下拉菜单.导航栏.分页等,就要开始讲表单了.表单也分几种功能和几种样式,我也不可能不能把它们一一讲出来,所以只挑出几个常用的来讲一下吧.重复性的知识 ...

  • 设计语言 – 下拉菜单/导航菜单

    一个看似简单的下拉菜单/导航菜单,背后会有多少隐藏的逻辑呢? 今天就讲一下如何绘制下拉菜单和导航菜单.不管是下拉菜单还是导航菜单,都是设计语言部分中的基础部分中的某个组成部分.当这些组件按照功能和需求 ...

  • 设计语言 – 侧边导航栏/分页

    今天给大家讲解下侧边导航栏.分页.步骤条的绘制方法. 上几篇文章中有些内容与这章相符,重复的内容也就不多讲了.不理解的朋友们建议先阅读前几篇文章. <设计语言-按钮> <设计语言-按 ...

  • 设计语言 – 表单/其他表单(含表单附件)

    高级搜索.基础校验表单.控件校验表单.弹窗(附件里有原图).我一看都快一个月没有写文章了,时间过得这么快嘛~ 那话说回来,之前没有更新也是有一定的原因的,毕竟上一篇文章存在一些争议,就会加重我的思考, ...