内容发布更新时间 : 2024/5/24 1:45:33星期一 下面是文章的全部内容请认真阅读。

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。教程如下： http://www.iconfans.com/html.php?id=12041#5

五app图标

App图标的尺寸需要5个，以适应于不同的应用场景。具体参数见下图。在上传图标到苹果app store时，实际上是不需要自己画圆角的，苹果公司会自动加上圆角遮罩。

六输出

输出就是切图，一般切图都是由设计师完成的，有的公司由前端完成。 输出方法：

①选好要输出的图层，右键，转换成智能对象 ②双击智能对象图层的小图标，进入新建图层

③选择文件>输出为web所用格式，请保证你的弹出框右上角预设中显示的是PNG-24，点击储存

④命名时，记得命名格式是”某某某页面_某某部件@2x.png”，如主页面的一个返回按钮，就是“main_back@2x.png”，请确保你的命名不是”main_back@2x.png.png” （具体的命名方式有很多种，所以请务必在输出前就跟工程师沟通协定好）

七数据提供给工程师 需要提供的数据包括：

页面效果图、坐标、尺寸、相对位置等，当然还要包括你当场最准确到位的沟通。

①确保每个数字都要除以二，并且提前告知工程师是否已经除以二了。 ②坐标轴的位置通常以页面左上角（一般指状态栏左上角，有时候是从导航左上角开始算，请务必和工程师沟通好）为原点（0,0），以横轴宽为X，以纵轴即高为Y。 ③颜色的十六进制代码值。有时候工程师也需要RGB。 示例：