APP-UI规范

APP-UI设计规范

——0.1版本

1.设计尺寸及像素

作图的时候尽量用形状工具画矢量图，方便后期图片尺寸的变更及切图。

现在主流尺寸如下：

Android

480×800、720×1280、1080×1920……

IOS

iPhone:320×480、640×960、640×1136、750×1334、1080×1920

iPad:1024×768、2048×1536

像素：72 像素/英寸

尺寸：第一版效果图建议使用尺寸750×1334，能适用大部分尺寸，并且在iPhone6 Plus中显示也较为清晰，切图后文件大小也适中，应用的内存消耗也不会过高。后期再配合程序员根据不同尺寸切相应版本的图片。

2.设计要素

a.布局

Android开发中最麻烦的问题之一就是屏幕适配的问题，硬件厂商太多，屏幕尺寸太多。一个好的应用应该尽可能多的适配更

多的屏幕。UI设计过程中就应该考虑到屏幕变宽、变高、变窄、变短的过程中UI应该如何适配。

b.界面

风格：首先无论什么风格，一定要统一，不能一会扁平化，一会拟物。

颜色：配色一定要协调，内容与背景色的对比度一定要适度，设计一定要考虑到使用环境，如在阳光下。如果对比度不够的话那么在强光的环境下就不好用了，背景和内容就融为一体了，很难分辨。

c.按钮

图片点击尺寸不要太小，至少要大于一个手指的宽度，提高点击命中率，否则会有“点击不灵敏”的感觉，当然并不是真正的不灵敏，而是没有点中操作的区域。(用户可不管这些理由，多为用户考虑哦)。

对于RadioButton、CheckBox至少应该出2个状态的图：正常、选中。最好3个图：正常、点击、选中。如果没有点击的过程，会造成“响应迟钝”的感觉，因为毕竟在点击状态没有换图。d.动画

使用动画进行界面的过度让人感觉更柔和、亲近。有时一些简单的动画会给你的应用增色不少。

e.对话框

尤其是网页中都会有很多的对话框，久而久之人们对对话框也就产生了反感（至少我是这么认为的），能以更好的方式做提示的情况下就尽量避免用对话框，非用不可的情况下那么建议一个界面不超过两处。老是弹对话框的应用，最终弹走的是用户。

3.切图

1、和客户端的技术沟通好，用不同的框架来实现的时候，图会有不一样的切法。例如Tabbar是连背景一起切还是单独把icon做成背景透明的，文字是放在图里还是后面加字。

2、有一些小的icon式按钮，不能只切到icon边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。所以必须要多留一些透明的边，让能点击的图片在88×88以上，这样用户才保证比较好点到。

3、如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。

4、对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。

5、切图的高度。

6、切图的宽度。

7、9.png:是安卓开发里面的一种特殊的图片，这种格式的图片通过ADT自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android 环境下的自适应展示。

4.命名

基本上App 的切图可分为下面几大类：

背景、按钮、图示、图片、照片、TabBar icon 等。

为了让切图便於管理，通常会依图片性质命名。例如bg_xxx.png、

btn_xxx.png、img_xxx.png、pic_xxx.png、tab_xxx.png。

当图档要做给Retina 萤幕使用时，只要在副档名前加上「@2x」就可以了。如bg_xxx@2x.png、btn_xxx@2x.png 、icon_xxx@2x.png。

按钮命名:

1）一般（normal）：btn_xxx_n.png，最基本的按钮外观。

2）点击（highlight）：btn_xxx_h.png，使用者触摸萤幕碰到按钮，为了告知使用者有点击到而出现的回应提示。

3）不能点击(disabled)：btn_xxx_d.png，代表App有这功能但使用者无法使用。例如如安装在iPod上的App有播打电话功能时。既然不能被点击干脆直接隐藏的作法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需视情况决定。

4）选中(selected)：btn_xxx_s.png，选中出现在有复数选项时，但通常不会把按钮拿去做复数选项控件，这种按钮状态出现的机会不高。

图示：icon_xxx.png。

图片：pic_xxx.png 或是img_xxx.png。照片：pho_xxx.png。