购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

04 网店装修三大视觉要素

前面提到过,相对于实体店来说,网店最大的局限是只能让买家通过视频、图片和文字了解所售商品,所以,网店装修最重要的就是视觉效果。视觉效果代表着网店的门面,其中颜色、文字和版式是网店装修的三大视觉要素,只有合理地规划这三大要素,才能获得理想的网店装修效果。

1.颜色

在浏览网店页面时,我们首先会被页面中的颜色所吸引,再根据颜色的走向,对网店中的商品进行更深层次的了解。因此,配色是树立网店形象的关键。页面的配色处理得当,能给人和谐、愉快的视觉感受,可以进一步提高商品的转化率。网店装修中使用的颜色可分为主色、辅助色和强调色三类,下面分别讲解它们的概念和作用。

主色是指展示网店形象和延伸其内涵的色调。主色主要用于网店标志、标题和主菜单等,给人以整体统一的感觉。主色好比一部电影的主角,串联起整部电影的主线,应该比其他搭配颜色更明显、清楚、强烈,以给人留下深刻的印象。但要注意的是,在一个网店的装修中使用的主色不宜超过3种,否则极易让人眼花缭乱。如下左图所示的网店页面以红色作为主色,通过调整红色的透明度和饱和度,营造出热烈、喜庆的氛围;如下右图所示的网店页面则选择了象征智慧、科技的蓝色作为主色,给人以稳重、冷静、严谨的感受。

辅助色是页面中仅次于主色的颜色,它的主要作用是烘托主色,支持和融合主色。辅助色与主色一样,也可以有一个或多个颜色,要根据网店装修风格和商品特点来选择与搭配。

在一个页面中添加相同的辅助色,通过颜色反复变换效果能够使其产生共鸣,从而让页面更具立体感。页面中辅助色的距离越远,产生共鸣的效果就越强,而靠得越近,反而变成一块,无法产生呼应的效果。因此,如果想要页面呈现出较有动感的效果,就可以使用让人印象深刻的辅助色,并通过控制其距离来表现出更有感染力和吸引力的画面效果。如右图所示的商品详情页,其设计中使用水蓝色和白色作为页面的辅助色,用于突出此款保温杯的特色和卖点,吸引买家的关注。

如果在网店页面中整体采用统一的主色和辅助色进行搭配,那么可以在页面的一小块面积上使用强烈的颜色,即强调色。强调色使用的面积越小,颜色越鲜艳,起到的强调作用就越明显。因为强调色所占据的面积较小,所以无论是多么鲜艳的颜色,也不会影响整个网店的装修风格。

如右图所示的化妆品网店页面中,主色是生机勃勃的绿色,突出了商品自然、健康的特点;强调色是玫红色和浅灰色,既突出了右侧的商品类别标题,也使页面产生了轻松的动感。

2.文字

文字的编排在网店装修中有着举足轻重的地位。优秀的文字编排会给浏览者带来良好的阅读情绪,从而使其能够进行深入的阅读。所以在编排文字时,要遵循一定的规则,使页面信息的传播度最大化,使商品的转化率得到较大的提高。总体来说,文字的编排规则包含三个部分:其一是文字编排的准确性;其二是段落排列的易读性;其三则是整体布局的审美性。

文字编排的准确性不仅仅是指文字所表达的信息要满足主题内容的要求,而且还要求整体排列风格要符合设计对象的形象。只有当文字内容与排列样式都达到画面主题的标准时,才能保证文字准确地传达相关的信息。

如右图所示,页面中的图片内容与文字信息在逻辑上存在一定的关联性,同时通过准确的文字叙述对商品的材质特点进行了更加全面的介绍。

网店页面中的文字还应该易于识别,即具有易读性。在实际的文字编排过程中,文字的字体、字距和行距等都可能影响文字的易读性。因此,在进行网店装修时,可以根据画面的需要,通过调整文字的字体及增大或缩小间距等方式来增强文字的易读性,给买家以顺畅的阅读感受。

如下图所示的优惠券,通过将版面中的部分文字设置为大号字体,并配以适当的间距,使其易读性得到了显著提高,同时也便于买家更加直观地了解优惠券的优惠额度和使用要求等信息。

文字的审美性是指文字编排在视觉上的美观度。在实际的装修过程中,为了满足编排设计的审美性,可以对字体本身添加一些带有艺术性的设计元素,如创建连体字、立体字效果等,从字体结构上增加其美感。

如下图所示的轮播广告图对主体文字的字体结构和笔画进行了有规则的改造,使其在外观上呈现出了特定的图形效果,提高了画面整体的艺术性和美观性。

3.版式

网店装修中的版面布局是让页面脱颖而出的关键。因此,进行网店装修时,除了要考虑页面的颜色和文字编排方式外,还应当考虑整个页面的视觉流程,即版面布局对买家的视觉引导,指引买家视线的关注范围和方位。清晰明确的视觉流程,不但可以增加买家在页面中的停留时间,还可以提高页面整体的美观性。

网店装修中比较常用的视觉流程有单向型和曲线型两种。单向视觉流程也称为线性视觉流程,它又可以分为横向视觉流程、纵向视觉流程和斜向视觉流程。横向视觉流程也称为水平视觉流程,是最符合人们阅读习惯的视觉流程,其通过版面各个元素的依次排列,引导观者的视线在水平线上左右来回移动。横向视觉流程在欢迎模块和促销广告中应用较多。下图所示的页面即从左至右依次展示了不同茶具的尺寸大小。

纵向视觉流程也称为垂直视觉流程。纵向视觉流程是将版面中的元素在垂直方向上进行编排,让观者的主要视线在页面的垂直方向上移动。该视觉流程常用于较为简洁的版面中,不仅能起到稳固画面的作用,还能为观者带来稳妥与坚定的心理感受。如右图所示的页面将各个元素基于页面的中轴线进行合理的编排,产生了一种纵向的视觉流程,让观者感受到页面整体的坚定与和谐。

斜向视觉流程是指通过将版面中的图片或文字进行斜向排列,引导观者的视线从左上角移动到右下角或从右上角移动到左下角。此类画面具有相对的不稳定性,因此会产生强烈的运动感和视觉吸引力,能更自然轻松地引导观者的视线和注意力。下图所示的页面通过文字和图片的方向引导观者的视线,如此既能赋予画面一定的动感,也能从侧面反映出鞋子的舒适性。

除了单向视觉流程,曲线视觉流程也是网店装修中运用较多的一种版面布局方式。曲线视觉流程是将页面中的图片和文字等元素,以S形或O形等曲线形态排列,使观者的视线随曲线移动。曲线视觉流程不但能使版面看起来饱满而灵活多变,还能让人从中感受到优雅的动态美。

右图所示的页面即采用了S形曲线视觉流程,将商品发货及售后处理流程置于S形曲线上,如此不但使得版面的上下和左右达到了相对平衡的效果,而且也让画面的视觉空间效果显得更加灵动和活泼。 96yyCT9ZaPH9XYEjixoyJFXZ0JDgc3UOm8JxmUdvj/DJRVErgnFQT2E4CM72XhD5

点击中间区域
呼出菜单
上一章
目录
下一章
×