UI设计基本规范..docx

UI设计基本规范注：此处规范针对ios手机端应用，其他平台如pc,android,wp等未必适用。一字体:中文：黑体-简英文:：Helvetica字号：在PS中使用时，最小为24-28pt，一般最小标准为28pt，个别可小至24pt。（注：由于Retina屏幕的关系，在将数据提交给工程师时，需要将数据除以二，如文字字号为28pt，则告诉工程师14pt，实际显示大小也是14pt。因此在此处要求，设计时尽量使你的各项数据均是偶数。）颜色：一般不用纯黑色。二尺寸①屏幕尺寸：iPhone4s及4：640*960px，326ppi，物理尺寸为3.5英寸（屏幕左上角到右下角的距离），长宽比1.5iPhone5及5c、5s：640*1136px，326ppi，物理尺寸为4英寸，长宽比1.775iPhone6：750*1334px，326ppi，物理尺寸为4.7英寸，长宽比1.778iPhone6 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”（具体的命名方式有很多种，所以请务必在输出前就跟工程师沟通协定好）七数据提供给工程师需要提供的数据包括：页面效果图、坐标、尺寸、相对位置等，当然还要包括你当场最准确到位的沟通。①确保每个数字都要除以二，并且提前告知工程师是否已经除以二了。②坐标轴的位置通常以页面左上角（一般指状态栏左上角，有时候是从导航左上角开始算，请务必和工程师沟通好）为原点（0,0），以横轴宽为X，以纵轴即高为Y。③颜色的十六进制代码值。有时候工程师也需要RGB。示例：八工作流程老板or产品提出需求产品画出原型图（其实这一步是交互设计师完成的）将需求和原型图交付视觉设计师视觉设计师完成后反馈产品和老板修改修改完成后提交工程师提交工程师的部分应包含：效果图+详细坐标数据+正确命名的切图在这个过程中，沟通非常重要。要养成的习惯：命名、编组、双倍数。前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。做的每个图层都要给他个名字，一来你自己好辨认，二来你切图的时候也免去了重新命名的麻烦。九文档管理文档管理是一门非常高深和必要的学问。请务必确保你们的手在不断的ctrl+s，要准备一个移动硬盘和一个网盘（公司有自己的网盘：gzdingyi@, 2014dingyi）。请务必确保你的每一份文件都有源文件。十二关于IOS8的适配问题由此可见，只有iPhone4和iPhone4s和iPhone5及以上设备的长宽比不一样，可以粗略认为iPhone5、5s、6、6+的长宽比是一样的，可以等比例缩放，虽然有细微的差别，基本上看不出来。尽管iPhone 6的