UI设计基本规范.docx

UI设计基本规范
注:此处规范针对ios手机端应用,其他平台如pc,android,wp等未必适用。
一字体:
中文:黑体-简
英文::Helvetica
字号:在PS中使用时,最小为24-28pt,一般最小标准为28pt,个别可小至24pt。
(注:由于Retina屏幕的关系,在将数据提交给工程师时,需要将数据除以二,如文字字号为28pt,则告诉工程师14pt,实际显示大小也是14pt。因此在此处要求,设计时尽量使你的各项数据均是偶数。)
颜色:一般不用纯黑色。
二尺寸
①屏幕尺寸:
iPhone4s及4:640*960px,326ppi,(屏幕左上角到右下角的距离),
iPhone5及5c、5s:640*1136px,326ppi,物理尺寸为4英寸,
iPhone6:750*1334px,326ppi,,
iPhone6 plus:1080*1920px,401ppi,,
②按钮尺寸
可触碰范围(可触碰范围不一定是按钮看起来的大小)最小为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。教程如下:
?id=12041#5
五 app图标
App图标的尺寸需要5个,以适应于不同的应用场景。具体参数见下图。在上传图标到苹果app store时,实际上是不需要自己画圆角的,苹果公司会自动加上圆角遮罩。
六输出
输出就是切图,一般切图都是由设计师完成的,有的公司由前端完成。
输出方法:
①选好要输出的图层,右键,转换成智能对象
②双击智能对象图层的小图标,进入新建图层
③选择文件>输出为web所用格式,请保证你的弹出框右上角预设中显示的是PNG-24,点击储存
④命名时,记得命名格式是”某某某页面_某某部件***@”,如主页面的一个返回按钮,就是“main_******@”,请确保你的命名不是” main_******@”
(具体的命名方式