一个上线网站、一个自家应用、三个概念案例
每个项目都有可以操作的页面,并说明页面结构和设计取舍。DAZY 是已上线的网站,下一手是我们自己做的应用;后面三个是为虚构商户做的概念演示。
DAZY 是我们设计并搭建的上线网站,站内 AI 图片均有标注,我们不对它的经营结果作任何陈述。下一手是我们自己的产品。三个概念均为虚构商户,图像为演示制作或授权使用,不代表任何客户关系。
已上线项目
上线网站服装
DAZY 外套贴牌展厅
(在新标签页打开)- 实际做了什么
- 为 DAZY 做的中英双语 B2B 展厅,已上线。DAZY 是温州的男装外套与休闲装工厂,2003 年创立;网站写给需要贴牌生产的海外品牌。
- 页面
- 53 个页面:首页、全部款式、6 个品类页、1 个精选页、32 个基础款页面、贴牌合作、面料与细节、品质与打样、工厂介绍、采购资料及 5 篇指南、需求单和隐私说明。
- 主要功能
- 选款清单与需求单,可直接打开邮件发出;加拿大与美国采购指南,附官方来源链接;可下载的外套尺寸表模板;产品图可放大。网站暂不进入搜索结果。
- 语言
- 中文和英文,每一页都能切换。
设计思路
- 版式结构
- B2B 展厅,不是网店:32 款基础款按品类归档,每款都有独立页面,每一页都通向同一份需求单,而不是购物车;产品图是标注过的 AI 重绘图。价格、起订量和交期,工厂没有确认之前一律不写上页面。
- 图像语言
- 产品棚拍图是根据工厂真实样衣照片重绘的 AI 图,每张都有标注,切换一下就能看到样衣实拍。首页大图是 AI 概念图。公司照片是实拍。
- 交互取舍
- 采购方把款式加入选款清单,填一份需求单,再用邮件发送、复制或下载。对方自己点发送之前,什么都不会发出去。
自家产品网页应用
下一手 · 国际象棋复盘
(在新标签页打开)- 实际做了什么
- Limestone Studio 自己做的国际象棋复盘与学棋工具,中文优先。Stockfish 19 在你的设备上运行,不用注册,也不需要 API key。用于复盘和练习;在线对局时请遵守所用平台的规则。
- 页面
- 一个应用、三种模式(下一手建议、截图解残局、复盘一盘棋),另有「关于与开源」页。
- 主要功能
- 深色主题棋盘截图在本机识别,开始解题前由你核对;残局练习由你录入对方的实际走法;粘贴 PGN 复盘,每步给出评语;可选的 Lichess 残局库查询,只发送当前局面;手机底部操作栏。源码以 GPL-3.0 开源。
- 语言
- 中文优先,每个界面顶部都能切到英文。
设计思路
- 版式结构
- 一个界面做三件事:复盘下完的棋、练习残局、看懂每一步。棋盘固定在左,小马的建议在右;到了手机上,建议收进底部操作栏,只留一个主按钮。
- 图像语言
- 原创「漫画棋社」风格:浅紫纸面、墨线描边、自绘 SVG 棋子,值得看的那一步用珊瑚色标出。小马棋士是 AI 生成的卡通形象,有五种姿势;中文用圆体,标题有真正的粗体。
- 交互取舍
- 语气刻意温和:复盘只给「和小马想的一样」「也不错」「可以再想想」「这步亏了一些」四种评语。残局练习里引擎只算你这一方,对方的实际应对由你录入,它才接着想下一手。
概念案例
虚构商户,用来展示我们的思路。
概念餐厅
餐厅概念

- 实际做了什么
- 餐厅首屏概念,提供三种用餐氛围。
- 页面
- 一个演示页面:首屏、场景切换与概念说明。
- 主要功能
- 用餐、吧台与夜间三个选项;概念说明弹窗;支持键盘操作。
- 语言
- 演示为英文。本站案例说明提供中文和英文。
设计思路
- 版式结构
- 编辑式版面,先给氛围:通栏影像,菜单当内容排版而不是甩一个 PDF,营业时间与地址永远一眼可见。
- 图像语言
- 暖调低光的摄影方向,卖的是晚市的样子,不是白天的样子。
- 交互取舍
- 随滚动缓慢展开,动效克制:是调味,不是主菜。
概念烘焙
烘焙店概念

- 实际做了什么
- 烘焙店首屏概念,按清晨的出炉批次组织内容。
- 页面
- 一个演示页面:首屏、产品图片与批次切换。
- 主要功能
- 三个批次按钮切换文字和图片效果,支持键盘选择。
- 语言
- 演示为英文。本站案例说明提供中文和英文。
设计思路
- 版式结构
- 以清晨为先的页序:今天新出炉的排在首屏,品牌故事排在其后;营业时间给足分量,因为烘焙店成败就在开门那几小时。
- 图像语言
- 明亮的产品特写,衬素净背景。
- 交互取舍
- 点到即止——悬停反馈加一条轻滚动条。买面包的人赶时间。
概念咖啡馆
咖啡馆概念

- 实际做了什么
- 咖啡馆首屏概念,随一天中的时段改变氛围。
- 页面
- 一个演示页面:首屏、图片与时段控件。
- 主要功能
- 用滑杆切换氛围和文字,也可以按方向键操作。
- 语言
- 演示为英文。本站案例说明提供中文和英文。
设计思路
- 版式结构
- 分时段版式:页面围绕早咖、午餐、下午办公三个时段重组——一间咖啡馆其实是同一屋檐下的三门生意。
- 图像语言
- 人在空间中的照片优先于产品特写——咖啡馆卖的是座位,不只是那杯咖啡。
- 交互取舍
- 一个时段切换器当主角,其余全部保持安静。