人人都是产品经理@掌握视觉层级原则，优化用户体验( 二 )
F型视觉动线
F型视觉动线更多地使用在诸如文章和博客之类的文字比较密集的页面上 。
对于文章和资讯内容繁杂的网站 ， 简单的F型布局可以有效地帮助读者扫描图像和标题 。
本文插图
以这种浏览模式进行设计布局时 ， 尽管读者可能会扫描前几行的信息 ， 但随着他们快速向下移动视线时 ， 他们通常只会浏览最吸引其注意力的地方 。
3. 布局规则
通过使用参考线和网格来布局设计 ， 可以使所有元素保持整洁和对齐 ， 从而不会破坏观者的浏览体验 。 他们的注意力知道要跟踪的位置 ， 并且这些信息都是整齐的对齐和分组 ， 所以每组元素都可以紧密关联 。
诸如黄金分割率之类的公式试图做到这一点；但是可以将重要元素从这些既定规则中分离出来 ， 以增加其视觉层次 。 这也可以帮让设计更具动感和乐趣 。
本文插图
在这个的示例中 ， 网站为了保持整体界面的工整 ， 使用网格的方式来排布信息 ， 但是为了更加关注Mercedez的形象 ， 图片忽略了网格布局 ， 从而创建了一种弹出效果 。
4. 合理使用字体
正确的字体可以让网站拥有自己的个性 ， 并引起用户对某些领域的关注 。 具有不同大小和粗细的字体也可以用于增加层级结构 ， 并使更重要的文本信息脱颖而出 。
大多数网站旨在利用不同大小的标题来强调与它们相关的内容 。 优良作法是将主标题用作页面的最大和最重要的标题 ， 并使用副标题、小标题等来标注不太重要的内容 。 这也有助于读者浏览文本页面 ， 以准确定位在他们感兴趣的区域 。
本文插图
Slack的网站就是一个很好的例子 ， 该网站使用恰当的标题为内容赋予重要性 。 在标题部分 ， 它们具有最大的主标题 ， 其中包含介绍信息和号召性用语 。 横幅下方有许多带有较小标题的版块 ， 以介绍更多功能 。
5. 平衡与对称
在页面上对称出现的元素可以帮助平衡设计 ， 使信息保持简单 ， 有条理并且易于遵循 。
如下图所示 ， Avioc利用其主页上的对称性将重点放在其主要优势上 ， 同时在图像的两边提供更丰富的文字摘要 。 焦点直接位于中心 ， 可以轻松浏览页面以查找更多信息 ， 而不会感到迷茫 。
本文插图
【人人都是产品经理@掌握视觉层级原则，优化用户体验】有时候除了标准的平衡 ， 我们还可以在设计中打破乏平衡和对称性来传达某些信息的重要性 ， 让我们的设计布局显得更加流畅和活泼 。
推荐阅读
- 【】沈义人也成小米用户，大家猜猜他用的是什么产品？
- 海报东营■利津农商银行召开2020年首次信贷产品发布会
- #玩车教授#你的车是否也有这些“智商税”产品？
- 『我的第一部5G手机』百度产品笔试题：5G时代会产生哪些应用生活场景？（上）
- 小度在线搞事情：帮别家回收旧产品还送小度智能屏！
- 博鳌一龄推出全新康养旅游产品 免费为海南援鄂医护人员提供服务
- 洛阳晚报■产品畅销海内外，研发智能充电桩
- 新科技无线外设，富德用心做产品
- 北京大学■荣耀产品经理韦骁龙帅气亮相：北大95后男神、理科状元
- 『汽车之家』也有可能是明锐事故，每个伤疤的背后不一定都是故事