因为不少同学觉得临摹难度太低太简单，所以这次的周练上上强度，完成对下面案例的改版。

练习内容：

页面有两个，优先改左侧的主页，如果有时间可以改右侧的详情页。

练习要求：

使用402宽画布，根据自己对界面问题的理解进行优化，组件、功能、字段不做删减只优化样式。图片和图标要自己替换，可以使用外部素材，没有限制，确保最终的视觉效果合理即可。

练习目标：

检验自己对界面设计的认识和真实水平。

导出点评：

完成的界面可以置入展示卡片内导出，需要自己完成导出的细节调整确保展示效果。

1. 发送到小红书@酸梅干超人 ，我一定会去看
2. 发送到我们的社群中上传和其他同学交流，每周挑选几位同学的作业做详细点评

我们也会选择合适的案例进行汇总输出相关的说明。

练习素材：

相关素材参考网站：

摄影图：Unsplash、Burst、Pixabay
其它配图：品牌官网、淘宝、谷歌图片
mockup：mockupworld、anthonyboyd、mrmockup.com
图标库：iconfont、iconpark、flaticon
字体库：求字体、字由、dafont
界面设计：追波、美叶、mobbin.design
UI 作品：站酷、Behance
综合灵感：花瓣、Pinterest、Muzli

---

问题总结

问题1：字号的应用

提交的练习中错误最多的问题也是最简单最容易避免的问题，那就是字号的设置。很多作品中字号明显小于观看需要，无法被看清。

想要解决这个问题，最简单的方法就是把图导出以后自己手机上看一遍。这是学UI前期做的最重要的检查习惯，自己看实景很多问题是一目了然的。

同时，我们之前Figma课里提到的字号设置范围，直接照搬是绝对不会出错的，而自己乱设的参数是大概率不符合设计要求的。

问题2：卡片内间距不一致

也是比较常见的问题，一个模块卡片四周的内间距宽度不同，看起来是非常别扭的。每个卡片类组件做完都要检查内间距，确保它们的一致性或是合理性。

问题3：卡片投影太“脏”

很多设计都给卡片加投影来突出卡片，但合理的卡片投影是不会有这么短促的，这会导致投影看起来灰灰的又不干脆，让画面变得更“脏”，合理的投影会更扩散更有空间感。

问题4：图标素材的使用

图标的应用虽然可以使用素材，但挑选素材也是要有技巧的，除了切题以外，最重要的就是 —— 一致性。即图标设计风格和细节是统一的，而不是各自为战。

图标的选择也反应一个比较深层次的问题，那就是稍微复杂点的场景找外部素材就基本匹配不到完美的情况，UI设计肯定无法逃避自己画图标的场景。

问题5：四要素的对齐和亲密

接着就是四要素里的对齐和亲密原则的错误，对齐问题比较容易发现，上下应该对齐的元素没对齐只是把东西摆进去。亲密问题则是关联更紧密的元素间距比更疏远的大或一致，这样视觉形成的“分组”感就不够，看起来会混乱。

并且在对齐上，图标对齐的是它本身占位符的边缘而不是图形边缘，任何图形边缘对齐的做法必然就是错的。

问题6：选中和未选中状态模糊

设计里我们还要表现“交互性”，而不是纯静态的图例。比如底部导航包含选中和未选中的状态，那么它们就应该有清晰的区分。但是很多同学的设计是没做这种对比的，那么页面的可交互性就没了。

问题7：主要配图的使用

主要配图尤其是顶部配图里，没有清晰的主体或文字信息太碎片，缺乏视觉冲击力和无法提高整体效果。

细节的问题还有不少就不一一例举了，想要避免这种常见的初级问题，就只能通过临摹不断强化来形成肌肉记忆，这是你们入门阶段最关键的一步。

无它，唯手熟尔。

下面再挑选了几张学员里面这次做的比较案好的案例：

最后再分享一个经验观点，那就是点评作业时最麻烦的一点就是 —— 没东西能点。因为当一套作品细节处于崩坏状态时，讨论改版思路、设计风格是没有意义的，因为现有设计水平和质量没达到讨论更高层次问题的时候。

可以根据上面的问题，再次优化自己的设计稿。