江苏龙网

  1. 首页 > 资讯 > 科技 > >

##掌握视觉层级原则，优化用户体验( 二 )


##掌握视觉层级原则，优化用户体验
文章图片

文章图片

在Apple的网站中 ， 页面顶部有多个Mac的选项 ， 所以我们首先会进行水平浏览 ， 然后沿对角线方向看到标语 ， 最后以目标产品的详细介绍作为结束 。所有信息的布局都非常清晰明了 ， 同时大多数人已经下意识地被这种浏览模式吸引了 。
F型视觉动线
F型视觉动线更多地使用在诸如文章和博客之类的文字比较密集的页面上 。
对于文章和资讯内容繁杂的网站 ， 简单的F型布局可以有效地帮助读者扫描图像和标题 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

以这种浏览模式进行设计布局时 ， 尽管读者可能会扫描前几行的信息 ， 但随着他们快速向下移动视线时 ， 他们通常只会浏览最吸引其注意力的地方 。
3. 布局规则
通过使用参考线和网格来布局设计 ， 可以使所有元素保持整洁和对齐 ， 从而不会破坏观者的浏览体验 。他们的注意力知道要跟踪的位置 ， 并且这些信息都是整齐的对齐和分组 ， 所以每组元素都可以紧密关联 。
诸如黄金分割率之类的公式试图做到这一点；但是可以将重要元素从这些既定规则中分离出来 ， 以增加其视觉层次 。这也可以帮让设计更具动感和乐趣 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

在这个的示例中 ， 网站为了保持整体界面的工整 ， 使用网格的方式来排布信息 ， 但是为了更加关注Mercedez的形象 ， 图片忽略了网格布局 ， 从而创建了一种弹出效果 。
4. 合理使用字体
正确的字体可以让网站拥有自己的个性 ， 并引起用户对某些领域的关注 。具有不同大小和粗细的字体也可以用于增加层级结构 ， 并使更重要的文本信息脱颖而出 。
大多数网站旨在利用不同大小的标题来强调与它们相关的内容 。优良作法是将主标题用作页面的最大和最重要的标题 ， 并使用副标题、小标题等来标注不太重要的内容 。这也有助于读者浏览文本页面 ， 以准确定位在他们感兴趣的区域 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

Slack的网站就是一个很好的例子 ， 该网站使用恰当的标题为内容赋予重要性 。在标题部分 ， 它们具有最大的主标题 ， 其中包含介绍信息和号召性用语 。横幅下方有许多带有较小标题的版块 ， 以介绍更多功能 。
5. 平衡与对称
在页面上对称出现的元素可以帮助平衡设计 ， 使信息保持简单 ， 有条理并且易于遵循 。
如下图所示 ， Avioc利用其主页上的对称性将重点放在其主要优势上 ， 同时在图像的两边提供更丰富的文字摘要 。焦点直接位于中心 ， 可以轻松浏览页面以查找更多信息 ， 而不会感到迷茫 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

【##掌握视觉层级原则，优化用户体验】有时候除了标准的平衡 ， 我们还可以在设计中打破乏平衡和对称性来传达某些信息的重要性 ， 让我们的设计布局显得更加流畅和活泼 。


推荐阅读


上一篇：：Redmi K30 5G版杀入2000元内，年轻人的第一款5G手机？

下一篇：「人工智能」2020年5G技术对数据中心有哪些影响？