文档返回官网官网

文档官网

主要状态

询价表单、案例墙、导航的各个状态。

现行· VI Spec v1.2 · 来源 HAJI-8 · 2026-10-23

官网设计 v1.2 · 来源 HAJI-9 · 2026-10-23

状态板

默认 / 空 / 加载 / 错误 / 成功,以及导航吸顶和案例详情浮层。

中文站和英文站各一版,点按钮切换。

状态板(中文)(中文站) · 2602 × 5091下载原图 · 589 KB
States board (EN)(英文站) · 2602 × 5109下载原图 · 635 KB

A · 询价表单

默认态见页面 09。校验错误为失焦或提交时触发;提交中按钮禁用;失败时保留已填内容;成功后原地替换。

默认空表单,必填项标 *
校验错误红色 3px 描边 + 浅红底 + 文字原因,不只靠颜色区分
提交中按钮禁用 + 转圈,防重复提交
提交失败顶部横条可关闭,可重试
成功撒花 0.8s 只播放一次;减少动态效果时不撒花

B · 案例墙

筛选请求中显示骨架屏;结果为空显示空状态;点击卡片打开详情浮层。

骨架屏与真实卡片同尺寸,避免布局跳动
空状态筛选结果为 0 时出现:「这类还在打样中」「换个分类看看,或者直接告诉我们你想做什么。」
详情浮层遮罩 ink 70%;Esc、点遮罩或点 × 关闭;打开时焦点进入浮层,关闭后回到原卡片

C · 导航

滚动 > 80px 后切换为吸顶态,当前区块的导航项高亮。页脚三色标语进入视口时,吸顶组合标切为 ink 单色。

默认 → 吸顶滚动 > 80px 后切换为吸顶态,当前区块的导航项高亮。页脚三色标语进入视口时,吸顶组合标切为 ink 单色。
C3 · 吸顶 · 页脚可见页脚进入视口 → 吸顶组合标 200ms 淡入淡出换成 ink 单色;离开后切回彩色。减少动态效果时直接切换。
目录

下载原图