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