开发需要懂的设计小知识
设计师 vs. 开发者
虽然我们常常开玩笑，开发者和设计师是两个星球的人，我们还是因为同样的愿景来到了这个产业中：那就是为这个世界上的人们创造出伟大的应用和产品。这是我们不可忘记的初心。
设计师需要邀请开发者参与设计。越早在项目中这样做，你受益越大。开发者们会从设计决定中理解背后的原因，然后他们会学习到这些原则。不要只给开发者一个设计的初稿然后让他们去实现，这样的话，开发者并不知道设计背后的原因和进程。
好的设计发生在开发者和设计师的交界处，开发者越早介入设计越好。如果他们参与了设计讨论，他们就能够理解设计是怎么发生的。当设计师和开发者协同工作的时候，他们就会互相理解。他们会一起克服困难，理解他们需要解决什么样的问题。
设计原则
准确
从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。
有效
信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息。
清晰
表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息。
美
对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。
在做设计语言之前我们先要建立设计原则，以及设计原则下面的设计关键词，通过设计关键词推导出对应的视觉表现手法，也就是通常我们所说的，形、色、字、构、质。
形：大面积区域的形状，控件尺寸比例，图形形状的统一性
色：颜色风格，页面色相，彩度，明度整体风格统一性
字：字体的样式，字体，字号，衬线，内容识别性
构：版和栅格系统，版式间距会直接影响到页面的张力及空间感
质：页面风格，肌理维度，整个产品视觉调性
形
决定着整个产品线的调性，能直接将产品所蕴含的情感文化通过视觉表现传达给用户。无论是按钮的圆角数值，还是图标的统一性，都是形的重要组成部分。
统一icon风格，在图标设计中，首先要把控好icon视觉语言的核心，包括描边线宽、圆角、断点方式、点缀、颜色填充类型、图标重心。
统一品牌元素，在界面设计中使用品牌图形能让用户牢记品牌形象，让产品快速抢占市场，提高用户比，如天猫、京东、QQ、美团等。
色
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。
中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。
字
字体是体系化界面设计中最基本的构成之一。字号大小决定了信息的层次和层次，在扁平化设计中，字号越来越重要，好的字号设置能让界面更加清晰一致性强！
一、字阶与行高
字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。
常用的5种字体节奏（375分辨率）
二、字重
字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现 regular 以及 medium 的两种字体重量，分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
三、字体颜色
注意标题、正文、日期、提示行文字的区别
建议
字体系统的构建，是「动态秩序之美」的第一步。在实际的设计中，我们还有三点建议：
建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。
构
一、亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
在同一个页面中，间距的样式不要太多，间距尽量使用倍数，比如1x，2x，3x，4x。如果以12为基准，间距就是12，24，36，48。如果以8为基准，间距就是8，16，24，32。不过这也不是绝对的，具体情况还要根据项目需要。需要注意的是，最好不要出现奇数，也不要奇偶数交叉，比如15，7。
二、对齐
1.文案类对齐
2.表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
3.数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
质
结构、图形、颜色、留白共同构成了界面的质感。所谓品质感其实就是产品给人的一种严谨、专心对待的态度。产品的质地风格应当与产品的整体形象保持一致。同样一本书的封面，粗糙纸的封面和细心打磨的小羊皮封面就是不同的概念。
小结
一致性特别重要，这意味着视觉的一致性和体验的一致性。
你可以很简单地问自己，“这个颜色和我前一屏的颜色一样吗？”，“这两个元素有同样的留白吗？”，或者“这些输入框对齐了吗？”你要养成一种习惯，当你发现有一个图标没有和其他的图标对齐，当你能看出这些事情的时候，你不能装作没看见。
不要为了编写代码容易而设计，导致的后果就是可能会在视觉或体验上有损失。除非开发完成不了。
设计师需要引领而不是跟随着设计些东西。在设计决定中，听听开发者的意见。说明你做出这样的解决方案的原因和过程，而不是仅仅给他们一个规范和一些资源。如果你做可用性的测试，也请邀请你的开发人员。开发者们是非常聪明的，他们很快就能学习到什么是好的设计什么不是。如果你是引领者，开发者会在你不在的时候继续你的好设计，然后慢慢地会越来越好。
纯净的 UI 和纯净的代码一样。它是组织好的、一致的而且进无止境。
