Support | 微信 & TG: @scomper

Framer X 学习笔记(三)Stack

2018.11.02 14:00

熟悉新软件最有效的方式,就是把它带入到工作流程当中。分析范例可以对功能模块有个基本的认识,但是要理解软件的使用逻辑,动手操作才更有体会。菜单项中不明确的点、操作不顺畅的地方、重复性的操作是否有快捷方式、如何快速在对象之间切换、属性设置项改变的是什么等等。

为了制造需求,用 Framer X 复刻了一个 macOS 的启动台界面,顺便用来整理自己安装的所有应用。这个部分主要是为了熟悉 Framer X 中堆栈(Stack)的使用,实现图标之间的排版、对齐和移动,了解堆栈的参数对结果的影响。

绘制一个 Framer

首先创建一个 MacBook Pro 分辨率的框架,右侧的 Framer 向导页面提供了很多设备的尺寸,直接选择一个。

接下来添加一个新的框架做桌面背景,为什么不直接修改 Apple MacBook Pro 这个框架呢?单独建一个新的背景框架是为了后面创建其它页面时能复用,将包含桌面壁纸的框架设置为「组件」,这样其它页面都可以共用,但是修改 Master 的组件,关联的对象会统一修改。

还有一个原因是层级关系,Apple MacBook Pro 是父级框架,它处于所有子对象的最上方,如果为它添加滤镜会影响所有包含的对象。

针对壁纸对象,利用 Framer 的滤镜工具添加一些效果,降低亮度、添加模糊效果,以便突出后续添加的 App 图标。

添加 App 图标

桌面创建好以后,在添加图标之前需要明确一些尺寸,例如每个图标占据的空间大小、图标的大小。要获得这些数据简单的方式是截取一张屏幕的截图,然后在 Framer X 中测量一下。

将截屏图片粘贴为一个新的框架,调整到和现有框架一样的大小,接下来就可以随意在图片上绘制一个框架用来测量图标和图标所占的空间大小,因为不需要很精确,可以取一个整数值。例如:单元空间大小 170×150、图标大小 90。

有了参考的尺寸接下来开始添加 App 图标到页面当中。
打开 Finder 在应用程序文件夹的 App 上右键,选择「显示简介」,选中简介中的 App 图标 ⌘C 复制,然后回到 Framer X 的页面粘贴。调整一下图标的尺寸,留意图标的图层位置。

图片粘贴到 Framer X 会自动创建一个包含它的框架,所以在左侧的图层列表中,图片也将以 Frame 的方式体现。所有的框架会安装当前所处的位置自动隶属于外围的框架,移动外围的框架同时就移动了包含的所有对象。通过 Lock 可以锁定对象的位置。

用 Stack 来组织对象

堆栈(Stack)中包含的对象会自动排布和对齐,我们将用这个特性实现图标和软件名称的统一自动布局。

可以选择先画 Stack 框架,然后将对象移动它的里面,也可以先创建对象,然后绘制一个 Stack 把对象框进去。Framer X 框架会根据位置自动确定其层级关系。

Stack 有几个重要的属性:堆叠方向、分布方式、间距和边距,其中分布方式中比较不好理解的是两端对齐(Space Between)、两侧间隔相等(Space Around)、平均间隔(Space Evenly)。图示展示了这三种分布方式的差异,橙色的是 Stack 的框架,绿色块是它包含的几个对象。


技巧:Stack 中复制同级对象的快捷键是 ⌘D

间距(Gap)调整的是堆栈中对象之间的间距,演示中是软件图标和软件名称之间的距离。边距(Padding)是父框架和子框架之间的距离,默认是对齐方向的调节,点选虚线框图标后可以单独调整四个方向的边距。

Stack 的嵌套

Stack 和 Frame 一样支持多层的嵌套,有点像 Group,不同的是它会对 Group 的对象进行自动排布。

示例中每个图标是一个 Stack,包含 App 图标和软件名称的文本,绘制一个更大的 Stack 将这些图标都框选起来,绘制好的瞬间图标都自动完成了排列。接下来可以调整一下它的尺寸,需要注意的是高度方向的数值,外面的框架如果比里面的对象高度还小,会裁切(不显示)掉超出的部分。

靠近边缘的软件名称如果过长,就会遇到这种情况,超出外围框架的部分被切掉了,通过这种情况,一种方式是调整外面框架的大小,另一种方式是选择外面的框架右键菜单选择 Unclip。

多层嵌套时需要明确每个 Stack 框架的布局方向,例如,示例中框选每一行的 Stack 分布方向是横向,而最外围框选多个行的 Stack 分布方向则是纵向。拖移 Stack 中的对象时也能感受到这一点。

多层框架嵌套还会遇到内外框架尺寸不一致导致的裁切问题,例如,个别软件名称过长会超出外部的框架,要显示超出的部分可以选择外部框架选择 Unclip。

测量和间距

处于嵌套内部的框架,为了更好的控制尺寸,Width 宽度可以设置为 1fr(弹性尺寸(Fraction)),这样缩放外围的框架时内部的框架会保持同步。除了具体的图标设定固定的尺寸,用于布局的框架用相对尺寸更好综合控制,这样会不用一个一个一层一层的去查找和调整尺寸。

按住 option 键点选其它框架测量它们之间的距离。另外,必要的时候通过插入框架来控制间距,把「空白」要当成一个具体的对象来处理。例如,图标和软件名称的空间计算了它周围的间距,最小的宽度应该能容纳软件名称的长度,同时又和其它 app 图标保持距离。

字体的两种控制方式,Auto 拖动控制点直接缩放字体大小,Fixed 缩放的是框架大小。

绘制搜索框

搜索框是最基础的一个界面元素,一个圆角矩形、一个图标、一个文本就可以构成。
Framer X 的组件商店里提供了专门的图标组件,将组件拖入到需要的地方,然后搜索图标的名称、设定大小就可以。不过实际使用中还是喜欢从自己的图标库(Iconjar,管理 icon 的应用)里搜索,速度更快也更熟悉。

首选 svg 格式的矢量图标,直接复制粘贴到 Framer X 当中,调整一下大小和颜色即可。

同样,为了自动排列图标和搜索的文本,用 Stack 把它们 Group 到一起,调整一下分布和对齐方式。

创建图标组件

Framer X 中遇到重复工作的时候,首先想到的就是可不可以用组件来完成。这对于后面可能的改动来说非常有帮助。

举例来说,添加了一堆图标以后,如果想改变一下软件名称的字体大小或者颜色,在 Framer 里是比较麻烦的,它没有 OmniGraffle 那样按属性或类型快速全选的途径,只能一个个在图层列表中选择并修改。

创建组件必须基于 Framer 的框架,所以如果是 Stack 的堆栈还需要先给它套一层 Framer,然后右键「Create Component」。

组件 Master 和 Instance 之间有个主从关系,Master 改变会影响 Instance,但是反过来 Instance 改变不会影响 Master,而且 Instance 还可以断开和 Master 的关联变成一个普通的对象。组件定义时可以选择那些元素允许修改。

演示中还示范了另一下快速提取 App 图标的方式,利用 Alfred 上的 Icon Extractor for OS X Apps Workflow 实现的,虽然是 2013 年写的 Workflow,如今依旧好用。

激活 Alfred 的输入栏后,输入关键词 icon 定位到 app 回车,图标会自动命名并保存到桌面。当然除了 Workflow 的方式,也有专门的 App 可以完成,比如这个 Crunch($9)就可以从 macOS 和 iOS app 中批量提取和导出资源,不过是收费软件。

Comments
Write a Comment