oil-ui
Design, improve, and review interfaces for websites, apps, dashboards, and components: explore directions, generate side-by-side comparisons, and refine visual hierarchy against real screenshots. Delivers a comparison page, design notes, a comp, or a working interface when asked. Design judgment only. Hand off to oil-ui-pro when that skill is installed.
Install
npx skills add https://github.com/oil-oil/oil-ui --skill oil-ui游玩与强手感操控
小游戏、抽奖、扭蛋、计时养成,以及旋钮、拉杆、摇杆这类强手感操控,过程本身就是产品:用户来看转轮减速、硬币被推下、娃娃差点滑落。这类界面先读本文,其余规范照常适用。
先盘点特有对象与状态
先填对象与状态表,再选参考、出概念或画灰度结构。只列页面、按钮和通用资源不算完成:
对象覆盖用户在这个玩法里真正操控、生成、消耗和结算的东西;状态按核心循环列出开始、可操作、输入或演出、锁定、结算、失败与恢复,玩法没有的状态删掉,实际存在的特有状态补上。每个对象和状态都要能在画面里辨认,不能用同一张静态图配不同文字充数。
再写一条 主动作 → 特有对象变化 → 可见反馈 → 下一次操作或结算 的核心循环,标出每屏唯一主角和唯一主动作。写清主视口的输入方式和反馈位置;触摸与指针的操作确有差异时再分别写,不重复两套相同说明。对象或状态缺项、核心循环走不通、输入或反馈无法执行时,退回盘点,不进入素材制作和灰度结构。
过程即玩法
- 演出可以比普通界面切换长,例如三个转轮依次停下共 2 秒左右,不按“超过 500ms 就会让人等”截短。
- 扣了费、出了结果就先存好:刷新不丢,不重复扣,奖励只结算一次。在哪一刻存,按玩法定。
- 演出期间写清哪些操作锁住;连按不能重复扣费。
- 旋钮、拉杆这类手势从按下的位置开始跟手,过了生效点才算一次,没到就松手不扣。
- 减少动态效果时,玩法照常算出结果,只是画面直接到位;不能把玩法本身停住。
- 状态与变化用序列图看;正常速度下的手感通过直接操作判断:减速是否连续、停下时有没有顿挫、收益从哪里飞到哪里。录屏只按 工具 [blocked] 的条件取用,不能仅凭序列图宣称手感已验证。
素材与渲染
- 对象与状态表完成后,把需要制作的项转成素材清单。角色、藏品、道具、符号和材质贴图是这类界面的主角,默认用生图做。手写 SVG 和 CSS 只画界面图标和简单图形,拿它们画角色和道具,会落到图标包的质感。成套出图的做法见 素材 [blocked] 的“成套素材”,素材来源也按同一份文件的顺序选择;都无法生成时,按该文件交素材简报,不拿手画的图形冒充成品。
- 乐趣来自空间和物理时,用实时 3D 渲染场景,例如堆叠、碰撞、推挤、摆动,或透明、金属材质;生成的图当贴图和精灵用,做法见 素材 [blocked] 的“实时 3D”。树木生长、天气这类自然变化,用成套生成图通常更好。
- 素材放进场景后再看一次:受光和场景一致,有接触阴影,侧面、背面和翻落时不露出纸片的边。图生成了,不等于放进场景就可信。