交互设计规范:

IOS篇

一、尺寸及分辨率

iPhone界面尺寸：320*480、640*960、640*1136

iPhone6：4.7英寸(1334×750)，iPhone6 Plus：5.5英寸(1920×1080)

设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iphone6和plus出来后有很多人会使用6的设计效果。

如果是我来做的话，我会使用640×1136，对plus做单独的修改适配，因为plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法的话希望大家可以分享一下。

Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素

iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px

导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px

主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px

内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px

至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~

三、字体大小

iPhone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。

四，切图

切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能

IOS在没6plus前，我们只需要提供两种图，普通图及视网膜屏幕图。

以640×1136（640×960是一样的）做的设计图的话就会好办一点。直接出设计图上的原大小图标，比如我们命名一个图片叫 img-line.png，我们给开发的图就要改变这个名字叫 img-line@2x.png 就是在后缀名前加上@2x表示视网膜屏的图，iPhone4的还需要把这个图尺寸按比例缩小50%，得到正真的img-line.png。然后把这两个图移交给开发，iPhone6的图在规范里是与5s使用的是一样的，也是@2x图。有些UI则需要做适当的适配，比如拉长，拉高，这个开发会去做。

对于IPhone6 plus的话范里给出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的话，大家做图的时候就需要使用形状工具来做，放大后还需要仔细微调，这里就不多做讲解

温馨提示： 在出可按的图片切图时需要注意图片的可按区域大小，有时图标很小，实际切出来的放在上面，用手指是按不到的，我们就需要对图片单独处理，拓宽图片的有效区域，这里是拓宽非放大，就是改变画布大小使图片尺寸面积扩大，使图片四周拓宽多余的透明区域 ，从而改变可按大小。

五，颜色值问题

IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)；Android开发的色值则使用十六进制 #0c2238

ANDROID篇

一、尺寸及分辨率

Android界面尺寸：480*800、720*1280、1080*1920

Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

二、界面基本组成元素

Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。

Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容区域高度为：1038px(1280-50-96-96=1038)

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px

Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小

Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。

同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。

具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己对比调节字体大小，切记，一定是高清截图

四，切图

Android设计规范中单位是dp，dp在安卓机上不同的密度转换后的px 是不一样的，所以按照设计图的px转换成dp也是不一样的，这个可以使用转换工具转换，开发一般会有，也有些开发会使用px做单位，因为做了前期的转换工作

五，颜色值问题

Android颜色值取值为十六进制的值 比如一绿色的值， 给开发的值为 #5bc43e

写PRD怎样思考的更加全面

我也是完全没有技术背景的。对产品来说，没有技术基础，无疑是有劣势的。但是，这种劣势并非不能弥补。

PRD本质上也是一种产品，写好PRD和做好一款产品的思路是一样的。

第一， 不忘初心。

“不忘初心”的意思是，不管是提交一个新的产品方案、还是思考页面上一个按钮的位置，你都要时刻提醒自己做这件事的目的是什么，是增加活跃、提高停留时长还是增加购买的转化率？这很重要，因为我发现，很多时候，做着做着就开始纠结于细节，而忘记了”初衷“？现在每当我和别人就不同方案争执不下时，我都会提醒自己“来，让我们回到最初做这件的目的上……”。

插个题外话，很多情况下，不同的方案都是隐藏着不同的前提假设，见过太多无效且浪费时间的争论，原因就是只纠结于方案的细节，却忘记了这两种方案基于是不同场景假设和用户假设的。一句话，在前提假设没有统一的情况下，争论的唯一作用就只是练口才而已。

第二，调查用户需求。

PRD的用户就是看文档的人，去问你的用户，他希望得到什么？他喜欢什么样的方式？他觉得哪些地方要改进？比如，只要一逮到机会，我就会不厌其烦的跟测试、开发讲：”你觉得原型和PRD有问题时，一定要告诉我啊！“”文档怎么写，你们看起来会舒服一点？“”亲，你觉得我用word写，还是Excel写比较好？“……各个公司的文化和偏好不同，PRD也应该做相应的调整。使用PRD的人觉得好，才是真的好。

第三，搜集用户反馈，不断改进。

和产品一样，PRD也是有迭代的，要想着每个版本都要做的更好一些，从语言表述、模块划分、排版方式一点一点的改进，然后听大家的反馈。

第四，总结

在上述两个步骤中，你可能搜集到了很多的细小的改进意见，这些可能并不影响大局，但产品人的专业性就体现于你对细节的把握。很多知识点，方方面面，很琐碎的，说不定过两天你就忘记了，所以这些细微的地方一定要记下来，。强烈推荐使用脑图进行记录（脑图深度爱好者，离开脑图没法活），然后定期的总结、归纳，你一定会收获很多！

最后记住一点：别人没有教你的义务，不教你无可厚非，教你就是情分！

这也是让我苦恼很久的问题，我也经常在朋友圈长吁短叹：“我考虑问题什么时候才能面面俱到、滴水不漏呢？”以前有试过把所有的注意点都用脑图整理下来，然后，每写到一个模块就对照一遍，后来发现很麻烦，也很费时间。临时抱佛脚用处不大，关键还是平时要多积累，总结的内容也要常看，多看就印象深刻，用的时候自然能够想起来。

作为方法论的爱好者，我喜欢归纳做事情的步骤，每做一次总结一次，这样可以做到心中有数，而且慢慢就知道哪里是坑、哪里容易出错。

我描述一个页面一般是按照以下步骤考虑的：

1、前置条件：

描述页面显示为此种状态的前提条件。比如，QQ的群管理员和普通成员点击同一个按钮，进入的页面就可能是不同的。

前置条件可以概括为：某种用户角色（要提前准确定义APP中的各种用户角色）在某种情况下，点击某个页面的某个按钮，进入了此页面。

2、退出机制：

如何退出此页面？常见的有：左上角的返回按钮，返回上一层；按手机返回键（安卓）也返回上一层。

3、显示机制及排序机制：

1）描述页面上有哪些控件、展示了哪些内容。

想象你和一个 陌生人介绍这个页面，选择一个能有逻辑的描述这个页面的方法，比如从上到下、从左到右、从重点到一搬、从特殊情况到普通状态等。

2）当页面需要展示很多内容时，就要考虑排序机制了。

按照哪些因素进行排序？是按时间倒序、热度正序、推荐的内容排顶部？还是其他更加复杂的排序方式？

还要考虑一页显示多少条信息，以什么方式进行展示呢？翻页展示还是瀑布流？

4、刷新机制

一次刷新多少条信息？如何刷新更多？自动刷新还是手动刷新？当刷不出新内容时给提示了么？

常见的手动刷新方式：右上角有刷新按钮，点击，手动刷新。

常见的自动刷新：再次进入此页面时刷新；设定一个时间值，每隔一段时间自动刷新一次。

5、缓存机制

这个页面要缓存哪些数据？缓存到哪里？清理缓存的时机是什么？是定时自动清缓存、还是让用户手动清理？

上面5大机制，可能在一个APP的很多模块中，都是一样的，为了避免重复描述，建议在PRD的最开头，用一个单独模块来描述，以后在描述页面时，一笔带过就可以了。

6、控件描述

建议用一个单独的模块说明应用内常见控件的类型以及每个控件对应的操作方式，在其他模块涉及此控件时，只要简单阐述一下就ok了。此部分之前的文章已经写过，在此就不详述了。

1）触发源：

此控件的触发区域是哪一部分？同时思考，需要频繁触发的控件，操作区域是否明确？

2）触发时：

触发控件时常见的状态有：加载状态、读取状态、缓冲状态。

比如视屏播放应用，点击播放按钮，通常会出现上述几种状态。

3）触发后：

触发控件后常见的状态有：

a、操作进度显示。

例如，点击“下载”按钮，常常会显示下载进度条。

b、按钮发生变化。

比如互相不是好友的情况下，页面上的按钮为“加为好友”，点击，成功加为好友之后，“加为好友”按钮就会变成“发消息”按钮。

c、结果提示。

常见的提示类型：小红点提示、能自动消失的提示、页面上的文案提示、需要用户选择的弹框等。考虑这些提示的轻重程度是否合适，并且要对他们进行详细的描述。

常见的结果类型：成功、失败、空值。比如，搜索功能。点击搜索按钮后，有可能找不到想要搜索的内容（空值）、有可能找到很多条相关内容（此时要考虑排序）。

7、异常情况描述

1）异常操作：

比如，连续多次点击，是否给予反馈。

2）网络状况：

没网络时的提醒？是否需要网络超时、网络太慢、从wifi切换到2G/3G的提醒？

3）账号相关：

登录和未登录时，对此按钮的操作权限是否有差别？如果必须在登录状态下才能操作，就要增加登录提醒。

如果同时支持iOS和安卓，那安卓账号和iOS账号是否互通？

4）数据相关：

要定义页面的默认状态，默认状态就是进入页面时，如果从服务器获取不到数据时，页面的显示状态。考虑此时，是否要内设置默认图片。

5）版本相关：

版本的命名要规范。考虑版本是否强制更新？如果提交AppStore审核，版本上线时间要把考核时间考虑进去。

6）其他：

是否设置启动页和引导页？

应用内文案是否需要做相应调整？

是否需要进行埋点，以便分析用户行为？

消息推送的策略是什么？调用系统通知还是用第三方？

需要硬件交互么？需要请求GPS、相机需要等的使用权限么？

经过上述步骤，一个页面基本就描述清楚了，上述的描述方式和逻辑都是根据我自己的习惯总结而成，大家也要总结合适自己的方法。

最后，再总结一下描述页面的整个逻辑吧。

最后想说的是，有句话大家都知道¬——“不要用战术的勤奋掩饰战略！”想要获得战略层的知识可能真的没有捷径可走，就算乔布斯手把手的教你也不一定有用，它需要你整个格局的提升，需要阅历，需要你常年累月的思考。但阿七一直深信，战术层是有捷径的，不管PRD、原型还是交互，需要的都是勤奋，”学习别人的经验、去糟粕取精华、自己动手、总结得失、提升经验值“，循环下去，进步就会很快。

（已打）