UI设计基本规范

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.778iPhone6plus：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。教程如下：=12041#5五app图标App图标的尺寸需要5个，以适应于不同的应用场景。具体参数见下图。在上传图标到苹果appstore时，实际上是不需要自己画圆角的，苹果公司会自动加上圆角遮罩。六输出输出就是切图，一般切图都是由设计师完成的，有的公司由前端完成。输出方法：①选好要输出的图层，右键，转换成智能对象②双击智能对象图层的小图标，进入新建图层③选择文件输出为web所用格式，请保证你的弹出框右上角预设中显示的是PNG-24，点击储存④命名时，记得命名格式是”某某某页面_某某部件@2x.png”，如主页面的一个返回按钮，就是“[e-mail]”，请确保你的命名不是”[e-mail]”（具体的命名方式有很多种，所以请务必在输出前就跟工程师沟通协定好）七数据提供给工程师需要提供的数据包括：页面效果图、坐标、尺寸、相对位置等，当然还要包括你当场最准确到位的沟通。①确保每个数字都要除以二，并且提前告知工程师是否已经除以二了。②坐标轴的位置通常以页面左上角（一般指状态栏左上角，有时候是从导航左上角开始算，请务必和工程师沟通好）为原点（0,0），以横轴宽为X，以纵轴即高为Y。③颜色的十六进制代码值。有时候工程师也需要RGB。示例：八工作流程老板or产品提出需求产品画出原型图（其实这一步是交互设计师完成的）将需求和原型图交付视觉设计师视觉设计师完成后反馈产品和老板修改修改完成后提交工程师提交工程师的部分应包含：效果图+详细坐标数据+正确命名的切图在这个过程中，沟通非常重要。要养成的习惯：命名、编组、双倍数。前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。做的每个图层都要给他个名字，一来你自己好辨认，二来你切图的时候也免去了重新命名的麻烦。九文档管理文档管理是一门非常高深和必要的学问。请务必确保你们的手在不断的ctrl+s，要准备一个移动硬盘和一个网盘（公司有自己的网盘：[e-mail],2014dingyi）。请务必确保你的每一份文件都有源文件。十二关于IOS8的适配问题由此可见，只有iPhone4和iPhone4s和iPhone5及以上设备的长宽比不一样，可以粗略认为iPhone5、5s、6、6+的长宽比是一样的，可以等比例缩放，虽然有细微的差别，基本上看不出来。尽管iPhone6的屏幕分辨率从1136*640提升至1334*750，不过高宽比是没有变化的，也就是说所有的应用只需要做一次等比例缩放，就可以完成UI适配工作，比起当年从960*640分辨率提升至1136*640分辨率时所做的工作应该会更加简单一些。当然这并不是最好的选择，毕竟等比例放大有可能会造成图标或文字模糊等问题。实际上自iPhone4发布之后，苹果就开始鼓励开发人员使用他们提供的自动版式来设计应用，这样在不同的设备上，同一个应用也能做到屏幕UI自适应。苹果自己当然也会这样做，因此在iPhone6上，iOS的界面并不会有太大的变化，应用图标不会被等比例放大，而是把相互之间的间距拉大一些，在维持“每行四个图标”设计不变的同时增加一行图标。其他界面的设计也会得到相应的优化，iPhone6屏幕分辨率更高，因此其可以比iPhone5s显示更多的内容，例如在部分设置的界面上，iPhone5s可能需要拖动屏幕才能浏览全部选项，而iPhone6则无需拖动屏幕即可全部显示。换句话说，iPhone6上的UI界面不会因为分辨率的提升有很大的变动，更多的只是一些显示上的优化，应用UI的适配工作也不会很困难，像iPhone5那样发布一段时间之后才完成应用UI适配的事情，应该是不会发生了。所有设计界面只设计两套应该就OK，一套以最大的分辨率iPhone6+的1920*1080设计，一套以iPhone4和4s的960*640的设计。程序中最好保持两套UI切图就可以满足市面上所有的iPhone设备。当然拥有更多的切图也是可以的，程序包的加入的图片越多，程序包就越大，用户下载的体验就差一点。十一工具和网站设计软件Ps+ai动态演示Ae交互设计Axure+BM色差纠正Psplay剪藏软件印象笔记网站DribbbleBehanceIconfans优设（导航）各种源文件和jpg下载收藏起来绝对对你有好处。UI设计原则