网站设计案例
品牌独立站怎么设计：从商品价值到下单的 6 个决定
首屏讲什么、哪里做交互、颜色留给谁、卖点用场景还是参数讲、体验怎样接上下单。用 Foundax 案例库的设计方法，拆解品牌网站的 6 个关键决定。
阅读全文
卖灯的网站有一个先天难题：灯真正的价值，出现在开灯之后。顾客买的不是一个灯罩和一根灯杆，而是灯亮起来以后，房间变成的样子。可大多数灯具网站只给出白底商品图和一张参数表，访客要自己在脑子里把它放进家里。
这篇用 Foundax 案例库里的 HUSH 暮间做拆解。它是一个虚构的家居灯具品牌，主角是一盏雾白圆顶的随身台灯。下面按页面顺序讲它的设计决定，以及每个决定背后的理由。可以先打开案例，边看边读。
灯具网站难在哪
- 商品是光，不是灯体。 白底图能说明造型，说明不了氛围。
- 使用场景在夜晚，拍摄常在白天。 很多场景图把灯拍成了一件摆设。
- 参数很抽象。 300 流明、2700K，对大多数人没有画面感。
- 决策靠感受。 顾客真正想确认的是：这盏灯放在我家的角落里，会不会刚好。
所以 HUSH 的设计目标可以写成一句话：先让访客感受到商品改变了空间，再让他亲手决定喜欢的氛围，最后把这个选择带进购物袋。
四个招牌时刻
品牌网站不需要处处都有交互。HUSH 把交互集中在四个时刻，其余区块保持安静。
开灯
一盏灯，改变一个角落
首屏是一张关灯状态的真实空间照片。点亮后，灯罩发光、桌面落光和墙面反射分层亮起，底图本身不换图、不提亮。
转场
从独处到相聚
向下滚动，镜头从阅读角移到露台。一个滚动进度同时控制图片和文字，往回滚也能还原。
调光
让访客做决定
亮度滑杆和琥珀、暖白两种光色直接作用在照片里的光上，三个预设对应读几页书、放慢一下和再坐一会儿。
接续
体验不在按钮前中断
调好的光感会出现在选购区，例如「你的光感预览：琥珀 · 68%」。访客的选择没有在点击购买时丢失。
交互的数量比交互的质量更容易失控。先选出最能证明商品价值的一两个时刻，再决定其他区块要不要动。
视觉语言：把颜色留给光
HUSH 的配色刻意压得很低：石灰白和灰橄榄铺满页面，只有光是暖的。灯亮起来的时候，页面上最暖的颜色就是商品本身。
- 石灰白
#EEECE3页面底色，像一面被台灯照着的墙 - 灰橄榄
#555C3D品牌色、主按钮和选中状态 - 深橄榄
#34392C调光区背景，让光效更显眼 - 墨褐
#302F25标题与正文，比纯黑更温和 - 琥珀光
#E7A25B只用在灯光本身，不用于按钮或装饰
字体的分工也很明确：
| 用途 | 字体 | 为什么 |
|---|---|---|
| 标题 | Baskerville、宋体 | 衬线字带一点书卷气，对应夜里读一会儿书的场景 |
| 正文与界面 | Avenir Next、苹方 | 无衬线让价格、选项和按钮保持清晰 |
六幕页面分镜
01
首屏：给夜晚，留一点光
真实空间、正常尺寸的灯，第一屏就回答「它放在家里是什么样」。右下角的开关提示访客，这盏灯可以点亮。
02
空间：从阅读角到露台
两个场景对应两种用法：一个人读书，两个人聊天。「随身台灯可以带着走」这个卖点，不写在参数里，而是用场景切换讲出来。
03
光感：今晚的光，由你来定
亮度、光色和三个预设。页面注明这是氛围示意，不是实测照度，演示效果要诚实。
04
细节：安静地在场
展开圆顶、触点和底座三个细节。只讲商品图里真实看得到的部位，不虚构看不到的结构。
05
选购：选一盏，陪你过夜晚
单灯和双灯组合各有对应的商品图和价格，上一步调好的光感偏好也出现在这里。
06
尾声：暮间，小记
大小错落的生活照片收束故事，文章入口回到对应场景，最后是订阅。
从体验到下单：交易部分怎么接
品牌页做得再好，如果点了「加入购物袋」之后像换了一个网站，前面营造的氛围就断了。HUSH 的选购区、购物袋、订单和售后都使用 Foundax 原生的商品与订单能力：价格和规格来自商品与 SKU 管理，优惠在结账时计算，订单可以查询，退货可以申请。设计要做的，是让这些页面延续同样的颜色、字体和节奏。
如果你的网站有访问却没有订单，可以对照 漏斗里每个指标都绿了，唯一没到场的是订单 排查。想了解这部分能力，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 找到商品价值真正出现的那个时刻（对灯来说是开灯），让首屏展示它。
- 场景图用真实空间和正常比例，不要为了显眼把商品放大到失真。
- 交互集中在一两个能证明价值的时刻，其余区块保持安静。
- 把颜色留给商品：品牌色降低饱和度，让商品成为页面里最亮的东西。
- 访客在体验中做出的选择，要带进选购区和购物袋。
- 参数和演示要诚实：氛围示意就写明是示意。
常见问题
灯具网站一定要做开灯交互吗？
不一定。开灯交互的前提是有一张好的关灯场景照片，并且愿意为它标定光源和照射范围。如果条件不够，先做好两件事更重要：真实空间里的场景图，以及白天和夜晚两种状态的对比。
没有专业摄影，能做出类似的效果吗？
HUSH 的光效建立在一张关灯状态的场景照片上，再叠加发光、落光和反射三层。换成你自己的照片时，需要重新标定灯的位置和光照范围；不同灯型的出光方向也要对应调整。它不是给任意照片自动重新打光。
HUSH 是真实品牌吗？
不是。HUSH 暮间是 Foundax 团队制作的虚构品牌案例，用来展示灯具与家居品牌网站的一种做法。案例里的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 HUSH 案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品、图片和品牌内容。