FELNUWA / WEBSITE DESIGN STUDY 01 / 2026.11.13
让颜色成为入口，
让细节支持选择。
首版独立站结构、首页与商品详情页设计。以现有品牌和手串概念为依据，先验证顾客能否看懂品牌、比较款式、理解规格并顺畅进入购买路径。当前是平台无关的本地设计原型。
01 / 本次设计的前提
沿用产品技能中的美国成年女性初始假设，自购为主、赠礼为辅。尚未由访谈与订单验证。本轮店面用英文，说明文档用中文。
选柔序、砚纸、青序展示三种视觉关系。是现有设计概念的页面样本，不代表已确定首发货盘。柔序作为主要详情页。
本次优先解决“照片有气质，但不知道实物怎样、尺寸怎么选”。完整图、上手图、材料依据和尺寸帮助各有位置。
02 / 网站整体结构
首版顶层导航只保留 The collection、Our approach、Size & care，右侧保留 Client care 与 Bag。商品少时先用单一集合页，避免空系列与复杂筛选。
建立品牌感知 → 查看三款概念 → 理解设计方式 → 找到尺码帮助。原型已设计。
通过颜色与形态比较款式。初期不按未经核实的矿物类别分类。辅助原型已设计。
完整图与上手图 → 信息与规格 → 尺码 → 购物袋。三款共享页面系统，原型可切换。
首版作为首页内容段，讲颜色、珠形和佩戴之间的关系。真实品牌人物、制作记录充足后再独立成页。
尺寸测量方式在原型弹层展示；材料适配保养、配送、退换与联系渠道需要真实资料。服务页进入正式站首版范围。
当前仅演示购物袋。结账、付款状态、订单确认使用所选商业平台实现；本轮没有接通交易。
主路径：首页 → 商品集合 → 商品详情 → 选择已核实规格 → 购物袋 → 结账 → 订单确认
广告或社交入口：直接进入商品详情 → 用完整图、尺寸和服务信息支持选择。
| 建议地址 | 角色 | 首版处理 |
|---|---|---|
| / | 首页 | 本轮完整设计 |
| /collections/bracelets | 手串集合 | 本轮辅助页面；款式足够再拆系列 |
| /products/[handle] | 商品详情 | 本轮完整设计；共享模板 |
| /pages/our-approach | 品牌与设计 | 初期用首页内容段，资料充分后独立 |
| /pages/size-guide、/pages/care | 选尺码及保养 | 主路径内可访问；需实测资料完善 |
| /pages/shipping-returns、/pages/contact | 服务与联系 | 正式站必需；经营条件确认后编写 |
| /cart、平台 checkout、订单状态 | 交易流程 | 平台实现并另做交易验证；原型仅演示购物袋 |
| /policies/privacy、/policies/terms | 政策与数据说明 | 根据经营主体、地区和真实数据流程核实，未生成假政策 |
03 / 首页：先产生感受，再看懂产品
| 顺序 | 内容与示例 | 设计作用 |
|---|---|---|
| 1. 导航 | 保留品牌字标、集合、设计方式、尺寸与购物袋 | 少量、稳定、手机可展开 |
| 2. 主视觉 | A little colour. Entirely your own. 柔序上手概念 + Explore the collection | 用现有佩戴情境介绍颜色与个人表达；不以疗愈功效作承诺 |
| 3. 短品牌语 | Some days, the smallest detail feels the most like you. | 建立情绪停顿；不增加重复促销 |
| 4. 三款精选 | 柔序 Soft Rhythm / 砚纸 Ink & Paper / 青序 Green Cadence | 中性完整产品图用于比较；英文名为本次提案 |
| 5. 设计方法 | Colour is a feeling. Form gives it a place to live. | 用颜色、珠形、节奏解释设计；不虚构工匠故事 |
| 6. 三项观察 | 颜色关系 / 形态节奏 / 日常穿搭 | 将现有产品设计方法转为顾客能理解的语言 |
| 7. 尺寸帮助与页脚 | 打开尺寸指南；找到配送与退换 | 为有兴趣但尚未确定的顾客提供下一步 |
04 / 商品页：从“好看”到“理解这件商品”
桌面采用左侧图库、右侧选择区。手机依次显示面包屑、完整产品图与缩略图、商品信息、尺码与动作、折叠详情、穿搭概念和其他款式。信息保持同一顺序逻辑，手机不缩成桌面两栏。
| 区域 | 本次设计 | 真实商品准备 |
|---|---|---|
| 图库 | 完整设计 / 上手概念切换，点击放大，明确图像属性 | 补同款实物的正面、背面、连接和近景；目前没有额外编造角度 |
| 名称与价格 | Soft Rhythm / 柔序 / Rose & cream；价格保持待确认 | 正式名称、售价与币种由货盘和经营方案确认；不沿用历史测试价 |
| 设计描述 | 粉色扁圆节奏、奶白停顿、一颗长形焦点 | 外观来自已查看概念；不将颜色命名当矿物鉴定 |
| 尺码 | S/M/L 仅演示选择、未选提示和购物袋携带 | 腕围适用范围、成品内围、珠径与松量需实测；不同字段分别存储 |
| 主动作 | Add to preview bag；结账关闭 | 真实上架后才替换为购买动作并使用已确认规格 |
| 折叠信息 | 材料与设计 / 尺寸 / 保养与差异 / 配送退换 | 价格、材料、库存和履约信息齐全后，放在购买决策附近 |
| 穿搭与推荐 | 同款穿搭概念；其余两个方向继续探索 | 穿搭图不能证明真实比例、舒适度或尺码准确 |
05 / 视觉系统与现有 skill 的衔接
阅读与页面底色
文字与核心层级
本轮按钮与提示
次级内容分区
颜色数值是本轮网页提案。暖白、炭黑延续品牌方向；深橄榄连接柔序的生活场景，产品卡保留中性背景，不统一套暖色滤镜。香槟色留给既有图像中的金属细节，不添加大面积金色渐变。
标题用衬线字体建立节奏，正文和交互用清晰无衬线。页头以 CSS 显示原有品牌概念板中的字标区域，源图不改写；这是历史位图资产的页面应用，正式站需替换为用户确认的矢量字标。未重新设计 F。
| 现有技能 | 本轮实际作用 |
|---|---|
| felnuwa-web-direction | 统筹结构、页面任务、商品信息与分阶段验收 |
| hara-brand-direction | 主感知目标、留白、产品与环境的主次、包装摄影网页的连续性 |
| albers-color-relations | 检查背景与产品色感；完整图保持原有中性背景 |
| kamekura-mark-design | 核对现有字标与小尺寸识别；使用源资产而非普通 F 替代 |
| gemstone-material-intelligence | 原图保留、图像身份记录、禁止据概念确认矿物与工程参数 |
| 现有产品与场景输出 | 使用六张既有概念图。本次没有新设计手串，没有声称重新通过产品评审 |
06 / 从这版设计走向正式站
| 优先事项 | 需要的真实资料 | 影响 |
|---|---|---|
| 首发商品与图片 | 确定款式、实物照片、材料与处理依据、结构和实测尺寸 | 替换概念图库、确定可售选项和材料说明 |
| 价格与经营条件 | 售价/币种、库存或制作方式、发货地/处理时间、运费、退换、联系渠道 | 完成购买区和服务页面，当前不作经营承诺 |
| 正式资产与交易平台 | 矢量字标、目标国家、平台与可用收款方式 | 确定字体和资产交付、结账实现及测试范围 |
本轮不增加积分、会员等级、虚假评价、倒计时、复杂筛选或收集邮箱的空表单。商品、运营和内容准备到哪里，功能就做到哪里。待商品更多且有真实用户行为后再扩展系列、赠礼、搜索或内容栏目。
资产来源与原文件哈希保存在 asset-manifest.json。全部参考图来自现有项目输出或已安装品牌技能；源文件未改动。浏览与交互验证记录见 verification.json（完成检查后生成）。原型未发布为正式店铺，未接支付或真实订单。
返回首页原型