iOS端的UI设计文档
iOS端的UI设计文档
APP和网站，风格色调始终注意保持一致（平台一致性）
在App不断更新的过程中定义设计准则、风格、规范
设计规范：
1、分类合理（为了能让用户快速查找，合理的分类必不可少）
2、规范本身保持一致（内容保持一致、格式保持一致）
3、排版易读（通过合适的字体字号、间距留白减少用户阅读的疲劳感，图片与说明清晰的结合）
一、原型图和二倍、三倍切图
1、一般图标命名：
例如：alipay.png、[email protected]、[email protected]
相对规范命名：
切片种类+功能+图片描述（可有可无）+状态.png
名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接
例：一个首页的处于正常状态的确定按钮
btn_sure_nor.png、[email protected]、[email protected]
切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常)
2、App图标按尺寸命名，名字为icon，前边数字是宽，后边数字是高：
icon28x28.png、icon29x29.png 、icon40x40.png、icon57x57.png、icon58x58.png、icon60x60.png、icon72x72.png、icon76x76.png、icon80x80.png、icon87x87.png、icon114x114.png、icon120x120.png、icon167x167.png、icon180x180.png、icon512x512.png、icon1024x1024.png
3、引导页、启动页面图片命名，名字为Default，前边数字是宽，后边数字是高：
Default640x960.png、Default640x1136.png、Default750x1334.png、Default768x1024.png、Default1242x2208.png、 Default1536x2048.png、Default2048x1536.png、Default2732x2048.png
在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG
欢迎页面Default，icon一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8
在所有iOS设备上，渲染的像素和实际像素是相等的。唯一的例外是：iPhone 6 Plus的Retina HD屏幕。因为其屏幕的像素分辨率比自然的 @3x 分辨率更低，渲染的内容会自动调整到大约原尺寸的87%（从2208 x 1242像素适应到1920 x 1080像素)
推荐做设计稿的时候使用IPhone7的尺寸进行设计，IPhone7的尺寸，向下可以适配4，5等，向上可以适配7 plus等，好适配，切出来就是@2x，改一改上下都能照顾到
左右留白建议24px，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，并非什么规范，确切的说，整个屏幕都可以随便做，但是这里说的是正常页面
4、全局性的切图
所有设计尺寸，包括图形效果，应该尽量使用偶数（技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px，所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边）
5、共用资源的图按最大尺寸输出一张即可，如：重复的按钮之类的，只要提供一张共用的资源就可以了
6、每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出
7、最小点击区域问题：
iOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。据说这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……
所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏
相关切图原理：http://blog.csdn.net/u013069892/article/details/78869908
切图工具：
Cutterman 官网地址 http://www.cutterman.cn/ 一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行**。官网上有安装使用教程
Assistor PS 也是一款PS的切图标注插件，也被誉为神器
二、视觉标注：
1、控件色值（#000000或RGB:0,0,0）标注
背景色、主题色、辅助色/点缀色（如：线条）
一级信息字体颜色、二级信息字体颜色、三级信息字体颜色
按钮未选中颜色/按钮不能选中颜色
注：
标注颜色是使用16进制，还是RGB：
都用得到，要看实现什么东西，标注颜色时，两种色值表达都标上(16进制&RGB)2、文字字号（12 px、14 px、16px...）标注，是否加粗(B）标注
特级字体使用大小（eg：界面标题/Top Bar上的文字）
一级信息使用大小（eg：用户名/文章标题等）
二级信息使用大小（eg：文章内容等）
三级信息使用大小（eg：评论时间等）
3、控件圆角弧度值（5、8、10...）标注
4、控件距屏幕边缘或相邻控件的像素值（px）标注（及留白部分间距）
5、控件自身宽高（px）标注（宽高固定不变的控件）
6、控件透明度标注（不标默认为alpha ：1）
7、 图标的大小和图标的可点击区域不一定一致，不一致时需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能设计师不能完全做到1px不差，所以基本不标，交给工程师去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同的屏幕
8、图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高
图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出
9、每种元素的位置如何确定：
通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。
标注工具：
Windows：PxCook
Mac： Sketch
所有的页面标注总结起来就是：标文字，标图片，标间距，标区域
详细参考：
http://www.chinaz.com/design/2015/0918/448252.shtml
三、交互说明
1、点击效果（设计出点击前后的两张图）
2、交互场景举例及说明（导出一个.html）
注：
直接在sketch上面拷贝样式，或者直接CommandC+V，还可以调出别的同事的画板，然后导入到自己的机子上，插件名字叫做sketch palettes.可以上网搜索，可以下载的
没有sketch的前提下， 可以借用插件Marketch导出一个html格式，导出后用浏览器打开index.html，方便开发人员查看
四、UI开发代码
五、其他
iPhone X相关
1、为Home指示条保留位置
2、虚拟 Home 指示条只有亮／暗两种模式，它会自动根据周围背景，选择将自己变身成白色或是黑色，从而尽可能地和周围背景有所区分
3、iPhoneX因为刘海头的存在，遮蔽了原有的电池状态栏，包括顶部的导航栏部分的视觉面积，所以从iOS11开始，导航栏中间的文字，被挪到下面去了，用了更大更粗的字体显示，因为有这个小刘海的存在，为了文字不被遮蔽，所以导航栏的高度也会相应被拉高
设计布局要填充整个屏幕，这里有两块区域需要额外考虑：
屏幕顶部，即StatusBar部分，这条状态栏本来并没有可发挥的空间，但是iphone的StatusBar与NavigationBar(以下简称NavBar)背景是可以通栏的，以达到一种完全沉浸式体验的设计
大部分的APP应该也是没有影响的（主流NavBar都采用纯色背景，StatusBar背景沿用NavBar的背景），但是对于那些做了NavBar视觉效果的设计师就要考虑了，你的渐变色背景、或者带底纹的北背景、还包括电商平台商品图是通栏展示的商品图，多少会对实际效果产生一些影响
比如，NavigationBar是渐变色背景的，由于X的Status+Nav高度增加，我们1242*192(@3X)的背景图会被等比例拉伸至这两块区域并且剪辑多余部分。
4、虽然官方的模板标题字是如此大，但是在国内，设计师在设计顶部标签栏的文字时会根据具体情况选择小点的字号。因为国内还是喜欢高信息密度的设计。
5、对拥有底部导航栏/标签栏的 App 而言，iPhone X 这个全面屏的「下巴」并非可用区域，它并不真的「全面」，底部标签栏的高度也加大，为了适应新的硬件屏幕设计，视觉区域也相应加大
如果 App 的底部是可滚动的内容（比如一个长列表视图），那么放心大胆地霸占整个屏幕吧！这是官方推荐的正确做法！事实上，用户依然可以点选最下方的列表条目。这种情况下，全面屏才是真的「全面」了
底部导航栏图标，过去的做法是当前**模块的图标为剪影风格，其他图标为线性风格。设计师需要做两套图标。分别是一套剪影，一套线性。而现在统一为剪影，而当前**模块的图标使用平铺色代表**
6、如果你的 App 带有「底端上划」这样的炫酷操作，Apple 的建议是：少侠要不你还是重新考虑一下？因为这个交互我们已经占了，「在万不得已必须要这样做的情况下」，开发者可以开启「边缘保护」功能（Edge Protection），开启后，第一次底端上划将只是唤醒 Home 指示条，再次上划才会**原有功能
7、安全区
手机纵向持握状态下，安全区是从屏幕最顶端往下 44 pt 开始计算的，要注意的是，它并不是和「齐刘海」完全齐平的，而是要再往下一点。「下巴」位置上，从下往上推 34 pt 以上的部分开始才被视为安 全区
横向状态下（假设是逆时针旋转 90 度），原本的「刘海」部分到了左侧，「出血」部分实际占用面积不变，而尽管虚拟 Home 条挪到了下方的长边上，屏幕最右边虽然没有任何系统及元素，但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说，在横向状态下，你的安全区是个半岛，只有上方是连接到屏幕边缘的
8、设计适配
从页面的宽高比例来说：
新的iPhoneX宽度1125/3=375，而iPhone7的宽度750/2=375，两个的宽度一致
新的iPhoneX高度2436/3=812，而iPhone7的高度1334/2=667，新的iPhoneX是比iPhone7要长一截
所以从页面视觉来看，依然采用老办法，从2X的iPhone7做为基准去做一稿设计，唯一变化的是可能需要采用更高的导航栏，更高的底部标签栏
原有的页面相当于现在的页面设计，信息密度可能降低了。因为内容显示区域变少了点
最新iPhoneX的PSD模板，下载地址：https://pan.baidu.com/s/1bplNkpp（密码: 53sk）
相关链接：
相关书籍推荐：
《术与道移动应用设计必修课》