Date 2026-05-11 10:42:56

@做面条的设计 :7月,一位面粉问我统一店铺的视觉风格。我说有机会写一篇特别的文章分享,因为一两句话根本说不清楚。
然而,今天我不仅专门为商店做视觉统一设计分享,而且想从整体的角度向你解释这个问题,毕竟,你必须知道为什么你需要做视觉统一,你可以做视觉统一,所以这个问题不仅指商店,而且关于品牌和用户之间的问题。
因为无论是商店还是平台,他们实际上都是为销售服务的,他们实际上是与品牌产品的合作关系,最终实际上是与用户联系,设计师必须做的,归根结底是处理他们与用户的关系,帮助达成交易。
因此,我将分享的视觉统一的方法不仅适用于商店,也适用于品牌、平台和商店。
按照惯例,我还是先给大家列一个提纲,方便大家理解:
为什么要统一视觉风格?统一视觉风格的方法有哪些?统一视觉风格的注意事项及总结接下来,我将一个一个地告诉你奥秘!
当我们提到“统一视觉风格”这个词时,我不知道你能想到什么?或者你能想到什么图片,什么公司,什么产品?在回答这些问题之前,我会给你一些例子。也许你会明白的。
比如前几天不小心打开了淘宝app,然后就看到了2018年淘宝新势力周的一系列店铺页面:

众所周知,像淘宝天猫JD.COM这样的平台,每年都有很多各种各样的店铺促销活动,每一项活动都需要容纳成千上万的商家和成千上万的商品。然而,所有这些东西都只是通过液晶显示屏显示在消费者面前,所以这是我们设计师发挥作用的时候了。
设计师此时需要做的事情包括以下几个方面:
确保活动页面能够容纳一切;确保页面方便客户浏览,所以有规则;确保页面能吸引客户继续购物,所以页面有规律,视觉不无聊,否则视觉疲劳;在客户心中建立印象,找到存在感,避免被客户遗忘;确保平台活动的整体色调和谐,为不同企业提供最合适的展示机会,视觉表达形式合理...综上所述,要权衡平台、商家、客户之间的关系和利益:客户买的爽,商家卖的爽,平台名利双收。
此时,有必要保持页面的视觉统一,因为视觉统一具有以下非常重要的功能:
1. 在用户心中强化品牌或事件的印象
因为几乎所有品牌都需要做的一件事就是占据用户的头脑,就是让用户在许多品牌选择中有自己的位置,不要忘记自己,所以它需要不断出现,保持存在感。
一项活动每年都会进行,一部电影每年都会续集,一个产品每年都会生产不同的系列,等等。都是一样的。他们都在加强自己在用户心目中的印象,保持存在感。
说到这一点,我通常每次活动都会提醒你不要经常改变化身或微信昵称,我让你留下更多的信息实际上是事实,因为我每天都要面对这么多人的化身和名字,如果你不改变化身很长一段时间,经常留言,那么我肯定会记得你;但如果你经常改变化身,留言更少,那么我肯定不会记得你,因为你没有在我的脑海中加强一个符号,理解。
2. 使事件有序有规律可循
就像我们举办运动会一样,不同的队伍穿不同的衣服,喊不同的口号等等。即使队里的人分开了,你也可以通过看队服或者对方喊的口号来区分自己的人或者别人,对吧?
另一个例子是,你去超市货架上喝饮料。正是因为这种视觉统一的作用,你才能很好地识别出你想买的品牌产品,而不是错误。另一方面,品牌也是如此。你的内部产品有统一的视觉形象,与其他品牌不同,所以你可以确保顾客不会买错。
这些原则在页面设计中也是如此,方便顾客购物,不要在错误的地方购物。
3. 提高相关人员的可执行性
因为像这样的大型活动,需要大量的人力投入,以设计师为例,一般是主设计师设计方案,然后方案不仅能满足上述要求,还必须确保其他设计师能够使用设计方案模板,执行剩余的数十页,工作量很大。
我们已经谈到了统一视觉风格和图像的必要性和重要性,所以下一步是如何统一视觉图像,所以我仍然会从几个方面向你解释,你会明白的。
但在此之前,我还是拿一张图给大家看,还是淘宝新势力的这张图:

你在这张照片里看到了什么?这个视觉画面包含了什么?
嗯,我看到了模特、文字、图案、各种颜色,以及一种由布局、排版和所有上述内容组成的风格。
所谓统一页面的视觉风格,也就是说,只要上述所有这些东西都得到保证,我至少可以在其他页面找到一个类似的,那么我们就很容易把它们视为普通页面,从而达到统一视觉风格的目的。
以以下淘宝新势力分会场页面为例:

你应该注意到,虽然这些页面的颜色不同,但整体视觉是非常统一的,同时,有一些不同的原因是以下方面:
不同的页面对应不同的颜色,但亮度和饱和度相似;不同的页面对应不同的文案,但文案的字体风格和布局相同;不同的页面对应不同的氛围装饰元素,但风格、纹理、技术相似;不同的页面对应不同的装饰元素,但每个页面的装饰元素与相应的主题、模型、文案等相呼应。这就是为什么你对这些页面有统一的视觉风格的印象,包括其他场地的页面。虽然做了一些小的调整,但你仍然可以看到它们是统一的视觉风格:

因为这里用的原理和上面一样。
但是我之前也分析过这种手绘风格和模特相结合的设计形式,这里就不举深入的例子了。你可以看看圣保罗艺术家 Ana Strumpf 为许多时尚杂志制作的插图封面可以体验到:

这种方法给人一种俏皮、时尚、时尚的感觉。它非常适合追求有趣个性而不失品味的年轻人。因此,淘宝新势力周可能会做出这种形式的设计,因为这种时尚人群的定位。
而且这种扁平质感半插画的设计形式几乎很难过时,非常前卫耐用。
所以在这里你应该很容易理解,一般来说,我们有以下五种方法可以实现统一的视觉风格。
1. 提炼某种风格,重复使用
比如你看看今天淘宝新势力的一些会场页面,视觉风格很统一,一眼就能看出是实体模特+结合手绘图形的风格形式,在模特脸上做一些图案轮廓线,然后在模特周围装饰一些手绘图案作为氛围,有点达达主义的感觉。

2. 建立品牌色,重复使用
当我们反复看到某种颜色同时出现在某个品牌或产品上时,随着时间的推移,我们会自然而然地将这种颜色与品牌联系起来,从而产生条件反射。只要我们看到一种颜色,我们就会立即想到这个品牌。只要我们听到这个品牌的名字,我们脑海中就会有一种颜色。
这实际上是通过建立某种品牌颜色来实现视觉风格统一的目的,从而使品牌在用户心中建立这种颜色印象。
例如蒂芙尼蓝:

因此,只要蒂芙尼蓝出现在任何页面、任何地方和任何产品上,用户都会默认它们是相关的:

再比如可口可乐红:

当然,有这么多种颜色。有些品牌或商店的品牌颜色不是单一的,而是多彩的,没有限制。
如果这个应用于页面设计或 Banner 在设计中,这个品牌的颜色必须出现在图片中。至于颜色比例,则取决于需要。此外,在未来,只有这种颜色才能实现视觉统一的目的。
3. 提取某些视觉元素,重复使用
所谓的视觉元素实际上是指你能看到和想到的所有元素,所以这里的视觉元素也指许多方面,如图案、对象、文本、产品、模型logo 等等,其实都是视觉元素。
说到视觉元素的运用,我脑海中印象深刻的两个品牌是初语和天猫,前者是店铺,后者是平台。
在品牌升级之前,我们可以看到初语,它有一个令人印象深刻的视觉元素,那就是她的模特和眼妆:

所有模特都保持着相同的化妆特征,气质相似,当然,你也会看到很多他的设计将与艺术绘画相结合,这些是它的特点,丰富和实用,给一个人留下了深刻的印象,只要你看到模特化妆或图片,你就知道:「哦,是的,这是初语」。
天猫也是如此。天猫头的元素“双十一”每年都会以各种形式出现,而且不仅仅是在双十一,可以说是一个非常强大的视觉符号。如果你想忘记,你不能忘记它:
2017年天猫双十一宣传海报

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats
这种通过某种视觉符号统一视觉图像、重复使用、加深用户印象的方式在许多其他地方都很有用,比如每个苹果手机,每次启动,都会出现相同的启动图片:白色背景+黑色的苹果 logo。

4. 打造品牌专属IP或宠物形象,重复使用
这个效果和品牌为自己找到一个独特的代言人一样,只要这个形象出现,你就会知道这是一个XXX品牌。
例如,在商店里,三只松鼠就是这样做的:几乎所有的页面都会出现三只松鼠。

比如平台,JD.COM有狗,天猫有猫,苏宁有狮子等等。电商界就像一个动物世界。

再比如珠宝品牌,卡地亚Cartier 有猎豹:


猎豹经常出现在各种品牌广告中,或制作各种珠宝,用户看到猎豹会想到卡地亚。
5. 提炼口号,重复使用
既然我们之前提到了视觉元素,文案或口号实际上是图片中的视觉元素之一,让我们以2017年天猫双11宣传海报为例:

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats
这里面的「xxx祝你双11快乐」 「天猫双11全球购买狂欢节」等等口号文案,重复使用,其实起到了这种画面视觉统一的作用。
这种方法也在很多地方使用,比如你看很多动画,电视剧,总是重复一些台词,嗯,说到这里,我想到一部动画片“宠物精灵”,每一集火箭台词都是这些句子:

然后每集结束时总会有一个场景,喵喵被扔到空中,喊出一句台词:「我们还会回来的~」。
你看这个重复口号有多可怕。用户已经印象深刻一二十年了。
然而,事实上,最后列出的三点实际上可以被称为视觉元素的重复使用。至于原因,我也在前面解释过,上述所有方法实际上都可以结合使用,而不是孤立的。
还有,你注意到了吗?我在每篇文章后面加了四个字「重复使用」,因为即使你有自己特定的视觉元素,有自己的宠物形象,有自己的品牌颜色,有自己的风格等等,但你根本不出现,你仍然特别低调,隐藏不展示自己,那么谁还记得你啊。
说到这里,我想到了异地恋很容易失败的原因。这难道不是同样的原因吗?如果你已经三五年没有见到你的男朋友/女朋友了,你不能手拉手亲吻也没关系,但如果你根本不联系,不出现在彼此的视线中,你的感觉自然会消失,这相当于白白地把它给了别人可乘之机。
所以我一直认为品牌和用户是一样的,也就是说「谈恋爱」,而不是做生意,至于你们谈论什么样的爱情,这取决于你们自己的能力。
我们需要做视觉统一的原因实际上是为了加强我们对用户心理的印象,让他们记住我们,记住我们是非常标准、可靠、可靠的品牌印象等,但也重复在用户的视野中,那么如何出现呢?这个方法在我上面列出的几个内容中。
当然,你也要控制一定程度,不要过度使用这些方法,否则会引起用户的反感。
想想有些男孩能成功地取悦女孩,而有些男孩却被女孩抛弃了。你知道为什么吗?事实是一样的。
看看下面世界杯期间的广告和图片 low,口号 low,重复的次数很多,用户记得你,但真的很烦。


欢迎关注作者微信公众号「做面条的设计」,一位干货和文笔都不错的美女设计师。
微信微信官方账号简介:专注于开拓电商设计思维,不时分享一些个人见解,当然也会分享一些顶级创意、摄影、人生感悟的好文章。

「超多的案例教你电商设计」
“有很多方法!教你搞定手绘专题页面设计,教你做出高质量的banner设计!”“配色大师系列!谈谈电子商务设计中“黑色”常用的搭配技巧!”