design-mobile-applisted

# design-mobile-app ｜ 移动端 App 界面/原型专项 > 本技能是 design-workflow 抽离出的**移动端专项**，专治"App 界面做得像 AI slop"——典型症状：**只换皮肤不换骨架**：换配色/圆角/字体/装饰件，但 UI 骨架完全没变；默认形态 = 同质化卡片从上往下等距堆叠 + 统一圆角 + 统一间距 + 层级只靠字号等差递减（26/22/15/14/12）。 > 与 `design-frontend`（通用前端/数字产品原则：结构装置即信息、反模板校准、UX 写作、动效意图）**分工**：`design-frontend` 管"通用交互/文案/动效意图"；**本技能管"移动专属的结构约束与原生范式"**——那些桌面不存在、手机才有的硬约束与小屏结构语言。两者叠加，不要二选一。 ## 一、结构手法（按用户指令使用，非强制首步） App UI 改版顺序**以用户指令为准**：默认可先调皮肤（配色/圆角/字重/间距/装饰），结构（骨架/分区/层级/密度）按用户要求再动、或和皮肤一起动——**不要自作主张把『改骨架』当成每轮必做第一步**。当用户指出「只换颜色没用 / 毫无设计感」时，即结构层没动，应主动动结构。下面 6 条是移动化后的结构手法工具箱（来源：实战踩坑沉淀，非凭空）： | # | 结构手法 | 移动端落地 | ❌ AI slop 反面 | |---|---|---|---| | 1 | 版面分区靠 hairline / 留白 / 栏位切分 | 用 1px 发丝线、段间距、section 标题分区；**不靠白色卡片容器** | 每屏都是灰底上一坨坨白色圆角卡片 | | 2 | 信息密度节奏变化 | feed 列表极密 ↔ 详情/hero 极空，**交替**，不要每屏一样密 | 每个页面密度相同，像同一套模板填空 | | 3 | 字号极端跳档 | 用 `56 / 30 / 14 / 9` 这种跳档；**拒绝等差数列** 26/22/15/14/12 | 所有文字按等差字号递减，层级"看起来有、其实平" | | 4 | 网格与对齐 | 数字用 `tabular-nums` 严格成列、跨栏、视觉对齐（optical）；列表行左标题右值 | 数字对不齐、小数点乱飞、左右不对齐 | | 5 | 不对称 | 左对齐标题 vs 右对齐"查看全部"；底部导航左标签、FAB 右；制造张力 | 通篇居中、所有元素对称排布 | | 6 | 字重对比 | 大字 `200` 细 + 小字 `600` 粗（比换字体有效） | 整页同字重，靠字号 alone 拉层级 | > **何时用这条自检**：仅当**用户已明确指向结构问题**（"只换颜色没用""毫无设计感"）时，才问"换套配色后界面还是不是那个东西"——如果是，说明只动了皮肤、没动结构，此时应动结构。结构没变，刷十层颜色也还是那个东西。但在用户只要求换皮肤/调色的轮次里，这属正常迭代，不算缺陷。 ## 二、移动专属硬约束（桌面没有的） 这些是小屏物理现实，不是风格偏好，**必须先满足再谈美观**： - **拇指热区（Thumb Zone）**：主操作放屏幕**底部 1/3**（单手可达）；次级/销毁类操作放顶部或需二次确认。底部 tab bar 的主 CTA 落在此区。 - **Safe Area**：状态栏 / 灵动岛 / home indicator / 屏幕圆角必须留白，**内容不出血到圆角与缺口**。顶部内容避开状态栏高度，底部内容避开