点击观看课程视频

练习内容：

根据提供的宜家主页截图，使用Figma的课程操作演示，完成该页的临摹练习。如果完成第一页后还有时间，也可以继续完成 “卷王” 文件夹内提供的其它界面截图的临摹。

练习目标：

• 提升对Figma软件的熟练度
• 适应UI界面操作和设计的基本流程
• 了解真实线上应用的设计参数和属性

额外要求：

案例内使用的图片、图标不提供素材，要自己去找，因为配图和图标选择也是练习的一部分，机械填充素材进去等于没练，所以大家可以按自己要输出的项目完成，看看最后实现效果的优劣。

导出点评：

完成的界面可以置入展示卡片内导出，

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

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

练习素材：

---

练习总结

1.间距控制

很多元素是没有对齐或是控制合理间距的，仅仅是把元素放到画板里而不是 “排版” 进去。

要培养习惯置入画布的任意元素要查看它们和其它元素的间距，以及确定它的排版逻辑，是基于哪个元素做对齐的。尤其是在组件内部边缘的元素，尽量确保间距的一致性。

2.状态栏颜色

状态栏在界面中几乎要“消失”，和背景的对比度不够。

这也是个老生常谈的基础问题，浅色用深色状态栏，深色用浅色状态栏。

3.字体使用

设计过程使用了非苹方字体。正常UI设计项目中，只有在特定装饰型标题上会使用其它字体，尽量不要在以iOS规范为标准的界面中使用其它字体类型。

4.图文结合

背景图太亮又使用亮色或对比度不够的文字，导致最后信息是无法被正常查看的。

文字是信息，是需要被正常预览浏览的关键元素，要不然选择合适背景的图片，要不然就在文字下方叠加特定的色彩背景提高对比。

5.分割线

很多分割线使用的颜色过深，在画面中过于突兀和显眼（原设计也不合理，需要改掉）。

分割线在UI中的作用是一种视觉辅助，帮你隔开不同的模块。这条线只有存在潜意识能受到影响即可，而不是直接让用户去“感知”到的。

6.成果展示

还有个不是界面设计本身的问题，而是导出展示的问题，很多作业的最终效果会出现边缘不对齐、原图被裁切等各类细节错误。

这种错误源自轻视，这种轻视会在后面的作品集包装设计中充分暴露出来，大大降低专业性得评价。如果日常吊儿郎当习惯了，是不可能在你想细心的时候就细心得起来的。