跳到主要内容
VC维C

WEB

青花造境QINGHUA

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

LIVE EXPERIENCE

  • WEB
  • DIGITAL EXPERIENCE
  • VISUAL
打开项目LIVE EXPERIENCE

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

TYPE
网页 / 交互式数字体验
SCOPE
概念 / 交互设计 / 视觉语言 / 前端实现
MEDIUM
Web · 五道制瓷工序 · 桌面与移动端各自编排
STATUS
Live experience
交互工艺预览INTERACTIVE CRAFT PREVIEWPORCELAIN / FORM · PATTERN · FINISH

从素坯,到青花。FROM CLAY TO COBALT.

调整器型,试选纹样,观察釉面。把一件器物的变化,放到眼前。Shape the silhouette, choose a pattern, and study the glaze. Follow the vessel as it changes.

正在准备画面PREPARING THE VIEW
拖动旋转 · 方向键微调DRAG TO ROTATE · ARROW KEYS TO ADJUST

先定轮廓。FIND THE SILHOUETTE.

收放器腹,让同一件素坯呈现不同的比例。Refine the body to explore a different balance.

收SLIM放FULL

依据项目器型重绘的工艺示意;完整操作进入原工坊。A craft study based on the project silhouette. Open the original studio for the full workflow.

进入完整工坊OPEN THE FULL STUDIO
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),底部有进度指示与当前工序名,每一步必须先完成手上的操作,才能进入下一步。

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

体验结构示意EXPERIENCE MAPVC / 04
手动工序流MANUAL WORKFLOW可选旁路OPTIONAL SIDE PATH

操作输入OPERATION INPUT

拖动轮廓、画笔工具与参数滑杆。Shape, brush and slider controls.

  • 拖动器物轮廓Drag the vessel outline
  • 画笔 · 橡皮 · 撤销 · 重做Brush · eraser · undo · redo
  • 浓淡 · 厚度 · 光泽Tone · thickness · gloss

工序状态PROCESS STATE

编号推进,完成当前操作后进入下一步。Numbered stages advance after each operation is complete.

  1. 01数字拉坯THROWING
  2. 02青花绘饰PAINTING
  3. 03清釉覆彩GLAZING
  4. 01 → 05五道工序,按编号推进Five numbered craft stages

器物参数OBJECT PARAMETERS

每组操作作用于对应的器型或表面。Each control acts on the form or its surface.

  • 器型半径 · 按高度变化Vessel radius · by height
  • 笔触与浓淡Stroke and tone
  • 釉层厚度与光泽Glaze thickness and gloss

视觉表现VISUAL FORM

画面随操作与工序推进而变化。The vessel’s appearance follows each action and stage.

粒子点云PARTICLE FORM
成形器物FORMED VESSEL

界面反馈INTERFACE FEEDBACK

始终知道当前做到哪一步。The current stage stays clear.

  • 工序名与进度指示Stage name and progress
  • 常驻操作方式提示Persistent operation guidance
  • 完成当前操作,进入下一步Complete this stage to continue
操作结果直接改变器物ACTIONS CHANGE THE VESSEL
02 · 青花绘饰02 · PORCELAIN PAINTING
02 · 青花绘饰02 · PORCELAIN PAINTING
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

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