恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
有奖临摹 | 用自动布局设计界面
8.9°
原创文章 / 教程 / / 举报
1637 13 2 0

2021-11-24

在UI设计工作中,设计师总把大量时间花费在改动后的布局恢复调整上,设计师的高效率因此遭到埋没。「自动布局」功能可以帮助设计师提升界面搭建和修改速度,使响应式组件的落地沟通更为顺畅,解决实际应用的效率问题。让我们一起来学习吧!

为了鼓励大家积极学习,本次临摹活动,我们准备了丰富的奖品,有 Eagle 终身授权序列号 、Eagle 半价优惠码、蔬菜精灵玩偶等等 快叫上自己的小伙伴一起来参与吧!

视频教程:用自动布局设计界面

素材:界面素材

点击进入活动页面➝ 即时设计-每周临摹


自动布局介绍

「自动布局」功能是采用前端代码思维,将一组内容按照固定间距进行智能吸附,这样设计师在修改样式、替换内容、增删内容时,「自动布局」都会按照设置好的间距进行自动排布,无需逐个手动修改。


自动布局是什么?

⭐ 让设计师用前端代码实现的逻辑,通过配置内容间距、依附效果等属性,减少后续修改成本。

⭐ 增删列表内容、调整顺序,其他部分自动调整位置,实现自动化调整,不再需要重新排版整理。

⭐ 超强复用性,设置自动布局后,复用后的修改项仅剩了修改内容,其他的部分可自动适配。

 

创建条件

⭐ 「自动布局」可以添加到画板或者组件中。包括:新画板或空画板、已有内容的画板、组件和组件集、图层或对象的组。

⭐ 选中对象右键选择「自动布局」、快捷键 shift+A、两个对象或多个对象时点击右侧属性面板上的“+”即可创建。


排列方式

⭐ 自动布局框架的排列方式只有「横向」和「纵向」两种。

⭐ 「横向」表示水平沿 X 轴增删减重新排列对象,有「顶对齐、垂直居中对齐、底对齐」三种对齐方式;「纵向」表示垂直沿 Y 轴增删减重新排列对象,则有「左对齐、水平居中对齐、右对齐」三种对齐方式。

 

间距

⭐ 由于自动画板和普通画板的属性不同,生成自动布局画板后,无法再拖拽或使用智能布局调整间距,只能通过修改自动布局中的数值来改变间距。

⭐ 固定间距:即无论怎么拖拽画板,画板内项目间的间距固定不变。


⭐ 自适应:即画板内的各个项目间的间距跟随画板的尺寸进行调整,不再保持固定间距。并且在遵循边距及间距规则的情况下,容器将保持尽可能小的尺寸包围其所有项目。


⭐ 内边距是指画板内的项目到画板边界的距离,在右侧的属性面板中可以统一设置项目到画板的间距值。


⭐ 通过修改独立边距调节项目到画板四个边的间距。


 

 

固定高度和宽度

⭐ 「固定宽度」、「固定高度」对应的是画板的边界,包含「自动」、「固定」和「自适应」三种设置。

⭐ 当自动布局画板被设置为「固定宽度」或「固定高度」时,当修改内部项目尺寸时,画板本身的尺寸始终保持不变。

⭐ 当自动布局画板被设置为「自动宽度」、「自动高度」或「自适应」时,当修改内部项目尺寸时,自动布局画板则随着项目的变化而变化。


自动布局教程

本期教程的重点内容是教大家怎么使用「自动布局」,帮助设计师们减少繁琐的重复修改步骤,修改图层数量、位置、尺寸等样式后都可自动调整周边内容。帮设计师们节省时间,让开发秒懂适配,更多内容可查看教程最后的链接。


banner图

⭐ 功能点:排版上banner是由文本和进度条上下结构组成的「纵向」的自动布局(可在「自动布局」介绍中了解详情)。通过自动布局希望卡片的高度随着文本和进度条的间距变化而变化。


新建画板尺寸为:375PX ^ 812PX ,或用快捷键「A」在右侧面板中选择iPhoneX / iPhone11Pro直接创建画板,把素材状态栏和搜索置于顶部。

 

创建两行文本,同时选中文本右键选择「自动布局」或者快捷键「Shift+A」,设置参数如下图所示。


先绘制一个233px^10px的矩形,调整圆角,颜色填充为白色,降低不透明度,再复制一个矩形,调整尺寸,不透明度调整为100%,同时选中按快捷「command+potion+G」创建画板;再输入文本,再次选中进度条和文本创建「自动布局」。

 

调整好文案和进度条的位置,再为他们创建一个327px^122px的画板当做卡片背景,再为卡片添加阴影,目的是让banner更有层次感,阴影参数为:颜色填充#9B61FF,不透明度为25%,0、10、15、0;


接下来丰富一下banner的版面,选择素材置于banner画板内放置于合适位置,勾选超出画板隐藏,这样画板外的内容就被隐藏掉了。


⭐ tips小提示:当「自动布局」中的方向选择「横向」的方向时,对齐方式中的「左对齐、水平居中对齐和右对齐」对该项目不会起任何调整作用,只能通过「顶对齐、垂直居中对齐和底对齐」这三种对齐方式调整,选择「纵向」时正好相反,大家都可以通过项目实践一下,教程中的数值参数不是固定的,只是参考,大家可以根据自己的偏好进行设置调整。

 


金刚区

⭐ 功能点:此版块是有四个小模块组成,金刚区的宽度是固定的,添加或删除小模块,他们之间的间距会自动调整,无需我们再次手动调整间距,这时就需要用上「间距」中的「自适应」功能了。



大家可以根据上期的临摹教程进行举一反三来绘制图标,也可以用我们提供的图标来做绘制金刚区;每个小模块有图标和文本两部分组成,属于上下结构,选中图标和文本,创建「自动布局」,属性参数如下图(选中图标画板尝试拖动改变尺寸大小,文本会有位移变化,但是和图标的间距始终是不会改变的);


把其他三个图标进行以上操作,再同时选中创建自动布局,属性如下图;


⭐ tips小提示:宽度W375是根据画板的宽度设置的,属性中已设置到左右两边的间距为24,也就表示,无论这个框架内有几个项目,左右两边的间距始终是24,项目之间的间距会根据项目的多少而自己设定,这就是「自适应」的功能。

 

  

文件夹

⭐ 功能点:文件夹部分是有三个项目左右排列组成,和金刚区唯一的不同就是文件夹部分只需要固定左侧的间距,这样是为了让这部分有一个可以左右滑动的交互功能。

调用我们提供的图标素材,自己绘制文件夹图标也可以,再创建两行文本并使用快捷键「command+potion+G」使文本变成一个画板,选中图标和文本画板创建「自动布局」,属性参数如下图;


复制出来两个文件夹卡片,修改文件夹名称和文档数量,全选三个卡片创建「自动布局」,使三个卡片变成一个整体画板;


创建「文件夹」文本标题,再把标题和文件夹画板选中,创建「自动布局」,属性参数如下图;


⭐ tips小提示:增加或删除某个卡片,卡片之间的间距都不会改变,文件夹整体距离画板左侧的间距是固定不变的,无论文件卡片是增加还是减少,标题和卡片始终保持在固定位置度。

 

最近列表

⭐ 功能点:每条列表内容可以当做是有图标、文案内容和行为点构成的「横向」自动布局,行为点是固定不变的,这部分变化的只有文案里的文本信息。

 


创建两行文本,全选文本创建「自动布局」,属性参数如下图;


选中自动布局中的文本,每个文本都设置为「固定宽度」为247,当文本的宽度超过这个数值时会自动折行,但文本之间的间距还是固定的;


绘制一个行为点图标,再为此图标创建16px^16px的画板,再次选中视频图标、文本和行为点图标创建「自动布局」,属性参数如下图;


复制两个列表,更换图标、颜色和文本信息,再全部选中创建「自动布局」,属性参数如下图;


创建标题文本,全选标题和列表项,创建「自动布局」,属性参数如下图;


⭐ tips小提示:增加或删除某个列表项,列表之间的间距是不会改变的,修改文本里的内容,当文本宽度超过设置的数值时文本会自动折行,行为点还是固定不变,文本和图标始终保持居中的状态,列表项的间距也无需手动调节。

教程看到这里,大家对「自动布局」是不是已经有初步了解了,接下来底部导航栏要靠大家自己动手了,图标已为大家提供,小小的提示,底部导航栏用到的自动布局功能点和金刚区的是相似的,大家举一反三操作一下吧!


Powered by Froala Editor

即时设计

国内首款专业级 UI 设计工具

  • 53

    作品

  • 444

    粉丝

  • 17

    关注

  • 200 个画板流畅操作不卡顿!即时设计性能大提升!
  • 有奖临摹 | 虎年 IP 形象设计
  • 有奖临摹 | 新年幸运签设计
  • 重磅功能「共享设计库」上线!让设计资产实现超高效复用!

猜你喜欢

    即时设计

    即时设计

    国内首款专业级 UI 设计工具

    助人为乐
    • 444

      粉丝

    • 372

      人气

    • 1992

      颜值

    作品

      即时设计

      点赞:2

      收藏:13

      评论:0

      有奖临摹 | 用自动布局设计界面

      你确定要举报有奖临摹 | 用自动布局设计界面

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年11月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验