欢迎来到 深圳市品速科技有限公司,我们是专业的, 主营产品或服务 是, 全自动视觉点胶机, 全自动灌胶机, 全自动点胶机, 全自动视觉点漆机, 锁螺丝机, 打标机, 全自动滴胶机, 打胶机, 桌面型点胶机, 视觉视觉上色机。 欢迎留言咨询。

视觉层级强力拆解

  • 更新日期 - 2019年10月11日 21:49

拆解分类

拆解1、视觉面积的影响

拆解2、明度对比的影响

拆解3、色彩的影响

拆解4、视觉位置的影响

拆解5、丰富层度的影响

拆解6、其他(浮层、常用点、角标、动效)

拆解1、视觉面积的影响

视觉面积越大层级越高,而且与比较层的面积倍数有关,参考层如果为1级,那比较层的等级是由和参考层的倍数有关,大一倍那就为2级,大两倍那就是3级,依次类推。这是美术基础中的近远的关系,越靠近的视觉点越大,越靠远的视觉点越远,这样也很容易知道,越近获得关注越高,越远越低。

视觉层级强力拆解

界面举例我们告一段落,这里再说一下比较常遇到的文字视觉面积,这块很容易被忽略,其实文字也是具有视觉面积的,而且有不同的视觉大小。接下来我会将所有可能性都拆解出来。

同字号大小,不同粗细层度的影响/文字的边宽形成的格式塔大小就是文字面积,但不一样的是,文字是线性结构,所以他不是实面,而是虚面,所以它相对于实面来说还是低一个等级,再说回到粗细的层级比较,越粗的文字他是越靠近实面的,所以这就能判断越粗的文字层级越高这个道理。

同粗细,同字号大小,一个是有文字底块,一个没有,这样有文字底块的视觉层级会比没有文字底块的视觉层级要高,因为有底块相当于为实面,这样就比没有文字底块的层级要高了

同粗细,不同字号大小,这个不难理解,这个不存在实面虚面的概念了,因为都是一样的粗细,但是这个格式塔大小不一样,也就是说,格式塔越大的层级越高,字号越大的层级越高。

视觉层级强力拆解

拆解2、明度对比的影响

明度对比越高的视觉点会比明度对比低的视觉点视觉层级要高,这里其实也是美术基础中的空间的视觉差,越远的物体越模糊(对比小),越近的物体越清晰(对比大)。所以对比大的层级会比对比小的层级会高。(这里插一句,色相也是有明度的,不同的色相也是有不同明度解析,这个可以运用到电商banner的配色上)

视觉层级强力拆解
视觉层级强力拆解

下面来看看文字和背景不同对比度对视觉层级的影响。我们将统一文字大小和粗细舍尖靠近胸前的蓓蕾,背景为白色。

视觉层级强力拆解

拆解3、色彩的影响

有色的视觉点总会比无色的视觉点更吸引人,因为色彩也是美术的一类,给没有色彩的视觉上色是提升视觉体验的一步。

视觉层级强力拆解
视觉层级强力拆解

文字为例:同等大小同等粗细同等明度的字,有颜色的字体会有更大的关注点。

视觉层级强力拆解

拆解4、视觉位置的影响

给界面一个横轴和纵轴,从横轴的左边到右边起视觉层级逐渐减弱,从纵轴的上到下边视觉层级逐渐减弱。这是因为用户阅读习惯的问题,人们习惯从左上方开始往右边阅读,然后慢慢的往下读取信息。

视觉层级强力拆解
视觉层级强力拆解
视觉层级强力拆解

拆解5、丰富层度的影响

丰富层度越高的视觉层级越高,丰富层度越高的点信息量越大,越需要花时间停留。

文字为例:设计过的字体丰富层度会比默认字体高,所以有些需要强调的标题或者banner上的字体都是有精心设计过,为了拉开于界面的层级。

界面为例:界面首页中的banner是丰富层度最高,其次是金刚区,再是标签栏。

视觉层级强力拆解
视觉层级强力拆解
视觉层级强力拆解

拆解6、其他

除了上诉的主要层级影响,还有其他一些特殊的影响,我这就说两三个子吧。一个呢是给模块直接加投影,硬生生的造成前后层级。还有角标的影响,在干净的页面中突然来个提示角标,例如微信有消息时的小角标。还一个就是用户常用关键点,那个视觉层级整个产品中的最高层级,这个需要打破所有规则,这个是由用户主动选择的视觉层级点,例如电商软件的搜索框,不管这个搜索框大小如何,层级怎么低都行,但对于用户进来,第一个渴望的点就是这里,最后是动效的影响,每个动效就是一个互动,动的东西永远比静止的东西有活力更加吸引人

视觉层级强力拆解
视觉层级强力拆解

图片来源UIGREAT的作者JGM

总结

视觉层级的梳理可以很大幅度的提升视觉规范和用户体验,通过视觉层级的分析,可以从不同方面去诠释复杂的页面,也可以更好的去处理文本关系。

更多相关 " 视觉层级强力拆解 "