产品经理你懂设计规范么？

在讲设计规范之前，先来给大家讲讲红绿灯的事情，红绿灯是现代交通发展的一个产物，现在路上车水马龙，正是因为红绿灯的存在，才让我们知道了红灯停，绿灯行这样的一个设计规范，才让我们在路上出行有了更多的保障，特别是国内交通，如果没有红绿灯的存在，那像北上广这些城市很有可能从早上上班一直堵到晚上下班了，其实红绿灯本身就是一种设计规范，也正是有了红灯停，绿灯行这样的一个行为规范，才能让我们今天的交通更加井然有序。

一、什么是设计规范？

所谓设计规范就是各个平台对于设计风格以及设计方案的约定，简单的说就是用来指导设计师和程序员开发app的一套规范，比如色彩规范、导航样式、加载的规范等，今天就给大家分享一下移动端两大平台安卓和ios的设计规范。

二、为什么有设计规范

1、保证用户体验

如果没有设计规范，所有的软件界面设计和交互就会五花八门，用户体验起来也就非常糟糕。如下图，如果把导航都放到左侧，用户使用起来就会非常的不习惯。

2、保证本平台的用户使用习惯

产品都会进行迭代，比如windows操作系统从windows XP到现在的windows 10，大家并没有花费多少学习成本就上手了，为啥？因为人家有自己的设计规范，保证了版本迭代的连续性，好不容易培养起来的用户使用习惯，不能说改就改。

3、快速实现产品上线

比如你某个图标定义好以后，只要图标大小、样式不改，代码人员就不需要再重新码代码，直接将以前写过的代码拿过来用就行了，在保证质量的前提下，也大大提高了效率。

二、平台页面布局规范

上图是早期知乎在ios和移动端的设计规范，从图中我们可以看到顶部和底部是完全不一样的，同一个app在不同平台上面却有着不同的页面布局，之所以设计成这样，是两个平台对于页面布局上的规范有着不同的要求所导致。

ios端

iphone的产品经过这么多年的迭代，除了屏幕的大小有所改变之外，其产品的基本造型和以前差不多，都是在主要的面板上有一个圆形的home键，iphone是一款延续性很高的产品，同样在其操作平台上也有一个很经典的延续。

在ios的平台规范里面他的界面的页眉和页脚都做出了相应的规定，页眉主要实现了页面的跳转以及当前页面的一些操作，底部的页脚通常为工具栏和标签栏，工具栏主要是放置一些我们对于当前页面的传统操作，其次还可以设置成标签栏，标签栏主要是实现几个主要页面或者几个主要任务流程之间的快速切换，ios端的大量app都是按照这样的规范去设计的。

页眉：

页眉也叫做导航栏，通常用于实现在应用不同信息层级结构间的导航，有时候也用于管理当前屏幕内容，用来实现在不同信息层级之间的导航，有时候也用于管理当前屏幕的内容。

通常会有标题显示当前页面的名称，然后有个返回按钮，可以返回上一层级，一般第二层级才有返回按钮，右上角会放置一些操作入口，比如下图的【上海潮生活】的微信公众号，顶部左上角是一个返回的按钮，以及返回上一层级标题，标题【上海潮生活】表示当前所在页面的名称，右上角的人形是一个设置的入口。

页脚

1、工具栏

工具栏用于放置操作当前屏幕中各个对象的控件，比如评估自带相册的页面，他的底部就放置了转发收藏以及删除这样的操作按钮，另外一个是邮箱的操作页面，它在底部放置了标记、删除、转发/回复以及更多的按钮（我觉得用文字更好，图标除了删除，其他图标并不太好分辨啥意思，不过文字可能会占用较多的空间，如果icon不是很多的话可以考虑采用）。

2、标签栏

页脚还可以做成标签栏，标签栏是让用户可以在不同的任务界面和模式之间进行切换，可以点击不同的tab进行切换，像知乎界面，底部是有首页、想法、市场、消息、我的，五个tab的切换，这样可以实现用户在使用过程中的快速切换，但是底部标签也不能放置太多，一般来说不要超过5个，但是随着未来手机屏幕的不断扩大，底部标签的个数也会随着设备的增多而增多，未来也有可能超过5个。

安卓端

安卓4.0设计规范

与ios页面的主要导航放在底部的标签栏上不同，因为安卓在底部已经有了虚拟的导航栏，所以安卓4.0把系统一些很重要的操作放在页面的页眉部分，而不是在页脚使用导航元素，页眉部分在安卓系统中被称为操作栏（Action Bar），操作栏主要用于实现app内试图的切换和层级间的导航（返回上一级），还会放置一些重要控件。

如下图，通常会有一个下拉菜单，点击之后会显示当前菜单下面的不同页面，本身会有自己app的logo，以及返回上一级的按钮，再右上角会放置对当前页面的一些操作。

早期的quora就完全遵循了这样的操作规范，我们可以看到4.0的操作系统里面有大量的元素在里面，有返回按钮、下拉菜单以及操作按钮，但是这种下拉菜单有一个很不好的地方就是它会显得非常的重，在每一个狭小的空间内，它会放置很多操作元素在里面，所以在用下拉的方式进行导航之外呢，还有其他的方式供我们选择，所以在规范里面也是推荐了下图标签式的导航，相当于把下拉菜单里面的界面1、2、3平铺在我们导航的下面，来实现多不同页面之间的切换跳转，比如下图中的Youtube。

除了把下拉界面进行拆分外，右上角还有很多大量的操作按钮，当你的页面需要有很多操作按钮去放置的时候，右边的区域就会显得很拥挤，这个时候就可以尝试把右上角的操作按钮放到底部来，

虽然把操作按钮放在底部，会增加一些误操作的风险，但会让页面变得更加的简洁干净。

下图就是一个典型的邮箱例子，它也是把右上角的操作放到底部，因为这里有5个操作入口，如果全部放到右上角，会显得拥挤不堪，所以它也是放到了底部。

上面是4.0，接下来我们说说5.0。

安卓5.0设计规范（Meterial Design）

ios7在2013年的时候，抛弃了拟物化的设计，追求设计的扁平化，在2014年的时候，安卓也推出了5.0的操作系统，那个时候扁平化的设计已经很盛行了，扁平化意味着在事物上只有X轴和Y轴，那么5.0就是为了让页面更加有质感，所以在页面上加入了Z轴的变化（也就是一些阴影），大家可能觉得加入Z轴的变化又回到了以前的拟物化设计，其实并不是这样的，因为安卓推崇的是在页面上加上一个Z轴的空间变化，这样会让页面变得更加有层次感和质感，通过Z轴上不同的空间变化，来使页面体现出更多的层次感。