网页设计视觉流程 第1篇
当我们应用F型浏览模型去思考用户行为方式的时候，可以将用户最感兴趣的内容沿着F型浏览模型去布局：
给予更重要的元素更强的视觉吸引度：使用排版和对比设计来突出文本关键字；
在左侧或右侧放置最重要的内容，因为这两个位置是用户横向视线扫描开始的起点和终点。这两处用户会做短暂停顿，所以能给予用户额外的时间来进行思考。
网页设计视觉流程 第2篇
我们都知道引导用户操作的页面中，一般页面按钮都在界面底部是因为离手近，方便操作，但不仅仅如此还因为浏览是用户的第一行为，他们的视线会根据页面元素进行移动，最终停留在底部结尾的地方。
根据古腾堡原则，将标题和内容放在顶部即第一视觉区，引导用户浏览所有内容后注意到底部的按钮作为终端休息区，这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。
网页设计视觉流程 第3篇
多个Z模型组合成右曲折模型，如果我们继续向图案中添加更多的锯齿和曲折，随着Z的对角线部分越来越浅，最终我们将产生一系列接近水平的左右移动。
锯齿型是Z型布局方式使用最多的，因为用户一般会继续向右移动，然后稍微向下然后向左移动，然后再次开始向右的另一次水平移动，这就形成我们自然阅读大块文本的方式。
上图右图通过引导用户通过几个关键产品功能，并用“了解功能”的入口完成重复的Z型布局的功能。在此布局中，“了解XX”按钮起辅助的作用，可帮助读者进入下一个相关页面，而无需阅读完整内容。
网页设计视觉流程 第4篇
结合古腾堡的视线强弱分析，我们可以得知左侧的首要视觉点一定是强视觉区，但是有时候简单的图片+文字的排列也会有很多设计思考。
比如：第一个图今日头条的布局，光看它的配图我们根本猜不出来整体条目所表达的内容，所以头条的图片元素传达信息的效率远不如文字，所以第一视觉区会留给文字信息；
而第二图中美团列表也图片所传达的信息效率更直观，会一眼告诉用户我这家是西餐还是中餐，是早点还是正餐，所以在美团的条目中图片会被放在第一视觉区。
这两种布局的目的都是让用户可以快速浏览，不让用户在接收信息时受阻造成体验打断。
此处还可以延伸一下，如上图第三个图，头条的视频条目也是先文字后视频，为什么呢？
按理说视频的传达信息效率要远大于配图，猜想一下，头条的设计是想将视频作为终端休息区进行视觉强化，第一，可以强化信息种类的分类让用户更好辨识，第二，让视频条目传达信息效率更快且满足整体使用APP时一致性的用户心智，让用户能快速上手并且顺畅体验浏览。
3. 古腾堡原则在按钮设计中的应用
我们还可以依据古腾堡原则来解读关于按钮位置背后所呈现的设计思路。
网页设计视觉流程 第5篇
同级信息流使用点线面中的“点”来做列表视觉锚点设计，比如使用符号、数字、icon等等来展示。
通过解决F型设计的弊端，可以发现很多理论本质上都是贯连的，如F型其解决方法就是尼尔森十大交互原则中“易取和简约原则”的具体延伸，其中也贯连着格式塔原则、对比原则等等。
最主要是看我们如何在实际工作中，了解清楚设计目标，灵活运用多种设计理论满足需求，学以致用，让我们的设计有理有据！
6. 总结
设计一个 F 型的网站布局，意味着顺应用户的自然视觉习惯。反之，如果重内容的网站忽视F型，则会强迫用户重新调整自己的自然视觉习惯，带来不必要的冲突。
但是，没必要完完全全严格遵守原则，它只是一个指导准则，而不是一个标准模板。如果要提高用户的视觉体验，就需要我们通过优化样式去突出重点，有效引导用户去浏览。
五、建立视觉动线的技巧 1. 使用可视信息设计对内容进行优先级排序
使用视觉信息结构设计方式在页面上排列和组织内容的方式，让用户了解每个信息模块的重要性以及优先级关系。
比如一篇文章，会先看标题，然后是副标题，最后才会看具体的内容信息。
用户可以扫描标题和副标题，来了解他们对这篇文章是否感兴趣。如果标题明确，副标题告知用户文章的结构和内容，这会吸引用户阅读具体的内容模块。但如果用户看到冗长的文本信息，他们会产生恐惧心理，不知道要花多长时间来阅读这些文字以及是否值得投入时间和精力。
构建视觉信息结构设计的方式：尺寸、颜色、对比、接近、负空间、重复等等
2. 将核心导航放在网站标题位置
不管用户遵循哪种视觉动线，都是从页面的顶部水平区域开始的。因此在页面的顶部常常会展示网站标题，导航信息和品牌信息。
我们需要了解目标用户，他们是如何与网站的业务目标相联系 – 哪些信息或导航应该作为最重要的展现元素。例如：电子商务网站，搜索功能应立即可见，并且通常是标题位置的常驻功能。而小型企业网站，就无需搜索功能，取而代之的重要元素是各种业务链接。
注意：标题区域不应承载过多信息，太多的信息只会使用户无法聚焦。
3. 保持负空间的平衡
负空间也称为是布局的留白，是页面或屏幕上所有对象的一种呼吸空间，它定义了元素的界限。
负空间不仅存在于元素周围，也存在于元素和元素之间。
根据格式塔原则在它们之间创造了必要的联系，并建立了有效的视觉表现。在网站和移动应用的UI设计中，负空间是导航可见的重要因素：没有足够的留白，就很难看到布局元素，用户会错过他们真正需要的东西。
4. 操作按钮位置明显
页面设计应该让用户在几秒钟内看到可操作按钮，使用户了解他们在这个页面可以进行什么操作。并且在黑白和模糊模式下检查页面，看能否看清操作按钮。如果在这两种情况下都可以快速识别操作按钮，那么这些操作按钮会帮你高效的完成它的使命。
比如下图的页面上，用户就可以快速找到立即购买的按钮。
5. 文字信息的易读性
易读性定义了人们阅读文字，短语和复制块的容易程度。尤其是对于填充了大量文本的界面，应着重考虑易读性，很多因素都会影响快速扫视文本的效率。
设计师应检查自己的页面是否遵循排版法则以及所选字体是否具备易读性。建议设计中进行可用性测试，测试用户是否能速轻松地感知文本信息。
6. 使用数字
这个技巧来源于尼尔森的另一项调查：眼动追踪研究表明，在扫描网页的过程中，数字通常会阻止用户的视线徘徊并吸引注视，即便这些数字是在大段文字之中，我们潜意识地将数字与事实，统计数据，大小和距离相关联。
因此，数字可以吸引用户的注意力，并且在页面排版方便数字比文本数字更紧凑简洁，阅读起来更快速。
7. 精简内容，避免大段文字
尽量不要使一段文本的容量太大，简短的段落看起来更容易消化，如果这段信息对读者没有价值，用户可以选择跳过。
8. 使用编号和项目符号
根据点线面“点的向心性“，使用带有数字或项目符号的列表，可以清晰地组织数据，聚焦引起用户的注意，突出你想要的信息，使得信息不会淹没在普通的文本信息中。
9. 突出文本中的关键信息
通过使用文本加粗，斜体和颜色变化等等设计技巧，将用户的注意力集中在段落中包含的重要部分，或者引用或其他类型的特定数据上。
网页设计视觉流程 第6篇
Z模型还会导致所谓的金三角形图案出现。如果先进行水平和对角线的第一次运动，然后关闭形状，则最终得到一个直角三角形，其直角为上/左角。
页面顶部的三角形区域将是最常看到的区域，该模型表明您需要在其中三个放置最重要的信息，形成封闭的三角形。
3. Z型视觉模型在设计中的应用
“Z”型模式的扫描发生在不以文本为中心的页面上（对于文本繁重的页面，如文章或搜索结果，最好使用“F”型模式（ F-Pattern））。
Z型布局的前提其实很简单：在页面上加上字母Z。理想情况下，你希望人们首先查看最重要的信息，再次查看第二个重要的信息。因此，重要的元素应该沿着扫描路径放置。
网页设计视觉流程 第7篇
用户对这块的注意程度最弱，因此也用来放置最弱的信息提示。
2. 古腾堡原则在设计中的应用
遵循古腾堡法则，界面中的左上和右下是用户视觉最为重点关注的位置，设计师应该把界面的关键元素放在主视区，最终视觉区可以放按钮，休息区可以用来放一些相对次要的内容，如辅助图形、文字信息。
比如我们常用的页面弹窗、各种文件和合同文件等等就是采用这种原则进行设计的。
网页设计视觉流程 第8篇
我们可以根据一般的用户视觉习惯，来放信息权重不同的内容。
第一视觉区是用户浏览网页的起始点，最终视觉区是结束离开网页的终点。整体是根据人们从上到下、从左至右有规律的阅读习惯设计的。
我们可以看到人人都是产品经理网站信息结构的布局
网页设计视觉流程 第9篇
根据古腾堡原则，右上角区域属于强休息区，用户对这块的注意程度最低。
而底部按钮的核心在于按钮本身，而不是内容。底部按钮更适合全局最终的确定，提交等操作按钮。
4. 应用古腾堡原则需要注意点
1）虽然古腾堡图所揭示的阅读规律是普遍适用的，但是只在信息均匀分布的页面证明古腾堡原则的阅读规律。
若是为了突破常规或达到一种强烈的冲击，古登堡图所揭示的视觉规律经常被设计师所颠覆。常用的颠覆方法为采用特别醒目的形象，或者大小颜色更为鲜明抢眼的元素置于闲置区，从而改变玩家的阅读顺序。
上图banner中，右侧的3D内容第一吸引用户眼球，而后才会看到左边的文字，视觉流程如红色箭头，这就是突破古腾堡常规设计原则的常见设计。
2）语言本身的阅读顺序可能也会产生一定的影响，例如阿拉伯语从右至左的文字顺序可能并不符合古腾堡原则的阅读规律。
3）用户已熟悉，并养成独特阅读习惯的页面也不一定遵循此规律，比如用户自动跳过轮播广告的【轮播图盲视区】现象。
5. 总结
古腾堡图贯穿于界面设计的每个角落，只要谨记阅读引力的顺序：从上到下，从左到右，综合阅读流来排布视觉层级，即能做出合理的设计。
但设计师也不能局限于古腾堡图的规律中，要善用规律并结合其他设计知识做出更加完美的设计。
聊完了古腾堡原则，接下来我们来聊一聊第二种视觉浏览模型。
三、Z型视觉模型 1. 什么是Z型视觉模型
“z”型视觉模式的布局遵循字母Z的形状，跟踪人眼扫描页面时的路线——从左到右，从上到下的规则。
当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形：
网页设计视觉流程 第10篇
web端“z”型模式很好地解决了以主要围绕一个或两个主要元素为中心的简单页面，或登录页面的设计视觉路径。
腾讯文档的登录页面是Z型布局的一个例子，这样的布局还有很多，有兴趣的小伙伴可以多找几个网页看看
4. 总结
你可以利用Z型模式将重要信息放在视线自然而然能看到的地方，以增加其视觉突出。
四、F型视觉模型 1. 什么是F型视觉模型
美国长期研究网站可用性的著名设计工程师尼尔森，于2006年4月发表了一项《眼睛轨迹的研究》的报告，他曾对200多名参与者进行了研究，结果显示用户的主要阅读行为在许多不同的网站和任务中相当一致。这个阅读模式看起来有点像字母F。
网页设计视觉流程 第11篇
水平摆放的按钮，最典型的就是电商类型的详情页，【加入购物车】和【立即购买】按钮。
结合古腾堡原则的视觉重点说明，右下角视为视觉终端区域，即视觉最终停留的位置，所以他们将与转化率相关的【立即购买】按钮放在了界面的右下角，让用户更容易关注到。
再比如：比较常见的「确认」和「取消」弹窗样式，通常是在需要让用户确认某种操作行为时出现，有可能是提交表单、确定信息、页面操作引导等等，目的是让用户最快地看到主要操作内容，为用户提高操作效率。
这些按钮的差异不仅仅是位置，还包含按钮的样式、颜色、尺寸等等维度都存在着明显差异。比如上图的，页面引导按钮，支付宝的转入转出按钮位置，都是一样的逻辑，也是我们在设计中的一些设计支持业务转化的一种方式。
网页设计视觉流程 第12篇
这一点与层状蛋糕(Kara Pernice提出)的观点一致，排列结构类似于榴莲千层蛋糕，一层二层三层… 据Kara Pernice研究表明，这种模式是目前扫描网页最有效的方式，用户更容易找到他们想要找的信息。
下图是夹层蛋糕模式下的眼动实验结果：
从上图分层蛋糕眼动图表明，小标题（和按钮）更能引起参与者的注意。
例如我们常见的列表页，其结构是标题+图片的瀑布流展示，主标题简要概括，字号加粗加大，用户通过扫描标题来发现感兴趣的内容，进而再去阅读相关详细正文。