虎课网为您提供字体设计版块下的【UI进阶】-主页头部和广告位设计图文教程，本篇教程使用软件为Sketch（63.1），难度等级为中级拔高，下面开始学习这节课的内容吧！

本篇教程学习的是第23课 详情页设计，喜欢的一起来学习吧。

那我们开始今天的教程吧。

1.详情页专门展示当前页面的具体内容，线上对这些内容进行排版的样式，这一类型的页面设计起来非常标准。

2.顶部是操作，中间的区域可以放图片或视频，中间元素是左右滚动的幻灯片。

3.很多时候界面上看到的东西，并不是真实的UI设计元素，无论是价格还是标题，是动态的元素。

4.展示的图片并不是UI元素，它是图片里面本身的信息，价格是UI元素。

5.再往下是价格、标题、简介文字的小模块，不同的商品分类，对模块上的呈现有一些大的差异。

6.下面的内容，根据模块的需要进行添加，再往下是商品的详情页或评价。

7.再往下是商品推荐，底部是加入购物车，添加上面模块。

8.添加图标，下面添加图片，模块之间是有区分的。

9.下面是标题、副标题、价格，价格文字更大，把简介模块处理出来。

10.使用分割线将上下切割，下面使用其他的模块制作，增加识别性。

11.做规格的选择，做电商细节要考虑到，给用户提供的便利和优惠进行强调。

12.再往下是商品详情，添加图片，下面是用户评价。

13.加入一些元素，下面评价可以做2-3条，或者左右排列。

14.也可以加一些标签，最后是推荐商品，添加图片。

15.底部设计是在上方做一个模块，添加元素，加上图标。本节课到这里就结束了，谢谢大家！

以上就是【UI进阶】-主页头部和广告位设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！