页面布局的设计经验总结

时间：2023-10-05 00:30:01 | 来源：网站运营

时间：2023-10-05 00:30:01 来源：网站运营

页面布局的设计经验总结：页面布局指的都是页面信息结构布局方案，即页面中的元素如何展示给用户。对于产品而言，页面的布局方案是非常重要的，一个合理的页面布局方案，能为用户提供更好的产品体验，进而为产品带来更多的正向数据。尤其是当产品进入成熟稳定期后，功能方面已经没有多少空间进行创新了，更多的需要我们在细节方面进行打磨，而页面布局就是其中很重要且容易达成产品目标的一个点。影响页面布局的因素有很多，如产品目标需求，用户需求等，但此文仅从通用的角度来简单总结一下常见APP页面布局设计的一些经验。

1. 页面与用户之间的交互

用户使用任何产品都需要与产品进行互动，一般来说用户与产品之间交互的载体就是页面中布局的元素信息，即页面（产品）通过布局设计方案向用户展示元素传递各种信息，用户从这些信息筛选出自己需要的目标信息，然后进行相关的操作并反馈给页面（产品），页面与用户的交互流程可以简单归纳为如下图所示。因此从页面与用户的交互流程中可以看出，不能的页面布局方案就会对用户产品不同使用体验影响。




2. 页面布局的评估

在设计好一个好的页面布局方案前，我们需要知道什么是好的页面布局。个人认为一个好的页面布局方案应该能满足用户需求的同时还能够满足产品需求，当然在实际中设计方案评估的维度远远不止这两点，但这两点在任意设计场景下一定是需要考虑的。同时用户需求和产品需求都是非常复杂的问题，不同的产品甚至同一产品的不同功能模块都会会有不同的用户需求和产品需求，此处仅从基础的角度来简单分析一下用户目标和产品目标对页面布局设计的影响。

（1）用户需求

页面布局受用户需求影响可以简单的归纳为以下几个方面：

用户目标

用户目标指的是用户需要通过页面完成自己的目标，而页面布局就需要为用户提供完成这些目标的元素布局方案。如果页面的布局方案不能帮助用户完成用户目标，那么页面的布局方案就是一个失败的设计方案。例如用户需要买一个商品，那么在上屏详情页中就需要产品提供商品的名称，规格，价格，是否有货，购买按钮等信息元素，如果页面中不能满足用户的这些需求，那么这个商品详情页面的布局设计方案就是失败的，是不可用的。

产品体验

产品体验良好是用户对所有产品的预期，一般来说拥有良好体验的页面布局设计方案应该有以下几点：

信息理解简单

页面中向用户传递的信息用户应该能够很好的理解，且用户不会产生歧义，例如页面布局中信息提示的描述文案应该使用通俗易懂的语句，尽量减少专业化语句的出现。

信息浏览高效

一般来说，页面中都包含的布局元素都是较多的，那么用户在使用产品的过程中就希望自己能够快速的在页面中“抓取”到自己需要的信息元素，即用户使用较低的代价达到自己的需求目标。这就要求页面的布局方案能够让用户在浏览使用时能够快速高效的获取自己需要信息元素，而不需要用户花费较大精力在庞杂的信息中寻找自己需要的信息。

操作便捷

便捷操作是页面布局中用户体验的另外一个重要因素，即通过页面布局可以很好的降低用户的操作路径和操作成本。例如在页面布局中一般全局（当前页面）操作按钮都布局在标题栏或者页面底部固定操作区域中。

（2）满足产品需求

页面布局不仅要考虑用户目标，还需要考虑产品本身的相关目标，如导流，用户活跃度等产品数据。实际中，不同的产品需求，需要使用不同的页面布局方案。如下图所示为常见的2种分享设计方案，如下左图所示将分享按钮布局在标题栏（点击分享按钮出现分享方式），右图将分享方式直接布局在页面，这两种方案对需要分享的用户来说基本上都是可以满足自身需求的，没有太大差异，但从产品的自身的角度来说右图中分享数据肯定比左图好（用户操作漏斗），但是右图设计方案的缺点是直接展示分享方式占据了一定的页面布局空间，会直接影响页面中其他信息元素的布局和使用体验。




3. 页面布局的设计思路

在实际中，不同的功能，不同的使用场景，不同的用户或不同的产品目标都会导致不同的设计布局方案，我们无法归纳或总结出一个一劳永逸的页面布局设计思路或页面布局模板。但从普适性的角度来讲，我们还是可以利用和参考一些通用的原则和设计思路来进行页面布局的方案设计。如下是通过设计实践中总结的一些关于页面布局的设计思路。

（1）符合用户认知和习惯

用户的认知和习惯对页面布局设计有非常大的影响，因为用户的认知和习惯在一定程度上就决定了用户从页面布局中获取“信息”和进行操作的特点，如果页面布局的不符合用户的认知和习惯，那么就用户就需要付出更大的代价才能完成和页面之间的交互操作。在实际页面布局方案设计中关于用户认知和习惯需要注意以下几点：

阅读操作习惯

绝大数语言中，用户阅读和操作顺序是从到右和从上到下，且先阅读再进行操作，如下图所示为用户阅读和操作习惯顺序示意图。页面布局的设计方案也应该遵循这个规则，以保证用户能够快速的阅读理解并操作页面中的相关信息，否则用户的使用体验就会非常的差。

与用户的阅读的习惯顺序类似，用户的操作习惯基本上也是从左到右，从上到下。在实际中，一般来操作按钮不会单独存在，会与相关的信息同时布局在页面中，即用户阅读了相关的操作信息后在执行相应的操作。在“信息+操作”的布局设计中必须保证“先阅读信息后操作”的用户路径，即操作按钮布局在信息的后面，即“信息+操作”使用上下布局或左右布局，如下图所示。

根据菲茨定律，页面或区域的四周，即其顶部，底部以及两侧，都是操作按钮布局的黄金位置。但考虑到实际页面布局设计的“信息+操作”的需求（页面需要布局“信息”元素），由上述用户阅读操作习惯可知，页面的定顶部和左侧一般用来布局信息，右侧用来布局信息所对应的操作按钮，页面左侧不适宜布局操作按钮。因此对页面布局来说，操作按钮布局的黄金位置就是页面顶部的标题栏区域和页面底部的操作区域，如下图所示。

在页面布局中，如上右图所示，一般布局在页面顶部（标题栏）的操作按钮是针对产品全局或当前页面的，且操作按钮的优先级是从左到右，而布局在页面底部的操作按钮都是针对当前页面，且操作按钮的优先级一般是右侧较高（便于用户操作）。整体上，底部草所按钮的优先级是高于页面顶部优先级的，因为底部更适合用户对当前页面进行操作且因为底部显示区域较大更容易获得用户视线聚焦。

同样类似的，页面局区域的布局设计中，操作按钮的黄金布局位置是区域的底部和顶部右侧，如下图所示。

认知习惯

页面布局应该符合用户的认知习惯，即设计布局方案与用户对方案布局的预期保持一致，不仅需要在产品内保持一致，还需要与其类似产品保持一致，以降低用户的学习成本，如页面标题栏的中返回按钮就需要布局在标题栏左侧，网格布局中就需要使用上图下文的布局形式，如下图所示。因为这写常见的布局形式已经在用户心中形成了认知习惯，而使用不同与用户认知习惯的设计方案的成本代价是非常高的。页面布局符合认知习惯就需要保证在设计中我们需要使用合适的方式和形式进行设计，而不能漫无目的的进行所谓的设计“差异化”和“创新”。

（2）相同/类似/逻辑关联的元素布局在一起

当产品页面中布局的元素比较多的时候，我们就需要对页面中元素进行整理和归纳，即将相同/类似/逻辑关联的元素元素进行归纳和分组，并在设计方案中同组的元素布局在一起，这样就可以保证用户阅读浏览的快速高效（可参考格式塔理论），并且进行相关的操作。页面信息整理归纳的维度非常多，一般来说，可以从信息结构层级，逻辑关联性，元素类型，产品需求目标等多个方面进行页面信息元素的归纳和分组。如下图所示为JD商品详情页部分信息归纳分组的结构示意图。

（3）重要的元素优先展示

尽管对页面元素的归纳分组可以提升用户的使用体验，但当页面中的元素较多时，简单的信息元素分组并不能帮助用户快速定位到自己要想的信息元素或者产品本身需要突出并信息用户的信息。此时我们那就需要对元素进行优先级区分，并在布局设计过程中遵循“重要的元素优先展示”的布局原则。页面中信息元素优先级的确定标准一般可以从2个方面来确定：一是产品目标，即产品需要高优先级的展示和设计，从而提示引导用户进行特定的操作，二是用户需要，即对升用户体验有较大的影响的元素。突出重点信息的元素有很多办法，具体需要根据实际的设计需求来气确定，具体的可以以下几个方面进行考虑。

布局位置（上到下，左到右）

信息元素的布局位置是非常好的区分优先级的方法之一。一般来说页面中位置优先级是从上到下，从左到右，因为这也是用户阅读操作的习惯顺序。

元素类型

不同的元素类型对用用户视线聚焦的效果也是不同的，一般来说动态元素（动画）大于静态图片大于纯文本。因此在设计中，如果某个元素需要突出表现，则可以尝试使用不同的元素类型进行设计表达。如下图所示为2种Tabs组件的设计方案，左图使用纯文本作为选项卡，右图选项卡的设计方案使用了图文结合的形式，相比较而言，右图的视线聚焦效果更好，即Tabs组件会在页面中得到更高优先级的设计表达。

元素大小

一般来说，在页面如果一个元素占据的大小越大，那么其在页面中的重要程度就越重要。如下图所示为常见的文章阅读列表，其中列表项包含2个元素，其中标题为优先级最高的元素，因此在设计中通过加大标题字体的大小来提升标题的优先级。

元素颜色

与元素大小类似，同样可以通过元素颜色来提升元素在页面中优先级，如下图所示，同样的2个按钮，右侧按钮使用了颜色填充，左侧按钮未使用颜色填充，则使用颜色填充的按钮优先级相对较高。

（4）不同的元素应该有明显的区分

页面中布局的元素越多，那么用户浏览页面的效率就会相应的降低。在页面元素保持不变的前提下，我们应该增加元素见的“辨识度”，即不同的元素应该有着明显的区分。如上文所述的元素优先级等都是增强元素辨识度的设计方法，但在实际中还是会经常碰到元素优先级一致或逻辑结构完全一致的场景，如列表中，无法通过列表项本身属性差异来表现其差异化，此种情况下一般我们需要借助其他设计方法来增强元素之间的差异，常见的方法有以下几种

主题/标题

如果页面中包含多个逻辑结构都相似的元素组，则可以为不同元素组之间增加“标题”，通过标题/主题来增加页面元素的“辨识度”，如下左图所示为未增加标题的网格列表，如下右图所示为增加标题的网格列表，这样通过标题里用户就可以快速的区分不同的网格列表项。

分割线

分割线也是常见的区分布局元素的设计方法之一。如下左图所示在纯文本的Tabs组件中，使用竖线分割线来区分选项卡，如下右图所示为使用横线进行列表项的区分。

元素间距

增加元素（组）之间的间距也可以增强元素之间的辨识性，其与分割线的作用基本一致，区别在于分割线的辨识性大于增加间距。

元素形式

元素形式指的是元素在页面中展现的视觉样式，即使是标准的控件，也会有多种视觉形式，如按钮就有图标按钮，文字按钮，线框按钮和色块填充按钮几种常见的形式，不同的形式元素会有不同的实视线焦点效果，因此可以帮助用户快速区分不同的元素。

（5）页面信息密度

在页面布局中，除了需要关注各种元素的自身的布局和设计方案外，还需要整体的关注页面中的信息密度，即页面或者特定区域内布局元素的多少。页面布局元素密度不能超过一定程度（具体可以结合实际需求来判断），否则就会造成信息过载，即页面中信息密度超出用户接收和处理的程度，从而降低用户的信息浏览效率和增加信息浏览成本，从而对产品的使用体验造成负面影响。为了避免页面信息过载，一般可以从以下几个方面进行设计思考。

优化用户体验路径，分解用户路径

如果页面中需要布局信息元素较多，可以考虑通过优化用户体验路径来解决，即将页面中过多的信息元素通过适当的重组优化，将用户的操作路径几个步骤，每一个步骤包括若干信息元素，这样就可以加大程度降低用户单次接收到信息量。例如在常见的账户注册流程中，用户需要填写很多资料信息，但是如果将所有信息都一次性展示给用户，就会造成页面中信息过载，此时可以将页面中用户的任务路径当分解为几个小步骤，每一个步骤仅包括部分元素，这样就可以避免页面中的信息过载了。与信息过载相比较，适当的延长用户操作路径带来的用户使用成本的增加是可以接受的。

页面中仅布局必须的元素

在页面布局设计过程中，我们必须要保证页面中布局的所有元素都是必须合理的（可从用户和产品等多个维度来衡量），应该遵循“如无必要，勿增实体”的原则。

展示重要元素，隐藏次要元素

如果在设计过程中发现，页面元素较多且都是必须的，则可以在设计中遵循“展示重要元素，隐藏次要元素”的原则，即根据元素的优先级，重点设计展示重要的元素，将次要的元素通过设计方法隐藏起来，用户可以通过特定的操作按钮来查看隐藏起来的次要信息，如常见的更多按钮，展开/收起按钮和溢出菜单按钮。如下图所示为常见的溢出菜单和更多按钮的示意图。

（6）页面布局与信息层级结构

页面中布局的元素较多，并一定所有的元素都是属于同一层级结构，那么在页面布局中我们就需要同设计方案来体现元素的层级结构关系，从而帮助用户来理解产品的页面信息结构。手机屏幕本质上是没有Z轴的，但是可以通过颜色，边界线和阴影等特定的方法来表达页面的Z轴层级关系，从而来表达信息元素的层级结构。

（7）产品的规范性和一致性

虽然产品的规范性和一致性在UI视觉样式上体现的最为直观，但在纯粹的页面布局中设计方案中，我们仍然需要思考产品的规范性和一致性，这主要表现在产品信息结构以及通用组件使用规范等方面，即产品中逻辑结构类似的功能或页面需要使用相同或近似的布局设计方案，这样可以保证产品形象和用户体验的一致性，同时降低用户的产品使用成本。




需求设计中，页面布局是一个非常复杂的工作，需要考虑的东西非常多，这里所讲到的点也仅仅是冰山一角，很多需要根据具体设计需求进行思考分析的地方就无法此处详细的展开叙述了。