基础科学！讨论两种最常见的网页布局设计模式

编者注: 页面布局起什么作用？如何设计网页布局？今天@飞屋睿UIdesign向学生提供了该领域的科学知识，选择了出色的案例分析，总结了剪指甲的特点，易于理解，易学易用，并且不会感到延误> >>

@飞屋睿UIdesign: 从今天开始，我们还将讨论UI设计. 实际上，当我们谈论UI设计时，我的知识贡献只能在WEB端，当然，WEB端和软件端是相似的. 但是，无论是设计Web界面还是软件界面，作为设计师，您都不会否认: 在比例，颜色和大小等细微元素之间取得平衡并非易事.

来之不易的丹尼尔经验收藏和包装:

Web UI设计也是如此. 网站遵循与其他传统艺术创作相同的规则，并最终实现视觉艺术效果. 这是美学的范畴，它暗含着现代商业的规律. 好的网页设计必须简单易用且具有足够的吸引力.

视觉创意组合

让我们首先讨论网站界面的三个功能.

指导用户

网站对用户的指导就像在黑暗中看不见的手，它将引导用户通过单击操作按钮和其他信息来浏览网站，而不会给用户以压迫感. 例如，在Square网站上，当您继续下拉时，将显示相应的文本来提醒您下一步要继续.

正方形

呈现内容之间的关系

根据某种布局来显示网站的主要和次要内容优先级（例如abduzeedo），主要的推送内容位于顶部的三张卡片显示屏上，其他常见的内容则在Display下方列出，底部是链接到某些标签类别.

阿卜杜塞多

建立情感联系

人们去餐馆用餐，但他们不仅将餐馆视为解决胃口的好地方. 他们将注意餐厅的地点，氛围，菜肴，甚至某些特殊的氛围. 他们在这里聊天和交易. 出于同样的原因，由于与您的网站内容之间存在情感联系，用户会接受Web界面或交互中的小缺陷.

浏览模式: 人眼焦点预测

就像您的眼睛将更快地聚焦在快速移动的物体上一样，或者当您被大街上高冷漂亮的模型所吸引时. 当观察到这种行为时，人眼会自动激发对视线中出现的对象的特殊注意，在这里我们将其称为焦点. 页面上的焦点将吸引大多数人.

例如，文章的显示将遵循相同的浏览模式. 99Designs设计作者Alex提到了两种主要的浏览模式.

F模式

这主要出现在一些基于文本的网站上，例如博客. F模式表示用户通常垂直向下浏览左侧，首先在文章每个段落的开头找到兴趣点，然后，如果用户发现自己喜欢的内容，他将从水平方向从此处开始读. 最终结果是用户的视线是F或E.

尼尔森·诺曼（Nielsen Norman）组织观察了232个用户对数千个网站的浏览习惯，并总结了F模式的特征:

如您在下面的页面上看到的那样，重要内容清晰显示，用户不会花很多时间浏览，并且次要内容也可以快速查看. F模式对于带有嵌入式广告的网站也非常有用，即使有广告，也不会影响内容. 请记住，内容为王，导航使用户可以更深入地浏览.

在所有浏览模式下，F模式都是指南路线，而不仅仅是页面. 因为，除了顶部显示区域之外，F模式网站的内容也会显得平淡无奇. 如下图所示，该网站在顶部1000像素后，在水平方向上添加了一些类似于卡片的内容组件，以使页面的内容更加有趣.

Z模式

Z模式的浏览模式是网页内容主要不是文本. 无论是因为这里有一个菜单栏，还是仅仅是因为自上而下的从左到右的阅读习惯，用户首先要注意页面标题的水平内容. 当视线到达底部时，它遵循从左到右的习惯模式，然后反复水平扫描页脚的底部内容.

Z模式几乎可以应用于任何网页交互. Z模式的优点是简单. 如果您的网站内容很多且非常​​复杂，则使用此模式，效果会稍差. 当然，这些不是绝对的. 当Z模式简化布局时，可以提高转换率. 以下是可以简化的地方:

预测用户的视线将具有很大的优势. 在布置页面元素之前网络设计模式，您可以知道将它们放在何处. 一旦知道了您希望用户首先看到的内容，就可以通过视觉规则将关键内容放在用户的“热点”中.

您可以在整个页面上重复Z模式的模式. 如您在下图中所看到的，此页面开头有一个注册按钮. 通过在水平位置浏览，用户已经学会了此信息，产品的卖点将出现在下拉菜单中. 这些卖点的显示将遵循重复Z模式的最佳示例，直到底部的付款方式在Z模式的末尾到达水平线为止.

后记:

在设计中，我们总是比现在想的要多. 无论如何，这两种模式只是一个总结. 实际的创建过程充满了技巧. 绝不能轻易完成这两种模式. 但是，面对法律网络设计模式，易多山总是错的. 灵活运用法律是关键.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-280669-1.html