source
cover

用 Constraints 功能制作自适应导航栏

面对层出不穷的屏幕分辨率,一份完美自适应的设计稿可以省去设计师不少重复劳动。Figma 中自带「Constraints」功能,该功能专为解决自适应这一需求而设计,类似 Sketch 中的「调整尺寸」功能。我们使用豆瓣电影小程序的导航栏作为实验,一起了解一下 Constraints 的实际操作。

教程相关

  1. 官方文档:戳这里

  2. 阅读时长:4分钟

  3. 操作时长:15分钟

  4. 教学材料:戳这里


第一步,了解定义

Constraints 功能让用户可以通过对图层 x 轴、y 轴布局方式的调整,实现图层按照一定的策略进行缩放,保障不同图层在页面不同位置的布局方式。Constraints 告诉 Figma 设计稿中的元素在用户拉伸他们的框架时应该如何响应,这让你轻松掌控设计稿在不同的屏幕尺寸以及设备上的效果。你可以为框架里的任何元素应用 Constraints。

  • 你可以为框架中嵌套的框架设置 Constraints;

  • 你可以为同一个元素同时设置 x 轴和 y 轴的 Constraints;

  • 你可以通过 Constraints 定义元素在可以滚动的原型长页面里是固定还是跟随滑动。

Constraints 的操作界面和展开选项如下图所示。

首先看一下 x 轴不同设置的实际效果和说明。

再看一下 y 轴不同设置的实际效果和说明。

Constraints 支持两种设置方式,既可以通过左侧可视化界面点选,也可以通过右边的两个按钮,点击展开菜单并选定。

第二步,图层分组

通过插入不同的图层,还原豆瓣导航栏上的各种元素。关于图层的插入在系列中其他教程有讲,欢迎补课。

然后将图层按照功能模块分组。

  1. 用于显示时间的叫做 Time,是 StatusBar 的一部分;

  2. 用于显示状态的叫做 Status,是 StatusBar 的一部分;

  3. 用于搜索的叫做 SearchBar;

  4. 用于显示页面标题的叫做 Title,是 NaviBar 的一部分;

  5. 用于放置小程序全局操作的叫做 NaviControl,是 NaviBar 的一部分。

第三步,设置 Constraints

我们为五组图层设定不同的缩放策略:

设置以后拉伸 Instance Component 可以发现 SearchBar 中的 Hint 部分拉伸异常,这是由于图层组嵌套的缘故,大组和小组在同样缩放时,对布局的要求不同。

我们针对产生冲突的 Hint 重新进行 Constriants 设定。

大功告成,效果如图。