用途
UI Refactoring 是一个战术性的用户界面设计指南技能,用于修复布局、选择颜色与字体,并创建专业的 UI。它把界面设计视为可拆解、可执行的逻辑规则,而不是依赖“艺术天赋”,优先考虑清晰度、层级和系统化。
当用户提出“让这个看起来更专业”之类的需求,或需要调整界面布局、配色、字体时,可使用该技能。
核心工作流
- 功能优先:不要从设计“外壳”(导航栏、侧边栏)开始,而应从具体功能入手(例如搜索表单、联系人卡片)。
- 低保真:初期忽略颜色、阴影和字体,用粗马克笔或基础线框图以灰度设计,先解决布局与间距问题。
- 定义系统:不要使用任意数值,立即为间距、字体和颜色建立受限的系统。
- 细化:应用具体战术处理层级、深度和打磨。
领域专项战术
技能提供以下参考文件,用于查询具体实现规则:
- 让元素突出或融入:参见 hierarchy.md(大小、字重、对比度、语义)。
- 留白与对齐:参见 layout-spacing.md(网格、间距刻度、密度)。
- 文字与字体:参见 typography.md(字号刻度、行高、字体)。
- 颜色与调色板:参见 color.md(HSL、饱和度、可访问对比度)。
- 图像、阴影与打磨:参见 depth-and-polish.md(光源、素材、收尾)。
快速启发式
- 限制选择:如果在两个选项之间无法决定,说明选择过多。将输入(颜色、字号、间距)约束到预定义的刻度中。
- 个性:
- 严肃/优雅:衬线字体、锐利边角、金色/蓝色、正式语言。
- 活泼/友好:圆润无衬线字体、大圆角、粉色/橙色、随性语言。
- 复杂度:不要先为边缘情况设计。先设计“快乐路径”(简单版本),再针对复杂度迭代。
适用场景
适用于需要修复界面布局、选择配色与字体、建立间距与字号系统、提升界面专业度的设计任务,尤其适合希望以系统化规则而非纯审美直觉来改进 UI 的场景。
限制
资料未提供该技能的具体安装方式、支持平台、收费模式或价格信息,暂未提供。