江苏龙网

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

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

在本文中 ， 我们将全面解析UX中视觉层级的关键原则 ， 探讨如何使用视觉层级来改进产品并优化用户体验 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

自设计之初 ， 我们已经使用它来传达重要的信息 。设计中的每个元素都应有助于改善用户体验 ， 并更清楚地传达该信息 。
01 视觉层级的重要性
视觉层级也是传达信息 。如何组织、排序内容 ， 让接受者能够尽可能轻易地理解信息 。设计师可以利用视觉元素去区别信息的重要性 ， 引导观看者阅读的顺序或焦点 。
视觉层级结构用于按设计者希望用户查看它们的顺序对设计元素进行排序 。通过使用对比 ， 比例 ， 平衡等原则 ， 帮助在正确的位置排布每个设计元素 ， 并让最重要的元素脱颖而出 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

为什么视觉层级结构在UX设计中如此重要？
视觉层级结构可以在信息架构中发挥关键作用 ， 可以帮助用户更轻松地浏览产品 ， 大大减少与产品互动所需的时间和精力 。UX设计的目的是消除使用时的摩擦并提高产品的易用性 ， 而关注视觉层级结构是实现这一目标的关键方法 。
让我们来分析其中的一些原则 ， 看看它们如何影响内容的排布 。
02 视觉层级的类别1. 透视原则
大多数界面（例如网站和应用程序）的设计都是二维平面的 。通过运用透视 ， 我们可以在元素中产生距离和分隔的错觉 ， 以帮助将焦点集中到设计中重要的区域 。
可以通过几种方法增加透视的错觉 ， 即增加与周围物体有关的元素的大小 。这会使这些元素看起来更接近用户 。向元素添加视差运动效果 ， 使其移动速度比周围的元素慢或快 ， 添加阴影或在背景或前景层上添加模糊效果也可以产生戏剧性的效果 。
可以通过几种方法让用户产生透视的错觉 ， 首先可以增加元素相对于周围元素的大小；这将使这些元素看起来更接近用户 。将视差运动效果添加到元素中使它比周围元素移动得快或慢 ， 或在背景层或前景层上添加模糊也可以产生显著的效果 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

从上面左侧的图中 ， 能看出来所有元素看起来都是平坦的 ， 没有深度 。由于文字和背景粘连在一起 ， 造成文字的可读性变差 。
而在右面的图中 ， 将模糊添加到背景图像中 ， 并为文字添加适当的阴影 。这有助于为设计元素间增加一些距离 ， 使信息更容易可视可读 。
##掌握视觉层级原则，优化用户体验
文章图片

文章图片

在看火人的游戏首页中 ， 多个图像层被设置成以不同的速度滚动 ， 来提供视差效果 ， 从而使观看者更好地理解游戏的深度内容 。
2. 恰当的浏览模式
其实每个人在观看内容的时候 ， 都会有一个潜意识的观看模式 。这种模式可能会因为用户正在查看的内容类型的不同而有所差异 ， 但是可以说最受用户欢迎的两种浏览模式是Z型模式和F型模式 。
两种浏览模式都可以根据要设计的内容类型来达到独特的目的 。这些浏览模式将页面的信息流动起来 ， 帮助观者获得更好的体验 。让我们更详细地看一下这两种模式 。
Z型视觉动线
Z型视觉动线的设计最适合于文字信息不繁重的页面中 。将内容设计成以这种模式的排布将帮助读者快速浏览每个元素 ， 并清晰地知道每个元素的重要性 。


推荐阅读


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

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