美妆网站最难的一步，往往不是首屏，而是选色号。屏幕有色差，色号名常常只是一串编号，顾客很难判断一支唇釉涂在自己脸上是什么样子。选不准，就只能放弃，或者买回去再退。
这篇拆解 Foundax 案例库里的 Tinted Hours 色时。它是一个虚构的唇颊彩妆品牌，有六支唇釉、四色颊膏和两个套组。它的做法是：把「选色号」这个购物动作，变成整个网站的故事。
美妆网站难在哪
- 屏幕色差。 同一个颜色，在不同屏幕上看起来不一样，单靠色块很难判断。
- 色号名太抽象。 「#03」「玫瑰豆沙」这类名字，说明不了它适合什么场合。
- 看不到上脸效果。 管身图说明不了质地、透明度和叠涂后的样子。
- 选项多，决定难。 色号越多，访客越容易在选择里迷路。
所以色时的设计目标是：给每个色号一个容易记住的理由，再用多种方式把同一个颜色讲清楚。
设计概念：用一天里的时刻给色号命名
色时的六支唇釉按一天里的时刻命名，从清晨的「06:40 晨雾」到深夜的「23:40 夜海」。光在一天里不断变化，脸上的颜色也可以跟着变。这样，色号名就不再是编号，而是一个使用场景：早上通勤用哪支，晚饭约会用哪支，一看就懂。
网站把这个概念贯彻到底：页面顶部有一个时钟，随着滚动从 06:40 走到 23:40，页面底色也在相邻时刻之间渐变。访客往下读，就像走过了一天。
色板：六个时刻，六组颜色
每个时刻有一个唇釉颜色和一个页面底色。唇釉颜色取自商品照片的实际颜色，所以页面上的色点和管身里的液体一致。
- 06:40 晨雾
#C29088清透玫瑰；页面底色 #E7E5E2 - 10:15 杏光
#E29372暖杏色；页面底色 #F4E6D6 - 13:30 暖石
#AB6C57赤陶裸色；页面底色 #E9DCCB - 17:50 落霞
#D25449珊瑚红；页面底色 #F0C3AE - 20:05 葡萄酒
#662430深酒红；页面底色 #3B2230，文字转为浅色 - 23:40 夜海
#5D2B45蓝调莓紫；页面底色 #141A28
字体的分工：
| 用途 | 字体 | 为什么 |
|---|---|---|
| 英文标题与色号名 | Cormorant Garamond，正体与斜体 | 美妆杂志感，斜体用在引言和色号名 |
| 时刻与价格 | IBM Plex Mono | 时间戳是品牌记号，等宽数字让时钟和价格对齐 |
| 中文 | 系统宋体（标题）、系统黑体（正文） | 不加载大体积中文字体，保住首屏速度 |
四个招牌时刻
时钟
一天在滚动中走过
页面顶部的时钟随滚动从 06:40 走到 23:40，背景在相邻时刻的底色之间渐变。开启「减少动态效果」时，背景按时刻直接切换。
长廊
六个色号依次登场
色号区段被钉住，六个时刻的商品图横向滑入，每张都配时刻、色号名和一句日记式描述。
质地
滴落、试色、叠涂
三张微距图分别讲刷头带起的一滴、纸上六道试色和手臂上的两色叠涂，回答「上脸是什么样」。
选色
点一下，整页跟着变
在选购区点选色号，唇部特写、商品图和页面底色一起切换到那个时刻。
六幕页面分镜
01
首屏：每个时刻，都有它的颜色
晨雾里的石台上立着一支唇釉，品牌名和标语留在左侧的空白里。时钟从 06:40 开始走，这就是整个网站的节奏。
02
时刻：六个时刻，六个色号
六张商品图横向依次滑入，背景跟着时刻渐变。到 20:05 之后，页面转入夜色，文字变成浅色。
03
质地：第一层，是透的
纸上的六道试色和手臂上的叠涂，用两种方式展示同一组颜色，弥补单一色块的不足。
04
选购：选你的时刻
大幅唇部特写配六个色号圆点。点选后图片和底色一起变化，再进入商品页选购，价格和库存来自商品数据。
05
颊膏：同一个时刻，也在脸颊上
四色颊膏和唇釉使用同一套色调，给出「同一时刻」的唇颊搭配，再延伸到日间和夜间两个套组。
06
尾声：一天的最后一个小时
夜色水面上的唇釉收束故事，同时交代配送、退货和客服，让最后的疑虑在离开前得到回答。
商品图怎么保持一致
六个色号要像同一支产品，商品图的一致性比单张的好看更重要。色时的做法是先定下一支唇釉管的标准图，之后每个色号都只改液体颜色和背景，管身、角度和光线保持不变；唇部特写也是先定一张，其余色号只改唇色。案例中的图片由 Foundax 团队用图像生成工具按这个方法制作。
如果你用实拍，也可以沿用同样的原则：同一台相机、同一个角度、同一套布光，一次拍完所有色号。
从选色到下单
色号在 Foundax 里是真正的商品规格，而不只是几个 SKU：详情页的色号选择、价格和库存都来自商品数据。套组可以直接加购，优惠码 HOURS15 在结账时计算满减。
选色区也考虑了无障碍：选中的色号会用大字显示时刻和名称，每个色号圆点也带有「17:50 落霞」这样的读屏标签，而不是只靠颜色区分。W3C 的 WCAG 2.2 也要求颜色不能是传达信息的唯一方式。想了解商品与规格功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 给色号一个能记住的命名体系，比如时刻、场合或心情，而不是编号。
- 用三种方式讲同一个颜色：商品图、试色和上脸特写。
- 让选色成为页面的主角：点选色号时，图片和页面氛围一起变化。
- 商品图先定型再批量制作，保证所有色号看起来是同一支产品。
- 选中的色号要显示文字名称，色点也要有读屏标签，不只靠颜色区分。
- 用套组和搭配建议，帮选择困难的访客做决定。
常见问题
色号应该做几个？
能讲清楚差异的数量就够了。色时只有六支唇釉，每一支对应一个时刻；与其做二十个相近的颜色，不如让每个颜色都有明确的使用场景。
屏幕色差怎么处理？
无法完全消除，但可以用多种参照降低误判：管身里的液体、纸上的试色、手臂叠涂和唇部特写，以及「适合什么光线」的文字描述。
色时是真实品牌吗？
不是。Tinted Hours 色时是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 色时案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品、图片和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。