你了解UI设计的规范吗？
很多新人在开始做移动端UI设计的时候，对界面的尺寸规范不是那么清楚，很多时候都是凭借自己的感觉和经验去设计，导致做出来的页面总是不那么尽如人意，从而一遍遍修改，拉低了工作效率。
那么，今天我们就来聊一聊，设计规范的那些事！
什么是设计规范？
通俗来说，设计规范是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。
UI设计规范是基于用户界面而制定的一套可复用设计库，也是为了方便设计师、开发和测试人员共同协作，而遵循的规律和法则。
所以，一般公司在招聘时就会要求应聘者懂设计规范：
▲截图来自BOSS直聘，9月15日
为什么要做设计规范？
统一产品风格
举个最简单的例子，一个大型的项目，可能有几十个页面需要设计，即使是一个设计师设计，在做设计的过程中，也很容易产生细微的出入，导致每个控件可能会有一些差别。
更何况如果多个设计师共同协作，如果没有制定规范，每个人自由发挥，同一个控件便会出现不同的样式。
比如：同一个产品设计中，设计师A的按钮是2px圆角，设计师B的按钮做成了8px，同时设计师C页面的按钮又做成了全圆角，这就是没有设计规范统一的后果，想一想这样的结果是多么可怕。
提高设计和开发效率
通过设计规范，同一公司的设计师能够很快知道产品设计的风格及要求，程序员在开发的时候也可以了解到哪些控件是可以一次性写好并能重复调用，例如icon、按钮、行间距、字体大小、色值等等，提升双方的工作效率。
iOS设计规范
每个设计平台有不同的设计规范，今天先说常用的iOS设计规范。iOS 与其他平台不同，主要是清晰、顺应、纵深三大原则。
9月17日，苹果正式发布了iOS 14的新版系统，这次较大的亮点，便是iPhone桌面UI新增“小组件”功能，让原本规规矩矩的 iPhone主页发生了很大的变化；更进一步的如果你足够敏锐，就一定会第一时间想到小部件是需要 UI 进行设计的。
由于篇幅原因，我这里跟大家解读几个常见的设计规范：
01桌面小部件 Widget
本次iOS更新的重中之重：小部件。iOS 的桌面自此以后变得更加多样化。当然，使用安卓的同学一定不会对桌面小部件陌生，但作为 UI 设计师，我们还是需要去了解更多的关于苹果版小部件的细节。
首先，针对 375✕812 (iPhoneX/Xs/11 Pro) 的屏幕来说，即将到来的 小部件总共有三种不同的尺寸，它们分别是：155✕155pt(small)、329✕155pt (medium)、329✕345pt(large)。
以天气小部件为例：
而其余尺寸的屏幕小部件的尺寸也各不相同，下面给出详细的表格：
第二，苹果官方建议小部件只专注于一个功能，展示与 APP 最具强关联性的信息；谨慎地使用色彩，让文字信息凸显出来且易于阅读。
第三，建议使用 iOS 原生字体，即：西文 SF Pro，中文苹方。
第四，数据加载需要占位符，可使用半透明的方块、圆形来表示文字段、图标。
第五，Widget 内部图形的圆角需适配外框的圆角。
第六，适配黑暗模式。
02字体
San Francisco (SF) 是 iOS 系统的默认英⽂字体：这种字型的字体经过了优化，使设计具有可读性、清晰性和⼀致性。
San Francisco 字体的设计的⼤号字体和⼩号字体都很清晰。在响应⽂本⼤⼩的变化时，优先考虑内容，下面给出默认的大尺寸字体规范：
在字体的使用中，如果可以的话，尽量只使用一种字体，⽤字重、字体⼤⼩和颜⾊来突出 App 中重要的信息。
03图标和图像
iOS ⽤于在屏幕上放置内容的坐标系统是以点(pt)为基础的，这些点映射到显示器中则以像素显示。
在标准分辨率屏幕上，⼀个点等于⼀个像素(1pt = 1px)。但因为⾼分辨率屏幕的像素密度更⾼，所以在真实世界⾥同等⾯积的屏幕中就包含更多的像素，即⼀点中包含更多像素(1pt = 2px、1pt=3px)。因此，⾼分辨率屏幕需要具备更⾼像素的图像。
为了⽀持所有的 iOS 设备，在设计时建议提供⾼分辨率的图像：基于不同的设备，将每个图像中的像素数量乘以特定⽐例系数来进⾏适配。
标准分辨率图像的⽐例系数为1.0，这种图像被称为 @1x 图像。⾼分辨率图像的⽐例系数为2.0或3.0，被称为 @2x 或 @3x 图像。假设你有⼀个标准的分辨率 @1x 图像，如 100px x 100px，那么，该图像的@2x版本将是 200px × 200px，@3x 版本将是 300px × 300px。
分辨率影响了图标的设计，iOS的App图标需符合以下规格标准：
每个 App 必须提供⼀⼤⼀⼩两个图标，⼩图标会出现在主屏幕，并且当你的 App 被安装后会被系统使⽤，⼤图标会被⽤在苹果商店中。
04深色模式
在 iOS13 以及更⾼版本中，⽤户可以选择⼀种称为深⾊模式的系统级⿊暗主题。
在深⾊模式中，系统在所有视图、菜单、控件中采⽤了⼀种更⿊的⾊板，并且它使⽤了⼀种更为醒⽬的⾊彩让前景内容在背景中脱颖⽽出。深⾊模式⽀持所有⽆障碍特性。
深⾊模式将焦点放在界⾯的内容区域，让内容脱颖⽽出，⽽其他 UI 元素隐于⿊暗。深⾊模式的⾊板包含了更暗的背景⾊和更亮的前景⾊，在设计时色彩的选择上，需保证在深浅模式下颜⾊都能拥有⾜够的对⽐度。
当然，iOS的设计规范远不止这些，更多的还有安卓设计规范、常用UI组件的设计方式。
