一.安卓和iOS的设计规范

首先，我们先看看iOS端

顶部导航和底部的tab是完全不一样的，如下图

在iOS端，页眉和页脚都做出了相应的规定，页眉我们称之为导航栏，主要是实现了页面的跳转和当前页面的操作，底部的页脚通常会设计成工具栏和标签栏，工具栏主要是放置一些我们对于当前页面的传统操作，如转发、删除、收藏。其次还能做成标签栏，标签栏主要是实现几个主要页面或主要任务流程之间的快速切换。在iOS端的大量APP都是按照这样的规范去设计的。

我们来看一下iOS对页眉的规定有哪些，页眉我们通常叫做导航栏，主要是用来实现在不同信息层级之间的导航，有时候也可用于管理当前的内容，如图：

那页脚呢，我们通常叫做工具栏，主要用于放置操作当前屏幕中各对象的控件，工具栏即可以放置icon，也可以放置文字，文字会更加的直接一些，相对于icon也会更加占用空间，但是呢，文字比icon可能会更加的通俗易懂，所以，在做工具栏设计时，如果想让我们的工具栏上可以放置更加功能入口的话，建议用icon，如果工具栏上的功能入品不多，可以用文字。

同时呢，页脚还可以做成标签栏，标签栏让用户在不同的任务、界面和模式中进行切换，但是底部的标签也不能放置过多，最多可承载5个标签，随着手机屏幕的不断扩大，底部放置的标签也会增多。

然后，我们来看一下安卓端

我们先来看一下安卓的发展史，在2009年的时候，安卓第一次推出了1.5的系统，但真正能够上线为大众所接受的是2010年12月份推出的2.3系统，那个时候还是挺乱的，没有规范可言的。到2011年2月份，安卓又推出了3.0，3.0第一次为平板而设计的一个安卓系统，也是第一次在平板上出现了虚拟的按钮，从4.0开始，统一了手机和平板的规范，在3.0的基础上延续了虚拟导航的存在。

2014年10月又推出了5.0，5.0出了一份比4.0介绍更加详细的平台规范，这个平台规范后来影响了每一代安卓版本的开发。

从2009年推出的安卓1.5的版本开始，它叫纸杯蛋糕，后面也延续了这种以食物命名的方式，比如甜甜圈、闪电泡鞭、优格冰激凌等等。

安卓从4.0开始没有配备硬件按钮，把虚拟按钮作为4.0的标配，与iOS把导航栏放在底部标签栏上不同，安卓把一些重要的操作放在了底部的页眉部分，这是因为安卓已经有了底部的虚拟按钮了。页眉在安卓系统叫操作栏，主要用于实现APP内视图的切换和层级间的导航，还会放置一些重要控件。在4.0的操作规范里有大量的元素，像返回按钮、下拉菜单、操作按钮，但是这种下拉菜单有个不好的地方是：比较重，一个小的地方放置了很多操作元素。所以在规范里也是推荐了下图2所示的这种标签式导航，来实现对不同页面之间的切换跳转。

除了把下拉菜单进行拆分之外，右上角还有很多大量的操作按钮在，当你的页面有很多操作按钮需要去放置，就会显得很拥挤，这个时候，我们可以尝试把右上角的操作按钮放到底部，虽然我们把大量的操作按钮放到底部会增加一引起误操作的风险，但是会让页面变得更加的简洁。

2013年苹果公司推出iOS7，iOS7抛弃了拟物化的设计，采用了扁平化的设计，2017年安卓推出了5.0，那个时候已经是扁平化盛行的时代，安卓在5.0之后会了让界面变得更加有质感，在界面上加了Z轴，安卓推出的页面布局是在Z轴的空间上有更多的空间变化，让界面更加的有质感和触感，在Z轴上不同层次的变化，使得页面呈现出更多的层次感 。安卓5.0是安卓系统很重要的一个里程碑，整个安卓系统变得趋于稳定，在后面的几代迭代中基本上没有太大的变化，更多是基于性能上的优化。

安卓在5.0的时候大力推崇抽屉式导航的使用样式，和4.0相比，在5.0里面安卓也是把主要的导航和操作元素放在页面的上方，叫作应用栏，应用栏是以前安卓系统中的操作栏，是用来显示应用的标识，应用导航，内容搜索以及其他操作。

在4.0的时候，安卓的操作栏上放有下拉菜单，页面可以进行切换，在5.0的时候，这些页面放在左侧的抽屉里面，这样显得页面比较干净。

如果你的产品在一级导航下还有二级导航，这个时候我们可以把二级导航放到页面中，实现在某一个主导航下面进行子导航的切换。

1.2.平台常用控件

控件全称叫控制元件，它是用户通过控件来操作界面状态或设定状态。

两个平台都有控件库，当你想要设计某个功能的时候，你可以到控件库里看看，如果有我们需要的，可以直接使用，

时间选择器

比如我们要设计一个闹钟，我们可以看到在iOS端和安卓端都有自己的时间选择器的控件，那么我们在iOS端选择上下滑动的时间选择器，在安卓端运用可视化的时间选择器即可。这样我们不用去设计，开发人员也不用去写代码了。

还有一些控件，像表示进度读取的样式，有无限循环指示器，还有进度条指示器，那如果选择叫呢？

进度条相对于无限循环指示器的最大优势是：它可以明确告诉用户，整个任务需要多少时间以及当前所处在什么状态下。一般无限循环指示器用于比较短的等待，进度条适用于等待时间比较长的时候。

1.3.平台常用手势

手势应用在移动端有两个好处，一个是比较直觉化，一个是比较高效，随着未来手机屏幕直越来越大，我们可以点击的范围会越来越小，这时候手势就能解决这些问题。这里列举了八个常用手势。

这些操作是源于我们生活中去操作物体时候的一些手势，我们将它们移到了移动端，减少我们使用移动平台的操作成本。

在iOS和安卓端基本手势的操作都是一样的，唯一不同的是iOS是轻扫滑动删除，安卓是长按删除。所以我们在设置手势时也要遵循平台规范，如果用错了往往会给用户带来很大的麻烦。

二，移动端导航样式 

导航在产品设计中是非常重要的，如果导航设计的不好，用户很容易迷路。

导航有一级导航和二级导航，并且一个APP里往往会有多种的导航形式，导航形式也并不是随意用的，需要考虑场景选择最适合的一个导航模式。

那接下来我们来了解一下在移动端有哪些导航模式及它们分别适用的场景。

标签式导航

如果你的产品里有多个主要任务，而且你觉得他们都很重要，并且它们之间的相互切换比较频繁，这时就比较适用标签式导航。如微信：

标签式导航的特点是入品扁平化，导航控件占据面积大，能够轻松进行点击操作，进行功能间的快速切换。这咱页面底部的标签式导航在iOS端是最为常见的，也是iOS设计中最为推荐的一种导航模式。

标签式导航除了放在底部，也可以放在顶端，顶端的标签式导航被大量应用在安卓设计里。它可以避免导航与底部虚拟按钮之间发生冲突，引发误操作。

不管是布局在顶部还是底部的标签式导航，要把标签数量控制在5个以内，如果标签超过5个以内建议使用滚动式标签导航，需要注意的是流动式标签导航需要给用户一点提示，如下图显示的效果：

分段式导航

标签式导航虽然直观易操作，但是它在页面中占用了很大面积，特别是当我们在一个页面中使用两个标签的时候，面积会大大的被占用。

怎么办呢？分段式导航就能很好的解决这个问题，分段式导航尺寸较小，能轻松地融入界面，不占用空间。只要有一点空间它就能插进去，当然它一般只是分成两段或者三段，不会像标签式导航那样有四段或五段的标签。

分段式控件是iOS的标准控件，它也不适合作为一级导航，往往作为二级导航与标签导航嵌套使用。

舵式导航

上面我们讲了标签式导航适用于几个功能非常重要，并且它们之间的相互切换比较频繁，但是，其中有一个功能最为重要，是APP的核心功能或操作，这个时候我们可以使用舵式导航，它是标签式导航的一种变体，它在标签式导航的基础上，突出强调了一个标签放在中间位置，看起来就像船的一个舵，所以取名：舵式导航。

抽屉式导航

如果我们的APP中一个功能特别重要，其他的功能都不特别重要，这时设计思路就是：既然不重要，又不可能删除掉，那只有“藏”起来。这里就用到了抽屉式导航。抽屉式导航不仅能突出核心功能还减少了主界面中的导航控件数量，让主界面干净利落。

但是，使用抽屉式导航意味着同级上的导航比标签式导航有更多次的点击，国外的研究也显示，藏在抽屉式里的其他功能的使用频率会远远低于标签式的导航。

所以，我们可以发现，现在抽屉式导航已经不像几年前那么火了，这个与它的缺点是息息相关的， 随着手机屏幕越来越大，抽屉式导航的按钮也很能按到，虽然抽屉式导航走下了神坛，但它也并不是一无是处的，还有很多APP在使用抽屉式导航，如打车类产品，对于打车产品来说，最核心的功能就是打车，其他功能对于它来说不是那么重要，所以抽屉式导航对于打车产品来说是再适合不过了。

下拉菜单式导航

上面我们提到过下拉菜单，它的特点时，收起时体积小巧，节省空间，展开时，能显示丰富的导航条目，但缺点是没有关闭按钮，因为操作比较复杂，所以这种导航模式已经很少见了，但是，它可以和滚动式的标签进行结合，滚动标签导航的特点是显示数目有限，但是能够实现快速切换，下拉导航菜单的特点是能够显示足够多的条目，但是切换起来比较麻烦，两者结合正好可以进行优势互补。

宫格导航

宫格导航比较扁平，它的优点是能充分的运用页面，宫格导航大多用于二级导航，在界面上平铺显示使用频率相近但是又相互独立的功能，像支付宝

三.移动端设计模式-列表

垂直列表

首先我们来看垂直列表形式，它是最基本的列表形式，无论是网页端和手机端都会使用到这种布局方式，对于垂直列表用户的阅读习惯是从左往右，从上到下的，所以一定要把最重要的功能放在屏幕的最上方，而且垂直列表都是左对齐的。再说呢，我们要做好条目的详细程度以及条目数量之间的平衡，这个需要从具体的需求出发。举个栗子：地于外卖订单来说，用户往往只需要关注自己刚刚点的那份外卖的订单，所以，这个订单的内容如果足够详细那么用户就没必要点击进去查看具体的详情了。这样就会比较便捷，让用户少操作。

这是垂直列表几种常见的模式，我们可以根据具体需求来选择合适的方案。

垂直导航可以用来作一级导航吗？答案是肯定的，但是只适合功能层级比较浅，且功能间切换不频繁的APP，像邮箱类的。

轮播面板和网格列表

除了垂直列表还有横向维度的轮播面板，轮播面板能隐藏大量的内容，能充分的利用空间。还有两种方式相结果的网格列表，像垂直列表展示文字显示的比较干净，网格列表更加富有情感化，善于使用网格列表会让界面变得更加富有感染力。还有一种是网格列表的变种，我们叫它瀑布流，瀑布流的图片排列方式 显得非常随意。

列表模式还有两种形式，分别是时间轴和对话框的形式，两者的应用场景都是和时间顺序有关的，

三.web端设计规范与设计模式

3.1.网页布局

搜索类网站

web的网页布局大概有六种，第一种是搜索类的，做的最好的是谷歌，它的大体布局是右上角显示网页内容和登录，中间模块显示LOGO以及最主要的功能搜索栏，在底部放置一些网站和其他的信息。

博客类网站

博客类网站在国内最典型的就是微博，它的顶部放置网页一级导航和登录，因为博客类的网站会有大量的其他模块，所在它在左边有一个树状的二级导航。中间模块是博客的核心，它有最主要的发文功能，下面是个三级导航，是其他人发送的一些博客的内容，下面显示具体详细的信息，网站的最右边则会显示一些不是特别重要的信息，比主博主信息和推荐的广告位及其他的一些信息。

商城类网站

商城类网站我们最常见的有淘宝、天猫、京东等，像淘宝：顶部显示了用户的信息及网站大导航，然后下面显示它的LOGO和主要的搜索功能，在淘宝这种品类繁杂的网站，搜索功能是非常有必要的，再下来是淘宝的一些子品牌，像天猫、聚划算等。因为淘宝的品牌繁多，所以，它们做了一个二级栏目，供用户快速筛选，然后中间是整个网站的首推位置，首推位置主要推荐一些热卖商品和活动。在网站的右侧放置了一些不是很重要的信息，像个人信息和一些公告、论坛等。

图片类、新闻类、产品网站

图片类网站主要是用户在上面快速浏览图片信息，所以图片的布局占了很大的篇幅。

除了介绍过的四种还有新闻类的和产品类的网站，每种网站因为要承载的信息不同，布局也会不同，新闻类的如今日头条。产品类网站如苹果官方。

现在还有一种比较新颖的，卡片式布局，以前多半是用于后台管理中，现在也被用于大量饰品类的网站或者图片类的网站中。

3.2自适应设计

自适应网页设计是可以自动识别屏幕宽度，并根据屏幕的宽度做出相应调整的网页设计。

自适应网站支持通过多种浏览器和设备访问，在pc的web上是一种效果，适用其他的屏幕时会做一些调整，比如在一些分辨率比较小的网页，我们会做相应的调整，如果在pad端呢，我们要根据pad的浏览习惯进行调整，那么在手机端也是如此。