品牌刚起步时,网站往往很容易保持统一。产品不多,一组照片、一套文字,就能把想表达的感觉讲清楚。
可过了一年,情况就变了。春夏系列拍得轻盈,秋冬系列压得很暗;联名页有一套字体,新品海报又有另一套;有的商品图把产品拍得很大,有的只留下远远一个轮廓。每次上新单独看都挺用心,回到整个网站,却像走进几个不同品牌。
这时再要求“所有图片统一一下”,往往只解决了表面问题。品牌当然需要变化,新品也应该有自己的性格。真正要弄清楚的是:哪些东西可以跟着系列变化,哪些关系应该一直让客户感到熟悉。

上新越丰富,越要让人看懂产品之间的关系
假设一个家居照明品牌,最初只有几款台灯,后来增加壁灯、便携灯和艺术家联名灯罩。问题不只是首页装不下了,而是客户开始需要理解:它们为什么属于同一个品牌?哪些可以放在同一个空间里?新系列和常规系列是什么关系?
如果每次发布都从一张新的情绪参考图出发,设计很容易只服务于眼前这一轮。这个系列用建筑感大字,下一轮改成手写字,再下一轮用金属渐变。每个决定都能找到参考,品牌自身却没有积累。
我们的理解是,视觉秩序首先在表达一种选择标准。它让客户逐渐知道,这个品牌怎样看待材料、颜色、日常使用,以及产品之间的搭配。商品多了,选择标准应当更清楚,而不是被更多装饰淹没。
这也决定了讨论顺序:先说明新系列增加了什么,再决定它需要多大的视觉变化。增加一个颜色、增加一种使用场景、与另一位创作者合作,三者未必都需要一套全新的网站语言。
看 BD Barcelona:产品各有性格,页面关系仍然清楚
BD Barcelona Design 在 Awwwards 展示的2022年网站版本,由 Miguel Trias Works 署名。这里观察的是该版本的原作图,不把它当作今天官网的完整状态。Awwwards 项目页
集合页保留清楚的品牌标识,把类别与作者入口置于产品图上方;黄色软包椅与另外两把不同形态的座椅,并置在同一画面结构里。产品集合原作图

单品画面则分开呈现类别 armchair、名称 dino 与设计师 Jaime Hayon,并保留尺寸等信息入口。图片里能看到的层级,不等于这些入口的实时功能已经验收。
这给我们的启发是,品牌的共同性可以存在于“怎样认识产品”这件事上。先知道属于哪一类,再看这件作品的独特表达,随后找到判断所需的资料;几个不同任务不必抢在同一张海报里完成。
把这个思路放到上新中,设计团队便有了更具体的问题:这次变化的是产品本身、它所处的系列,还是表达它的方式?如果每次都连这些基本关系一起改,客户就需要反复学习。若只固定关系、给产品留出差异,视觉统一也可以容纳丰富的性格。
这是我们对展示关系的分析,不是 BD Barcelona 内部规范或经营策略的披露。Awwwards 收录与原作图都没有证明某种安排带来销量,也不能证明页面属于 Shopify 或 WESWOO 项目。
把品牌、系列和活动的变化分开管理
客户不需要知道网站有几套组件,但应该能感觉到:这里一直是同一个品牌,不同系列又确实各有特点。
设计上可以把变化分成三个层次。它们并不是三种固定版式,而是三个不同的决策范围。
- 品牌层,保留熟悉的关系。 例如字标怎样出现、产品名称和价格怎样区分、图片与文字如何配合、规格信息怎样被找到。稳定的是识别方式与信息层级,不一定是每个像素的位置。
- 系列层,允许有理由的变化。 季节、材料、合作对象可以改变色彩、场景、拍摄距离和标题语气。变化应当能解释这个系列的特点,而不只是“这次想换个风格”。
- 活动层,设置明确的使用期限。 倒计时、促销色块、限时发布的特殊排版可以暂时提高音量,但活动结束后应当退出,不能永久覆盖品牌本来的表达。
还是以照明品牌为例。日常系列可以在真实房间里呈现,艺术家联名可以加入更强的色块与作品细节;两者仍然可以沿用一致的产品命名、尺寸标注和光照条件说明。客户不必重新学习怎么买,系列也没有被压成同一种表情。
反过来,所有商品都拍成同一张白底图,也未必就有品牌秩序。便携灯要说明移动使用的关系,壁灯要解释它与墙面和空间的关系。画面可以不同,但比较的依据应该清楚。
先决定商品怎样并置,再决定单张海报多抢眼
品牌常常逐张审核图片,却很少审核图片放在一起是什么样子。结果是每张都过关,一整屏却没有主次。
上新前可以先做一张实际的集合页样稿,把新旧商品混在一起看。这里不是评选哪张照片最美,而是检查同一层的信息是否还能比较。
例如,同为台灯,主图里的产品有的几乎占满画面,有的只占一小角,客户可能把拍摄比例误读成尺寸差别。又如,常规商品使用产品名,联名商品只写情绪标题,列表里就很难看懂它们是不是同一类东西。
因此,图片规范需要说明“在哪里可以自由”,也需要说明“在哪里要便于判断”。系列封面可以更有气氛;承担同类比较的商品卡,则需要适当接近的观看距离、明确的名称与必要的差异信息。特殊造型是否需要例外,可以讨论,不能靠运营临时猜。
商品进入系列页之后,也不必再复制一遍首页。系列页负责说明这一组产品为什么放在一起;商品页继续解释这一件东西本身。页面之间有分工,重复的大字和大片才不至于挤掉真正新增的信息。
设计规范要能接住下一次上新
一份只展示最终页面的规范,很难帮运营处理下一批素材。真正有用的交付,还应该让团队知道:新商品进来以后,从哪里判断、由谁决定、例外怎样留下记录。
不必先做一本很厚的品牌手册。可以从下一次上新建立一份简短的发布说明:这个系列与现有产品的关系、保留哪些品牌元素、允许改变哪些部分、需要哪些素材,以及何时结束活动表达。涉及合作方的标识和作品,按双方确认的范围核对使用方式,不靠设计师自行判断。
进入制作时,保留一套不被活动标题覆盖的产品基础资料。产品名、材料、颜色、尺寸等信息应当有可追溯的来源;拍摄文件则明确产品、款式、用途和版本。内部文件不清楚,前台再精致也很难长期保持一致。
审核也要有明确责任。商品团队确认事实,设计团队确认系列与品牌的关系,内容负责人核对名称和说明。人数少时可以由同一个人承担多个角色,但不要让“都看过了”等于“没人对具体问题负责”。
最后别漏掉退出。活动结束后,首页主视觉、系列入口、商品卡角标是否需要撤下?售罄或停产后,已有订单仍需要的说明怎样保留?活动页面可以归档,产品身份和售后信息却不应随海报一起消失。
检查秩序,要看陌生人是否能讲清关系
内部团队天天看这些产品,容易高估客户的熟悉程度。比较有效的检查,是让不熟悉品牌的人看一组新旧页面,解释他理解到的关系。
可以请他找出同一产品的不同款式,说明新系列与原有系列的区别,再说说哪些东西让他觉得“这还是同一个品牌”。如果他只能复述最新活动的口号,却说不出产品之间的关系,就值得继续检查表达是不是压过了内容。
这类阅读检查反映的是理解问题,不是销售效果证明。需要评估改动对业务的影响时,还要结合实际浏览路径、商品选择、咨询与售后反馈,区分上新、价格、库存等同时发生的变化。
品牌持续成长,不可能永远只有一种颜色、一种镜头、一种版式。好的视觉秩序,是让每一次变化都能回到一个清楚的整体:客户既能看见这次的新意,也能认出你一直坚持的选择。