产品UI--各类APP设计规范

产品经理作为一个产品的掌舵手，需要掌握跟了解的技能是方方面面的。同时，在一个产品从用户需求到产品原型，到产品发布的过程中，它是一个集思广益的产物，是团队合作的产物。

我们在产品原型的设计阶段，需要自己设计功能，交互逻辑，同时需要与设计师有良好的沟通。产品经理要负责向设计师讲清楚产品的定位，目标用户，需要传达的信息跟情感。在UI设计方面，产品经理作为一个产品的整体把握，是全局吃透了该产品的整个想法的。所以我们在产品的UI设计方面，需要了解到什么程度呢？自己设计出原型，产品功能与交互逻辑的清晰理解与实现，与设计师沟通的时候准确表达意图。

2015年底的时候，aajisiguangyi的小伙伴，曾经学习分享关于安卓和苹果系统的APP设计规范，后来自己也拜读了关于iOS9以及Material Design,平时的积累势必要运用在实际工作中，在小伙伴的学习资料整合并结合自己在学习中的思考，下面就简单着手一篇这方面的总结：

PM需要了解的UI规范

PM所需UI储备

APP设计--各家规范对比

各家规范

所有的设计都是为了辅助产品需求的实现，同时保证用户的优良体验。如果设计仅是为了符合规范，这也就失去设计本质的意义。

iOS的设计风

iOS平台由于其封闭性，自成生态系统，只有官方唯一的应用商店App Store。所以其产品上架的审核尤为严格。iOS7,8,9占有率已经达到了95%以上，同时iOS7,8,9的设计风格是后乔布斯时代的扁平化风格，也一脉相承。所以iOS平台的设计规范，我们可以从iOS7开始了解，也建议大家从iOS7开始了解，因为iOS作为最优秀的手机操作系统，它的设计进化是从数十亿用户的反馈中去提高的，他的设计演变对我们把握产品设计的大局，很有意义。

翀翀的iOS设计精髓

Material Design

Android由于其平台的开放性，使得开发者更加自由，App的设计也良莠不齐，造成了现在的平台碎片化。Android设计指南是中国开发者根据英语官方文档翻译过来的，基于Android 4.4 KitKat的官方设计指南。Android 4.4 KitKat 采用了Material Design的新的设计风格。这也代表着，谷歌对于移动端未来设计趋势的一种定义。

核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

关键词：Holo是Android Design最基本的呈现方式，是一款Android Design App的基本骨架。主要包含暗色调科技感十足的Holo Dark 和浅色调更接地气的Holo Light两种风格。ActionBar是Android应用中不可或缺的重要元素。它就像人类的肩膀，承载起了应用的图标、名称、导航、主要操作等最基本的元素。他可以承担起大至内容导航，小至快速操作某个特定功能的作用。Navigation Drawer就是著名的导航抽屉。一般情况下会将几个彼此独立的功能模块放入进Drawer中，以实现快速切换功能的目的。

原质化设计中文文档

Material Design至少要包含以下几个元素：

鲜活的色彩：MaterialDesign是年轻化的设计语言。相比于前辈Android Design那种充满科技感的配色而言，Material Design更强调利用鲜活的色彩丰富页面的内容。比如利用突出的颜色来强调重要的功能或者不同的透明度来暗示内容的主次关系。

空间的层级：我们从直视屏幕时相当于在俯视这个XY平面，而我们生活的三维空间中。Material Design可以说是一种通过二维平面来模拟三维效果的设计风格，是一种介于iOS 7之后扁平化与iOS 6时代拟物化之间的产物。

流畅的动画：之前Android客户端中往往没有提供足够顺畅的动画来衔接不同的内容。动画可以消除页面切换带给人的生硬感，使页面的切换更加自然顺畅。在Material Design中，流畅、拟真的动画是不可或缺的一部分，重要到Google在设计指南中需要单独列一章来详细描述。

多样的组件：经过了4年的发展，从Android Design演化而来的Material Design自然继承了Android中各式各样的控件。卡片、列表、抽屉、开关、分割线、标签、进度可以任开发者使用。在Material Design中还首次加入了FAB（即浮动操作按钮，floating action button），Google官方推荐讲最主要、常用的操作加入到FAB之中。

可以从下面两部分学习资料着手去学习。【重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记】 、【Material Design 官方文档中文版】 【我认识的Material Design】

导航栏的那些事

界面UI设计相当于一个房子装潢，而对于一个房子内部框架布局和逻辑设计，自然是导航栏的任务所在。

在选用导航的形式之前，更重要的是对内容进行分类（只针对内容，功能的导航可以不需要）。之后，用户就可以根据类别来找到他们需要的内容了，并且不同导航也可以嵌套使用。

各家导航