谷歌设计规范_一个优秀的UI设计师整理的设计规范汇总，收藏起来！

写在前面   很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。 本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。   目录   01.界面设计尺寸及栏高度 02.边距和间距 03.内容布局 04.界面图片设计比例 05.建立统一风格的图标 06.APP版式设计规范 07.界面文字设计规范 08.设计适配 09.切图规范 10.设计稿标注     正文   01.界面设计尺寸及栏高度   目前主流的iOS设备主要有iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)，它们都采用了Retina视网膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。  

  通过上面的讲解和图示我们了解了iPhone不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？ 也就是说我们用Photoshop做设计新建画布应该设置多大呢？ 另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？ (注意： iOS严格规定了各个栏的高度，这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。  

注意： 在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624(@2x)。 注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

  02.边距和间距   在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。   全局边距   全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。 全局边距的设置可以更好的引导用户竖向向下阅读。

在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。   以iOS原生态页面为例，“设置”页面和“通用”页面都是使用的30px的边距。

  再以微信和支付宝为例，他们的边距分别是20px和24px。