设计基本规范.pdf

UI 设计基本规范 注：此处规范针对 ios 手机端应用，其他平台如 pc,android,wp 等未必适用。 一字体 : 中文：黑体 -简 英文 :：Helvetica 字号：在 PS 中使用时，最小为 24-28pt ，一般最小标准为 28pt ，个别可小至 24pt 。 （注：由于 Retina 屏幕的关系，在将数据提交给工程师时，需要将数据除以二，如文字字 号为 28pt ，则告诉工程师 14pt ，实际显示大小也是 14pt 。因此在此处要求，设计时尽量使 你的各项数据均是偶数。 ） 颜色：一般不用纯黑色。 二尺寸 ①屏幕尺寸： iPhone4s 及 4 ：640*960px ，326ppi ，物理尺寸为 3.5 英寸（屏幕左上角到右下角的距离） ， 长宽比 1.5 iPhone5 及 5c、5s：640*1136px ，326ppi ，物理尺寸为 4 英寸，长宽比 1.775 iPhone6 ：750*1334px ，326ppi ，物理尺寸为 4.7 英寸，长宽比 1.778 iPhone6 plus ： 1080*1920px ，401ppi ，物理尺寸为 5.5 英寸，长宽比 1.777 ②按钮尺寸 可触碰范围（可触碰范围不一定是按钮看起来的大小）最小为 88*88px （实际上显示大小为 44px, 若仔细观察， ios7 里面很多尺寸都是 44 或者 44 的倍数， 如“设 置 ”下的列表（ Tableviews）每一行的高度一般都是 44px. ） ③各部件尺寸 状态栏 （显示电量信号那一栏） ： iPhone4-5s：640*40px ，iPhone6 以上则等比放大 导航栏 （抬头写 app 名字）： iPhone4-5s：640*88px ，iPhone6 以上则等比放大 （此处很多人会有疑惑， 若导航栏为 88px ，而按钮最小也是 88px ，那如果按钮在导航栏上， 如返回键等，那岂不是一样大小？这样的解决方法是：按钮大小规定的 88px ，是可触发的 范围大小， 按钮在设计时，为了更美观， 可以设计小一些，但是可以让后台工程师把周围的 范围也纳入可触发的范围。 ） 标签栏 ：如 ios 版手机 QQ 和微信底部的切换标签。 iPhone4-5s：大小为 640*98px ，iPhone6 以上则等比放大 三 ios6 和 ios7、8 设计上的差别 ①细线设计 ②滤镜，毛玻璃，半透明 ③导航栏和状态栏的合二为一 四小图标的使用 小图标的使用鼓励大家自己设计， 但是要风格统一。 也可以从网上下载， 稍作改动加以使用。 设计可用 ai 或 ps，但我个人比较喜欢 ps。教程如下： /html.php?id=12041#5 五 app 图标 App 图标的尺寸需要 5 个，以适应于不同的应用场景。具体参数见下图。 在上传图标到苹果 app store 时，实际上是不需要自己画圆角的，苹果公司会自动加上圆角遮罩。 六输出 输出就是切图，一般切图都是由设计师完成的，有的公司由前端完成。 输出方法： ①选好要输出的图层，右键，转换成智能对象 ②双击智能对象图层的小图标，进入新建图层 ③ 选择文件 输出为 web 所用格式，请保证你的弹出框右上角预设中显示的是 PNG-24，点 击储存 ④ 命名时，记得命名格式是 ”某某某页面 _某某部件 @2x.png ，如主页面的一个返回按钮，” 就是 “main_back@2x.png”，请确保你的命名不是 ”main_back@2x.png.png ” （具体的命名方式有很多种，所以请务必在输出前就跟工程师沟通协定好） 七数据提供给工程师 需要提供的数据包括： 页面效果图、坐标、尺寸、相对位置等，当然还要包括你当场最准确到位的沟通。