虎课网为您提供字体设计版块下的即时设计-APP开屏页面（上）-UI零基础快速上手教程01图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解UI设计-零基础系列课程-即时设计，同学们可以在视频下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。

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

1.本次课程主要讲解UI软件【即时设计】，首款国内研发在线设计，【实时保存】支持跨平台操作，终身免费试用。

2.分享稿件带页面连线，画布不失真文本不折行，多款内置【插件】，官网网址：【js.design】-点击【广场】-【资源广场】，进入【组件库】。

3.【每周临摹】是官方开启的设计大赛，点击【最新功能】-【注册/登入】，【注册】方法：手机注册/邮箱注册，登入过账号点击【主页】-点击【前往工作台】。

4.【即时设计】可在线设计，也可下载【客户端】，客户端支持：MAC/Windows/Linux/Android APP/iOS App，即时设计还支持【飞书】。

5.进入【工作台】-点击【分享协作】-【分享】-【复制飞书分享链接】，也可以【邀请】飞书成员，课程会完整的带大家从【启动】-【新建】-【实时保存】-【绘制UI】-【交互】-【共享】学习一个案例。

6.切换到【工作台】-【创建新文件】-画布选择【375×812】-双击画布左上角-重命名【引导页】-复制画布【Ctrl+D】-重命名【登陆注册】，切换到画布【引导页】-右侧属性栏【设计】，背景色【填充】-色号【F0F0F0】。

7.点击【文本T】-【思源黑体/粗体/黑色/居中】，左下角点击【资源库】-选择【图标】-点击【添加广场资源】-选择【通用线性图标】-点击【引用】，回到【工作页面】-引用图标未显示点击【刷新】。

8.引用库里的图标全部是【SVG】格式，选择合适的【图标】拖拽进入画板，按住【Shift键】等比缩放图标，创建【文本】-输入【这是一个简单的案例】。

9.文本【思源黑体/粗体/黑色/居中/字号14】-字间距【15】，创建【圆】-按住【Shift键】拖拽-放置在画布右上角-复制圆【Ctrl+D】-等比调整大小放置在左下角-填充【黄色】。

10.创建【圆】-复制圆【Ctrl+D】-放置在文本处-复制黄色色号【EBAC2F】粘贴，全选【黄色圆】鼠标右键-【移至底层】，丰富画面。

11.选择【钢笔工具】-将耳机图标勾勒出来，【首尾相连】-点击【回车】-填充色号【EBAC2F】-关闭【描边】，框选中间元素鼠标右键【创建分组】，复制【Ctrl+D】拖拽到另外的画布。

12.创建【矩形】-圆角【30,30,0,0】-填充色号【EBAC2F】，创建【文本T】-参数【思源黑体/粗体/黑色/居中/字号35】-【左对齐】。

13.复制文本【Ctrl+D】-字号【20】-文本自动换行【固定尺寸】，将【文本框】长度拖拽到合适尺寸，【元素】位置微调，创建【矩形】圆角【33】制作【注册/登陆】按钮。

14.创建【文本T】-参数【思源黑体/粗体/白色/居中/字号18】，按住【Shift键】加选矩形，鼠标右键【创建分组】-复制【Ctrl+D】拖拽到右边编辑【文本/矩形填充色】。

15.最终效果如图示，【即时设计】文件是实时保存，同学们记得在视频下方提交作业图片，上传自己的作业哦！

以上就是即时设计-APP开屏页面（上）-UI零基础快速上手教程01图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！