电商设计知识分享:标题设计在其中的运用及相关要点
此刻能够在此地向各位传授一些关于版式规划在商品交易界面中的实际操作要点。
我先前发表过大量涉及Banner的文稿,也曾向各位展示过实例,具体如图所示,一个最为周全且普遍的Banner通常包含以下构成要素:文字内容,人物形象或商品展示,场景设定,装饰性细节,以及品牌标识。
我创作过数百篇涉及电商主题的文章,涉及内容有宣传文字/业务管理/视觉规划/影像采集/顾客互动/消费者认知/推广策略等众多领域,可以说覆盖得相当广泛,不过或许大家也注意到了,我在电商视觉规划中有一个细分领域探讨得相当有限,那就是标题创作。
过去我认为标题部分的构思相当繁难,包含视觉元素/表面效果/字符布局/字体神韵/色调组合/传统底蕴等诸多要素,这实质上是一个自成体系的设计领域,我即便动笔也仅能触及皮相,远逊于那些专精于字体的匠人,因此暂时放下了,总盼着某个条件具备时再着手。
然而经过一段时间的积累,我对页面顶部元素的设计积累了一些心得体会,因此今天能够在此与大家探讨标题元素在商业平台界面中的应用技巧。
为了让大家更容易明白,我把标题的设计要点概括为以下几项:图像的构造,表面的感觉,文字的布局,字体的神韵,颜色的组合,历史的积淀。
接下来我们一个个地来看下:
1.从图形设计的角度去理解
字体本质上属于视觉符号,针对各类电商营销方案,可以在主标题中结合图像或实物元素,这种手法不仅有助于消费者更清晰地把握活动核心,还能带来焕然一新的视觉体验,特别适合那些着重展示产品特性与卖点的宣传语,下面进行具体说明。
比如下面的晚安2个字是由床上用品拼成的,非常一目了然:
今年的三八女王节也是用产品堆成了一只猫头的形式:
还有这个很赞的图形拼接字体设计作品,大家应该也都不陌生吧~
我们还可以选择将部分具体物件融入字形之中,通过巧妙搭配组合,最终构成一个完整的标题,
也可以完全抛弃实物,而是运用字体+相关图形绘制的配合:
或者是完全由绘制的图形来拼接成你的标题文字:
直接输入现成字体,就是便捷高效的设计方式,这种做法很方便,不过通常缺少创新性。
2.从质感风格的角度去理解
为了维持整体视觉的和谐,标题区域的风格应当与页面基调相吻合,否则容易造成视觉上的割裂感,例如当页面展现出较为显著的科技感光泽时,标题设计也应融入类似的质感和光效元素,从而达成整体的协调统一。
页面形态五花八门,标题呈现的视觉效果自然也是千变万化,比如:
科技领域、数码产品、家用电器以及游戏行业的相关横幅或专题页面制作中,常常会运用到具有强烈光泽的金属质感的文字样式,这种设计风格十分普遍。
当页面要展现独特性,或突出鲜明个性,又或强调不受拘束的特质,还或需要彰显强烈动感时,常会采用毛笔字与字体四溅的表现手法
在需要表现岁月痕迹或某种情感基调的情境下,文字的呈现方式能够适当采用陈旧化的处理手法
运用字体阴影手法,能够创造出多样质感的字体,例如,可以呈现丝带般的柔美,或是折叠纸张的层次感。
比如卡片的效果:
当然你也可以直接通过剪纸来得到你要的质感样式:
还有一些走卡哇伊路线的页面标题,常用一些卡通手绘风格
粉笔绘制的纹理常被应用于学院风格的宣传横幅,例如用于教学领域或迎新季的设计:
另有一些质感轻盈且形态饱满的可爱字体样式,制作时需要借助手绘技巧来完成。
再或者是叠加一些跟主题吻合的纹理图案:
霓虹灯效果:
也可以直接将图片叠印在文字上,这种方式相当便捷,并且能够营造出独特的视觉效果,不过对图片的品质有比较严格的标准:
另有一些肌理能够参照核心构思来确立,诸如花朵,流水,云彩,青草,原木等形态的肌理,总之,天地间任何事物皆可化作文字的肌理,务必确保与整体构思的调性相协调。
下面这个就是用的针织用品的质感和形式,也很巧妙:
另有一些需要借助立体造型或别种技巧来呈现的肌理效果我就不逐一列举了,总之这些方法都是灵活多变的。
3.从文字排版的角度去理解
我之前曾向大家梳理过常见的Banner布局方式和专题页构造模式,但事实上标题部分的呈现形态也颇具多样性,例如
最常见的左对齐/居中对齐/居右对其:
文字可作背景使用,或分解为有节奏的笔画排列,每笔即为一种构成成分,
竖排文字同样适用,例如文艺作品/复古风格/现代潮流的版面,都可以考虑采用垂直书写方式
环绕型:
四周对称型:
富有韵律感的布局方式,经常出现在一些前卫风格的页面设计或者文艺气息浓厚的宣传横幅上,对于这类横幅而言,文字并非单纯的文字,而是视觉整体的一部分,是辅助呈现整体氛围的手段,既能提升视觉享受,也能带来一种不拘小节的感觉。
文字可以铺满整个画面:
另有一种构思与先前提到的通过物件组合成文字的思路截然不同,我们同样能够借助文字来构建出所期望的具体事物,例如:
4/从字体气质的角度去理解
标题的版式构思通常要和整体页面的风格保持一致,例如如果页面呈现稚气可爱的手绘感,那么标题的形态也应当偏向童趣化,不宜突然转为凌厉或生硬。
这就像我们的页面会根据推广活动的方向不同,展现出高端大气/文艺清新/折扣优惠/简约潮流/生动有趣/缤纷酷炫等各种不同的风格层次,文字作为构成这种风格的一部分,也带有相应的个性,例如你的字体可以是苗条的柔美字体/典雅的古典字体/干练的简洁字体/锐利的现代字体/迅猛的速度字体/个性的鲜明字体/蕴含文化底蕴的毛笔字体/俏皮的手绘字体等风格。
举例:
这类标题通常十分精炼,很少采用字体的特殊处理方式,字体的形态比较细长且整齐划一。
具有艺术感的标题,其字体常选用手绘风格或纤长的无衬线体,并且会依据内容含义或氛围氛围进行字形调整,布局设计亦可较为随性。
例如那个文案号称“幸福左右”,匠人把每个字都减掉一笔,造成了一种不完整之美,并且跟文案的意旨很相称,是不是挺有意思?
打折活动的标题,字样常显得较为粗壮,或者字形变化得特别明显,只要不碍事阅读就行,适合营造促销气氛的字体样式五花八门,并非只有苗条/文雅这类字体会显得不合适,诸如敦厚/锐利/迅猛/大胆/洒脱的毛笔字迹,以及滑稽的手绘体,都能够传递出促销的感觉。
通常在花瓣查找Banner时,多数能见到这类设计,那里汇集了各式各样的特价活动字体方案,无论是否具备高级感,是呈现立体感还是扁平化风格,都不算关键,核心在于文字的格调必须契合,进而再挑选合适的视觉效果。
5.从色彩搭配的角度去理解
标题部分字体的色彩选择,应当从两个层面来探讨,其一要考虑风格与整体页面的协调性,其二要注重信息的辨识度,比如
(1)气质跟页面保持一致
我们的标题制作,所用的文字样式要和整体页面风格相吻合,比如要表现欢快稚气,不仅图形和手法要俏皮,还可以通过调整文字的色调来达成。
同形异色的物件,其生动程度远超单色版本,亮丽且饱和度高的色调,比暗淡且含混的色彩,给人的视觉冲击力更强。
(2)从信息识别的角度
电商设计中,文字通常是传递信息的主要方式,必须确保其清晰可见,能够从众多文字或背景中凸显出来,这一点可以通过色彩搭配来实现,例如当背景色彩丰富且复杂时,文字颜色应选择简洁明快的色调,若背景为暗色系,文字则需采用明亮色彩,反之亦然。
6.文化背景
完成一个出色的页面布局,常常也必须顾及项目背景和文化背景等要素,而字体设计作为页面中一个关键构成,很可能会关联到文化背景层面,例如
制作旅游/留学或居住环境相关的横幅时,往往需要运用能展示地域文化特色和名胜风光的字体图案,那么作为创作者就必须事先掌握这些地方的文化背景和景观知识:
有些偏重艺术气息或讲究文化内涵的设计,例如音乐领域/茶道活动/琴棋书画之类的艺术相关活动,经常借助毛笔字,然而一个对毛笔字毫无认知的人,其实很难创作出优秀的毛笔字作品,各种不同的书写方式传递的感受也各不相同:
部分时令节庆的图案创作,务必探究其历史底蕴,否则可能引发笑料呢:
这便是关于网页布局中标题模块的构思概述了,若有时机能够再度深入剖析,定会详尽阐述。
#专栏作家#
以设计为职业的面条,公众号名为做设计的面条,是人人都是产品经理专栏的撰稿人之一。她非常善于把电商广告和横幅设计讲解得既清晰又简单,为人风趣且内容丰富,还擅长摄影,期待与她互相沟通学习。