欢迎来到ag视讯-ag视讯官网

新闻中心

当前位置:首页 > 新闻中心

ag视讯|如何优化界面视觉信息层级

2021/02/24 04:13:32  浏览: 176次 来源:网络整理 作者:佚名

一、重要性

说到视觉信息层级的重要性,就不得不说结合我们的工作重要性来说。

我们的工作兼任整个产品构成到上线(由具象概念到具体界面)的“表现层”。肩负着与顾客接触的最后一道工序,我们的主要任务就是把交互设计师提供的交互原型线框图设计成大众接受的美观界面,以保证用户在使用产品时有非常好的初始印象同时留下强烈的品牌记忆。

ps:核心目的——商业价值的最大化

设计应该符合设计目的,不应只追求艺术疗效

这就须要我们须要完善正确的价值观,不要由于设计而设计,要知道为何如此做,对商业的价值是哪些。

说白了我们在做任何设计的时侯,需要考虑的是:

用户想见到哪些(初步行为),以及我们想使用户见到哪些(诱导)

广告信息视觉层级梳理

结合我们的工作职能总结为:

视觉界面设计关注的是怎样处理和安排可视元素,传达行为和信息。

视觉设计者做的是设计的组织、视觉暗示、启示用户行为的交流模式。

合理组织、处理、安排界面元素,便是我们明天提及的:建立界面视觉信息层级

广告信息视觉层级梳理_文字设计在平面广告中的视觉表现_可口可乐广告视觉流程设计中注意的原则

二、信息梳理

①亲密性原则

为了更好的界定界面的信息层级,我第一步要做就是信息组织贵啦。

这里我们借鉴(写给你们的设计书)种亲密性原则:彼此相关的元素应该紧靠,组织在一起。如果多个元素之间存在太逾的亲密性,他们就应成为一个视觉单位,而不是多个孤立的元素。这又助与组织信息,减少混乱,位读者提供清晰视觉信息结构,如下图:

广告信息视觉层级梳理

亲密性的根本目的在于组织性。我们须要将相同组织的信息组织在一起,为页面的内部构建起一个良好的信息浏览次序,符合用户的阅读习惯,避免用户在浏览信息的时侯花费过多的精力甚至引起用户看不懂的情况出现。这里我们以淘淘票为案例:

广告信息视觉层级梳理

通过上图我们能看出在淘淘票种将同种属性的信息进行了有序的组织,使得界面看起来整齐有序,并符合用户的自上而下、从左到右的阅读习惯。

②什么是有效的视觉层级

广告信息视觉层级梳理

左图为手机拍摄相片,右图为经过我处理过的模拟双眼焦点阅读的相片

我们可以看出,利用设备拍摄时,我们采集信息的模式是一次性完成的。拍摄时总揽界面中的所有信息。但是当人对信息的采集模式时,是依据眼珠的联通,按照一定次序获取信息。不能总揽页面所有信息,当嘴巴焦点在那里的时侯,才可看见那里的信息。

设计师须要考虑的就是使用户通过眼珠联通,按照一定的次序获取信息,帮助用户高效自然获取和理解信息。

广告信息视觉层级梳理_可口可乐广告视觉流程设计中注意的原则_文字设计在平面广告中的视觉表现

强烈的视觉层次感是通过界面上视觉元素提供清晰的浏览次序来实现的,也就是说,用户每次都能根据同一个次序浏览同一些元素。

对比原则

为了才能更好的分辨信息层层级,我们第二件要做的事情就是“对比”,我们通过加大一些元素的对比来分辨信息的重要程度。

我们这儿在借鉴(写给你们的设计书)种的对比原则:对比的核心思想是防止防止页面上的元素过分相像,我们须要通过对比使页面上重要的元素能首先导致的注意,而不是整体都非常的乏味,让用户觉得无从下手。

一般情况下我们可以通过字体、粗细、大小、色彩、的对比来突出页面的重要信息,以降低页面的节奏感。

广告信息视觉层级梳理

1大小对比

很好理解,通过视觉元素体量上的对比进行层级的界定,体量越大则层级越高,也就越突出。Appstore的页面中,利用字号大小和图片大小来分辨信息层级,一目了然。iOS11中去掉了往年的背景和装潢元素,很多页面均借助文字大小来分辨层级,使整体页面看上去层级愈发清晰易懂。

广告信息视觉层级梳理

△ AppStore中的大小对比

2疏密对比

明暗对比即通过颜色的色阶来进行对比。一般在处理文字信息层级时较为常用,通过使用不同色阶或灰度的文字来界定层级。知乎的信息流中,标题用较深的颜色作为第一层级,用于使用户快速判定核心信息,简介用略浅的颜色可以使用户清晰阅读广告信息视觉层级梳理,其余文字信息则作为辅助信息置灰处理为第三层级。

广告信息视觉层级梳理

广告信息视觉层级梳理_可口可乐广告视觉流程设计中注意的原则_文字设计在平面广告中的视觉表现

△ 知乎APP中的文字的疏密对比

3色调对比

重点信息不仅可以用较大体量的元素和疏密对比抒发外,往往受限于页面规格,则可以考虑使用添加背景底色来进行突出。代表性的是支付宝腹部的白色,不仅指出了“扫一扫”等主要功能,而且大面积使用品牌色更能向用户有效传达了品牌信息。天猫APP首页为了突出限时疯抢的模块,也使用了特别亮的白色来吸引眼珠广告信息视觉层级梳理,与白色文字产生强烈反差,进而突出了有效信息。

广告信息视觉层级梳理

△ 支付宝中的色调对比

广告信息视觉层级梳理

△ 天猫APP中的色调对比

4虚实对比

虚实对比在背景信息中较为常用,使用散景的背景来突出前景,借鉴于摄影中的散景疗效。书旗小说详情页背部的背景处理,不仅能突出重点信息,而且还能较好营造气氛感、场景感和立体感。

广告信息视觉层级梳理

△ 书旗小说APP中的虚实对比

5前后对比

前后对比类似于虚实对比,但层级界定愈发显著,往往应用于两类完全不同的信息之间,一般情况下,弹窗、浮层等均属于这一对比范围。ofo、各类地图产品等为了以更大区域展示背景中的地图信息,往往会采用这一方式。在信息量巨大的地图上借助浮层方式进行前后对比,进而突出操作信息。

可口可乐广告视觉流程设计中注意的原则_文字设计在平面广告中的视觉表现_广告信息视觉层级梳理

广告信息视觉层级梳理

△ ofo中的前后对比

6动静对比

在信息较多,色彩较丰富的页面中,大小与色调对比常常就不能派上用场了。此时若果向再突出某个元素,则可以考虑使用动态图形。如抖音的菜鸟引导、咸鱼的二级入口icon。不过使用动态元素须要节制,不仅在数目上要严格控制,在动漫频度上也须要慎重。过多或过快的动态元素除了起不到突出信息的作用,反而容易令页面丧失焦点,激发用户狂躁和烦躁的情绪。

广告信息视觉层级梳理

△ 抖音的动态菜鸟引导

广告信息视觉层级梳理

△ 咸鱼APP中的动态二级icon

粗细对比

广告信息视觉层级梳理

三、建立有效的视觉层级的前期剖析

UI设计是科学与艺术结合的综合技能。在考虑怎样构建信息层级前,我们必须晓得哪些是重要的,以及背后的逻辑是哪些。

比如一个音乐播放页面,在看似简单的上一首,暂停,下一首的按键设计中,按钮的大小,彼此的宽度都关系到用户的点击效率和操作难度。

广告信息视觉层级梳理_文字设计在平面广告中的视觉表现_可口可乐广告视觉流程设计中注意的原则

我们应当牢记,设计应该符合设计目的,不应只追求艺术疗效。好的设计师做下来的界面,一定是在产品逻辑合理下安排的信息层级合理的界面。

建立有效的视觉层级前,进行如下几步的剖析:

1、页面定位(帮助剖析)

用户是谁

用户来自那里,即从哪些渠道来到该页面

页面内容定位,提供哪些、不提供哪些

页面作用

2、信息优先级

一级信息吸引用户

二级信息帮助理解

三级信息详尽理解

3、用户核心行为

行为最终导向

了解,有意愿(导向)

老王