欢迎访问自学路径

您尚未登录

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

点击登录

即时设计基础教程!NO.06 自动布局与响应式设计

时间:2022-05-09
B站视频:av896391583
类别:UI设计
水平:入门
观众:1.1w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

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

即时设计基础教程!NO.06 自动布局与响应式设计

本集讲师:@YY

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

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

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

什么是即时设计

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

即时设计基础教程!NO.06 自动布局与响应式设计

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

本集简概

本集是即时设计系列基础教程第 6 集,本集讲师 YY 向你详细介绍有关布局方面的内容,包括网格布局和响应式调整,一起来学习一下吧~

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

1、网格布局

添加网格布局,可以帮你统一文件中的图层间距、位置,让你更有逻辑地阐述设计细节。此外,设计过程中设定好布局模板后,可以直接复用,提高工作效率。

即时设计基础教程!NO.06 自动布局与响应式设计

① 创建网格布局

画板、引用组件、实例组件都支持单独添加网格布局。

快捷键 F 添加手机画板,然后添加网格与纵横向的布局样式,直接勾选需要应用的布局样式,即可对选中图层生效。

即时设计基础教程!NO.06 自动布局与响应式设计

网格布局有三种类型可以选择:纵向布局、横向布局、网格。其中,纵向布局和横向布局是设计响应式界面时的理想选择。

点击右侧属性面板的图标,可以进行 列宽(行高)、列数(行数)、间距、边距、颜色设置 等参数的调整。

即时设计基础教程!NO.06 自动布局与响应式设计

在设计图标等内容时,你还可以用网格帮你进行位置的校正、统一等。

选择添加网格布局的组件后,点击右侧属性面板中的网格图标,可以对 间距、颜色 进行设置,网格大小的单位为 px .

即时设计基础教程!NO.06 自动布局与响应式设计

② 显示/隐藏网格布局

如果你在文件中添加了网格布局属性,但审阅时又不想因此影响整体效果,可以选择左上角菜单栏的网格布局,然后去掉勾选。快捷键为 option / alt + G .

即时设计基础教程!NO.06 自动布局与响应式设计

③ 删除网格布局

在右侧属性面板的网格布局处选择“删除”,即可将画板内的布局清除。删除后再次进行添加时,添加为默认内容。

2、响应式调整

 响应式调整功能可以帮助我们智能调整组件大小。设置后,调整成不同的设备尺寸,都可以查看设计内容的适配效果,不需要按多种设备尺寸重新设计。

即时设计基础教程!NO.06 自动布局与响应式设计

① 设置响应式调整

每个组件或多或少都有部分组件是固定的,通过设置图标、图片、标题、文字之间的固定距离,即可实现响应式调整的效果。

即时设计基础教程!NO.06 自动布局与响应式设计

右侧面板中有水平、垂直两个方向的间距固定或缩放可供选择,大家可以分析元素之间的对应关系,不断调整尝试。

即时设计基础教程!NO.06 自动布局与响应式设计 即时设计基础教程!NO.06 自动布局与响应式设计

② 删除响应式调整

当我们不需要响应式调整时,直接点击旁边的删除即可。

即时设计基础教程!NO.06 自动布局与响应式设计

3、自动布局

① 添加自动布局

自动布局可以从代码层面实现一种更高级的布局。以下图的按钮为例,可以让按钮背景适应文字输入的长短,自动延伸变化。

即时设计基础教程!NO.06 自动布局与响应式设计

通过点击右侧面板,或者 快捷键 shift + A 均可快速添加一个自动布局效果。

即时设计基础教程!NO.06 自动布局与响应式设计

以图文卡片为例,即使设置了响应式调整,文字还是有遮挡或溢出的可能性,但自动布局就能实现更加灵活智能的调整。

即时设计基础教程!NO.06 自动布局与响应式设计

② 自动布局的具体设置

为卡片里除背景外的所有元素添加自动布局,然后设置背景填充,就会自动生成一个和内容相匹配的背景卡片。

即时设计基础教程!NO.06 自动布局与响应式设计

耐心为图片、文字、底部元素添加 自适应 自动高度 的效果,满足你对这个卡片变化的具体需求。

即时设计基础教程!NO.06 自动布局与响应式设计 即时设计基础教程!NO.06 自动布局与响应式设计

自动适应看似好用,但实际操作还是有一定难度。想要掌握每种参数的使用场景,唯有熟能生巧、不断练习,加油哦!

即时设计基础教程!NO.06 自动布局与响应式设计

第 6 课关于 自动布局与响应式设计 的介绍就到这里,下节课我们将教你在即时设计中进行 导出与标注 的操作 ,敬请期待~

1 收藏 4

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

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

复制本文链接
img

发表评论 已发布 1

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

支持键盘 ← → 键翻阅图片