一个上线网站、一个自家应用、三个概念案例

每个项目都有可以操作的页面,并说明页面结构和设计取舍。DAZY 是已上线的网站,下⁠一⁠手是我们自己做的应用;后面三个是为虚构商户做的概念演示。

DAZY 是我们设计并搭建的上线网站,站内 AI 图片均有标注,我们不对它的经营结果作任何陈述。下一手是我们自己的产品。三个概念均为虚构商户,图像为演示制作或授权使用,不代表任何客户关系。

已上线项目

上线网站服装

DAZY 外套贴牌展厅

访问网站 (在新标签页打开)
DAZY 网站首页:一位穿藏青菱格夹克的男士(AI 概念图),标题为「温州制造的外套与男装,贴你的品牌。」 (在新标签页打开)
实际做了什么
为 DAZY 做的中英双语 B2B 展厅,已上线。DAZY 是温州的男装外套与休闲装工厂,2003 年创立;网站写给需要贴牌生产的海外品牌。
页面
53 个页面:首页、全部款式、6 个品类页、1 个精选页、32 个基础款页面、贴牌合作、面料与细节、品质与打样、工厂介绍、采购资料及 5 篇指南、需求单和隐私说明。
主要功能
选款清单与需求单,可直接打开邮件发出;加拿大与美国采购指南,附官方来源链接;可下载的外套尺寸表模板;产品图可放大。网站暂不进入搜索结果。
语言
中文和英文,每一页都能切换。

设计思路

版式结构
B2B 展厅,不是网店:32 款基础款按品类归档,每款都有独立页面,每一页都通向同一份需求单,而不是购物车;产品图是标注过的 AI 重绘图。价格、起订量和交期,工厂没有确认之前一律不写上页面。
图像语言
产品棚拍图是根据工厂真实样衣照片重绘的 AI 图,每张都有标注,切换一下就能看到样衣实拍。首页大图是 AI 概念图。公司照片是实拍。
交互取舍
采购方把款式加入选款清单,填一份需求单,再用邮件发送、复制或下载。对方自己点发送之前,什么都不会发出去。

自家产品网页应用

下一手 · 国际象棋复盘

打开应用 (在新标签页打开)
下一手的复盘模式:棋盘上一条珊瑚色箭头,第 4 回合 Nxe5 标为「可以再想想」 (在新标签页打开)
实际做了什么
Limestone Studio 自己做的国际象棋复盘与学棋工具,中文优先。Stockfish 19 在你的设备上运行,不用注册,也不需要 API key。用于复盘和练习;在线对局时请遵守所用平台的规则。
页面
一个应用、三种模式(下一手建议、截图解残局、复盘一盘棋),另有「关于与开源」页。
主要功能
深色主题棋盘截图在本机识别,开始解题前由你核对;残局练习由你录入对方的实际走法;粘贴 PGN 复盘,每步给出评语;可选的 Lichess 残局库查询,只发送当前局面;手机底部操作栏。源码以 GPL-3.0 开源。
语言
中文优先,每个界面顶部都能切到英文。

设计思路

版式结构
一个界面做三件事:复盘下完的棋、练习残局、看懂每一步。棋盘固定在左,小马的建议在右;到了手机上,建议收进底部操作栏,只留一个主按钮。
图像语言
原创「漫画棋社」风格:浅紫纸面、墨线描边、自绘 SVG 棋子,值得看的那一步用珊瑚色标出。小马棋士是 AI 生成的卡通形象,有五种姿势;中文用圆体,标题有真正的粗体。
交互取舍
语气刻意温和:复盘只给「和小马想的一样」「也不错」「可以再想想」「这步亏了一些」四种评语。残局练习里引擎只算你这一方,对方的实际应对由你录入,它才接着想下一手。

概念案例

虚构商户,用来展示我们的思路。

概念餐厅

餐厅概念

查看概念演示
虚构餐厅概念网站的编辑式用餐首页
实际做了什么
餐厅首屏概念,提供三种用餐氛围。
页面
一个演示页面:首屏、场景切换与概念说明。
主要功能
用餐、吧台与夜间三个选项;概念说明弹窗;支持键盘操作。
语言
演示为英文。本站案例说明提供中文和英文。

设计思路

版式结构
编辑式版面,先给氛围:通栏影像,菜单当内容排版而不是甩一个 PDF,营业时间与地址永远一眼可见。
图像语言
暖调低光的摄影方向,卖的是晚市的样子,不是白天的样子。
交互取舍
随滚动缓慢展开,动效克制:是调味,不是主菜。

概念烘焙

烘焙店概念

查看概念演示
虚构烘焙店概念网站的晨间编辑式首页
实际做了什么
烘焙店首屏概念,按清晨的出炉批次组织内容。
页面
一个演示页面:首屏、产品图片与批次切换。
主要功能
三个批次按钮切换文字和图片效果,支持键盘选择。
语言
演示为英文。本站案例说明提供中文和英文。

设计思路

版式结构
以清晨为先的页序:今天新出炉的排在首屏,品牌故事排在其后;营业时间给足分量,因为烘焙店成败就在开门那几小时。
图像语言
明亮的产品特写,衬素净背景。
交互取舍
点到即止——悬停反馈加一条轻滚动条。买面包的人赶时间。

概念咖啡馆

咖啡馆概念

查看概念演示
虚构咖啡馆概念网站的互动时段首页
实际做了什么
咖啡馆首屏概念,随一天中的时段改变氛围。
页面
一个演示页面:首屏、图片与时段控件。
主要功能
用滑杆切换氛围和文字,也可以按方向键操作。
语言
演示为英文。本站案例说明提供中文和英文。

设计思路

版式结构
分时段版式:页面围绕早咖、午餐、下午办公三个时段重组——一间咖啡馆其实是同一屋檐下的三门生意。
图像语言
人在空间中的照片优先于产品特写——咖啡馆卖的是座位,不只是那杯咖啡。
交互取舍
一个时段切换器当主角,其余全部保持安静。