两大设计模式 塑造高可读性的网页布局
程序员文章站
2022-05-17 19:54:31
...
【编者按】网页设计中，视觉层级的组织十分重要，它可帮助用户快速抓取所需关键内容，获得愉悦体验。目光追踪定位技术可帮助实现这一点，其可帮助设计师更好地懂得如何设计既高效又有审美趣味的网站。Jerry Cao在Webdesigner Depot上发表了《How Eye Scanning Impacts Visual Hierarchy In UX Design》一文，详细介绍了F-模式、Z-模式，并分析了iZettle、DropBox、Evernote等知名网站如何利用这两种模式完美搭建页面布局的。CSDN对该文章进行了翻译，内容如下。
欢迎加入CSDN用户体验交流群：190426269，进行行业探讨。
从希腊的花瓶到意大利的教堂，艺术在几千年的历史长河中，熏陶了我们对“美”的理解，伴随着最近“目光追踪定位技术”的发展，让我们知道了人是如何以一个动态的视角去感知这个世界的。更让人兴奋的是，这项技术帮助我们更好地懂得如何设计既高效又有审美趣味的网站。
网页设计（作为一种视觉艺术）与传统艺术形式遵循着一样的规则。本文中，我们将简要概述视觉组织的重要性，然后说明“目光跟踪定位技术”是怎样改变Web界面布局的。
创建好的视觉组织结构
毫无疑问，一个网站的视觉效果影响着它能否成功，找出这个原因很重要。作家及雅虎的高级产品责人Luke Wroblewski在他的论文《Communicating with Visual Hierarchy》中提到一个Web界面的视觉呈现要点应包括以下几部分：
很自然流畅的向导
优秀的界面能引导用户很自然地进入下一操作，而不会给用户带来霸道而专横的感觉。你也许会认为企业所做的一切都是商业行为，但毫无疑问Uber是一个流畅到让人难以置信的结构化网站。关键点在于顶部的滚动设计，紧随其后的是一个有趣的滑块来提供不同的汽车选项，然后按照某种逻辑关系帮你顺利地找到所在城市的座驾。
与用户进行交流
通过拼接不同的信息碎片,不用任何的交流信息来说明，UI就可以在用户头脑中形成一个信息链。看看流行的设计网站Abduzeedo是怎么设计的：头部是占一大块区域的分类信息，特色内容在中间部分，细小分类则在页脚部分。
产生情感共鸣
不要错误地把你的网站仅仅当做一个呆板的工具。网站也能与用户建立情感上的联系，如果你不这样做，你的竞争可是会的。事实上，如果你做出一个有积极情感的网站，用户更容易原谅你界面上的缺陷。MailChimp就是一个完美的例子，它的界面使用起来令人心情愉悦，使用起来更是一种享受。
人的视觉具有倾向性
有时，似乎你的眼睛也有他们自己的思想。经过多年的进化，眼睛有了发现我们认为重要的对象和动作的能力，不管是某个人以性感的身姿穿过马路或是可爱的卡通熊的蜂蜜广告都能吸引我们的注意。当然在每个人心中所谓的“重要性”是不一样的，因人而异，唯一不变的是他们的行为倾向。通常在浏览一个网页时大部分人的行为倾向是一样的。
所谓“行为倾向”有两个，我们将详细讨论。99Designs作家Alex Bigman的文章《6 principles of visual hierarchy for designers》展示了那些有从左往右阅读习惯的用户群，当设计一个网站布局时有两个非常通用和有效的设计模式。
第一是F-模式，常用于文本（当然也可以用于其它用途）。第二是Z-模式，可用于任何视觉布局。我们将在下面分别解释他们各自的优点和缺点。
F-模式
F-模式的页面往往包含大量文本，比如博客、新闻资讯、文章等站点页面。
当面对成段的大量文字信息的时候，大多数读者会纵向地先浏览每段左边的文本，特别是在段落开始的几个句子中寻找关键词或者他们的兴趣点。最终读者找到他们喜欢的东西,再开始正常地横向阅读。最终的结果是看起来像字母F或E。
Nielson Norman团队中的Jakob Nielson发起了一个基于232人浏览成千上万个网站可读性研究。通过他的研究，他记录了他认为的“F-模式”的实际意义：
用户很少会认真地读文本的每一个字；
前两个段落是最重要的，它应该包含你的要点；
在段落的开始、副标题和关键位置中放入吸引人的关键词。
当然，左上角是最重要的，因为这是所有有从左往右阅读习惯的人群阅读开始的地方。用户通常会水平地通读头部，所以这是一个很好地放置导航条或（和）“用户行为号召”的地方。然后用户从左侧纵向浏览下来,直到遇到感兴趣的内容。最终，用户的目光结束在页面的右侧，这是一个放置“用户行为号召”或广告的地方。只是不要让侧边栏遮挡住内容。
但F型并不是一个定式——没有事实说明它是最好的，但更像是由大部分用户的行为习惯而总结出来的一些松散的规律。请牢记这一点，因为F-模式在开始几行后就失去了它的有效性。
Kickstarter使用一张卡片来展示特色项目，这使得用户不会在浏览完开始的500像素后就变得视觉疲劳。
另一方面，iZettle在主页上采用了一种更传统、遵循F-模式的方法。不管怎样，它通过在背景图片的上层叠加主文本（使用iZettle来增长您的业务）和“用户行为号召”来设法避免过于模板化的外观。我们认为这是适应这种阅读模式最基本简洁的方法。
Z-模式
此外，Z-模式是最简单、最通用的模式,普遍用于任何基于文本的网页。读者首先横向的浏览顶部，接着回到左边，然后再横向地浏览整个底部。
理解通用的Z-模式很重要，因为它解决了网站的核心需求：层次结构、品牌化和用户行为号召。它的美在于既简单又具有“用户号召”型网站的理想布局。当然，对于更复杂的或包含大量内容的网站，Z-模式可能过于简单。
考虑一下Z-模式是否适合你的网站？下面有一些最佳实践可以更好的优化该模式：
背景：保持背景在它应该处于的位置：隐蔽在内容之下。不让它分散读者的注意力。
要点1：作为第一个要点，将Logo放置在固定位置。
要点2：虽然主要的用户号召应该放在后面，这对二级用户号召来说是一个好位置，可强调或突出导航条（一个漂亮的图形或图像滑块将有助于分割页面的顶部和底部，鼓励读者按照Z模式所期待的方式来浏览）。
要点3：选取最佳位置来吸引读者对其它链接的注意，或者吸引读者的目光到网站的最终目标：要点4。
要点4——作为“终点”，这是一个完美的放置主要用户号召的地方。
首先你需要做的是把页面上的元素按照重要性进行排序。然后，从结果中挑选出适当的“热点”就会变得很简单。
此外，Z-模式可以重复和扩展到整个页面。我们来看看Evernote是如何按“之”字型向下放置他们的“用户号召”和卖点的。
DropBox没有使用任何背景图片，很简单地实现了这种“曲折”的模式。相反的，更多功能型的设计内置在了布局中，比如用户号召“浏览更多”，当用户浏览整个网页时，它帮助用户链接进入每一板块的细节部分。这也有助于通知读者点击到下一个相关页面，而不需要先去通读页面所有内容。
设计趋势预测
一个优秀的界面设计应该像一个无形的手在左右用户思考的速度。从F-模式和Z-模式设计趋势获得的最重要的一点就是：你应该将你认为最重要的内容很自然地展现给读者，而不是让他们感觉到在强迫他们看。
能敏锐地把握细节，对任何页面布局来说都是一个优势。这些模式可以让用户感觉是为他们提供一些相关建议，而不是强迫他们接受。（责编：陈秋歌）
原文链接：How Eye Scanning Impacts Visual Hierarchy In UX Design
欢迎加入CSDN用户体验交流群：190426269，进行行业探讨。
从希腊的花瓶到意大利的教堂，艺术在几千年的历史长河中，熏陶了我们对“美”的理解，伴随着最近“目光追踪定位技术”的发展，让我们知道了人是如何以一个动态的视角去感知这个世界的。更让人兴奋的是，这项技术帮助我们更好地懂得如何设计既高效又有审美趣味的网站。
网页设计（作为一种视觉艺术）与传统艺术形式遵循着一样的规则。本文中，我们将简要概述视觉组织的重要性，然后说明“目光跟踪定位技术”是怎样改变Web界面布局的。
创建好的视觉组织结构
毫无疑问，一个网站的视觉效果影响着它能否成功，找出这个原因很重要。作家及雅虎的高级产品责人Luke Wroblewski在他的论文《Communicating with Visual Hierarchy》中提到一个Web界面的视觉呈现要点应包括以下几部分：
很自然流畅的向导
优秀的界面能引导用户很自然地进入下一操作，而不会给用户带来霸道而专横的感觉。你也许会认为企业所做的一切都是商业行为，但毫无疑问Uber是一个流畅到让人难以置信的结构化网站。关键点在于顶部的滚动设计，紧随其后的是一个有趣的滑块来提供不同的汽车选项，然后按照某种逻辑关系帮你顺利地找到所在城市的座驾。
与用户进行交流
通过拼接不同的信息碎片,不用任何的交流信息来说明，UI就可以在用户头脑中形成一个信息链。看看流行的设计网站Abduzeedo是怎么设计的：头部是占一大块区域的分类信息，特色内容在中间部分，细小分类则在页脚部分。
产生情感共鸣
不要错误地把你的网站仅仅当做一个呆板的工具。网站也能与用户建立情感上的联系，如果你不这样做，你的竞争可是会的。事实上，如果你做出一个有积极情感的网站，用户更容易原谅你界面上的缺陷。MailChimp就是一个完美的例子，它的界面使用起来令人心情愉悦，使用起来更是一种享受。
人的视觉具有倾向性
有时，似乎你的眼睛也有他们自己的思想。经过多年的进化，眼睛有了发现我们认为重要的对象和动作的能力，不管是某个人以性感的身姿穿过马路或是可爱的卡通熊的蜂蜜广告都能吸引我们的注意。当然在每个人心中所谓的“重要性”是不一样的，因人而异，唯一不变的是他们的行为倾向。通常在浏览一个网页时大部分人的行为倾向是一样的。
所谓“行为倾向”有两个，我们将详细讨论。99Designs作家Alex Bigman的文章《6 principles of visual hierarchy for designers》展示了那些有从左往右阅读习惯的用户群，当设计一个网站布局时有两个非常通用和有效的设计模式。
第一是F-模式，常用于文本（当然也可以用于其它用途）。第二是Z-模式，可用于任何视觉布局。我们将在下面分别解释他们各自的优点和缺点。
F-模式
F-模式的页面往往包含大量文本，比如博客、新闻资讯、文章等站点页面。
当面对成段的大量文字信息的时候，大多数读者会纵向地先浏览每段左边的文本，特别是在段落开始的几个句子中寻找关键词或者他们的兴趣点。最终读者找到他们喜欢的东西,再开始正常地横向阅读。最终的结果是看起来像字母F或E。
Nielson Norman团队中的Jakob Nielson发起了一个基于232人浏览成千上万个网站可读性研究。通过他的研究，他记录了他认为的“F-模式”的实际意义：
用户很少会认真地读文本的每一个字；
前两个段落是最重要的，它应该包含你的要点；
在段落的开始、副标题和关键位置中放入吸引人的关键词。
当然，左上角是最重要的，因为这是所有有从左往右阅读习惯的人群阅读开始的地方。用户通常会水平地通读头部，所以这是一个很好地放置导航条或（和）“用户行为号召”的地方。然后用户从左侧纵向浏览下来,直到遇到感兴趣的内容。最终，用户的目光结束在页面的右侧，这是一个放置“用户行为号召”或广告的地方。只是不要让侧边栏遮挡住内容。
但F型并不是一个定式——没有事实说明它是最好的，但更像是由大部分用户的行为习惯而总结出来的一些松散的规律。请牢记这一点，因为F-模式在开始几行后就失去了它的有效性。
Kickstarter使用一张卡片来展示特色项目，这使得用户不会在浏览完开始的500像素后就变得视觉疲劳。
另一方面，iZettle在主页上采用了一种更传统、遵循F-模式的方法。不管怎样，它通过在背景图片的上层叠加主文本（使用iZettle来增长您的业务）和“用户行为号召”来设法避免过于模板化的外观。我们认为这是适应这种阅读模式最基本简洁的方法。
Z-模式
此外，Z-模式是最简单、最通用的模式,普遍用于任何基于文本的网页。读者首先横向的浏览顶部，接着回到左边，然后再横向地浏览整个底部。
理解通用的Z-模式很重要，因为它解决了网站的核心需求：层次结构、品牌化和用户行为号召。它的美在于既简单又具有“用户号召”型网站的理想布局。当然，对于更复杂的或包含大量内容的网站，Z-模式可能过于简单。
考虑一下Z-模式是否适合你的网站？下面有一些最佳实践可以更好的优化该模式：
背景：保持背景在它应该处于的位置：隐蔽在内容之下。不让它分散读者的注意力。
要点1：作为第一个要点，将Logo放置在固定位置。
要点2：虽然主要的用户号召应该放在后面，这对二级用户号召来说是一个好位置，可强调或突出导航条（一个漂亮的图形或图像滑块将有助于分割页面的顶部和底部，鼓励读者按照Z模式所期待的方式来浏览）。
要点3：选取最佳位置来吸引读者对其它链接的注意，或者吸引读者的目光到网站的最终目标：要点4。
要点4——作为“终点”，这是一个完美的放置主要用户号召的地方。
首先你需要做的是把页面上的元素按照重要性进行排序。然后，从结果中挑选出适当的“热点”就会变得很简单。
此外，Z-模式可以重复和扩展到整个页面。我们来看看Evernote是如何按“之”字型向下放置他们的“用户号召”和卖点的。
DropBox没有使用任何背景图片，很简单地实现了这种“曲折”的模式。相反的，更多功能型的设计内置在了布局中，比如用户号召“浏览更多”，当用户浏览整个网页时，它帮助用户链接进入每一板块的细节部分。这也有助于通知读者点击到下一个相关页面，而不需要先去通读页面所有内容。
设计趋势预测
一个优秀的界面设计应该像一个无形的手在左右用户思考的速度。从F-模式和Z-模式设计趋势获得的最重要的一点就是：你应该将你认为最重要的内容很自然地展现给读者，而不是让他们感觉到在强迫他们看。
能敏锐地把握细节，对任何页面布局来说都是一个优势。这些模式可以让用户感觉是为他们提供一些相关建议，而不是强迫他们接受。（责编：陈秋歌）
原文链接：How Eye Scanning Impacts Visual Hierarchy In UX Design
上一篇： laravel5.8新特性
下一篇： ES6/ES7/ES8常用特性和新特性
推荐阅读