虎课网为您提供字体设计版块下的有赞实时概况页2-从零开始学B端设计图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解有赞实时概况2-样式，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复。

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

1.在构建框架中关注的是页面标准元素的排列方式，以及内部割线切割的方法，现在的切割方式和后面用栅格的方法是不一样的，是有效的一种使用形式。

2.来输出完整的界面，结合Figma对应的功能，快速实现做视觉输出的操作流程。

3.把logo素材置入进来，处理下面的元素，导入第一个图标。

4.先确定一个背景区域，确定高度和宽度，给一个背景颜色。

5.把它复制到下面，关掉背景色，文字颜色浅一点。

6.把下面元素复制出来，再去修改间距，添加图标元素。

7.处理导航下面的图标，把元素添加进来，进行简单的排列。

8.做中间上方的内容，右侧是一些小标签，创建一个【Auto layout】。

9.加上圆角，再去修改里面的颜色，文字比背景色深一点。

10.设计右边的元素，标题文字后面加上小标题，搜索框加上图标。

11.下面的模块包含箭头图标和数字，创建一个【Auto layout】，后面的模块操作同理。

12.智能助手模块先调整间距，确定圆大致的尺寸，确定中间的圆环。

13.把圆环的背景加上，选中上面的图层，点击【Flatten selection】。

14.圆角为【0】，加上中间的数字和文字，后面的部分先画一个大框再画一个小框，加上文字，创建一个【Auto layout】，复制，调整间距。

15.下方是数据的陈列，下面是代做的事情，左侧给一个【Auto layout】，快速入口模块里面是有图片，上面有元素，下面加上图标和文字，进行复制，修改间距，右侧权重没有左侧高，文字权重降低，加上图片。本节课就到这里结束了，谢谢大家！

以上就是有赞实时概况页2-从零开始学B端设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！