要做几个平台？安卓还是IOS？IOS是否还有pad？安卓的最大尺寸？
和客户端开发团队沟通具体切图方式。是否采用.9切图？
和产品及运营明确目标用户，确定设计风格。
在客户端开发之前，务必参加该项目的需求评审，明确页面及页面之间的跳转逻辑，如产品规划时就已经缺失，需要及时补充说明，否则开发完成再去梳理，势必返工并造成工期延误。

1.1.1.关于尺寸

问题：IOS版本和Android版本的设计尺寸是多少？

答案：如下。

如设计IOS版本，设计尺寸应定为：640×1136px 分辨率：72px/inch

( 备注 : 注意下图的状态栏、导航栏、标签栏、工具栏，设计中可参考 )

2）如设计Android版本，设计尺寸应定为：720×1280px 分辨率：72px/inch

（备注一：主流的手机设计尺寸是：480×800px, 720*1280px, 我们应选最大的尺寸来进行设计。

( 备注二 : 注意下图的状态栏、导航栏、标签栏的尺寸，设计中可参考，由张伟媛整理 )

（单位：PX）

以下是各个屏幕分辨率的对应尺寸说明，请特别留意高清和高分辨率的尺寸，这2个比较常用。

尺寸名称	分辨率大小
高清分辨率(xhigh-dpi)	720×1280
高分辨率(high-dpi)	480×800，480×854
中分辨率（middle-dpi）	320×480
低分辨率（Lower-dpi）	240×320

1.1.2.关于图标

问题：图标要提供哪几个尺寸？圆角有没有大小定义？

答案：有的，图标具体尺寸说明如下。

如设计IOS版本，图标有3个尺寸：1024×1024px 、114×114px、58×58px

（备注：下图分别标注了这3个尺寸下圆角的尺寸以及3个尺寸的使用环境）

但其实尤其要说明的是，Iphone的图标你不用考虑圆角的倒角值以及高光，这些开发是可以自己做到的，只要你提供一个方形的图标就可以了。

如设计Android 版本，图标也需要提供3个尺寸：

96×96px （圆角：6px）、72×72px（圆角：5px）、48×48px（圆角：4px）

1.1.3.关于切图方式

问题：是否切.9？为什么要切.9？什么是.9？

答案：“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png

　　智能手机中有自动横屏的功能,同一幅界面会随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。

　　而且，android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。

　　那么，在android平台下使用点九PNG技术，可以将图片横向和纵向同时进行拉伸，以实现在多分辨率下的完美显示效果。

【普通拉伸和点九拉伸效果对比】

对比很明显，使用点九后，仍能保留图像的渐变质感，和圆角的精细度。

　　从中我们也可以理解为什么叫“点九PNG”，其实相当于把一张png图分成了9个部分(九宫格)，如下图所示，分别为4个角，4条边，以及一个中间区域，4个角是不做拉升的，所以还能一直保持圆角的清晰状态，而2条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，图片也不会走样。具体.9图片的制作方法请查看第4章：切图

1.1.4.关于产品需求

APP的产品需求一定要经过设计、技术开发、产品三方的评审方可进行。

因APP涉及到的交互细节和逻辑比较多，如果在设计之前不弄清楚，极易造成后期的返工，所以要坚持”无评审，不设计“的原则。

1.1.5.关于设计风格

最近几年一直会是扁平化设计和简约设计风格的天下。

扁平化设计
定义	是一种图形样式，强调易用性。
特点	纯粹的图形边界、简洁的空间表现、鲜艳夺目的颜色及直接的图形元素。
应用	网站设计、移动设备或其他平面设计
广泛流行原因	便捷：提高设计和开发的效率。可伸缩：匹配不同屏幕的尺寸，简洁设计适应大中小屏幕。诚实：秉持着屏幕设计中的二维特质，不添加任何诸如渐变、阴影、高光等三维效果，，绝对不会扰乱用户的体验心情。实用：版式和色彩的优化整合，作为一种视觉线索，帮助用户以最快的速度达到他们的目标。
总结	设计开发简洁，用户操作便捷
设计要点	1.去特效
	2.简化提取
	3.巧用色彩
	4.风格及细节	装饰画风格立体感光感，长投影和阴影／高光质感(剪纸等)

设计中

1.1.6.路径做图

此部分内容尚在整理中

设计完成

1.1.7.图片文件的命名

命名模板为：图片类型_模块_功能_状态

基本原则为：小写字母和下划线组成

（1）静态图片：图片类型_模块、图片类型_模块_功能

例如：bg_main.png、ic_main_search.png

（2）动态图片：图片类型_模块_功能_状态、图片类型_功能_状态

例如：btn_film_buy_n.png、btn_film_buy_p.png、btn_back_n.png

图片类型

图片类型名称	缩写	说明
background	bg	主要用于布局和子布局的背景
icon	ic	主要用于布局和子布局的图标
button	btn	主要用于按钮的表示，有时我们会在ic和bt之间犹豫，简单的区分即是功能视图，如果一个view执行的时back或者confirm或者cancel的功能，则命名上则应该使用bt
Image	img	主要用于页面中的图片

模块

按页面来划分

功能

按每一个主界面对应的功能区域来划分，如1，titlebar，2speedial 3，toolbar，4，menu等

状态：即图片的状态

nor	代表普通状态（一般可以不用加）
pressed	代表按下状态
selected	代表其所占的view被选中
unselected	代表其所占的view没有被选中
disabled	代表不可点击的效果

1.1.8.图片文件的文件目录

切图
1. 使用工具—draw9patch

下载地址是：

http://pan.baidu.com/share/link?shareid=416443&uk=2602892350

功能说明

1.1.9.使用目的

使用了*.9.png图片技术后，只需要采用一套界面切图去适配不同的分辨率，而且大幅减少安装包的大小。而且这样程序不需要专门做处理的就可以实现其拉伸，也减少了代码量和开发工作量。

1.1.10.使用流程

使用 “draw9patch”工具绘制，流程如下：

1.1.11.安装工具

首先你需要给自己的电脑安装上java程序。

如没有安装java，可以在百度搜索：jdk-6u20-windows-i586，安装包大小80M左右。

然后打开draw9patch安装包里面的“draw9patch.bat”文件，出现载入窗口：

1.1.12.导入并编辑

将png图片拖拽到该窗口中
如下图，自动进入编辑界面。图中介绍了每个区域的内容及功能注释。

预览右侧的视图发现，图片的边缘处于普通拉伸状态。
现在我们在图片边缘点击左键，绘制出黑线，即图片需要被拉伸的部分。如下图，对4条黑线做了注释。

如果失误多绘的部分，可按住shift键的同时点击鼠标左键擦除。
如图所见，三种拉伸结果均已完美显示，已实现我们想要的拉伸效果，假设这是一个有显示文字的窗体，那么文字显示的区域，程序也会控制在黑线对应范围。

以下这些图片，包括异性(非规则图形)图片，也可以通过点九PNG实现横纵向的自然拉伸。

1.1.13.保存和输出

点击左上file- save，保存文件，自动生成一张后缀名为“*.9.png”格式的图片，图片上下左右各增加了1px的黑线。

标注
1. 使用工具—Markman

下载地址是：http://www.getmarkman.com/

功能说明

1.1.14.使用目的

该工具可以对效果图中的长度、坐标、颜色、文字、矩形进行标记。

便于客户端开发人员对应用的每个控件在页面中的位置进行精确控制，以确保效果图和成品的高度契合。

1.1.15.标记长度

可以横向、垂直标记和测量元素的长度。按住Ctrl/Cmd时还能自动探测元素的边缘，并自动调整自身长度

1.1.16.标记坐标、矩形

可以用来标记某个点的位置。将准心中间的原点拖出来以后，就能同时标记坐标和长宽标记长度。

1.1.17.标记颜色

自动读取标记所指的元素的色值。可以任选RGB/HEX的表示方式。

1.1.18.标记文字内容

如果前面3种标记还不能满足你的需求，就直接用文字来说明吧。

1.1.19.支持多种图片格式

JPG/PNG/BMP什么的都不在话下，关键是还支持PSD哦

1.1.20.自动读取原图更新

如果打开的图片被修改了，马克鳗就会自动载入修改后的图。这样就能左手编辑PSD，右手用马克鳗加标记。产品的非功能性需求

快捷键备注

利用快捷键能高效的对图形进行标注，提高工作效率，请牢记于心。

快捷键名称	功能说明	备注
数字键1	标记长度（常用）	点一下1，切换为标记宽度；再点一下1，切换为标记高度。
数字键2	标记坐标
数字键3	标记颜色（常用）
数字键4	标记文字
数字键5	移动工具（常用）
CTRL加上 “+”号	放大图片（常用）
CTRL加上 “-”号	缩小图片（常用）
按住CTRL键	实现水平或垂直方向自动标注	非常实用的快捷键

移动APP设计禁忌
1. 十五条设计禁忌

在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念。如果没有经过实战，对细节注意不多，往往都会遇到类似的问题，以下列出了15条最容易发生的设计错误。

序号	描述	详细描述
1	没有不可点击的效果（+没有可点击的效果）	一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。
2	菜单层次太深	菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。
3	文字长度不加以限制	手机界面很小，寸土寸金。一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜。如出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略；如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。
4	文字表意不明	由于手机是碎片时间、片段式阅读，所以手机界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。除了表意清晰之外，还要求语言精简，避免啰嗦；使用用户的语言而不是程序的语言；产品文案体现产品性格。
5	交互流程分支太多	做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。
6	相关的选项离的很远	相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。
7	一次载入太多的数据	流量、电量、速度和稳定性是手机产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。
8	按钮可点击范围比看起来小	我们都知道移动端有个神奇的数字“44”，根据食指最小点触距离7mm、拇指最小点触距离9mm，可以推导出做设计的时候，最小的点触距离是44*32 px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。
9	标签页跟内容没有从属关系	标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。
10	把所有的操作都暴露出来	手机产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。
11	没有空数据界面设计	我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容；更具引导性的做法，就是引导用户去执行操作。
12	用户引导的滥用	去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。如果是通用的功能、非重点的模块，根本就不需要引导；如果是功能告知，只需呀轻量级的引导；如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。
13	无加载中状态	手机产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一个全局的定义，并且要告知加载中是模态（前台加载）的还是非模态的（后台加载）。且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。
14	未定义Back的逻辑	在为Android做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，比如单一实例的替换、键盘及一些中间状态，这种情况下，Back可能需要被定义一下，该回到前一个实例（那就需要变成多实例了）还是该回到初始状态（清空输入内容或恢复初始状态）。
15	无横屏模式的设计	由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式（甚至是带侧滑键盘的横屏机器），就需要提供设计方案。如果是S60V5这种竖高的机器，甚至需要重新设计。