⼀份超详细的UI设计规范全攻略
那么今天我们就直接进⼊正题，在前⾯我们定义好了，设计原则和关键词，那么接下来应该如何去做？
01 如何去做？
根据原⼦定律（不懂原⼦定律同学可以搜索原⼦设计⽅法）我们从页⾯中最细⼩的元素⼊⼿，也可以理解为页⾯中⽆法再拆分的元素开始，它是组成界⾯最基础的元素，从最基础的元素，开始做统⼀性，本次我将从颜⾊，字体，⽹格说起。
02 颜⾊
从颜⾊开始，需要根据整个页⾯中场景进⾏颜⾊定义，同样⾊彩也需要根据我们定义的关键词去推导，在定义颜⾊过程中，可以参加⾊彩⼼理学原理，以及竞品分析：
⾼品质：深⾊配⾊，⿊⽩，中性的配⾊全球化：深邃紫⾊，科技蓝，⾃然绿年轻化：渐变⾊，马卡龙撞⾊
在定义了上述⼤的⾊彩原理下，需要对界⾯中使⽤场景进⾏梳理得出下列⼤概⾊彩类型：
当然也可以定义⼀些界⾯中常⽤渐变⾊板，现在很多⽹站也有很多很好看的渐变可以去尝试。
也可以定义⼀些图⽚上放⽂字效果，叠加什么颜⾊，颜⾊的模式是什么样的，透明度是多⼤，这些都可以帮助我们定义好⼀套⾊彩体系。当然还有⼀些很不错的⾊板，如果你不知道怎么配⾊，也不知道当下流⾏⾊是怎么样，也可以从这些⾊板⾥⾯选择⼀个配⾊，挑选⼀些符合你们产品的配⾊。
https://www.materialui.co/
https://coolors.co/
http://colorsupplyyy.com/app/
03 字体
字体是界⾯中⽤户看到最多的⼀些元素，除了定义界⾯中的字体，同时我们也要定义界⾯下的字体，包括线下物料宣传等，在字体选择上，需要注意：
1. 信息传递是否⾜够清晰，字体也是有情感的，字体表达的情感是否和我们界⾯中需求是⼀致的。
1. 信息传递是否⾜够清晰，字体也是有情感的，字体表达的情感是否和我们界⾯中需求是⼀致的。
2. 个性上，有的字体很⽅正，笔直，有的字体笔划⽐较活泼，那么不同字体我们如何去选择，同样需要在前⾯⼤的设计关键词下⾯去设计。
对于字体选择，⼀定要根据产品关键词去定义，以上是界⾯中常⽤⼀些英⽂和中⽂字体，每种字体虽然⼤体看差不多，其实每个字体，细看其实有些笔画上的差异！
我个⼈建议苹⽅字体和Helvetica Neue⽐较通⽤性更强，中⽂字体包⽐较⼤，特殊产品如果需要有个性化中⽂字体，需要注意字体⼤⼩包处理！
04 字号
字号是界⾯中很重要元素，字号⼤⼩决定了信息的层次和层次，在扁平化设计中，字号越来越重要，好的字号设置能让界⾯更加清晰⼀致性强！相反差的字号会让界⾯看起来⼭寨，关于字号的选择，可以遵循iOS的规范⼤⼩，也可以根据⾃⼰产品个性去定义你的字号。假如你是电商产品，那么你可能需要对价格字体单独设置字号，如果你是⾦融产品，那么对应的字号也需要定义好对应的⼤⼩层级！
对于特殊字体的处理（375分辨率）
对于特殊字体的处理（375分辨率）
常⽤的5种字体节奏（375分辨率）
特殊数字或图形化字号（375分辨率）
05 ⾏⾼
参考3C原理，不明⽩可以百度搜，英⽂的⾏⾼是字号的1.2倍，但是中英⽂字体原因，中⽂字体⼀般是1.5-2倍之间，我们需要充分考虑不同⼈群特点，⽼⼈，⼉童，年轻⼈，以及使⽤环境。
英⽂的⾏⾼⼀般为字体1.2倍，⽐如你字号是20号，那么⾏⾼24，当然也有很多国外设计师采⽤黄⾦⽐例的⾏⾼，⽐如1.414倍，1.618倍，1.717倍数等等。
⾏⾼⼤⼩，正如我前⾯所说，需要充分考虑你整个界⾯的节奏，和内容以及⽤户⼈群来定义是需要紧凑还是疏密！
中⽂常⽤的⾏⾼，⼀般为字体⼤⼩的1.5倍⽐较合适，当然也可以⼀些简单的做法，就是字号+4原则，⽐如你字号是20，你的⾏⾼24，字号28，⾏⾼32也是可⾏的，每个团队可以根据需求去定义。
06 字重
字重，顾名思义就是字体粗细，越来越多的产品需要通过字体粗细来拉开信息层次，当下主流趋势iOS11中也是通过字重来拉开信息层级的，所以在定义字体规范时候也需要重复考虑进去什么时候⽤什么字体。
07 ⽹格系统
这块知识相对⽐较复杂，我这边简单分享下，我想⼤多数同学都经历过这个情况，拿到其他设计师源⽂件，间距混乱，⼀会边距20，⼀会24，⼀会32，特别混乱，原因在于⼤家间距没有去详细定义它的规则。
08 看看别⼈怎么做的？
Airbnb的规范中，对于间距的定义，没有像其他规范那样，只定义⼀个最⼩单位数值，⽽是定义了5种弹性间距，8，16，24，48，在他的全部设计⾥⾯，包括元素和元素之前，图⽂之间都是运⽤这⼀套间距规则，保证了整个界⾯的统⼀性。
这是国外运⽤⽐较多的8点⽹格，Airbnb在这个基础上进⾏了进⼀步的简洁，只保留了8，16，24，48，
国外有项数据表明，设计师在运⽤8为最⼩单位做设计时候，⼀般常⽤间距有哪些，最后定义了5种常⽤间距规则。
所以，我们在规范时候，⼀定不要运⽤太多的间距规则，否则间距，很难得到控制和统⼀，建议定⼏种间距，你可以是8，16，24，48，，如果你觉得这些间距不够⽤，你也可以添加新的间距规则进⾏，但是建议不要太多。
09 ⽹格设计策略
1. 定最⼩单位
先定义最⼩单位，单位越⼩页⾯越紧凑，⽬前常⽤⽐较多的有，4，5，8，假设我们最⼩单位是4为倍数，那我们所有的间距都按照8的倍数递增，得到间距规则，8，16，20，40，60
https://designsystem.quickbooks.com/foundations/spacial-units/2. 按增量设计
界⾯中所有的间距地⽅，全部运⽤8，16，20，40，60这⼏个原则来做设计，保证页⾯统⼀性。
页⾯中的元素⾼度，⽐如banner⾼度也是按照间距增量去设计⾼度，那么整个页⾯就更加有系统性和科学性。
在做系统设计时候经常⽤到的，通过增量来做设计，希望⼤家都可以掌握这种间距原则！
10 图形
图形是界⾯中的灵魂，图形也是很好传递视觉语⾔很重要的⼀部分，如何保证图形⼀致性，打造界⾯中视觉记忆点，这个点很⼤，展开来讲很多，包括品牌符号、icon插画元素⼀系列等等。
11 总结
设计语⾔是⼀个很庞⼤的设计体系，字体、⽹格系统、颜⾊、图形等等，包括后⾯定义好原⼦后、怎么定义组件，再到页⾯。⽂章⾥借鉴了⼀些国外设计语⾔⽹站，⼤家感兴趣，也可以从这些⽹站⾥学习下，看看别⼈是如何做的。关联⽂章像苹果关联⽂章Google⼀样做设计语⾔，带你了解全流程详解⼤⼚的UI设计规范制作步骤#专栏作家#