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

一、什么是设计规范？

所谓设计规范就是各个平台对于设计风格以及设计方案的约定，简单的说就是用来指导设计师和程序员开发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轴上不同的空间变化，来使页面体现出更多的层次感。

如下图，在这个例子的右下角是有一个操作按钮，可以明显看到这个页面按钮是高于页面其他信息的，整个页面的左上角是有一个抽屉式的按钮，安卓是非常推崇这种页面布局的，点击左上角会有一个抽屉式的展开，所以也有一个专业的叫法叫做抽屉式导航，在5.0里面比较大的篇幅都是在介绍抽屉式导航的样式。

在5.0里面，安卓也是把主要元素放在页面的上方，

页眉

这个时候我们把它叫做应用栏，不像是4.0里面把它叫做操作栏，应用栏主要是一些安卓系统的操作栏，是用于显示应用的标识，应用的导航，内容搜索以及其他操作，在下图的例子里面右上角有一些操作的入口，点点点里面通常放置一些更多的操作，一些不太实用的操作，在左边是一个抽屉式的入口。

早期的知乎就是采用这种设计样式，

安卓5.0和4.0的差异：

安卓4.0点击下拉菜单，会出现页面123这样的一个切换，但是在5.0里面会把它放到页面左侧的抽屉里面，点击抽屉入口就会展示出页面123的切换界面，这样整个界面会变得非常清晰和干净。

早期的知乎大量使用了5.0的设计方式，点开左上的抽屉按钮，就会展开一个主导航的界面，进行首页发现以及关注之间主要界面的切换。

上面介绍的都是一级导航样式，如果在一级页面还想放入二级，那这个时候的页面布局该怎么做呢？

其中一种思路可能是直接加到左侧的导航里面，如下图，但这样做有个不好，就是让左侧的条目变得非常多，而且很不便于用户进行切换。

那这个时候可以把左侧的二级导航放到页面中，实现在某一个主导航下面进行子导航的切换，如下图。

为什么国内安卓app都不遵循5.0设计规范？

1、设计成本太高

互联网讲究快速的跑马圈地，如果完全按照Meterial Design进行设计，设计师选要设计两套方案，切图也要搞好几套，费时费力，大大拖累开发进度，而且要考虑两个平台的用户使用习惯，所以出于成本和时间的考虑，国内安卓app都尽量往ios设计上靠。

2、好看不实用

MD虽然设计的很好看，但是确实使用户的操作路径变长了，左图的淘宝把icon都暴露在外面，想点击就直接点击，简单粗暴，右图的知乎完全按照Meterial Design的标准进行设计，但是用户想点击相关内容的时候得点开抽屉或者更多按钮，用户看了之后并不知道我的关注、热门分类在哪里。

今天就给大家介绍平台页面的布局规范。