SuperAPI AI 工具集

nodumb-design

设计与创作

查看项目

更新于 10-18 23:35

技能介绍

nodumb-design 是一个界面设计技能,核心思路是:设计一个“表面”(即用户一次看到并操作的全部内容,如页面区块、移动屏幕、弹窗、抽屉、屏幕状态或流程步骤)时,应从人需要完成、理解、注意到或感受到什么出发,美感和品牌服务于这个结果,而不是让风格盖过界面任务。它适用于网页和移动端,具体设备和构图按上下文选择。

工作方式:默认为用户主导设计。代理只回答当前问题,例如帮助明确目标、收集材料、比较方案、验证假设或分析现有稿,给出建议和依据,但不替用户选择方向,也不自行从讨论转入完整设计开发。应先讨论方向再展开,而不是带着成品来走形式审批;已确定的决策不重复确认。若用户委托独立开发或某个具体阶段,则按委托范围执行,不要求对每个可逆步骤逐一请示,但该委托不自动延续到后续任务。

设计分层:该技能负责第一层“设计”,包括目标、内容、参考资料和构图;后续层只有在设计层有产出后才开始。视觉语言层(颜色、排版、插图、隐喻、品牌)由该技能第 5 步、已有品牌原则或与用户单独讨论承担;打磨层(间距、对齐、状态、小字号排版)由 better-layout 等 better-* 技能承担。不必机械走完所有步骤:若目标和内容已确认,从第一个未完成的步骤开始。

开始前应收集已有材料:简报或需求说明、受众与流量来源、真实内容(文案、封面、元素数量)、平台限制和产品现有屏幕。若代为收集,应把发现连同依据和空白一并交给用户;收集不代表替用户选方向。

工作顺序共六步:

  1. 明确界面目标。目标必须存在,指标则视情况而定。目标应描述人的变化,而非屏幕做什么,格式如“当[场景]时,人想要[做/理解/注意/感受],以便[结果]”,并说明对产品的意义。要写明主要结果、可观察信号、证据等级(可测量、肉眼可见或主观判断)以及明确不做什么。若无目标,应转入 ask-nodumb。
  2. 按目标组织内容。确定人需要看到什么、按什么顺序、什么最吸引人;与目标无关的内容即使好看也可考虑删去。还需提前考虑会改变内容组成或位置的状态,如等待、选择冲突、结果不确定;状态约定不清可用 edge-hunt,约定清楚但展示不清可用 system-feedback。
  3. 参考资料:按界面类型广泛查看同类表面的普遍结构,如首屏、卡片行、移动端详情页、分享抽屉等,而不只找与任务完全相同的案例。每个参考应记录是什么、为何有助于目标、是否适合当前上下文,并把“为何有效”标为假设。参考数量不证明充分,应说明考察了哪些方法、澄清了什么、还剩哪些问题。风格类参考单独保留,供第 5 步使用。
  4. 灰度构图。在委托范围内帮助分析用户稿或搭建建议方案:使用参考片段和带真实文本的灰色块,暂不开发新风格;已有字体和尺寸若影响几何可采用。检查“这是什么、关于什么、对目标而言什么最重要”,发现问题应指出并提出构图调整;多个方案时推荐一个,说明代价和可能推翻它的条件。若选择依赖未验证假设,可用 Lean UX 格式写明假设、依据、信号和失败后的调整。
  5. 样式与品牌。构图确定后,若委托包含样式工作,再处理颜色、排版、插图、隐喻和品牌层;依托现有视觉语言,品牌调性未定且影响决策时,把具体问题交用户共同讨论。要检查样式是否服务于目标,并复查层级:若样式抢走了重点,应建议移除干扰项。
  6. 打磨。若任务进入打磨阶段,针对发现的问题应用可用的 better-*;若技能缺失,可直接检查所需属性,不因安装依赖而阻塞工作。

资料还列出“滑向海报”的迹象,如只谈隐喻和纹理而没有目标表述、主图或标题妨碍找到操作或信息、可点击元素过小而装饰元素过大、界面无法用第 1 步的一句话解释、参考全是风格类。这些是检查形式与目标关系的信号,不是禁止表现性构图;只有目标未定或被推翻时才回到第 1 步。反向陷阱是指标至上:不改变任何决策的指标、每个元素都配指标、没有基线的目标百分比、与目标无关的停留时间和点击,应删去指标、保留目标。

用户测试如走廊测试、五秒测试、首次点击测试均为可选,只在自检无法解决且回滚成本高时建议。对准备中的构图需要自检,但自检只能继续讨论,不能证明新用户能理解。报告应说明检查了什么、用什么方法、在什么产物/内容/尺寸上检查、发现了什么、还有什么未验证、哪个结论仍是主观判断;只有文字方案时可检查逻辑,但不能宣称通过视觉测试。

回答形式:只回答当前问题,给出建议、依据和重要不确定性;只展示新决策及相关材料,不重述已完成步骤。检查时按上述规则给出清晰报告。不把单个问题讨论变成完整设计包,也不在未受委托时提出已开发的设计。资料还提到 references/examples.md(网页区块和移动屏幕两个从目标到构图的示例)和 references/anti-example.md(从风格出发滑向海报的反例),示例只展示思考顺序,不应照搬构图、隐喻或模式。

与同系列技能的关系:产品目标、细分或任务不清用 ask-nodumb;想理解已有设计为何不奏效或迁移外部事实和指标用 nodumb;品牌形象和性格未定,应在样式开发前与用户讨论具体分岔;影响构图的状态约定不清,在选构图前用 edge-hunt,约定清楚但过渡展示不清用 system-feedback;其他检查按出现的风险接入,不按固定队列。