其他教程 2022年05月8日
0 收藏 0 点赞 722 浏览 1455 个字
摘要 :

本集讲师:@YY 免费使用即时设计,请点击右侧链接👉 即时设计 获取海量免费设计资源,请访问👉 资源广场 什么是即时设计 即时设计是一款全平台覆盖、可云端编辑的专业级……

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

本集讲师:@YY

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

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

什么是即时设计

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

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

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

本集简概

本集是即时设计系列基础教程第 5 集,本集讲师 YY 为你详细介绍引用组件功能的使用,包括组件的编辑、推送重置属性和变体,千万别错过~

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

1、组件的编辑和定位

① 编辑组件

修改引用组件中的属性,比如字体、颜色等,发现所有的实例组件也跟着一起修改。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

修改实例组件中的属性,发现只对自身组件内容生效,这时候,你再去修改引用组件的属性,发现被修改过的实例组件已经不受引用组件的影响了。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

② 定位引用组件

引用组件和实例组件之间其实是一个父子关系。那么,如果你的可见视图中找不到哪个是引用组件怎么办呢?

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

最简单的方法是看它们所在图层的小图标,不同类型组件之间有着显著区别。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

选中任意一个实例组件,在右侧的属性面板中点击“编辑引用组件”,也可以快速定位。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

此外,还可以选中任意一个实例组件然后右键,点击“编辑引用组件”。这两种方法都可以快速帮你定位,可以按需选用。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

2、推送 & 重置属性

如果一不小心修改了实例组件的样式,后悔了想继续和引用组件保持一致怎么办?这里我们就需要用到“推送属性”和“重置属性”功能。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

① 推送属性

“推送属性”可以将引用组件的属性值更新为该实例组件的属性,且将对所有未独立编辑过的实例组件生效。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

② 重置属性

“重置属性”可以将实例组件当前的样式属性恢复为引用组件属性,继续跟随引用组件发生变化。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

3、变体的介绍

右侧的属性栏中有一项功能叫变体,那什么是变体呢?即时官方的说明如下。

举例来说,使用变体可以切换不同机型“开关”的开启、关闭状态,直接通过右侧属性面板选择切换即可。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

① 创建变体

选中一个引用组件,在右侧属性面板中点击“添加”即可完成创建。添加完后还可以在画板中点击加号,继续添加。

为了方便设计师快速对变体的引用组件进行管理,添加变体后,会自动根据引用组件的命名设置变量分类和变量值,所以大家要养成及时命名的好习惯。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

变量分类是变体中所有变量值的集合,将相同类型的变量值放在同一个分类下,可以帮你最大化地减少信息干扰,快速清晰地定位单项内容。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

变量值是指在变体各个分类中都有独立对应的属性值,每项变量值都具有唯一性,可以通过选择不同的变量值,快速定位至某项内容,完成替换。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

在变体中,随时可以对引用组件进行编辑,如新增、删除等,完全不用担心创建变体后无法修改。另外,还可以通过拖拽引用组件移入、移出变体。

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

② 使用变体

创建完变体后,有两种使用方法:

  1. 将变体中的引用组件拖拽至画布编辑区,即可直接使用
  2. 从引用组件库中,直接拖拽组件至编辑区使用(变体组件在引用组件库右上角有特殊的蓝色标识

即时设计基础教程!NO.05 组件使用(二)编辑、变体、响应

第 5 课关于 组件使用中的编辑、变体、响应 的介绍就到这里,下节课我们将教你在即时设计中实现 自动布局和响应式设计,敬请期待~

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/47133.html

相关推荐
佳选
【字体设计】品牌标准字怎么设计?
从设计的角度来分析如何快速抓住品牌和企业的调性,从而确定标准字体的具体设计方向和形式。 小可爱们,我这里会定期推送插画、UI设计、排版等相关…
日期:2022-05-27 点赞:93 阅读:4,039
精选
5个超酷的标题设计技巧,So easy!
优秀的标题设计除了可以把标题中的信息清晰传达之外,还要与画面的风格相符,并且能使画面整体更加美观和更有设计感。5个标题设计技巧分享给你。 小…
日期:2022-05-26 点赞:236 阅读:1,402
优质
Blender实战案例教程!卡通小狐狸角色建模:01 基础形建模
教程作者:DesignHunting(授权转载) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 关于教程 本期的 IP 角色设计案例,手…
日期:2022-05-23 点赞:0 阅读:839
精选
即时设计基础教程!NO.12 即时设计综合使用技巧
本集讲师:@YY 免费使用即时设计,请点击右侧链接👉 即时设计 获取海量免费设计资源,请访问👉 资源广场 什么是即时设计 即时设计是一款全平…
日期:2022-05-23 点赞:0 阅读:474
精品
造字神器 Glyphs 教程!字体设计系列教程 NO.10 背景图层
教程作者:杨洋(极致设计平面设计实战营讲师) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 软件介绍 Glyphs 3 是一款 Mac …
日期:2022-05-23 点赞:0 阅读:1,006
佳选
PPT教程!让PPT更有设计感的30种绝佳方法(第6期)
教程作者: 老Lin(授权转载自公众号:一六视觉) 交作业:#极致设计每日作业# 关于教程 如果你也想让PPT能眼前一亮,演示时被更多人认可…
日期:2022-05-23 点赞:0 阅读:446
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站