移动端UI 设计规范整理汇总

第一部分

    目前主流的 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的切片。

  （注意：切片命名的通用规范是，界面_功能_状态.png。名称应使用英文命名，不要使用数字或者符号作为开头，使用下划线进行连接，例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。其中界面首页是 home、空间按钮是 btn、状态正常是 normal。为了命名的正确性，设计师需要先和合作的开发工程师进行沟通确认。）

         我们在用 Photoshop 做设计新建画布应该设置的像素分辨率现在新版的PS中打开新建，里面的移动设备已经设置好了，可供我们挑选。iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度举例在下面表格中。

1. 全局边距指页面内容到屏幕边缘的距离以达到页面整体视觉效果的统一。它的设置可以更好的引导用户竖向向下阅读。常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。

2. 卡片间距通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px。间距的颜色设置可以与分割线一致，也可以更浅一些。

3. 内容间距UI设计中内容布局时，一定要重视邻近性原则的运用，主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观，如果应用名称与上下图标距离相同，就分不出它是属于上面还是下面，从而让用户产生错乱的感觉。

第二部分

界面文字设计规范在一款 APP 中字号范围一般在20-36之间（@2x）,当然 iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。