点击观看课程视频

练习内容：

根据提供的网页主页截图，以及Figma的课程操作演示，完成该页的临摹练习（使用1440宽的画布即可）。如果完成第一页后还有时间，也可以继续完成 “卷王” 文件夹内提供的其它主页截图的临摹。

练习目标：

• 提升对Figma软件的熟练度
• 学习网页设计的基本结构和参数应用

额外要求：

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

导出点评：

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

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

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

练习素材：

问题总结

问题1：设计画布与尺寸定义认识

响应式网页的高度会随宽度有一定的比例缩放，如果我们设计的是1440 的宽，你们就不能在自己本地查看原官网用更大的画布时参照它们的模块高度。

网页模块之间更关注得是 “比例” 而不是固定的尺寸数值。

问题2：模块的内外间距设置

很多模块设计是没有认真关注卡片的间距的，不是过大就过小。

问题3：文本的字号和字重设置

文本的字号和字重设置是最严重的问题，网页的内容需要确保能被看清，而这类响应式主页的文本也是会随页面放大而有变化的，所以要尤其关注小字的字号。如果小字占比过小，那就等于不想让用户看。

字号应用也是优先关注比例的协调性，而不是用常规的字号硬套，所以一定要设计完后自己 “阅读” 一遍。

问题4：模块之间的对齐问题

在长页面中，上下模块之间是有联系的，那就是边缘对齐，不是每个模块各做各的。懂得怎么用栅格的话不容易出这种问题，不懂也没关系，起码养成习惯对边缘相近的模块可以画参考线去检查，不要出现边缘参差不齐的问题。

问题5：其它若干小问题

其它大的问题基本就没有了，主要是小问题，比如导航间距太挤还是底部设计不完整等等，属于只要注意是可以避免的问题。

最后还要强调一遍，虽然这次的练习主题很简单，但细节的错误大多不是技术的问题而是耐心和重视度的表现，这也恰恰是UI设计中最重要的基本能力。

除了基础的这个练手外，不少卷王学员已经开始尝试更进阶的案例练习，且完成更复杂的配图选填，篇幅关系只简单放几个。大家如果想要进步快，那么前期就应该采用这样的方式去练习。