润雪观点

将想法与焦点,与您一起共享

润雪观点

运用视觉表现建立网页的信息层级(三)

2018-11-12 润雪科技:重庆网站建设公司 浏览器:1931

三、审视页面视觉流

运用视觉表现手法建立信息层级后,需要设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…,包括页面大模块和模块内的浏览,这些浏览顺序会在页面上形成视觉流;

审视页面视觉流能帮助我们判断用户浏览页面是否顺畅,浏览的顺序是否有规律可循;如果我们的设计不能有效引导用户的视线,用户的浏览更趋向于随机性,就难以将希望表达的信息快速传到到位。

下面的内容主要是介绍比较典型的视觉流及每种类型的特征,包括:

线性视觉流

导向性视觉流

跳动性视觉流

放射性视觉流

1)线性视觉流

横向视觉流引导用户视线从左到右或从右到左视觉流动,是最符合用户视觉习惯的浏览方式,给人稳定可信之感。——重庆网站设计


image.png


digg.com首页,整体页面和单个模块都是典型的横向视觉流,用户从左到右浏览到边界后,视线回扫到下一行继续从左到右阅读;这里会有一个横向浏览最佳区域的数值,如digg选用的页面宽度为1000px左右,每行展示3个item,用户屏幕的分辨率变大后,这两个数值是否应该继续增加,增加到什么程度,是人眼获取信息效率最高的?这个疑问我还没有找到相应的理论或实验支撑,后续再查找资料。——重庆网页设计


image.png


纵向视觉流引导用户视线从上到下浏览,由于眼睛纵向的运动方式需要瞳孔不断对焦,当纵向扫视页面模块时效率和横向浏览相差不大,但阅读细节时效率会变低,如纵向排列的文字,更适用于需要逐字阅读的古诗古文;


image.png


下图是将原来横向视觉流的digg首页的排版调整后,变成了纵向视觉流,除了大图,用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后,横向浏览细节。——重庆小程序


image.png


网页界面的纵向高度限制比横向小,因为用户习惯上下滚动来浏览更多信息,当用户还处于确定目标信息时,纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息;如下图facebook日历界面,时间轴横向排列时,由于宽度受限,需要横向切换或滚动条来查看更多日期:


image.png


将时间轴方向调整为纵向,使得用户能通过上下滚动更高效查看当月所有日期。——重庆定制网站


image.png


斜线视觉流能营造运动感和速度感,但由于角度倾斜使文字认知上会有一定困难,大量文字信息排列不适合这种视觉流,常用于设计中的点缀或本身信息量比较少的界面,如下图的健身俱乐部海报;


image.png


还有网页界面上小范围的斜线视觉流,来体现运动感。——定制网站


image.png


曲线视觉流,用户视线会形成个性化的曲线,具有律动和活泼感,这种类型由于眼动幅度较大,长时间大量的运用会产生视觉疲劳,所以不适合大段文字使用,一般会结合图形做曲线视觉流,让用户的视线在图像区域稍作停留;


image.png


如下图在曲线视觉流中配上图片,让视线在图片这个节点上稍作停留并浏览这个节点的内容,然后继续延曲线浏览。——网站设计


image.png


2)导向性视觉流

如下图所示,导向性视觉流会设计一个诱导元素吸引用户注意,再通过诱导元素注意到目标信息;常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系,纯诱导元素不宜太强,否则会削弱目标信息的传播力度;如果能在诱导元素中包含部分目标信息,可以增加信息传达的有效性。


image.png


如下图管子里的红色液体是运动的,吸引用户沿着它运动的方向到达目标消息——网页设计


image.png


前面讲到的内容形式,从图片或符号引导到下一个视觉焦点,从视觉流角度也是导向性类型,下面这两个例子就是在页面局部使用了导向性视觉流


image.png


image.png


3)跳动性视觉流

在性质相同或相似的信息中,选择突出或感兴趣的信息之间跳动浏览, 给人一种自主选择的权利,但设计上也可以通过调整元素的强弱,不露痕迹的传递主次。——小程序


image.png


如前面提过的模特公司网站界面,模特的照片都是同等性质的信息,用户浏览具有一定的随机性,但通过放大和缩小人像同样也传递了主次。


image.png


4)放射性视觉流

视线开端在页面中部,使中间的元素冲击感最强,信息传达最明确,再形成由中部发散出去的视觉运动。——重庆网站设计


image.png


比如很多汽车网站,中间的主图最能体现信息的核心,通过主图再发散到上方的导航或下方的其他服务入口。


image.png


以上介绍的四种视觉流类型是比较典型的,但不代表全部,我们也可以设计出更富创意的视觉流,无论是那种路径,用户浏览是否顺畅,信息是否按照主次传递到位,是我们要一直坚守的目标。

1.项目前期我们需要了解页面营造的氛围,内容定位;和交互一起分析信息的优先级,用户的核心行为;前期的准备能帮助视觉设计过程不偏离方向

2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级

3. 设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。

我们有意识的分析用户关注的信息优先级,并通过视觉表现出来,是视觉设计师这个岗位很重要的职责,希望梳理的这些方法能帮助我们将这份职责做的更好,我也乐在其中,与大家共勉!——重庆网页设计

 


本文由重庆网站建设公司润雪科技原创,文章地址:/news/id/1601.html