产品设计排版图-设计用户视线的基本规则

文章开始之前，我先解释一下什么是控制观点。

其实就是如何通过改变视觉载体上的大小、颜色、形状等因素来控制观看者的视线，从而按照设计者预期的浏览轨迹进行浏览。 说得更直白一点，就是告诉用户先看哪里，接下来要注意什么。 眼睛应该休息什么、在哪里以及可以停留多长时间。

想要用户的目光跟随设计师的安排，前提是尊重用户的阅读习惯。 不同情况下用户的阅读习惯如何？ 稍后我会提到一些设计规则和一些案例说明。

在此之前，我们先来了解一下中国古代书籍版式的历史。 在中国，书籍从右到左垂直排列已有数千年历史。 你可以先想一下为什么布局是垂直的？ 暂停 10 秒钟，想一想。

一、古籍为何采用竖排印刷 1、技术限制

在造纸术发明之前，由于技术限制，古人选择使用竹简以及用木片串成的竹简作为载体。 串起来的竹简可以卷起来存放。 双手打开，简牍是由狭长的竹简组成。 。 垂直条可以在记录文字时创造连续性，这导致古人也垂直书写和阅读。 它们可以用绳子串起来并卷成卷。 “书”字是竹简的象形字。

2、人体生理习惯

首先，文字应该垂直排列。 阅读时，应从上到下阅读。 头部可以上下活动吉祥物设计，不仅可以减轻眼球的疲劳，还可以预防颈椎病（这听起来是不是有点不可思议）。

1989年，生物学家金灿龙发表了题为《论汉语横竖读写与学生视野的研究》的文章。 通过调查，学者发现，阅读横版书籍时，视力需要左右看、左右移动、眨眼。 运动是上下运动，所以读书时眨眼会造成干扰，造成眼睛疲劳。

竖版书的上下阅读动作与眨眼相协调，也能帮助眨眼等正常的生理活动。 眨眼会引起眼部血液微循环，净化眼球。 因此，阅读竖版书籍不仅可以增长知识，还可以有益于身心（有机会可以尝试一下）。

三、思想文化

当人们阅读竖排文字时，读者的头部需要上下移动，就像对每个句子点头表示同意一样。 无意间表达了对古代先贤先贤的尊重和认可。 也体现了古人尊卑的思想。 在古代，上位者是国王。 为父母； 对于下属，对于部长和孩子们； 右侧越大，左侧越小； “莫大于正”就是没有多余的意思。

阅读横文时，我们需要不断摇头，这会下意识地含有否认和猜测的成分，很容易导致误解。

2、为什么竖排改为横排？

那么为什么现代社会的信息传播载体主要以横向布局为主呢？

主要原因是，随着社会的进步，为了满足高效的通讯速度，信息生产者可以快速传播信息，信息接受者可以快速获取信息。 再加上科技的进步，现在的书籍都是从左到右的。 从上到下阅读和写作。

因此，我们现在看到的很多信息都是横向格式的。 无论是报纸、电视、广告、新媒体，还是我们日常使用的App，都以横向排列为主。 横版书籍的阅读产品设计排版图，可以一目了然，一次十行。 快速阅读课文，起到快速阅读的作用。

当然，现在也有竖排的文字布局，大多是为了传达某种特殊的气质，所以选择布局方式也要看内容想要传达给受众的感觉。

3.古腾堡图法

接下来我们来说说古腾堡图法。 古腾堡图将显示介质分为四个象限：左上角的“第一视觉落地区”； 右下角的“视觉结束区域”； 以及右上角的“强视觉端区”。 左下角的“休息区”和“弱者休息区”。

根据该图，用户的视线会自然地从左上到右下扫描，并且每次扫描都会沿着方向轴从左到右开始看。 这个方向轴主要是由对齐的元素、文本行或一些明显的元素形成的水平线产品设计排版图，除非有特殊的视觉强调。

图中，左上角为“视觉落地区”，右上角为“强休息区”，左下角为“弱休息区”，右下角为“视觉终点”区域”。 因此，设计师会根据这个规则，将焦点信息放置在左上角的“视觉落地区域”，比如标志、标题、大图片等需要突出显示的内容； 操作信息被放置在右下角的视觉登陆区域，以符合用户的视觉流程，目的是让用户在浏览完信息后可以采取进一步的操作，一些优先级较弱的内容会被放置在“强”中。休息区”和“弱休息区”。

其中，“弱休息区”是最容易被忽视的区域。 以下是一些案例：

上述案例中的视觉结束区域都包含了一些号召性用语的操作，因为用户从顶部开始了解页面内容，然后最终目光落到右下角。

将古腾堡图法应用到页面上可以帮助读者理清阅读逻辑。 研究发现，这样做可以提高读者的阅读节奏和理解力。 例如，遵循古腾堡图布局，将关键元素放置在左上角（如标题）、中间（内容）和右下角（操作按钮）。

以下对话框的应用也遵循从左到右、从上到下的对角原则。 主动操作按钮主要放置在右下角，负操作按钮放置在右侧。

这种效果在遇到大量文字时会更加明显，人的视觉会遵循这样的浏览顺序，就像我们日常阅读的书籍一样，从左到右，然后继续循环。

4.尼尔森F型视觉模型

尼尔森的F形布局来自于网页载体。 这种浏览模式更像英文字母F的形状，所以称为F模式吉祥物，包括以下三个方面：

阅读者的眼睛首先进行水平移动，往往会扫描网页内容的上半部分，从而形成一条水平移动轨迹，即F的第一条水平线。读完一行后，用户的视线稍微向下移动。 这时，扫描第二行时，长度会比第一行短，从而画出F字母中的第二条水平线。 当你继续向下阅读时，水平线会变得越来越短，这是由用户对当前页面的注意力决定的。

以下是尼尔森报告中的热图。 颜色用于指示观众注意力的强度。 分为四类：最热门（红色）、比较热门（黄色）、不热门（蓝色）、基本不感兴趣（灰色）。

了解了尼尔森的F型布局后，在实际项目中，尽量遵循用户的浏览规则，按照各个区域的热度来排列信息，这样你想让用户看到的信息就可以被看到。