视觉内容指导：您需要了解的内容
每个访问者都会在首页加载中“吸收”一个新站点，无论他们是否有意识地这样做。
内容的视觉方向尚未得到广泛讨论，但是高转换Web设计的关键方面。
这种感觉可能会受到空白， 版式 ，对称性的影响，但主要受页面元素之间的关系影响 。
美学确实起着作用，但更多的是关于设计的整体感觉 。
这意味着设计应该补充内容 ，而不是事后才推论。
设计原则应始终侧重于形式之前的功能 。
设计师希望访问者留在页面上，并通过吸引他们的注意力并使他们对该站点保持兴趣来保持滚动 。
在本文中，我想向您展示一些有关如何改善网站布局和视觉内容流的技巧。
专注于构图
这种总体布局遵循格式塔理论的规则构成，该规则指出整体总是大于各个部分的和 。
网站的每个部分都基于整体布局 。
页面上的所有内容自然应该引导访客进一步向下，直到他们到达页面底部 。
设计元素需要在内容上产生引力 。
页面的各个区域组合成一个整体 。
这就是为什么内容的不同部分（视觉，文本，按钮等）之间的关系对设计如此重要的原因。
说起来容易做起来难，但是通过学习真实的例子您可以学到很多东西。
您的目标应该是鼓励人们以自己的意愿浏览网站。
元素之间使用了足够的空间，版式补充了品牌矢量图。
Monkop的主页是一个很好的示例，显示了文本和视觉效果的视觉层次结构。
这些都是在考虑设计模式的基础上构建的，以提供整个页面的一致性 。
滚动时，您会注意到笔直的水平页面块除以颜色，边框和图形。
这引起了注意，并打破了典型页面的单调性 ，同时仍保持内容的自然流动 。
图像还以左右-左右-左右的模式交换边 。
在底部，您会发现一个两列的拆分 ，一侧为图像，另一侧为文本。
可以在Picjumbo的网站上找到类似的设计美学 ，该网站是Photoshop和Sketch用户的照片插件的登录页面。
这个动画确实引起了注意 ，并且使观看者有兴趣保持滚动 。
滚动时，您会注意到自定义动画在整个页面中移动。
主页将重点放在徽标和预览视频上。
内容分为带有清晰字体和简洁图标的水平块 。
总体而言，页面感觉很开放 ， 易于浏览 。
每个站点自然都会在内容上施加一定的分量。
所有这些都在整体构成中起着作用。
考虑不同页面元素平衡的方式，元素之间的间隔，颜色之间的对比度以及不同的形状。
当其他字母大写的字母较小时，其他字母更适合。
例如， 某些导航链接较大或过大时看起来会更好 。
没有绝对的答案，因为每个站点都不同。
甚至尝试重建布局以查看哪些元素最终使设计“融合在一起”。
真正分析它们如何组合在一起。
我建议您研究利基市场中的其他网站。
字体设计事项
这与类型层次结构以及不同页面元素（如段落，标题，项目符号列表，引号）和特殊布局元素（如列或表格）的设计风格有关 。
您设计字体的方式将影响网站的内容方向 。
以顺着页面向下流动的方式编写内容， 并使人们始终阅读每一段。
视觉效果也会影响布局，因此，以自然的方式设计内容是一个好主意。
在页面部分之间创建关系以区分内容区域。
学习认识印刷元素的差异，以及它们与其他页面元素的关系。
您拥有的最大工具就是您的设计眼光 。
您可能会考虑的一些事项：
- 字体大小
- 字体系列
- 色彩对比
- 页面部分的关系
- 行高和段落边距
- 字母间距和大写/小写
页面上的其他标题均采用相同的全大写设计 ，从而产生了统一感 。
顶部导航链接使用所有带有小写字母的大写字母。
例如，查看Campaign Monitor的主页。
仅通过查看典型的标头设计，就应该很容易分辨出标头及其配对正文之间的区别 。
该网站上其他较大的标题更为突出 ，它们确实跳出了页面。
需要练习才能达到这样的结果，但是尝试越多，它越容易。
Campaign Monitor上的印刷设计样式非常精美，并且自然地融入了布局中 。
要了解更多信息，我强烈建议您使用以下链接：
指导内容
例如， 登陆页面希望通过信息 ， 小图标 ， 屏幕截图和推荐等方式来引导访客。
了解不同类型的网站具有不同的方法来引导访问者访问网站。
这是高质量文案发挥作用的地方，因为您希望读者垂涎每个单词。
大多数人都位于文章页面上 ，因此博客文章的布局旨在突出标题 ，并将人们进一步吸引到内容中 。
其他网站（例如博客）通常不会立即将人们带入主页。
社交网络和Web应用程序需要高质量的用户体验 ，所以这是一个略有不同的主题，但是请考虑Facebook feed是如何设计的以鼓励滚动和用户交互 。
但总的来说，您的目标是引导访客看到视觉内容。
您用来使人们浏览该网站的设计方法将随着时间而改变 。
让我们看一下登录页面和博客设计以发现差异。
Cactus是OS X的静态站点生成器 。它们的主页紧密遵循Apple的设计风格 -大量的空格和细的sans-serif字体。
这些相同的审美观念在Apple产品中很常见 ，因此Mac用户将喜欢这种设计风格。
内容被组织成带有简单图形的列，块和文本块。
该页面本身鼓励滚动浏览唯一的内容，基本图标以及左/右内容块的交替列模式。
主页上列出了有关产品的信息，包括功能和设置。
这里的目标是向现有用户提供信息，并向新用户推销Cactus的想法。
博客首页上的内容比较零星 ，因为帖子主题很多 。
现在，将该设计与The Next Web的主页进行比较。
访客是否下载任何内容都无关紧要，但是如果他们坚持不停地阅读某些内容，则无关紧要。
目的是让用户阅读网站上的内容 。
矩形创建一个网格系统，将多个帖子封装到一个布局中 。
TNW在这方面做得很好，其布局可让人们在侧边栏和内容后区域中使用相关的帖子缩略图浏览 。
吸引人们阅读的方法是拥有精美的照片和醒目的标题 。
但是，您可以通过研究其他成功站点的工作并学习如何复制来学到很多东西。
在每个站点上，引导访问者执行特定操作的方式都不同。
相信你的眼睛
带有“进一步滚动”链接的英雄图片在所有网站上的效果都不相同 。
可以分析性地解释各个设计属性，但是每个站点的实现都会有所不同。
如果您可以在其他网站上看到它，则可以在自己的网站上复制它。
您需要正确查看内容才能识别此可视层次结构 。
您对设计的关注是最重要的方面。
学习设计在很大程度上是一个视觉过程 。
这将帮助您从UI / UX角度 （而不是用户角度） 内化这些概念 。
在页面上写下您喜欢的元素，以及它们如何影响设计。
创建您喜欢的网站的列表，并花5分钟浏览每个网站。
我有最好的建议就是只相信你的眼睛 。
但是，您需要 从头开始创建东西，以了解哪些有效 ，哪些无效 。
是的，他们可以提供帮助-他们实际上可以提供很多帮助。
没有人会仅仅阅读有关设计的文章而擅长设计。
也不要害怕尝试！
随着时间的流逝，您将在脑海中建立一个模式库，这将使设计新站点变得更加容易。
通过研究喜欢的网站布局并重新创建它们，可以训练您的眼睛。
包起来
成为一名Web设计师并不容易，但是这个世界确实需要人才 ，而且自学这些基本概念从未如此简单。
希望这些技巧可以帮助您入门，并为您提供基本的路线图。
训练您的眼睛以识别关系，您将快速发展在自己的工作中复制这些关系所必需的技能。
研究带有您喜欢的页面元素的网站的最佳示例。
翻译自: https://www.hongkiat.com/blog/visual-content-direction/