本集讲师：@YY
获取海量免费设计资源，请访问👉 资源广场
获取本集课程课件及演示案例源文件，请访问👉 教程文件
即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具，为中国设计师量身打造，是 Windows 也能用的「协作版 Sketch」，它设计功能强大，能一站完成设计师所有需求。无论是多位设计师协同创作，还是产品经理随时随地评审、沟通反馈，或是研发人员查看实时更新的设计稿获取切图标注，都可得到满足。
不受系统限制，打开浏览器即可开始创作，同时让设计师在工作中每一个步骤都能拥有更高效愉悦的体验。即时设计支持导入 Figma、Sketch、XD 等文件，无缝衔接以往工作内容；还可导出 Sketch 文件满足跨工具协作，并且所有功能都能免费使用。
本集是即时设计系列基础教程第 6 集，本集讲师 YY 向你详细介绍有关布局方面的内容，包括网格布局和响应式调整，一起来学习一下吧~
编者按：图文内容简概为视频内容的提炼总结，想要了解详细教程内容，请观看文章顶部完整的视频教程。
添加网格布局，可以帮你统一文件中的图层间距、位置，让你更有逻辑地阐述设计细节。此外，设计过程中设定好布局模板后，可以直接复用，提高工作效率。
画板、引用组件、实例组件都支持单独添加网格布局。
快捷键 F 添加手机画板，然后添加网格与纵横向的布局样式，直接勾选需要应用的布局样式，即可对选中图层生效。
网格布局有三种类型可以选择：纵向布局、横向布局、网格。其中，纵向布局和横向布局是设计响应式界面时的理想选择。
点击右侧属性面板的图标，可以进行 列宽（行高）、列数（行数）、间距、边距、颜色设置 等参数的调整。
在设计图标等内容时，你还可以用网格帮你进行位置的校正、统一等。
选择添加网格布局的组件后，点击右侧属性面板中的网格图标，可以对 间距、颜色 进行设置，网格大小的单位为 px .
如果你在文件中添加了网格布局属性，但审阅时又不想因此影响整体效果，可以选择左上角菜单栏的网格布局，然后去掉勾选。快捷键为 option / alt ＋ G .
在右侧属性面板的网格布局处选择“删除”，即可将画板内的布局清除。删除后再次进行添加时，添加为默认内容。
每个组件或多或少都有部分组件是固定的，通过设置图标、图片、标题、文字之间的固定距离，即可实现响应式调整的效果。
右侧面板中有水平、垂直两个方向的间距固定或缩放可供选择，大家可以分析元素之间的对应关系，不断调整尝试。
当我们不需要响应式调整时，直接点击旁边的删除即可。
自动布局可以从代码层面实现一种更高级的布局。以下图的按钮为例，可以让按钮背景适应文字输入的长短，自动延伸变化。
通过点击右侧面板，或者 快捷键 shift + A 均可快速添加一个自动布局效果。
以图文卡片为例，即使设置了响应式调整，文字还是有遮挡或溢出的可能性，但自动布局就能实现更加灵活智能的调整。
为卡片里除背景外的所有元素添加自动布局，然后设置背景填充，就会自动生成一个和内容相匹配的背景卡片。
耐心为图片、文字、底部元素添加 自适应 或 自动高度 的效果，满足你对这个卡片变化的具体需求。
自动适应看似好用，但实际操作还是有一定难度。想要掌握每种参数的使用场景，唯有熟能生巧、不断练习，加油哦！
第 6 课关于 自动布局与响应式设计 的介绍就到这里，下节课我们将教你在即时设计中进行 导出与标注 的操作 ，敬请期待～
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 快来秀出你的观点