我的产品方法论（二）——谈谈APP设计规范

今天想起写这边文章完全是因为刚毕业入产品经理这一行时，带我的师傅面试题里有类似的问题：ios和andriod的设计规范是什么？当时我一看，确实也答不上来，只知道一个大概、零碎而不系统。时至今日，产品level提升了一些，尝试把APP的设计规范整理一下。

现在仅仅从APP的界面设计风格规范和界面交互设计规范两个维度进行简单阐述：

1）APP界面设计风格规范

所谓APP界面设计风格指的是：通过几种颜色搭配、页面布局以及界面交互体验给用户呈现的整体视觉感受。目前流行的设计风格有三种：扁平化（Flat Design）、极简、MD（Material Design---谷歌5.1后的设计趋势）。

 一款APP原型设计出来后，给个UI设计师第一步就应该确定整个APP的设计风格，其他的页面也根据设计风格来，整个APP不同页面的风格保持一致，统一的设计风格能够给用户带来一致的视觉体验，同时也减少团队间的沟通成本。统一的界面设计风格可以向用户传达以下信息：1.APP的整体格调；2.迎合目标人群。以微信和QQ简单举例说明，两者的风格完全不同，前者用户多为成年人（数据显示微信用户80%为18~35岁成年人），成熟稳重，所以微信的界面简单而稳重。而QQ主打“乐在沟通”，风格活泼多变，因为很多中小学生在用，显得有些童稚化。

作为产品经理，向UI设计师传达出该APP想表达的意图，定好设计风格，然后就考验设计师的配色功底了。其实在设计风格表现上，颜色占据了80%的视觉体验，因此对于颜色合理搭配和运用基本决定了一款APP的格调。对于颜色的运用和搭配，设计师会更加专业，这里不深入谈下去。也可以参考这篇文章：《色彩在移动APP设计中的应用》

 2）APP界面交互设计规范

APP界面交互设计规范主要是：对界面布局、背景色、字体颜色、字体大小、界面元素间距、弹层、loading、图标、按钮常态、按钮点击态等进行统一的梳理和规范。

      1.界面布局规范

ios平台以iphone5进行设计（640*1136px），安卓以720*1280px的尺寸进行设计，但是为了快速设计形成产出物，一般公司只会有一套设计稿（没待过大公司，不知道大公司怎么在闹），安卓和ios需要输出下面几个产出物：

      ios：界面预览图、界面坐标图、1-3倍矢量图标pdf文件

      安卓：界面预览图、界面坐标图、标准界面的图标png文件

界面坐标图指的是：在设计已定稿的界面预览图上标注：界面元素的间距、文字颜色、文字大小、图标尺寸、按钮不同状态下的颜色、按钮的尺寸等等。

       2.标准色规范

一个界面中，标准色一般分为三类：重要、一般、弱。标准色重要的这类一般不超过3种颜色，重要的标准色用于特别需要强调和突出的文字、icon和按钮；标准色一般的这类都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息；标准色较弱的这类普遍用于背景色和不需要显眼的边角信息。

       3.标准字规范

文字是APP重要的信息表现之一，尤其在社区、新闻、资讯类的应用当中。同样，一个界面中不同区域需要规定不同的字号。一般来说（按照640px*1136px），顶部标题栏用32~36px的字号，内容区域一般用20~30px的字号，具体的大小视内容的重要性而定。

       4.界面元素间距规范

APP界面要给人简洁整齐、条理清晰，依靠的就是界面元素的排版和间距设计。间距的大小根据实际的设计来定。需要注意的是，间距设计要适当考虑不同屏幕分辨率。一般的解决方案有根据屏幕等比放大、缩小间距。或者固定某些界面元素的间距，让其他空间留空拉伸。

       5.弹层规范

     ios和安卓的弹层规范是不一样的，ios的弹层大多从底部弹出而andriod的一般从中部弹出，但是弹层一般有4种常见的方式：Toast、Dialog、Actionbar和Snackbar，这四种弹层用于不同的使用场景。如上图所示，弹层分为这几类：操作性弹层和提示性弹层。提示性弹层又分为强提示性和弱提示性。设计时可根据不同的需求设计不同的弹层。

6.loading规范

     页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能，表示页面正在加载，减少用户在等待功能响应引起的焦躁感。另外loading动画出了常规的菊花状还可以使用npc（非玩家控制角色），让APP更加生动、活泼；或者使用logo口号加强APP的品牌形象。