SuperAPI AI 工具集

swiftui-design-principles

设计与创作

查看项目

更新于 10-15 18:31

技能介绍

用途:在创建或修改 SwiftUI 视图、WidgetKit 小组件或其他原生 Apple UI 时套用一套设计原则,让界面更接近生产级原生产品,而非间距、字号、颜色“看起来不对”的粗糙实现。核心哲学是克制优于装饰:每个像素都要有存在的理由,减少颜色、字号、间距值与文案数量,但保持一致性,优先使用系统组件与系统颜色。

主要能力与规则:一是间距系统,使用 base-4/base-8 网格值(4、8、12、16、20、24、32、40、48),避免任意值;给出外层内容、区块间、组件内、卡片行的标准内边距。二是字体层级,用更少字号配合字重区分层级,大号用轻字重、小号用常规;应用与小组件统一一种 font design,不混用 monospaced 与 rounded;字距最多两个值且仅用于大写标签。三是颜色,使用 SwiftUI 语义颜色(如 systemBackground、secondarySystemBackground、separator、primary、secondary、tertiary)自动适配深浅色与无障碍,硬编码颜色加多种透明度难以维护;必要时透明度仅保留 2-3 个有明确用途的值。

组件与布局:进度环等组件按比例而非过度放大,同一元素背景与前景描边 lineWidth 保持一致;列表行与开关行采用自然高度和正确内边距;分组内容使用系统模式,卡片圆角 10pt,用系统 Divider 并设置前导内边距,背景用 secondarySystemBackground,避免自定义渐变与装饰边框。导航使用 NavigationStack 并配合精简 toolbar。

WidgetKit:圆形锁屏用 Gauge 的 accessoryCircular,矩形锁屏用 Gauge 的 linearCapacity,背景用 containerBackground(.fill.tertiary, for: .widget),避免手绘进度条与硬编码黑色背景;声明支持的 family,保持跨 family 结构一致并加内部内边距防裁切。小组件内存预算紧张(常见约 30 MB),密集图形用 Canvas 一次性绘制,不要用数百个嵌套子视图。Timeline 刷新粒度要匹配数据粒度,日级数据在午夜刷新,时段相关百分比可约每 15 分钟刷新,避免对静态日数据做分钟级刷新。

交互与编辑器:Toggle 使用内置标签与单一强调色,互斥选项用单一状态值而非多个独立开关;数字变化用 contentTransition(.numericText())。交互式编辑器(拼贴、裁剪、画布等)应从 payload 状态呈现流程(如 .sheet(item:)),并集中共享几何与状态模型;资料在此处中断,后续内容暂未提供。

限制:资料中未提供收费、价格、平台或具体安装方式等信息;部分规则为面向数据型应用的推荐值,其他类型应用需自行判断适用性。