APP-UI规范

APP-UI设计规范——0.1版本1.设计尺寸及像素作图的时候尽量用形状工具画矢量图，方便后期图片尺寸的变更及切图。现在主流尺寸如下：Android480×800、720×1280、1080×1920……IOSiPhone:320×480、640×960、640×1136、750×1334、1080×1920iPad:1024×768、2048×1536像素：72像素/英寸尺寸：第一版效果图建议使用尺寸750×1334，能适用大部分尺寸，并且在iPhone6Plus中显示也较为清晰，切图后文件大小也适中，应用的内存消耗也不会过高。后期再配合程序员根据不同尺寸切相应版本的图片。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的切图可分为下面几大类：背景、按钮、图示、图片、照片、TabBaricon等。为了让切图便於管理，通常会依图片性质命名。例如bg_xxx.png、btn_xxx.png、img_xxx.png、pic_xxx.png、tab_xxx.png。当图档要做给Retina萤幕使用时，只要在副档名前加上「@2x」就可以了。如[e-mail]、[e-mail]、[e-mail]。按钮命名: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。