如何设计页面布局

时间：2023-09-12 10:54:01 | 来源：网站运营

时间：2023-09-12 10:54:01 来源：网站运营

如何设计页面布局：

回顾：

如何设计信息架构：如何成为一个合格的交互设计师（五）
如何设计任务流和页面流：如何成为一个合格的交互设计师（六）

假如觉得有所受益，欢迎关注我的专栏《成为一个交互设计师》




完成了信息架构设计、任务流/页面流设计后，便要开始设计页面排版布局，在开始学习方法论之前，我们需要先了解一个概念——交互优先级

交互优先级

交互优先级有以下7个需要考虑的维度：

①灵活度与复杂度

灵活度与复杂度成反比关系，产品功能越灵活，意味着复杂度越高，用户的学习成本和操作成本相应增加。例：PS等专业处理软件和美图秀秀




②效率

效率分两方面：

1）步骤（即点击次数）

对于互联网产品来讲，都遵从漏斗模型，每一次点击和跳转，都意味着流失一部分用户。那是不是意味着步骤越少越好？例：下图的软件中的所有功能都展示出来，可以一步到位，但好用吗？

显然，步骤的数量并不是绝对的衡量标准，核心是用户的认知成本和决策成本。




2）距离与大小

费茨定律：移动到目标的时间与目标大小成反比，与目标距离成正比。

增大与主要任务相关的元素，减小相关性操作的元素距离，提高优先级，可以帮助用户认知和决策。

锚定作用：位于屏幕边缘的元素，用户更容易点击到。

操作舒适区：




③频率

任务有高频和低频之分，为高频任务尽可能提供快的支持；低频任务考虑需要隐藏和弱化，但要做到易学易记。例：iOS的控制中心，低频，但用户需要时可以随时提供；iOS的设置，位置固定，帮助用户记忆冗杂的选项：




④转化率

交互优先级提现在数据上，就是每一步骤的转化率。做到高频任务的每一步骤也是高转化。




⑤引导使用

对于主推的功能，可以通过提高交互优先级引导用户使用。




⑥习惯

需要从用户习惯和行业惯例这两个维度看。

例：支付宝推出社交列表时，被用户吐槽抄袭微信。但在当时这是最好的方案，微信已经培养了中国几乎所有移动互联网用户的使用习惯，这种方案不一定是最好的，但是最合适的，极大地降低了用户的学习成本。

当想要颠覆用户习惯和行业习惯时，回答三个问题：

1）衡量不遵循用户习惯的改变所带来的好处是否能够cover掉学习的成本。（包括改变的实际成本和心理成本）

2）衡量新老用户的比例。违背用户习惯但正确的改动造福了新用户，影响了老用户。

3）衡量产品在行业内的影响力。如office2007改RibbonUI，如微信在社交领域的地位。

4）衡量行业标准和惯例。如键盘，尽管不是最符合人体使用习惯的方案，但延续至今，已然成为一种绝对的标准，除非出现里程碑式的创新，不然颠覆的成本无法承担。




⑦阶段

交互优先级具有阶段性，短期和长期的重点不同。

例：淘宝起步时，重点在于获取更多的卖家和消费者；而现在的重点在于完善生态。




设计主线与支线

每个页面都承载着用户目标、产品目标和商业目标的矛盾，需要设计师去权衡，做出最优的方案。通常，我们将用户目标作为主线任务，产品目标和商业目标作为支线任务。

定义：大多数场景下，用户和产品的目标很明确和单一，往往集中在一条主线上，为了用户体验，应该尽量减少支线和噪音。可现实是我们总会觉得有太多好东西希望用户发现，太多好功能希望用户使用（产品目标），还要考虑盈利（商业目标），于是会存在很多支线。

噪音：与主线任务无关的元素。噪音越多，用户越不容易找到满足需求的功能和内容。

核心问题：控制合适的信噪比。

难点在于：1. 主线需要筛选和过滤出来；2.克制提供更多选择的诱惑。

目标：合理规划用户在产品中的线路，引导和帮助用户在主线上完成任务，同时在某些场景下适当地提供支线，以完成产品目标和商业目标。

优秀案例：

1. Kindle和阅读类应用。阅读时只呈现内容，营造沉浸式的阅读体验，需要其他功能时点击屏幕，唤起导航和工具面板。
2. 商场规划路径。用户熟悉后可以直奔目标，每隔一段时间会重新调整，在用户寻找目标的过程中来满足商业目标，刺激消费。
3. 与主线场景相结合的广告或推广。使用图片处理应用处理完图片后，推荐图片分享社区的产品，非常自然且符合场景，转化率会更高。

方法论

梳理好交互优先级的7个维度和页面的主支线后，页面排版布局的设计工作已经完成了一半。接下来，只需要按照既定的方法完成：

1. 确定页面的主线与支线
2. 使用卡片分类法确定页面信息元素的分类
3. 根据主线与支线，使用各类技巧(下文讲解)对组块进行排版布局
4. 页面排版的设计验证

页面排版布局的技巧

• 利用视觉引导：根据大量的眼动研究，人的阅读视线轨迹呈F型，重要的东西要放在左上角。

• 对角线法则

• 弱化或隐藏

• 删除不必要的信息

设计验证

交互设计阶段，无法通过灰度测试、严格控制变量的线上A/B等正规的测试方法验证原型。那么是否必须等到上线后才能验证？显然不是。随着项目的推进，走到视觉、开发等步骤，修改成本会随之增大。能够在交互设计阶段提前暴露问题，节省试错成本，对项目的成功意义巨大。

粗暴的用户测试

1. 不拘泥于形势的原型
2. 有针对性抓取同事或朋友进行测试
3. 可以任务走查，也可A/B测试
4. 获取测试结果后快速优化

可以使用以下方式进行验证：

• 纸上原型：如果觉得纸面原型难以直观表达交互效果，可以使用POP - Prototyping on Paper 这款app，将纸面原型拍下来，放到应用中，可以选取特定区域添加手势和链接。如此，设计师便不用费劲解释页面之间的逻辑关系了。

• 墨刀（MockingBot）：墨刀具有非常强大的控件库和链接功能，现已支持导入Sketch文件，非常便利。

• 甚至拿着没有任何链接说明的纸上原型，拉到一个人就可以做用户访谈，往往会有意外的收获。

这里，就纸面原型稍微展开聊聊。

纸面原型的目的不是为了交付，而是为了沟通、测试，尽快解决那些不确定的问题。

纸面原型可以看做是最终设计方案的雏形，最需要关注的是框架、流程、基本功能和内容，切不可过早陷入设计细节的纠结中去。在前面的专栏文章中，已经对需求、任务、信息架构、操作等都有了分析，纸面原型的目的就是把这些内容串联起来并准确无误地表达出来。

如果想表达出交互效果，可以用便签贴和小卡片，可以当做提示气泡、弹出层、模态窗口等。

回顾

今天我们讲述了如何设计页面排版布局：

1. 了解了交互优先级的概念和7个维度（灵活度与复杂度，效率，频率，转化率，引导使用，阶段，习惯）
2. 如何设计主支线
3. 设计页面排版布局的方法论
4. 页面排版布局的技巧
5. 如何进行原型的设计验证，其中特别推崇运用纸面原型，尽早测试设计效果

假如觉得有所受益，欢迎关注我的专栏《成为一个交互设计师》