现在视觉层次对于用户体验的影响很大,信息的组织架构是否清晰直观,将直接影响到整体的导航和浏览交互。
虽然大家对于视觉层次都有基本的认知,但是在整个设计的过程中,怎么样做才能确保构建出合理的视觉层次呢?
一.基于你的业务目标来建构
图片是最重要的视觉元素之一,它是用来吸引用户的注意力,从视觉上鼓励用户考虑它。
二.结合用户浏览模式
最常见的两种浏览模式,Z型和F型。
F型用户会选择自己喜欢的内容横着浏览,然后向下浏览,再横浏览。而且用户会在扫视的过程中,会不断的扫视自己感兴趣的内容和关键词。整个视觉轨迹类似字母F。
Z型浏览模式则主要发生在不那么复杂的页面当中,甚至于其中都不会包含太多的文本内容,用户会快速地从左到右从上到下浏览,整个视觉轨迹类似字母Z。
三.功能优先
层次感这种东西感觉很偏向与美学有关的东西,但其实功能性更强一些。必须保证导航可以清楚的指引用户,功能性的层次要高于视觉层次,这样产品体验更高。
界面一定要结构化,可以增加用户体验。
所以,视觉层次的构建应该依托于功能,比如导航的可用性,视觉层次才会发挥它的作用。
四.留白也很重要
留白的重要性在于,它可以使得被留白包围的元素被用户注意到,尤其是关键性的交互控件。让不同的元素之间的亲疏关系体现出来,而大量的留白还能让关键性的、需要强调的特定元素,醒目地呈现在用户面前
五.使用栅格
栅格有助于将不同的元素控制在不同的比例大小之下,保持合理的距离,控制留白。
六.增加色彩
色彩搭配可以帮助明白哪些主要的,形成主次之分,哪些是核心。设计师常常使用醒目的颜色来高亮显示关键性的内容。
七.注意字体使用
字体和排版,直接影响视觉层次的建构。标题和展示型文本使用的字体和正文部分字体应该形成明显的对比。重要性不同,功能不同,自然就是不同的层次。
八.桌面端3层,移动端2层
桌面端和移动端有着不同的要求。
3个层级的信息能够让页面看起来丰富,但是信息的呈现又足够清晰有条理,主要和核心的信息最容易吸引用户的注意力,这是第一个层级;
易于扫视的文本内容以标题和副标题的形式呈现,帮助用户对于内容有基本的了解,而正文和说明则将内容更为具体地展现出来,供用户仔细阅读。
但是移动端的情况则截然不同,小屏幕上并不足以承载3个层级的信息展现,通常设计师会将内容划分为两个层级,这样用户便于吸收,UI看起来足够清爽直观,用户也不会因为层级过多而感到混乱。