本文作者Nina

网上有个段子——产品经理：“你明白吧，这里向右划可以出菜单，然后需要一个闪烁的动画，还有，我想这个tab可以拉下来，你懂吧?设计师：“别废话，把你要抄的产品给我看下。”

这个场景的确是我们工作中有时会碰到的。比如，当你接到一个需求“做一个电商产品的商品详情页”，第一反应是什么？

你的第一反应可能是“我去看看其他电商是怎么做的。”或者有些老大会说“去看看竞品是怎么做的吧。”

我们想象一下，如果我们没有竞品可以看呢？这个时候应该怎样去思考？

在“信息架构”中，我们输出了“详情页”，这个“详情页”可以满足核心场景，比如（商品详情信息、立即购买、加入购物车），这些基本上满足了核心场景。那么从“简版页面元素”到“完整的可视化布局”到底经历了什么？

什么是页面？

我们经常听到有设计师说页面，那么页面是什么呢？页面是用户完成任务的核心载体和媒介。页面的重要性不言而喻，同时也是交互设计的核心输出物。到了这一步，我们才真正开始输出交互图。也就是交互设计师的工作产物。

怎样进行页面布局？

1.从需求到功能

首先需要仔细梳理用户需求和业务需求。

比如用户需求：核心场景—购买、查看；次要场景—收藏、克服、店铺等。

业务需求—相关推荐、分享。

当需求都梳理完成之后，就可以归纳成具体的功能：

1.用户购买转化、进入页面即能进行购买（业务需求）→购买（具体功能）；

2.将商品分享给其他人（业务需求）→分享（具体功能）；

3.分流：用户转化不了解，可以引导分配给其他产品（业务需求）→相关推荐、店铺（具体功能）；

4.查看具体的商品信息，比如价格、规格，然后进行购买（用户需求）→商品详情（名字、图片及各种信息）（具体功能）；

5.查看用户评价和销量信息，辅助购买决策（用户需求）→评价、销量、运费、优惠信息等（具体功能）；

6.先收藏起来，然后购买（用户需求）→购买、收藏（具体功能）

7.先添加购物车，然后对比购买（用户需求）→添加购物车（具体功能）；

8.有疑问随时可以跟商家沟通（用户需求）→客服（具体功能）

2.对得到的功能信息进行分组

在罗列了功能和信息之后，我们要怎么组织呢？我们需要按照信息和操作，基于相关性对他们进行。分类、组合。

信息相关：

商品详情—详细图文介绍、注意事项、常见问题；

商品简介—头图预览、视频展示、价格、运费、规格、销量、剩余数量。

商品评论—评论人数、评论内容（用户、时间、内容）

 操作：

购买相关—选择购买数量、选择购买规格、立即购买、加入购物车；

其他操作—收藏商品、分享商品、联系客服、查看店铺。

 那么，是不是每个页面都需要同时满足两个需求？

不完全是，但是至少要满足一个。

比如微信发红包——似乎在这个过程中，都是用户需求。但实际上“发红包”这个功能巧妙地完成用户任务的同时，达到了业务目标。

3.定义屏幕的信息布局

首先，我们要了解用户是怎么操作手机的？

随着屏幕变大，舒适触摸区越来越小，伸展区域越来越大，困难区也越来越大。

并且，用户会自然的将内容移到他们偏好的位置进行点击在2/3的位置点击最多，且不受设备和持机方式的影响。

通过屏幕的布局，再将上面得到的元素按照一些设计规则填充进来。

比如：重要性和使用频率、费茨定律、凸显、弱化、分组、隐藏、格式塔原则等。

其中，弱化（次要），对于整个产品逻辑来说是非常重要的。

主要有：

1.在视觉和位置上弱化

2.增加操作步骤

3.隐藏

4.遵循平台设计规范

平台设计规范”这是我们经常听到的词，通用的一些设计模式，包括页面怎么布局，在规范里面是可以看到的。下面，我们简单介绍一下tab模式相关的页面布局：

（1）移动导航中的顶部Tab模式

首先我们来简单说明一下，单独将顶部tab模式拎出来，是因为在MD和4.0规范中，虽然对这一部分有说明，但是两者的差别比较大，所以导致不少初学者很困惑。

在安卓4.0时，我们发现大部分的app是底部的tab形式，那么是不是顶部也可以做tab？安卓4.0时在自己的规范里明确写到他们的tab和ios不一样，安卓的顶部tab相当于ios的底部tab。当时安卓为什么要重新定一个规范呢？这跟安卓机当时的发展有关。

在安卓5.0（Material design）也规定了顶部的tab：

1. 虽然形式上面很像导航，但是顶部tab本身并不作为导航使用，而作为分类；

2. 顶部tab的内容互相关联并在同一个主题下，例如出行方式（自行车、汽车、公交车），而不是像搜索、指南、设置属于完全不同的功能导航。

（2）抽屉+顶部tab模式

a.Google主推模式：一级抽屉导航+二级tab分类

例如

1. 左侧抽屉是主导航，默认选中核心功能收件箱，至于其他的发件箱、垃圾邮件等都可以放在导航抽屉内收起；

2. Google图书就是使用抽屉+tab分类的形式，此处tab是强调在同一主题下的不同分类，而不是导航；

 在这种情况下，我们发现抽屉是作为一级导航用的，配合着二级导航。正如我们经常提到的“二八法则”。

b.在市场发展

但在市场发展中，我们看到的是：以tab为主导航+抽屉为辅导航。

受4.0规范的影响，tab作为主导航（实际情况可在顶部或底部），承载应用重要且平级功能，抽屉作为辅导航，收纳用户不常用的功能，像“用户中心、设置、反馈”等。比如，MIUI中内置的一些应用（多看、应用市场等）。

 我们在实际的工作中发现，在实际产出的时候，会有几个思考方向：一个是平台规范本身，另一个是一些元素，并在这个过程中遵循规范本身。

（3）不同的平台有不同的设计规范，那么实际工作中，针对不同的平台需要设计几套方案？

针对这个问题，需要按照具体情况来，现在常规的情况下，如果安卓和Ios目标用户完全不一样，而且你想体现产品本身的不同，那就可以做不一样的。

早期安卓和Ios的用户会有明显区分，现在用户并没有之前那么割裂。

而现在一些主流产品在大结构上多采用了统一的设计方案，并且搜索、弹框、开关等直接使用系统控件。

造成这种“统一”的现象的原因：

1. 成本—要维持两套完全不同的设计，在成本上是偏高的，尤其是小团队；

2. 用户迁移成本—比如用户已经在ios上形成了使用习惯，如果换成Andorid还需要重新学习；

3. 用户反馈—用户对产品的感知；

4. 误操作概率低—以前的Andorid物理按键在屏幕内，现在大多数物理按键在机身底部，和实际的底部tab距离拉长，误操作概率低。

如何验证页面布局

我们设计一个页面需要通过流程梳理（核心元素），次要元素梳理，按照排列分组归类元素，遵循平台设计规范和设计原则在页面上呈现这些元素。

设计规范可能看一遍看不懂，记不住，需要多看几遍，你需要了解设计规范的优缺点，他的设计模式，这个时候你就会了解哪种规范最适合。那么到了这一步，你该怎么样验证你的页面布局是大家都认可？

 1. 充分利用公司内部资源—资深交互设计师等；

 2. 简单快捷的可用性测试。在页面布局中的可用性测试没有大家想的那么复杂，可以做得敏捷一点，比如你可以拉身边的一个保洁阿姨，问一下他能不能发现什么问题，也可以问一下跟设计无关的你的同事，一些很明显的问题，通过这些就可以简单粗暴地发现。

小结一下

页面布局承接“信息架构”，主要包括了三大部分：什么是页面，怎样进行页面布局和如何验证页面布局。