在交互工作的各个环节中，「页面布局」是将需求从文字、图表、流程进行可视化的执行步骤，也是最终表达的一个关键步骤。但是很多人对于「页面布局」的理解仅仅停留在用Axure/Sketch的各个控件拖拽出的页面图像上，并且可能这个图像的质量还很低，更不论去理解为什么要这么做？
本篇从用户视角切入，较为全面的阐述「页面布局」的思路过程，是一份新手入门的页面布局全攻略。
首页，我们来重新理解下什么是页面？
简单来说，页面是用户看到的信息集合的载体，这里面我们往往会忽略一个关键词：“用户看到”。这就决定了，页面对于每一个受众来说是不同的。横向来看：同一个页面，不同的人看感受不同；纵向来看，同一个人，每天按照生活轨迹也能看到不同的页面。所以，页面布局中如何把“用户”因素纳入考量，是非常重要的一点。
达成以上认知之后，我们来实际看一下怎么样简单搞定页面布局的“套路”呢？
举个例子，页面布局和装修房子一样。（在有限的空间内，对特定的信息/物品进行整理、归类和摆放的过程）
一般在装修之前，我们可能会去先考虑一下需要什么风格的，是现代的、古典的，欧式的、日式的，还是中式的，有了这些比较典型的风格，在装修的时候基本就有了大致的方向。页面布局也是一样，也有沉淀下来的一些常见的页面模式，正式“装修”之前，我们需要对这些典型的布局方式了然于胸。
（一）移动端常见页面模式
在移动端，导航模式是APP最重要的区别。导航就像书的目录一样，展现产品的基本框架和结构，可以告诉你当前处于什么位置，让你在页面中不迷路。按照产品的信息结构，可分为一级导航和二级导航，常见页面模式基本也是从导航角度来区分的。
1、Tab式/标签式
使用场景：
适合体量比较大的产品
功能与功能间关系密切，且需要频繁切换。是移动端使用最广的一种导航模式
优点：
入口扁平，直接展现重要信息的入口
减少页面跳转的层级深度，减少用户点击次数，提高效率
缺点：
底部Tab受屏幕宽度限制，为保证可点击性，可显示的数量有限，一般最多5个。顶部标签，任务较多时一般使用滚动方式
2、Tab结构变形-舵式
使用场景：
产品的几个功能中，有一个是核心功能或者说有需要突出的功能
优点：
一般会通过一些视觉方式进行突出，较大限度引导用户进行操作
缺点：
一定程度使旁边按钮点击率降
3、Tab结构变形-竖向Tab
使用场景：
一般用于分类的场景，如电商类目，餐饮菜单，书籍目录等
优点：
能够相对支持较多分类项的显示，一目了然，减少页面跳转
缺点：
占用较大的面积，受屏幕宽度局限，且不利于单手操作
4、抽屉式
使用场景：
常使用于突出核心功能，隐藏较不重要/使用频次低的功能。适用于核心功能突出，或者功能较为单一的产品，比如打车产品
优点：
减少页面控件，节省页面空间，更聚焦产品核心功能
缺点：
抽屉内的功能入口，层级更深
抽屉入口按钮比较隐蔽，信息容易被忽略
随着屏幕尺寸增大，左上角的区域，越来越不便于用户单手操作
5、宫格式
使用场景：
一般作为二级导航，功能分类比较多的时候，且各功能使用频率相近但彼此又相互独立
优点：
功能扁平化，充分利用整个页面，在有限的空间内罗列大量的入口
缺点：
同类入口太多时，没有侧重
6、列表式（及其衍生）
使用场景：
用于功能层级比较浅，且功能间切换不频繁的主导航，垂直列表的视线都是从左往右，从上到下，所以要把最重要的条目放在最上方。是最常用的页面布局之一。
优点：
页面结构相对简单、整齐，逻辑清晰，便于用户快速定位，符合用户从上往下的浏览习惯，用户接受度高
手机屏幕一般是竖屏显示，列表长度可以没有限制，通过上下滑动可以显示更多内容，特别适合同类数据比较多的信息
但，由于同类信息较多，容易产生视觉疲劳，且相对页面利用效率较低
随着技术的发展，屏幕的变化，页面导航模式也在变化，还有其他一些布局模式，比如：卡片式、衍生瀑布流、独立主题结构等。页面的导航模式，从一定程度上决定了页面布局的方式，这几个导航模式都有优缺点，根据产品的特点选择合适的导航模式灵活运用就可以了。
（二）页面布局三步走
弄清楚了装修风格，下一步正式装修之前，我们要搞清楚谁住在这，住着的人有什么特点，希望装修成什么样等，房子面积有多大等，然后才动手开工。
1、从需求到功能
首先，确定这个页面的任务目标（用户目的+业务需求）
以一个常规的购物页面为例：
用户任务/目的可能是：
清晰快速的了解自己想要的商品信息，方便、简单、安心的购买
那么他可能需要的功能
查看商品的详细情况：价格、规格、优惠力度等
联系客服，询问详情
查看物流、评价等帮助判断
最终完成购买（加入购物车一起购买）
业务需求：
1、提升下单率-引导用户购买/加购
那么可能需要侧重表达的功能就是加购、购买
其次，提取所有功能点/信息点
把所有需求方表达和用户需要的功能点进行罗列：
然后，对功能/信息点进行分类、组合、优先级排序
2、定义屏幕
完成功能/信息提取之后，接下来需要把合适的功能/信息放在特定屏幕的合适的位置。就好比装修布置，多大平的房子，不同的区域放置合适的东西，比如马桶应该放到卫生间、橱柜冰箱应该放到厨房，页面布局也是类似，不同的页面区域承载不同的信息/功能。
一般来说，绝大多数场景我们采用竖屏布局，页面的顶部是标题及其他一些附属全局功能；根据眼睛聚焦位置，页面上部更适合放偏视觉的信息；页面中部适合操作的区域，可以做核心功能/操作区；页面底部一般做为导航，也可以放置需要重点突出的操作按钮。
3、进行布局
将所提取的功能/信息按照屏幕基础规则填入：
似乎感觉不对？信息的重点、关联度、细节的表达、页面的美观等，都与预期相差甚远。还差最后一步，根据布局原则进行优化调整。
基本的布局原则：
相同的形状、颜色或其他特征会让信息关联
不同的间距能给信息分组
零散/分裂的信息按照一定规律排列，会让人自动将其关联起来
封闭的图形，就算有缺失，人们也会自动将其“补全”
布局时，需保持整体风格的一致性、延续性
布局原则的应用举例：
运用基本原则，进行调整，然后整体优化：
对比：突出主要的，弱化次要的
删除：不必要的
隐藏：不能删除的非必要的
如此以上，就能完成基本的页面布局。
但，这样就结束了吗？当然不是。
怎么样构建更科学的、更符合用户认知/习惯，方便用户浏览/操作的页面，还需要攻略以下几点：
（三）了解视觉心理
1、控制信息数量
心理学研究表明，人一次只能“记住”4项事物。
人不知道大家有没有打开一个网站或者APP，但是不知道看哪里，因为页面中太多的信息内容，我们不知道从哪开始，然后就很容易关闭这个APP或者网站！
2、聚焦重要信息
用户每天接触太多的信息，他们在接触粗略信息时，是扫描，扫视！只有眼睛被吸引的时候，他们才会停下来阅读。
所以当全部的信息都加强时，就是所有的信息都变弱了，重要的信息要足够聚焦，聚焦方式有很多：颜色对比，大小对比，动效，音效等。
2、了解用户浏览习惯
用户在浏览桌面端网页时，视觉轨迹呈字母 "F" 型。而由于移动端设备屏幕小，用户能抓取到整个页面的内容，在移动端页面下，视觉轨迹则呈字母 "L" 型，位于右上角的信息较容易忽略，不要放重要信息。页面整体的操作按钮，位于页面底部也比较符合浏览顺序。
（四）分清页面载体
不同的设备，操作方式不同，鼠标还是触控；控件和布局规范也是不同的。进行页面布局时要充分了解，页面将在哪些载体显示。
现在市场上设备的种类越来越多，屏幕的种类也越来越多，虽然平时设计的时候可能接触最多的还是常规的手机屏幕，但在布局的时候最少要考虑屏幕的比例、横屏竖屏等，以免出现一行信息过多，或者首屏信息露不出来等。
（五）操作方式&操作热区
49%的用户习惯于单手握持手机，用拇指操控屏幕，而用另外一只手做其他的事情
36%的用户会双手环抱手机，用其中一只手的拇指操控屏幕
15%的用户会用双手握持手机并用两手的拇指操控屏幕，其中90%的用户操作时习惯屏幕竖着，而10%的用户偏向于横屏操作。
所以：
页面左上角、右下角不适合操作，不要放需要频繁操作的button
结合视觉浏览习惯：页面上方适合放重要的查看信息，下方适合做操作区。
（六）基于平台/系统规范
不同的平台/系统，由于底层逻辑、设计理念等不同，对于设计的规范不一样，底层控件的表现也不一样。
在页面布局的时候，如果能尽可能的了解不同平台的规范，既能更好地使用基本控件，也不会出现一些奇怪的复用现象。
以上6点是我对于「页面布局」总结的一份思路攻略，类似武功心法，最终修行如何，还需各位自行摸索。
