跳到主要内容
VC
WEBWEB

青花造境QINGHUAQINGHUA青花造境

在浏览器里,从一抔土开始,亲手做一件瓷器。An interactive porcelain studio you actually work in.An interactive porcelain studio you actually work in.在浏览器里,从一抔土开始,亲手做一件瓷器。

LIVE EXPERIENCE

打开项目LIVE EXPERIENCE

真实上线,建议在桌面端完整做完一件。

青花造境「泥土初生 / CLAY AWAKENING」画面:深墨绿背景上由发光粒子聚成的器物形态,金色中英文标题与工艺信息面板

A hands-on craft simulator: throwing, painting, glazing — each step with a real toolset, not a video.A hands-on craft simulator: throwing, painting, glazing — each step with a real toolset, not a video.

青花造境不是一件瓷器的展示页,而是一个可以动手的制瓷工坊(PORCELAIN CREATION STUDIO)。体验被拆成五道工序,从数字拉坯开始:拖动器物轮廓改变各高度的半径,在旋转中定下器型;然后以钴蓝为墨,用画笔、浓淡与笔触在坯体上绘饰,并可以调用本地纹样生成建议;再一层清釉由上而下覆盖,用滑杆调整釉层厚度与表面光泽。深墨绿的底、金色的中英文排版、随工序变化的粒子器物,整个过程的每一步都有真实的操作界面 —— 而不是一段观看用的动画。A hands-on craft simulator: throwing, painting, glazing — each step with a real toolset, not a video.A hands-on craft simulator: throwing, painting, glazing — each step with a real toolset, not a video.青花造境不是一件瓷器的展示页,而是一个可以动手的制瓷工坊(PORCELAIN CREATION STUDIO)。体验被拆成五道工序,从数字拉坯开始:拖动器物轮廓改变各高度的半径,在旋转中定下器型;然后以钴蓝为墨,用画笔、浓淡与笔触在坯体上绘饰,并可以调用本地纹样生成建议;再一层清釉由上而下覆盖,用滑杆调整釉层厚度与表面光泽。深墨绿的底、金色的中英文排版、随工序变化的粒子器物,整个过程的每一步都有真实的操作界面 —— 而不是一段观看用的动画。
TYPE
网页 / 交互式数字体验
SCOPE
概念 / 交互设计 / 视觉语言 / 前端实现
MEDIUM
Web · 五道工序 · 桌面与移动端各自编排
STATUS
Live experience
  • WEB
  • DIGITAL EXPERIENCE
  • VISUAL
实时粒子LIVE PARTICLE RENDER01 / 07

七道工序,在一团光里完成SEVEN STAGES, RENDERED AS LIGHT

下面是这个项目真实的渲染管线 —— 不是视频,也不是截图。器物由一万多个采样点构成,两层点云叠加出发光感;拖动或以键盘切换工序,配色与运动模式会随之改变。

万物始于一抔土Everything begins with a handful of earth

青花造境「泥土初生」画面:深墨绿背景上由发光粒子聚成的器物形态
泥土初生 · CLAY AWAKENING
01 / 06

CONCEPTCONCEPT

不是展示瓷器,是让人亲手做一件。Not a showcase of porcelain. A workshop.Not a showcase of porcelain. A workshop.不是展示瓷器,是让人亲手做一件。

大多数文化类网页把成品放在最前面,观众看完仍然不知道它是怎么做出来的。青花造境反过来:把器物藏起来,先把工具交出去。

整个体验被定义成一间工坊 —— PORCELAIN CREATION STUDIO。进入之后你要做的不是往下滚,而是动手。

02 / 06

NARRATIVE STRUCTURENARRATIVE STRUCTURE

五道工序,按编号推进。Five craft stages, numbered like a workshop.Five craft stages, numbered like a workshop.五道工序,按编号推进。

体验被切成编号工序(01 → 05),底部有进度指示与当前工序名,每一步必须先完成手上的操作,才能进入下一步。

仪式感来自节奏被明确划分,而不是来自页面有多长;观众始终知道自己做到哪了、还剩几道。

03 / 06

INTERACTION DESIGNINTERACTION DESIGN

每一道工序,都给你一套真的工具。Every stage hands you a real toolset.Every stage hands you a real toolset.每一道工序,都给你一套真的工具。

这不是「点一下看动画」。每一道工序都对应一组真实可用的操作,而且操作结果直接改变画面里的器物。

界面本身就承担教学:右下角常驻「操作方式」提示,按钮名称与当前动作严格对应 —— 完成塑形、完成绘饰、开始施釉。

  1. 01数字拉坯 —— 拖动器物轮廓,改变对应高度的半径,实时重建器型
  2. 02青花绘饰 —— 画笔 / 橡皮 / 撤销 / 重做 / 清空,笔触与浓淡滑杆,左键落笔、右键或空格拖动旋转
  3. 03清釉覆彩 —— 釉层厚度与表面光泽两条滑杆,调节之后才真正开始施釉
  4. 04工序之间有明确的状态门槛,未完成的操作不能跳过
青花造境「青花绘饰 / PORCELAIN PAINTING」工序画面:白色坯体、绘饰控制面板、笔触与浓淡滑杆、本地纹样生成建议

02 · 青花绘饰 / PORCELAIN PAINTING:画笔、浓淡滑杆与本地纹样生成

04 / 06

AI AS A TOOLAI AS A TOOL

AI 只出建议,笔还在你手里。The AI suggests. You still hold the brush.The AI suggests. You still hold the brush.AI 只出建议,笔还在你手里。

绘饰工序里有一个「本地纹样生成」面板:AI 生成纹样、换一组、清除 AI 纹样 —— 它给出的是起点,不是结果。所有操作仍然由人完成。

这个位置是刻意的:在一个关于手工的体验里,AI 如果抢走笔,整件事就没有意义了。它应该站在工具那一侧。

  1. 01本地纹样生成(LOCAL PATTERN SUGGESTIONS)提供可替换的纹样起点
  2. 02生成结果可以一键清除,不会污染你自己的绘制
  3. 03AI 不写入、不覆盖、不代替任何一步手工操作
青花造境「清釉覆彩 / TRANSPARENT GLAZING」工序画面:成形的白色器物与釉层厚度、表面光泽滑杆

03 · 清釉覆彩 / TRANSPARENT GLAZING:成形之后的器物与釉层参数

05 / 06

VISUAL LANGUAGEVISUAL LANGUAGE

深墨绿的底,金色的字,一件由光聚成的器物。Deep green, gold type, a vessel made of light.Deep green, gold type, a vessel made of light.深墨绿的底,金色的字,一件由光聚成的器物。

画面压在一层很深的墨绿底上,文字用金色与米白,器物以两种形态交替出现:拉坯阶段的粒子点云,与绘饰、施釉阶段已经成形的实体。

粒子从弥散到聚拢,正好对应「泥土成为器」这件事本身 —— 视觉的运动和操作的进度是同一件事,而不是两层互相装饰的效果。

06 / 06

LIVE EXPERIENCELIVE EXPERIENCE

这个项目更适合直接打开,从头做一件。Better performed than described.Better performed than described.这个项目更适合直接打开,从头做一件。

青花造境是一个真实的线上体验,桌面端与移动端各有自己的操作方式:宽屏用左键落笔、右键或空格旋转器物,窄屏则以拖动轮廓、点按工具为主。任何截图都不如亲手做一遍。

首页的 LIVE EXPERIENCE 按钮可以直接打开线上版本。

青花造境移动端「数字拉坯 / THROWING WORKBENCH」画面:窄屏下重新编排的标题、器物与操作提示

移动端 · 01 数字拉坯 / THROWING WORKBENCH:窄屏重新编排的操作界面

制作信息CREDITS

本页截图为线上版本的本地留存,页面内容可能随版本迭代调整。