SuperAPI AI 工具集

interface-design

设计与创作

查看项目

更新于 10-16 05:06

技能介绍

用途:在创建布局、线框图或UI规范时提供界面设计参考,覆盖设计原则与UI模式。

主要能力: 设计原则——清晰(界面含义明确,用户无需猜测)、一致(相同操作有相同结果,保持模式统一)、反馈(对每个操作作出响应,显示进度、确认成功、解释错误)、效率(减少步骤,优化常用流程)、容错(允许撤销,破坏性操作需确认,可优雅恢复)。 UI模式——导航含顶部导航(主导航、全局操作)、侧边导航(分区导航、层级内容)、面包屑(显示层级位置)、标签页(在相关视图间切换);表单含标签置于输入框上方、清晰的校验信息、适时的行内校验、字段逻辑分组、明确的行动号召;反馈含加载状态、成功确认、错误信息、空状态、进度指示;操作含主操作突出、次操作弱化、破坏性操作需确认、禁用状态清晰。 布局原则——视觉层级(尺寸表示重要性、颜色吸引注意、间距分组元素、对齐建立秩序)、栅格系统(示例 .container 使用 display: grid、grid-template-columns: repeat(12, 1fr)、gap: 1rem)、响应式设计(移动优先,断点 640px、768px、1024px、1280px,流体排版,灵活图像)。

使用方式:交付给开发时提供颜色值(hex/RGB)、排版(字体、字号、字重、行高)、间距(外边距、内边距)、组件状态(默认、悬停、激活、禁用)、响应式行为、动画/过渡。资料另提及设计框架模板资源,但未给出具体内容。

适用场景:界面布局与线框图设计、UI规范编写、设计交付前的规范整理。

限制:资料未提供具体的安装命令、收费方式、平台支持或效果承诺等信息。