小程序页面的版面率
版面率是小程序页面中文字、图形、图像、动画、视频等的占有率,它影响着页面信息传递的效率,也决定了整个页面的视觉传达效果。一般情况下,版面率与视觉传达效果、页面创意空间成反比。版面率低,单个页面所容纳信息量较少,其视觉表现相对比较集中,因此视觉冲击力较强,同时留给设计师的创意空间自由度相对来说比较大。
在小程序设计中,流行“少即是多”。由于人们比较容易记住可以人机交流的内容,因此,在小程序设计中,采用多层链接的递进方式,如同写作中的插叙手法。一方面,它满足了受众的好奇、探求的欲望,为小程序的个性化风格营造了氛围;另一方面,通过人机对话,诱发了受众的活力与兴趣,使得网络自然而然成为营销手段的延伸。如个人小程序、设计师以及设计机构自己的小程序等,其商业气息相对淡泊,大都考虑使用版面率较低的设计。
版面率高,所传达的信息量大,而其视觉冲击力相对较弱,留给设计师的创意空间自由度也相对较少。小程序页面设计不仅仅是一个视觉问题,它必须能够从动能和目标角度来考虑版面的大小和版式。选择版面率比较高的设计时,讲究空间的有效利用与秩序的合理划分,而且每一版面的大小和位置关系要和谐。否则要么排版呆板,要么秩序混乱。
小程序页面的知觉中心与视觉律动引导
小程序页面的知觉中心,是页面中三度幻觉动态空间的中心点,所谓幻觉动态空间是指小程序页面随时的互动变化、视觉上的瞬间动态变化,其变化是与显示器的屏幕分辨率紧密结合的,针对不同的屏幕分辨率,其知觉中心也不同。一般情况下,知觉中心位于屏幕中央偏上的部位。对页面知觉中心的把握就是合理地捕获受众的视线,把重要的元素安排在页面的知觉中心,以赢得受众的视觉力场,便于突出重点。
1.创建统一的、律动的、交互式的视觉引导
无论页面的信息多么庞杂,无论采用何种视觉引导方式,都应符合基本的视觉规律。在合乎视觉规律的前提下,进行有秩序的动态阅读设计,是突出重点、吸引注意力的主要方法。如果违背视觉规律,往往会事倍功半。比如,人们的阅读顺序通常是从左上角向右下角扫视,如果采用从右下到左上的视觉引导,就会降低信息的识别度。视线的流动应依据一定的韵律,在页面空间中延伸,造成视觉美感。
2.加强对比,创造页面知觉中心
页面的编排设计总是按照设计师的想法、意图等进行组织,以突出主要传达的信息为目标,组织页面的设计元素,合理引导视觉。对比的手法可以突出重点,比如动静的对比,色彩的对比,排列位置的对比,信息内容的对比等,都可以创造小程序页面知觉中心。在设计中,充分利用动态媒体特性,把主要的内容做成动画并设置音乐,或者拉大图底对比、适当保留空白、留出视觉缓冲等,都是吸引注意力的有效措施。
3.变换表现手法,追求视觉变化的韵律感
一般情况下,“变化”最容易吸引眼球,因此,交互的关键往往设置于动态的、变化的元素之上。此外,通过排列的变换、位置的对比,同样可以使所要强调的内容成为首要的视觉中心。
视觉引导的方式比较多,可以使注意视觉元素偏离视觉中心,引起视线的流动,但绝对不是游离于小程序页面之外;也可以利用图形、符号、文字、文字序号等易识别元素吸引受众视线。
小程序的视觉流程类型
小程序设计中的视觉流程主要包括以下几种类型:线型视觉流程、曲线视觉流程、焦点视觉流程、反复视觉流程、导向视觉流程、散点视觉流程等。
线型视觉流程
线型视觉流程,分为直线视觉流程和曲线视觉流程两类。
1.直线视觉流程
使页面的流动线更为简明,直接地诉求主题内容,有简洁而强烈的视觉效果。直线视觉流程表现为三种形式—竖向、横向、斜向视觉流程。
其中,竖向视觉流程传达出坚定、直观的视觉感受。
横向视觉流程传达出稳定、恬静之感。
斜向视觉流程以不稳定的动势引起浏览者的注意。
2.曲线视觉流程
曲线视觉流程,是由视觉要素随弧线或回旋线运动而形成的。它不如直线视觉流程直接简明,但更具有流畅的美感。曲线视觉流程的形式微妙而复杂,可概括为两种形式:弧线形视觉流程有扩张感和方向感,回旋形视觉流程能够在画面中增加深度和动感。
焦点视觉流程
每个小程序页面中独有一个视觉焦点,是需要重点处理的对象。视觉焦点是否突出,和页面版式编排、图文的位置、色彩的运用有关。在视觉心理作用下,焦点视觉流程的运用可以使主题更为鲜明、强烈。
在具体的设计处理上,一般沿着视觉焦点的倾向与力度,来发展视线的进程。通常以鲜明的形象或文字占据页面某个位置,或完全充斥整版,集合浏览者的视线,完成视觉心理上的焦点建造。另外,向心、离心的视觉运动,也是焦点视觉流程的运用形式。
1.按照主从关系的顺序,使放大的主题形象成为视觉焦点,以此来表达主题思想。
2.将小程序中的文案作整体编排,突出主题形象。
3.在主题形象四周增加空白量,使之成为视觉焦点。
反复视觉流程
反复视觉流程是指小程序中相同或相似的视觉要素,作规律、秩序、节奏的逐次运动。其产生的视觉效果更富于韵律美和秩序美。
导向视觉流程
导向视觉流程,是通过诱导性视觉元素,主动引导读者视线向一定方向作顺序运动,按照由主及次的顺序,把页面各构成要素依次串联起来,形成一个有机整体。导向视觉流程的应用可以使小程序重点突出、条理清晰,发挥最大的信息传达功能。
1.文字导向视觉流程
“请按这里”、“点击进入”等文字,是通过语义的表达产生理念上的导向作用。另外,也可以对文字进行图形化处理,对浏览者产生自觉的视觉导向作用。
2.手势导向视觉流程
手势导向比文字更容易理解,且具有一种亲和力。
3.形象导向视觉流程
形象导向与手势导向相同,比较容易理解。
视线导向视觉流程
一组形象面向同一方向,回因共同的视线而一致起来。不同的物品方向一致,也可以产生统一感。如果将页面中人物的视线对着物品,就会引导浏览者的视线集中到物品上。充分利用视线导向,可以使视觉元素之间的联系加强,结构更加紧凑。
散点视觉流程
散点视觉流程,是指在分散处理视觉元素的编排方式。它强调感性、自由性、随机性、偶然性。其视觉流程为:视线随各视觉元素或上或下、或左或右的自由移动。这种视觉流程不如其他视觉流程严谨、快捷、明朗,但生动有趣,给人一种轻松随意和慢节奏的感受。
掌握合理的视觉流程,与适合的版式设计结合,就能够设计出具有强烈的视觉冲击力的小程序版式。