说起初级产品经理的工作流，将收集到的问题提炼转化为需求，再将需求落地成具体方案。
然后对接开发设计，跟进测试验收，最后完成上线。
其中最占我时间的，就是出方案，也就是画原型。
起初，我只负责 PC ，直到今年开始正式接手 App。
做了一段时间发现，我自己在页面布局上存在很大问题。
不仅延用了 PC 那一套平铺思维，最重要的是缺少页面布局的逻辑。
对此，我自己是没有感觉的，多亏设计和开发及时“怼”我，才让我没有误入歧途。
事后我也有意识的补充相关知识，才发现这个真的很重要。
接下来，我会对页面布局做个梳理，希望能对你有些启发。
一、什么是页面布局？01、PC 的页面布局
拿语雀为例，我们看下它的布局结构。
红色是整体的框架，分为顶部全局的导航栏、左侧分类的侧栏、中间的内容展示区；
操作上，当我们顶栏 1 选择工作台，侧栏 2 对应展示分类。
选中文档，右侧区域 3 展示相应数据。
不知道你有没有发现，整个操作和展示是一个「Z」型？
这也是我们常说的，网页排版「Z型模式」。
在这种模式下，两个标签页（紫色框内），以及搜索栏（蓝色框内）有什么区别？
导航栏的标签页和搜索栏，影响的是全局，而内容区的只影响自己的局部。
以上，就是 PC 布局最基本的理解。
02、App 的页面布局
说完 PC 的布局，那么 App 的有什么不同呢？我们先来看下这3张线框图。
重点关注顶部，你觉得这三者有什么区别吗？
首先我们可以判断，标签页（列表、日、月）是对列表的快速筛选。
因此它的位置不是关键，主要关注的是搜索。
（1）左图的搜索，做的是全局搜索，一般点击会跳转到新页面。
（2）中图的搜索，同样也是做的全局，但它既可以停留在当前页面，也可以跳转。
（3）右图的搜索，从布局逻辑上看，是搜索选中标签页下的数据。
当然，右图也可以做成和中图逻辑一样，停留在当前页面做全局搜索。
但这样的话，从页面布局自上而下的逻辑上来看，它是错误的。
最重要的，它会影响用户理解。
以上，是页面布局最基本的理解与认知。
二、页面布局到底有什么用？
从细节上来说，这部分属于交互设计层面。
但对做产品的我们来说，也还是需要有基本的理解与认知。
这里拿 App 「我的」页面举例，这部分知识也是向好友 Evelyn 学之后，有了更深理解。
上图是生日管家 App 「我的」页面
对比其他 App ，可以发现它顶部个人信息占了很大空间。
这也是基于它产品定位本身，是希望用户补全自己信息的。
往下走是增值服务入口的区域，大多数 App 都是在这，毕竟黄金位置是要服务商业模式的。
说句题外话，从视觉的角度来看，一进到这个页面是不是觉得这个金色更醒目呢？
再往下走，本质是依次按照使用频率，优先展示常用功能。
简单说，App就是要在有限的区域，展示更重要的信息。
同时，也要保证用户的操作逻辑，以及便利性。
这才是布局本身最核心的点。
三、写在最后
作为产品经理，平时在使用产品的时候要多注意积累。
在一些细节问题上，用得多了、看得多了、想得多了，潜移默化的会提高自己的设计。
拿我来说，之前就是这方面做得不好，导致我踩了不少坑。
不过好在有同事们的支（dui）持（wo），自己也慢慢获得了提升。
当然，我也希望以上这些，能给你一些启发，加油。
-END-
转载请注明：电商回忆录 » 页面布局要怎么做才算合格？
