更新时间：2026年10月09日

UI 临摹要练的是判断，不只是把截图描得像。选一张有权使用的界面，先拆出任务、信息层级和布局，再用统一参数重建，最后换一组真实内容独立改版。完成一轮后，应留下参考来源、拆解稿、临摹稿和改版说明；如果还不清楚先练什么，可先按UI 自学路线补齐文字、间距与组件基础。

先选一张能解释清楚的参考界面

第一次不必选包含复杂插画、地图和动效的首页。一个读书记录页更适合练习：顶部是本周阅读概览，中间是正在阅读的书籍卡片，底部是“添加记录”操作。它包含文字层级、重复卡片、进度与按钮，又能把主要注意力留给布局。

参考材料可以是自己制作的界面、已获授权的项目，或明确允许相应使用的资源。记录来源和许可条件；练习成果对外展示时，不把他人的界面及业务结果当作自己的项目。看得见的截图不等于获得了商用或再发布许可。

把这次任务写成一句话：“用户打开页面后，知道自己正在读什么，并继续记录阅读进度。”这句话是后续取舍的依据。装饰是否漂亮很难争论，但一个按钮是否帮助继续记录，可以具体判断。

不要立刻描图：先做三层拆解

把界面划为页头、概览、书籍列表和主要操作区，用灰块代替图片和颜色。标出左右边界、卡片之间的距离、标题与正文的关系。若去掉配色后重点也消失，说明你还没有看清原界面的信息层级。

书籍卡片的共同部分是封面、书名、作者和进度；不是每张卡片都有同样长度的标题。先识别哪些是重复结构，哪些是内容变化，再决定哪些对象需要做成组件。不要为追求组件数量，把只有一处使用的装饰也拆成难以维护的部件。

截图不能可靠告诉你源文件的全部参数。可以从可辨认的边距、字号关系和圆角入手估计，再在练习稿中统一规则。记录“为什么用这个值”，例如“卡片内部文字与封面保持同一左边界”，比记录一串孤立像素更能帮助下次独立设计。

在同一份 Pixso 文件中分开放置“参考与拆解”“练习稿”“独立改版”，避免直接覆盖上一轮。先画区域和文字，再处理卡片复用、间距及颜色。需要重复的书籍卡片可整理成组件；可伸缩的内容区域再结合自动布局调整。这样改长书名时，能看到规则是否成立，而不是用空格手工挤齐。

第一轮只对照大关系：内容宽度、区域高度、对齐、主要按钮位置。第二轮再检查行高、图文距离、边框和阴影。如果一开始就纠结某个图标的细节，会在大布局调整后重复返工。

把参考与练习稿并排，以相同显示比例查看。可以临时降低参考图透明度叠加检查几何位置，但叠图只适合找偏移，不足以证明内容层级正确。关闭参考图后再读一次练习稿，看看眼睛是否仍按“概览—当前书籍—操作”移动。

每次只挑最影响阅读的两三个问题，写清位置、现象和改法。例如：“书名换成两行后，进度标签贴近底边；调整卡片内容布局，不单独拉高这一张卡片。”这比“卡片不够精致”可执行得多。

参数不是越接近参考就越好。参考本身也可能有问题；能够说明哪个规则值得保留、哪个问题不应照搬，才算从临摹走向判断。

第二个任务保留“概览—列表—主要操作”的基本骨架，改为会议记录页。现在用户需要找到待整理的会议、查看负责人，并继续补充纪要。书籍封面不再是必要信息，“阅读进度”也不能只换名为“会议进度”。

重新安排卡片：会议标题、时间、负责人和纪要状态进入信息层；“待整理”比参会人数更重要；主要按钮改为“新建会议记录”。如果会议标题很长，决定它是否允许两行，以及时间是否应该独占一行。这些变化来自新任务，而不是换色或替换图标。

在改版说明中选一处展开：原来的大封面适合识别图书，会议却更依赖标题和时间，因此移除封面，把空间用于状态与最近更新时间。读者应能看到你如何从一个场景迁移方法，而不是看到两张同构截图。

找一位没有看过参考图的人，让他在会议记录页完成“找到待整理会议并继续编辑”。不提前解释按钮位置，记录他实际停顿的地方；如果没有做过这一步，就把它留作下一轮任务，不写成用户测试结论。

最终保存四份材料：参考来源、灰阶拆解、临摹误差记录、独立改版及理由。之后再挑不同结构的页面练习，例如表单或数据列表。想把练习整理成作品，可以参考UI 作品集的项目表达方法，但要明确区分练习、个人职责和真实上线项目。