点击此处返回
未登录用户
每日可免费学习1个教程
牛MO王
关注人数：3119
1.UI基础知识UI的起源与历史演变-UI/UX设计系列课
2.UI专业术语认知-UI/UX设计系列课
3.UI的设计工具-UI/UX设计系列课
4.UI的适配和规范-UI/UX设计系列课
5. UE/UX用户体验设计基础认知-UI/UX设计系列课
6.App界面设计实战之准备工作-UI/UX设计系列课
7.App界面设计实战之登录页面-UI/UX设计系列课
8.App界面设计实战之钢笔和锚点-UI/UX设计系列课
9.App界面设计实战之首页布局-UI/UX设计系列课
10.App界面设计实战之图标设计-UI/UX设计系列课
11.App界面设计实战之磨砂玻璃图标-UI/UX设计系列课
12.App界面设计实战之线性图标-UI/UX设计系列课
13.App界面设计实战之图片文排版-UI/UX设计系列课
14.详情页之自动布局和图片比例规范-UI/UX设计系列课
15.详情页之组件变体和标题布局-UI/UX设计系列课
16.详情页之批量文本列表制作-UI/UX设计系列课
17.详情页之购买按钮设计规范-UI/UX设计系列课
18.个人中心设计-UI/UX设计系列课
19.社区答疑页之Feed流页面-UI/UX设计系列课
20.社区答疑页之竞品规范分析及规格制定-UI/UX设计系列课
21.社区答疑页之多交互状态-UI/UX设计系列课
22.社区答疑页之用户内容变体属性-UI/UX设计系列课
23.社区答疑页之用户内容填充插件-UI/UX设计系列课
24.入门交互设计-UI/UX设计系列课
25.设计目标与设计策略重构原型-UI/UX设计系列课
26.学习界面设计-UI/UX设计系列课
27.消息中心界面-UI/UX设计系列课
28.我的关注界面-UI/UX设计系列课
29.搜索界面-UI/UX设计系列课
30.缺省页设计-UI/UX设计系列课
31.AI矢量软件设置及基础知识-UI/UX设计系列课
32.缺省页无下载页面-UI/UX设计系列课
33.缺省页无订单页面-UI/UX设计系列课
34.缺省页无信号页面-UI/UX设计系列课
35.成就勋章情绪板-UI/UX设计系列课
36.勋章页面流程图梳理-UI/UX设计系列课
37.成就勋章的轻拟物材质底设计-UI/UX设计系列课
38.轻拟物风奖杯勋章设计-UI/UX设计系列课
39.轻拟物旗子勋章设计-UI/UX设计系列课
40.司机勋章设计-UI/UX设计系列课
41.我的成就界面-UI/UX设计系列课
42.勋章详情界面-UI/UX设计系列课
本节课讲解 - 2.13 个人中心设计，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。
课程核心知识点：布尔运算图标设计、蒙版、个人中心布局。
那我们开始今天的教程吧。
1.我们打开Figma，首先我们在设计图中想好我们所要的布局，例如哪个图标放在什么位置，布局完成后我们就可以开始制作了，如图所示。
2.首先我们将之前做好的分类栏复制并粘贴到设计图中，选择右侧的【效果-投影】设置投影的颜色为灰色，降低其不透明度至10%，如图所示。
3.接下来我们制作顶部，使用【矩形 快捷键：R】在顶部绘制一个矩形，按住Alt键调整矩形的直角，向上拖动制作出圆角效果，如图所示。
4.为上一步绘制的矩形【填充】黄色，使用【矩形 快捷键：R】绘制64*64像素的矩形，将矩形进行居中对齐，如图所示。
5.选择上一步绘制的矩形，设置角度为8度，选择右侧的【填充-图片】上传一张头像图片，点击右侧的加号为矩形【填充】一个淡黄色作为背景，如图所示。
6.为了与背景进行区分，我们在右侧描边部分添加一个2像素的白色描边，添加【投影】设置Y轴为8、模糊为16，具体如图所示。
7.接下来我们在头像的下方输入名字与学号，降低学号图层的不透明度为30%，具体如图所示。
70000+教程，每天免费学一课
打开APP，离线免流量
