欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

B站视频:av811254008
类别:UI设计
水平:入门
观众:1.2w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

本集讲师:@YY

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

获取本集课程课件及演示案例源文件,请访问👉 教程文件

什么是即时设计

即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具,为中国设计师量身打造,是 Windows 也能用的「协作版 Sketch」,它设计功能强大,能一站完成设计师所有需求。无论是多位设计师协同创作,还是产品经理随时随地评审、沟通反馈,或是研发人员查看实时更新的设计稿获取切图标注,都可得到满足。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

不受系统限制,打开浏览器即可开始创作,同时让设计师在工作中每一个步骤都能拥有更高效愉悦的体验。即时设计支持导入 Figma、Sketch、XD 等文件,无缝衔接以往工作内容;还可导出 Sketch 文件满足跨工具协作,并且所有功能都能免费使用。

本集简概

本集是即时设计系列基础教程第 4 集,本集讲师 YY 引用官方实例,为你讲解即时设计中引用组件功能的使用,包括组件的创建、管理和替换等,一起来学习一下吧~

编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程

1、组件的介绍

大家经常听到很多公司说我们要“组件化”,要制作自己的组件库。那么我们首先就要了解什么叫组件。

其实,组件就是页面的基本设计元素,例如一个 Button、一个 Input 等,可以在你的设计中反复使用,提升工作效率。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

引用组件和实例组件是一种类似父子级的关系。以官方页面卡片为例,选择一个引用组件对象-点击右侧面板中的 “编辑引用组件”按钮 或者 右键选择“编辑引用组件”选项,对页面定位到的引用组件选择 标题的样式修改 或者 图片修改,复制出来的实例组件也随之修改。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

选择一个实例组件,再对其进行样式的修改,可以发现其他组件并没有受到影响。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

引用组件和实例组件在页面的图标有所不同,大家可以注意一下菱形图标的变化。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

2、创建 & 管理组件

① 创建引用组件

在即时设计的工作台上,我们选择任意一个图层对象,可以通过多种方式创建引用组件(详见视频操作),大家可以根据自己的工作习惯进行选择。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

其中,通过快捷键 command / ctrl + option / alt + K 也可以实现“创建为引用组件”的操作,熟能生巧哦~

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

② 管理组件

引用组件是可以进行统一管理的图层模版,可以通过 快捷键 shift + 2 调出工作台左下角的设计库,我们创建的组件会自动归类到这里,方便我们及时查看、重命名、搜索、删除等。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换 即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

Tips:按照 “类别 / 组件名称” 命名的话,组件库会自动帮你进行类别归类,有助于整理你的组件库哦~

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

③ 创建实例组件

创建并复制 引用组件后,复制完的组件图标变成了蓝色线形的菱形图标,这就是实例组件。

可以通过 快捷键 command + C 复制,command + V 粘贴,也可以直接选择对象后 option + 拖拽 完成复制。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

我们也可以直接点击 快捷键 shift + 2,从引用组件库直接拖拽组件到页面中,也可以创建出一个实例组件。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

④ 分离组件

选择实例组件,在右侧属性面板替换组件下拉菜单中,选择 “从引用组件中分离” ;或者右键实例组件,选择 “从引用组件中分离” 即可。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

快捷键 command / ctrl + option / alt + B,分离后,实例组件成为普通组件,引用组件与实例组件的修改、推送等操作都将不再影响普通组件。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换 即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

⑤ 恢复引用组件

需要统一管理时,还可以恢复引用组件,具体操作是:选中实例组件,在右侧属性面板中点击 “编辑引用组件” ;或者右键实例组件,在菜单中点击 “编辑引用组件” 选项,这样引用组件又重新出现在画板中。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

⑥ 删除组件

删除画布中的引用组件,可以减少误操作对相关实例组件带来的影响。

需要注意的是,在引用组件库中删除引用组件,会彻底删除该引用组件,同时将相关实例组件全部变为普通组件,因此要慎重。

至于实例组件,可以随意在画板中删除,对其他组件不会产生任何影响。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

3、快速替换组件

我们在设计UI时,经常会有需要将部分组件替换成另一个状态的需求。比如:按钮的可点击态,在另一个面板下要显示不可点击态;或是一组列表做成引用组件后,除了修改文本内容外,还需要替换图标等。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

选中按钮,在右侧面板中点击实例组件的下拉菜单,选择需要的引用组件,即可替换为其他实例组件。

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换 即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

Tips:组件命名规范,可以让你通过类别迅速找到要替换的组件,提升工作效率哦~

即时设计基础教程!NO.04 组件使用(一)创建、管理、替换

第 4 课对 组件使用中的创建、管理、替换 的介绍就到这里,下节课我们将教你在即时设计中进行 组件使用中的编辑、变体、响应,敬请期待~

1 收藏 6

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片