B2C品牌站设计阶段实录：品牌视觉规范与信息架构从零到定稿

🪐前言

阶段 2/11：设计阶段 | 时间：2025年11月下旬 | 当前进度：15%

上篇把品牌定位和预算定了，这篇进入设计阶段。说实话，非设计师出身的人做品牌视觉，第一步永远是"我觉得蓝色好看"然后被设计师白一眼。

L就是这样。她把Pinterest上存的367张图发给我，说"要这种感觉"。我翻了十几张后发现了规律——全是柔和的低饱和色、大面积留白、衬线字体。这就是她想要的"莫兰迪风格"。

但品牌视觉不只是选颜色。这一阶段我们要产出的是：Logo终稿、配色体系、字体规范、以及最关键的信息架构图。下面按实际推进顺序来记录。

一、Logo设计：从3个方向到1个终稿

🎯 先定设计需求

在Fiverr上下单之前，我让L写了一份设计Brief，不是那种"高端大气上档次"的废话，而是具体到能不能用的标准：

• 品牌名"AURAFOLD"需要两个版本：完整文字版 + 图形缩写版
• 主色调莫兰迪色系（雾蓝+燕麦色）
• 适用场景：网站Header（深色底反白）、产品吊牌、快递盒贴纸、社交媒体头像
• 风格：极简、线条干练，不要多余装饰
• 参考品牌：Away的字体干净度，Bellroy的柔和调性，Muji的克制

🔄 三轮修改的复盘

Fiverr上找了一个有包装设计经验的塞尔维亚设计师，$200包三轮修改。

第一版发过来三个方向：一个是纯文字横排、一个是图形+文字组合、一个是字母组合标。L比较纠结。图形+文字那个图形是折叠线条，概念对但比例偏大，放到小尺寸会糊。纯文字虽然稳妥但缺辨识度。

第二版调整了图形比例，缩小到文字的1.5倍高。但还是有问题——字体选了Poppins，太常见。所有用Shopify的站都在用Poppins和Montserrat。

第三版换成自定义风格的几何感字体，图形进一步简化成三条弧线叠合——呼应"折叠(FOLD)"的概念。L终于说"这个可以"。

最终交付物：

• AI源文件 + SVG + PNG透明底 + 反白版
• 品牌色两个配色的Logo版本
• Favicon尺寸

一共花了9天才定稿，比计划多2天。中间主要是L和设计师存在时区差，一个改动等一天。

二、配色体系：莫兰迪没那么好调

🎨 踩坑：直接从图片吸色

L最开始从Pinterest上找了一张"莫兰迪色板"，直接吸色给了我几个HEX值。我拿去WoodMart全局颜色里一设——网页上看着灰蒙蒙的，字都快看不清了。

印刷色和屏幕色是两个世界。莫兰迪色系的特点就是灰调明显，在CMYK印刷里很有质感，但在RGB屏幕上如果不做亮度补偿会显得脏。

✅ 最终方案

找了一个国内设计师帮忙调了一版，核心原则是：保持莫兰迪的柔和感，但在屏幕上有足够的对比度。

最终配色：

这几个颜色在白色背景上都有足够的WCAG AA级对比度。换句话说，不会因为"好看但不实用"导致用户看不清字。

三、字体规范：别陷入字体地狱

🔤 两个字体就够

这是我反复跟L强调的一点。一个站用两个字体就够了——标题一个、正文一个。再多不仅加载慢，视觉上也杂乱。

最终选择：

• 标题字体：Cormorant Garamond（衬线，Google Fonts免费）
• 正文字体：Inter（无衬线，Google Fonts免费）

为什么这么选？Cormorant Garamond有一种优雅的杂志感，符合品牌调性。Inter可读性极好在12px-18px这个范围内表现都很稳定。

字体加载策略用了font-display: swap，保证文字先显示再渲染字体。这个在WoodMart的字体设置里可以直接选择，不用写代码。

⚠️ 一个小坑：Cormorant Garamond的常规字重是400，但在一部分Windows设备上渲染偏细。最后在WoodMart里设置标题字重最小用500，视觉上就正常了。

四、信息架构设计：最容易被忽略的一步

📐 为什么必须画IA图

很多站做不好，不是做得不好看，是用户找不到东西。信息架构（Information Architecture）解决的就是"用户在网站上怎么找到他想要的东西"。

L本来想直接让我开始搭站。我说不行，先把IA图画出来——这一步跳过去，后面返工的代价是十倍。

🗺️ 最终IA结构

花了半天在白板上画结构，反复讨论：

首页
├── 新品推荐（动态区块）
├── 按系列：
│   ├── 通勤收纳系列（收纳包+托特内胆）
│   ├── 旅行洗漱系列（洗漱包+旅行收纳套装）
│   └── 配件（替换扣具+收纳袋）
├── 品牌故事
│   ├── 关于我们
│   └── 设计理念
├── 博客（生活方式内容）
├── 帮助中心
│   ├── 常见问题
│   ├── 物流信息
│   ├── 退换货政策
│   └── 联系我们
└── 页脚：
    ├── 订阅Newsletter
    ├── 社交媒体链接
    └── 政策页（隐私/条款）

图中每个框代表一个页面，连线代表导航关系。注意我们有意把"帮助中心"放在了主导航，而不是藏在页脚。这是从竞品分析中学到的——用户在下单犹豫时最常找的就是物流和退换货信息。

五、关键页面线框图：先画出来再动手搭

IA图定下来后，给每个关键页面画了简单线框图。

📱 移动端优先设计

这是一个重要的决策：先设计移动端界面，再扩展到桌面端。

原因很直接——产品是卖给25-38岁女性的。这个人群的移动端浏览比例大概率超过70%。与其桌面端做得漂漂亮亮移动端挤成一团，不如从一开始就以手机屏幕为标准来思考。

🏠 首页线框图（移动端）

从上到下：

1. Hero区：品牌主图+价值主张一句话
2. 系列分类入口：三个卡片，对应三个产品线
3. 畅销单品：横向滑动卡片
4. 品牌故事一句话：为什么我们做这个
5. 真实买家秀：4张UGC图片轮播
6. Newsletter订阅

📦 产品集合页线框图

1. 筛选栏（顶部固定）：按系列、颜色、价格
2. 产品网格：移动端两列
3. 快速预览：点击弹出简要信息+加购按钮

🛍️ 单品页线框图

1. 产品图片：滑动查看多图
2. 产品名称+价格
3. 变体选择器：颜色/尺寸
4. 加购按钮：固定底部
5. 产品详情：折叠式手风琴
6. 评价区

六、设计→开发交接文档

这个环节很多团队不重视。设计做完了扔一堆图给开发，然后就失联了。结果开发做出来的跟设计不一样，来回扯皮。

我们虽然是一个小团队（就3个人），但该有的规范还是要有。

📋 交接清单

1. 品牌视觉规范：Logo资产包、配色HEX值、字体名称和加载方式
2. IA结构图：完整页面层级和导航关系
3. 各页面线框图：移动端+桌面端
4. 交互说明：哪些元素有动效、哪些区域是动态内容
5. 图片尺寸规范：Banner/产品主图/缩略图/集合图各用多大尺寸

📋 设计规范文档截图（略）

本篇复盘

✅ 阶段成果

• Logo终稿（含全部交付文件）
• 配色体系确认（5个颜色）
• 字体方案确认（标题+正文，均为免费Google Fonts）
• 信息架构图完成
• 关键页面线框图完成
• 设计→开发交接文档整理完毕

🕳️ 踩坑记录

1. 莫兰迪色的屏幕适配：印刷色直接搬屏幕上不行，需要调亮10%-15%
2. Logo设计沟通成本：跨境沟通有时差，建议预算允许的话找亚洲时区的设计师
3. IA图要讨论不要独裁：自己画的IA图往往从功能出发，用户实际浏览逻辑可能有差异。L作为目标用户画像的代表，提了很多有用的意见

💸 本阶段成本

• Logo设计尾款：$100
• 配色调优顾问：¥200（约$28，找朋友帮忙收了个红包）
• 本阶段实际支出：$128

⏱️ 本阶段耗时

• Logo沟通与修改：9天（含等时差）
• 配色和字体：2个下午
• IA图和白板讨论：1个下午
• 线框图：1整天
• 文档整理：半天
• 总计：约13天（利用业余时间，非全天候）

💰 累计成本

• 第1阶段：$171
• 第2阶段：$128
• 累计：$299

🔮 下篇预告

设计稿都定了，接下来才是真正的体力活——WoodMart安装、Demo导入清理、全局样式设置、Header和Footer逐模块搭建。剧透一下：Demo导入后光删掉多余的东西就花了一个下午。

下一篇：97-B2C品牌站搭建实录：WoodMart + WooCommerce从0到完整成品

版权声明

   站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

---

本站文章90%为原创内容,拥有所有权,转载时请加上所属。