全局UI设计规范手册精进UCD设计总监第一字典.pdfVIP

全局U I设计规范手册 ：精进UCD设计总监第一字典 注 ：本文档由PM7V – Ian Huang整理于2016年9月初 ，随着 件设备条件变更 ，最佳规范倍 率可能随着时间推移需要加倍计算 ！ 1 UI基础 1.1 像素 1.1.1 逻辑像素 （Pt ） 在软件层面构成了画面图像。也称逻辑点 ，是控制屏幕显示内容多寡的单位 1.1.2 物理像素 （Px ） 在 件层面构成了液晶屏幕 1.1.3 手机图像 由物理像素和逻辑像素共同构成 ，缺一不可 1.1.4 开发原理 程序猿在开发中需将设计师提供的分辨率 （物理像素 ）转换为逻辑像素后才能控制页面显示的内容 1.1.5 范例 IPad_mini分辨率768 1024 ，倍率为1X ，即1Pt = 1Px IPad_mini2分辨率1536 204 8 ，倍率为2X ，即1Pt =2Px 15.4寸Macboo k_ Pro分辨率2880 1800 （更多空间逻辑分辨率1920 1200 ），倍率为1.5X ， 即1Pt = 1.5Px 1.2 倍率 1.2.1 倍率 ： 1个逻辑像素可以对应任意个物理像素点 （1Px、1.5Px、2Px等 ） 1.2.2 公式 ： 倍率 = 物理像素 / 逻辑像素 1.2.3 倍率换算图 1.2.4 常见分辨率 注 ：因开发工具不同 ，IO S逻辑像素单位是pt ，A ndro id逻辑像素单位是dp 1.3 倍率优劣 1.3.1 开发换算 1X倍率 ，1pt = 1px ，逻辑像素 = 物理像素 ，无需换算 2X倍率 ，1pt =2px ，逻辑像素 = 物理像素 / 2 ，能快速换算 3X倍率 ，1pt =3px ，逻辑像素 = 物理像素 / 3 ， 很难换算 ，除不尽时需四舍五入 ，易产生误差 优劣 ：1x 2x 3x 1.3.2 设计 本 1x倍率 ，元素控件尺寸必须为偶数 ，能兼顾居中排版避免误差 ，设计难度低 2x倍率 ，元素控件尺寸必须为4 的倍数 ，否则容易影响居中排版 ，设计难度中 3x倍率 ，元素控件尺寸必须为6的倍 ，否则严重影响居中排版 ，设计难度高 优劣 ：1x 2x 3x 1.3.3 查看效果图 因设备中查看效果图时 ，逻辑像素会被成倍放大 ，故倍率高的设计图更接近所见即所得的效果。 优劣 ：3x 2x 1x 1.3.4 倍率转换 1x倍率转2x、3x时只需乘以2或3即可 ； 2x倍率转1x需除以2 ，转3x需乘以1.5 ，相对繁琐 ； 3x倍率转1x、2x时需先除以3 ，再乘以1、2 ，极为繁琐 ； 优劣 ：1x 2x 3x 1.3.5 切图 PC ： 默认1x切图 ； A PP ： 1x切图已被淘汰 ，市面设备分辨率普遍在2x以上 ； 2x可直接导出2x切图 ，导3x切图仅需乘以1.5倍 ； 3x可直接导出3x切图 ，导2x切图需除以3再乘以2 ，较为繁琐 ； 优劣 ：2x 3x 1x 1.3.6 对比 1x、3x个别优势较大 ，但存在明显短板 ，2x最为均衡 ，建议使用。 2 PC端 2.1 最佳基数 2.1.1 最佳像素倍率1X 1Pt = 1Px 2.1.2 最佳元素控件尺寸 偶数 2.1.3 最佳分辨率宽度 窄屏 ：980px 宽屏 ：1220px 2.2 栅格结构 2.2.1 栅格公式 ： （A n ）-i = w （60 21 ）-20 = 1220 2.2.2 窄版980PX 180 ：4 0 ：760 64 0 ：4 0 ：300 720 ：20 ：24 0 2.2.3 宽版1220PX 900 ：20 ：300 960 ：20 ：24 0 2.3 版块间距 2.3.1 上下左右间距为20PX 2.3.2 特殊情况为4 0PX 2.4 图片大小 2.4 .1 横图比例- 10:7 2.4 .2 竖图比例-7:10 2.4 .3 窄版 横图 ： 二图版式 ：4 80 336PX ，间隔1 20PX 三图版式 ：300 210PX ，间隔2 4 0PX 四图版式 ：230 161PX ，间隔3