ARTICLE · 1129707

自己做了个App,我把这一轮 UI 迭代整理成了 77 页手册

发布时间：2026-10-06 07:21:02 最近访问：2026-10-06 07:21:02

最近在做「勘录」2.0 的界面升级。这个 App 用来整理现场检查中的照片、说明和记录，再生成报告。这次，我把从早期界面到新设计方案的过程，整理成了一份 77 页的设计沉淀手册。

回头对照才发现，很多影响质感的地方，藏在很小的细节里：卡片占得太大，内容就显得松散；标题和正文主次不清，页面就会拥挤；圆角各做各的，同一个 App 也会像几套界面拼在一起。

这轮整理，有几个经验特别适合留给后续开发。

一是先定字体层级，再排页面

主页面标题、子页面标题、正文和辅助说明，各自承担不同任务。

例如，主页面可以用 34pt 大标题，子页面导航标题则以 17pt 为基准。把「完整度检查」这样的子页面也做成大标题，会抢走结果和操作的注意力。

字号需要结合屏幕、文本长度和大字模式一起检查。

手册里拆解了卡片、图片、分段选择和底部导航。

例如，一组卡片方案采用外层 24pt、图片 12pt、间距 12pt；分段选择采用外层 22pt、内层 18pt。这些是具体方案的参数，换了高度和布局，也要重新核对关系。精致感来自元素之间的协调。

静态图里看着舒服，键盘一弹出，底栏却可能被顶到输入框旁边。

上滑、视频全屏返回、英文长文本、大字模式，都能暴露截图里看不到的问题。设计检查需要沿着真实操作走一遍。

这份手册保留了前后对照、参数标注、调整理由和验收条件，也把设计方案、代码实现和真机验证分开记录。尚未验证的地方，继续标清楚。

借助 AI 做软件，值得积累的还有这些判断方法。下一次设计页面时，有图可对照、有参数可参考，也知道应该检查哪些状态，经验才能接着用。