把「好看一点」写具体

“有层次感”“不要太平”“再灵动一点”，都是有效的感受，却还不足以指导一次具体修改。

墨间前面的迭代里，滚动动画就经历过两个极端：一开始几乎感觉不到变化，后来纸面翻折又过于突兀。继续增加幅度，并不能让它自然起来。真正需要说清楚的是：什么在动，什么时候动，动到哪里，以及读者此时应该注意什么。

这篇把页面迭代与设计规范中的方法整理成可复制的提示词。它是一份工作底稿，适合根据项目删改，不是一套固定审美。

先写页面的用途，再写风格

开始设计之前，先回答四件事：

1. 页面给谁看？
2. 读者进来后，最重要的动作是什么？
3. 第一眼需要知道什么？
4. 哪些内容和功能已经确定，不能随意改动？

个人作品集的重点可以是作品与文章；工具页面的重点可能是输入和结果。两种页面即便共用一种配色，也不应该拥有相同的主次关系。

风格词最好跟着具体行为。例如“现代新中式”可以展开为：暖白底色、浓墨文字、少量朱砂强调，标题与正文有字体分工，山水只承担空间层次。这样才有办法判断结果是否跑偏。

一份可以直接改的设计提示词

把方括号里的内容换成自己的项目即可。已经有网站时，保留“先检查现状”这一段，能减少推倒重来的返工。

请在现有项目上完成一次界面设计与实现。

项目是：[一句话说明用途]。
主要读者：[人群与使用设备]。
核心操作：[最多两个]。
希望读者第一眼理解：[一句话]。

开始前检查现有技术栈、路由、组件、内容来源与设计 Token。
先说明哪些可以复用、哪些确实需要修改，不重新初始化项目。
本次范围：[页面或组件]；保留：[已确认的设计、文案与功能]。

视觉方向：[风格与气质]。
把方向落实到字体分工、信息层级、留白、对齐与材料上。
先用字号、字重、间距和位置建立主次，再用颜色强调。
提出一个与内容有关的视觉区别点，并说明它为什么适合这个页面。
避免直接套用通用卡片、无意义发光和整屏装饰动画。

动效先说明触发条件、运动对象、起止状态与中途反向方式。
阅读区域保持稳定，反馈及时，不能等待装饰动画结束才允许操作。
深浅主题、筛选和菜单采用一致的过渡语言。
支持键盘、触屏和减少动态效果设置。

用真实长标题、空结果与窄屏内容检查布局。
检查文字对比度、焦点、图片比例、裁切与实际隐藏占位。
完成后展示实际页面，报告构建结果、检查范围与遗留问题。

其中最值得保留的是用途、范围、状态和验证。它们决定了设计是否能用；形容词决定的是气质。

要层次感，就把层次写出来

层次不一定来自阴影。尺度差、疏密、位置与运动速度，都可以让画面有前后关系。

以山水主视觉为例，可以把要求写成：远山对比更低，位置变化更小；近山轮廓更明确，运动略多；云雾独立经过，文字和按钮保持稳定。这里的“远近”既影响颜色，也影响动作。

如果用于工具界面，层次也可能只是主操作区、当前结果和辅助说明之间的关系，不需要额外画一座山。

精修动画时，别只说「再顺一点」

滚动渐显是否舒服，要看阅读过程中有没有突然断开的感觉。整块内容转到接近侧面，即使动画流畅，读起来也会突兀。

可以把一次精修任务写成这样：

保留当前排版，只调整滚动渐显。

进入视口时，让内容从轻微位移与低对比过渡到稳定阅读状态。
不要大角度翻转文字，也不要让整个区块长时间不可读。
离开后可以再次触发，但边界附近来回滚动时不能反复闪烁。
快速滚动、中途反向时，从当前状态衔接，避免先跳回起点。

先指出顿感来自触发阈值、延迟、缓动，还是重复动画互相打断。
不要靠统一延长时长掩盖问题。
实际查看慢滚、快滚、反向与减少动态效果四种状态。

这里没有规定所有动画都持续多少毫秒。菜单反馈、内容渐显和山雾浮动承担不同的任务，不必强行共用一个速度。应当统一的是动作的性格与反馈方式。

把验收也写进提示词

设计交付不能停在“代码写好了”。同一个搜索框，空输入、无结果、选中标签和手机窄屏，都可能暴露不同问题。

适合放进任务末尾的检查项是：

• 用真实内容检查长标题、英文、数字和缺图状态。
• 搜索、筛选、主题切换和菜单能用键盘操作，焦点可见。
• 隐藏内容确实不再占位；空状态不会留下奇怪的空洞。
• 深浅主题分别计算对比度。正文与小字以 4.5:1 为检查目标，大字与有意义图形以 3:1 为检查目标；这只是相关检查项，不等于完成全部无障碍验收。
• 在目标设备宽度查看最终渲染，确认文字、图标和物件没有被遮罩或容器裁掉。
• 报告实际看过和测过什么，未检查的部分单独列出。

下一次修改，只补充这四项

已经有明确方向时，不必每次重发整份长提示词。局部修改可以缩成四句话：

保留：[不动的部分]。
问题：[具体位置、触发方式与看到的现象]。
期望：[希望读者看到或完成什么]。
验证：[用哪种操作和设备判断是否解决]。

“文章标签菜单展开时位置跳动，保留筛选逻辑，改成从当前按钮下方连续展开，检查键盘关闭和手机边缘”，就比“这个菜单粗糙，再优化一下”更接近一次可完成的任务。

好的提示词会给设计留下判断空间，也会把边界写清楚。让人记住的那一点，交给创意；该对齐、该可读、该能操作的部分，写成可以核对的要求。

整理说明

本文整理自墨间的界面迭代与 2026 年 10 月的 UI、动效设计记录。文中的提示词为此次归纳的可复用模板；山水、滚动等例子用于解释取舍，不把某一次参数当作所有项目的标准。

视频中关于叙事、转场和动作重音的整理，放在另一篇制作札记。