虎课网为您提供字体设计版块下的XD-个人中心页设计和总结图文教程，本篇教程使用软件为Adobe XD，难度等级为中级拔高，下面开始学习这节课的内容吧！

本课教程的目的是掌握个人中心页的设计，了解个人中心界面排版方式与小程序的布局，喜欢的一起来学习吧。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一解答。

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

1.个人中心是用户基础信息和操作功能入口集合页面，有列表式、棋盘式、棋盘+列表。

2.个人中心有操作功能与个人信息，个人中心仅自己可见。个人主页是信息的浏览，用于别人观看。

3.列表式最常见的方式是左边图表，右边文字。一行一行的分隔开，它的特点是层次清晰，方便添加，信息直观。

4.列表式的缺点是不宜放太多，个人中心的页面有太多的列表，会很拥挤，使人视觉疲劳，层次划分不明显。

5.棋盘式的优点是操控方便与界面美观。点击的空间大，比较方便。

6.棋盘式的缺点是信息传达较弱，不利于扩展。文字不够明确，传达弱。

7.棋盘+列表是最常见的形式，它的优点是层次分明，信息丰富。

8.打开【XD】软件，导入【文件】，【Ctrl+D】复制页面，重命名【个人中心】，删除多余图标，选择【文件】，重命

名【底部】，在页面上输入【个人中心】，具体如图示。

9.使用【椭圆】，画出圆形。输入【W】110，【H】110，点击【居中】。取消勾选【边界】，【填充】D9D9D9，具体

如图示。

10.使用【文本工具】，输入【文本】，分别将文本进行修改与排版，具体如图示。

11.选择【个人中心】图标，复制【图标】，粘贴【图标】，具体如图示。

12.将【图片】素材拖动到【椭圆】中，复制【文本】调整【位置】，修改【文本】内容，具体如图示。

13.点击【矩形】，画出矩形，【填充】D9D9D9。再次画出矩形，调整【位置】，具体如图示。

14.再次使用【矩形】，画出矩形。调整【旋转】，具体如图示。

15.选择【文本】，复制【文本】，调整【位置】，调整【字体】位置，具体如图示。

16.选择【矩形】，画出矩形，调整【W】335，【H】90，点击【居中】，取消勾选【边界】，勾选【阴影】，具体如图

示。

17.按【Ctrl+Shift+[】移动到下层，调整【Y】0，点击【锁定】。点击【矩形】，画出矩形，调整【位置】。取消勾选【

边界】，具体如图示。

18.选择【文本】，复制【文本】，调整【位置】，输入【钱】符号，调整【大小】，具体如图示。

19.选择【矩形】，复制【矩形】，调整【位置】。使用【直线工具】，画出直线，进行排版，具体如图示。

20.使用【椭圆】，画出圆形，调整【位置】。【Ctrl+Shift+[】移动到下层，勾选【边界】，使用【直线工具】，画出直

线，具体如图示。

21.使用【矩形】，画出矩形。选择【矩形】，复制【矩形】，调整【大小】与【位置】，调整【圆角】2，具体如图示。

22.选择【矩形】，调整【圆角】2。使用【直线工具】，画出直线，使用【椭圆】，画出圆形，具体如图示。

23.选择【图表】，【复制】图表，调整【位置】。删除图表内容，使用【椭圆】，画出圆形，调整【填充】黑色，双击【

锚点】，按【Delete】删除，具体如图示。

24.选择【圆形】，调整【旋转】，使用【直线】，画出直线，选择【直线】，点击【圆角】，调整【位置】，具体如图

示。

25.使用【矩形】，画出矩形，点击【圆角】，按【Ctrl+D】复制，调整【旋转】，移动【位置】，按【Ctrl+D】复制箭

头，调整【位置】，具体如图示。

26.本课作业内容具体如图所示。

以上就是XD-个人中心页设计和总结图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！