前面两篇文章作者分享了,为什么需要设计语言,对内对外有哪些帮助。同时和大家分享了,在做设计语言之前我们先要建立设计原则,以及设计原则下面的设计关键词,通过设计关键词推导出对应的视觉表现手法,也就是通常我们所说的,形、色、字、构、质。今天文章主要分享如何最终敲定一套设计语言?
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/2ccca1c5-841a-42f3-9d01-dcfc499bf520.jpg)
今天我们直接进入正题,在前面我们定义好了,设计原则和关键词,那么接下来应该如何去做?
设计策略
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/9d366cb7-60aa-4194-8b62-9890197c5d7e.jpg)
根据原子定律(不懂原子定律同学可以搜索原子设计方法)我们从页面中最细小的元素入手,也可以理解为页面中无法再拆分的元素开始,它是组成界面最基础的元素,从最基础的元素,开始做统一性,本次我将从颜色,字体,网格说起。
颜色
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/9eb95692-6ec9-47cd-b52a-ef4bf805ff5f.jpg)
从颜色开始,需要根据整个页面中场景进行颜色定义,同样色彩也需要根据我们定义的关键词去推导,在定义颜色过程中,可以参加色彩心理学原理,以及竞品分析:
- 高品质:深色配色,黑白,中性的配色;
- 全球化:深邃紫色,科技蓝,自然绿;
- 年轻化:渐变色,马卡龙撞色。
在定义了上述大的色彩原理下,需要对界面中使用场景进行梳理得出下列大概色彩类型:
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/1c446acc-8723-4946-8339-73e6f3f82992.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/fe9aef2a-7e37-4ec1-bf94-02df0b20f6f5.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/abd0e214-5aae-4dbb-9e6d-2f46c8dff7f5.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/0452dac2-5602-4a84-8383-8b4452b8644e.jpg)
当然也可以定义一些界面中常用渐变色板,现在很多网站也有很多很好看的渐变可以去尝试。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/9e7e0fe6-38d4-4914-82e7-51f1856eacaa.jpg)
也可以定义一些图片上放文字效果,叠加什么颜色,颜色的模式是什么样的,透明度是多大,这些都可以帮助我们定义好一套色彩体系。
当然还有一些很不错的色板,如果你不知道怎么配色,也不知道当下流行色是怎么样,也可以从这些色板里面选择一个配色,挑选一些符合你们产品的配色。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/ab216118-bfbf-4eea-9567-b6a0c1905348.jpg)
https://www.materialui.co/
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/ed8ccc1e-e19d-4019-89a2-91a05bc2c479.jpg)
https://coolors.co/
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/83669e13-1a91-4566-a292-784d526403a9.jpg)
http://colorsupplyyy.com/app/
字体
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/91547201-13b0-416d-9cec-6bf2678b87df.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/475f37d1-3c2c-4329-9efc-fd2d0ed8f10f.jpg)
字体是界面中用户看到最多的一些元素,除了定义界面中的字体,同时我们也要定义界面下的字体,包括线下物料宣传等,在字体选择上,需要注意:
- 信息传递是否足够清晰,字体也是有情感的,字体表达的情感是否和我们界面中需求是一致的。
- 个性上,有的字体很方正,笔直,有的字体笔划比较活泼,那么不同字体我们如何去选择,同样需要在前面大的设计关键词下面去设计。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/8001b8aa-ab94-4293-bca0-5cdb8160e445.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/dfcbd388-1739-45b6-b179-78f889d3aa41.jpg)
对于字体选择,一定要根据产品关键词去定义,以上是界面中常用一些英文和中文字体,每种字体虽然大体看差不多,其实每个字体,细看其实有些笔画上的差异!
我个人建议:苹方字体和Helvetica Neue比较通用性更强,中文字体包比较大,特殊产品如果需要有个性化中文字体,需要注意字体大小包处理!
字号
字号是界面中很重要元素,字号大小决定了信息的层次和层次,在扁平化设计中,字号越来越重要,好的字号设置能让界面更加清晰一致性强!
相反差的字号会让界面看起来山寨,关于字号的选择,可以遵循iOS的规范大小,也可以根据自己产品个性去定义你的字号。
假如你是电商产品,那么你可能需要对价格字体单独设置字号,如果你是金融产品,那么对应的字号也需要定义好对应的大小层级。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/4eddcb3a-0d9c-4f1f-ba7e-14afa8c3e35c.jpg)
对于特殊字体的处理(375分辨率)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/96d6b41b-351c-4fe0-9ee8-19b70ee062b4.jpg)
常用的5种字体节奏(375分辨率)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/47e3c9b5-fb72-4a44-b66c-bba5defe0ba1.jpg)
特殊数字或图形化字号(375分辨率)
行高
参考3C原理,不明白可以百度搜,英文的行高是字号的1.2倍,但是中英文字体原因,中文字体一般是1.5-2倍之间,我们需要充分考虑不同人群特点,老人、儿童、年轻人以及使用环境。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/976ce1c4-594d-4e30-bc38-4690db84ff4b.jpg)
英文的行高一般为字体1.2倍,比如:你字号是20号,那么行高24。当然也有很多国外设计师采用黄金比例的行高,比如:1.414倍,1.618倍,1.717倍数等等。
行高大小,正如我前面所说,需要充分考虑你整个界面的节奏,和内容以及用户人群来定义是需要紧凑还是疏密。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/4778abf4-c04b-4eaf-bbf7-db7329b027fe.jpg)
中文常用的行高,一般为字体大小的1.5倍比较合适,当然也可以一些简单的做法,就是字号+4原则,比如你字号是20,你的行高24,字号28,行高32也是可行的,每个团队可以根据需求去定义。
字重
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/3e39eefb-58ac-49c7-b24f-c5be15131b59.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/a7ff1fda-e1c2-49cb-9dc0-0b8b2bd3500c.jpg)
字重,顾明思议就是字体粗细,越来越多的产品需要通过字体粗细来拉开信息层次,当下主流趋势iOS11中也是通过字重来拉开信息层级的,所以在定义字体规范时候也需要重复考虑进去什么时候用什么字体。
网格系统
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/f701c638-3c9f-42ea-bdbb-162ae2f9e0f3.jpg)
这块知识基于国内设计团队还运用不太多,也相对比较复杂,我这边简单分享下:我想大多数同学都经历过这个情况,拿到其他设计师源文件,间距混乱,一会边距20,一会24,一会32,特别混乱,原因在于大家间距没有去详细定义它的规则。
看看别人怎么做的?
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/617bdf58-5847-48ed-9d4b-9c80115f2e73.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/ace8e28f-a8b2-4e3c-ba81-59f6d0999e2c.jpg)
Airbnb的规范中,对于间距的定义,没有像其他规范那样,只定义一个最小单位数值,而是定义了5种弹性间距:8、16、24、48、64,在他的全部设计里面,包括元素和元素之前,图文之间都是运用这一套间距规则,保证了整个界面的统一性。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/1ba24937-4740-4ae0-81a3-28c8cbc1070a.jpg)
这是国外运用比较多的8点网格,airbnb在这个基础上进行了进一步的简洁,只保留了8、16、24、48、64。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/a1c99fcc-9e66-4119-a822-d2a27cad62e3.jpg)
国外有项数据表明:设计师在运用8为最小单位做设计时候,一般常用间距有哪些,最后定义了5种常用间距规则。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/37c3fd86-c979-4cb6-9f98-d20ce661c24f.jpg)
所以,我们在规范时候,一定不要运用太多的间距规则,否则间距,很难得到控制和统一。建议:定几种间距,你可以是8、16、24、48、64,如果你觉得这些间距不够用,你也可以添加新的间距规则进行,但是建议不要太多。
网格设计策略
1. 定最小单位
先定义最小单位,单位越小页面越紧凑,目前常用比较多的有4、5、8,假设我们最小单位是4为倍数,那我们所有的间距都按照8的倍数递增,得到间距规则8、16、20、40、60。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/9edc884c-5100-48d8-a070-bf47588c2c97.jpg)
https://designsystem.quickbooks.com/foundations/spacial-units/
2. 按增量设计
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/5ed06040-73a2-4f6b-8234-543a30303d38.jpg)
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/10169323-e8a3-4fe7-bf16-f91ea12696b7.jpg)
界面中所有的间距地方,全部运用8、16、20、40、60这几个原则来做设计,保证页面统一性。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/742c289c-1622-4532-a76d-7de3a263f38b.jpg)
页面中的元素高度,比如:banner高度也是按照间距增量去设计高度,那么整个页面就更加有系统性和科学性。
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/db8cbb81-80c3-4830-aa62-6e8755dfcd10.jpg)
在做系统设计时候经常用到的,通过增量来做设计,希望大家都可以掌握这种间距原则。
图形
![](http://ttzixun.oss-cn-beijing.aliyuncs.com/ttzixun/pic/b3181eb1-318e-4130-b371-894dafe45091.jpg)
图形是界面中的灵魂,图形也是很好传递视觉语言很重要的一部分,如何保证图形一致性,打造界面中视觉计一点?
这个点很大,展开来讲很多,包括品牌符号,icon插画元素一系列等等。
总结
设计语言是一个很庞大的设计体系,字体、网格系统、颜色、图形等等,包括后面定义好原子后,怎么起定义组件,再到页面。
这里借鉴了一些国外设计语言网站,大家感兴趣,也可以从这些网站里学习下,看看别人是如何做的。
作者:sky,微信公众号“我们的设计日记 ”
本文由 @sky 原创发布于人人都是产品经理。未经许可,禁止转载。
题图作者提供
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/ru-he-zui-zhong-qiao-ding-yi-tao-she-ji-yu-yan.html
评论列表(196条)
测试