Support | 微信 & TG: @scomper

Framer X 学习笔记(二)工作方式

2018.10.19 13:04

刚接触 Framer X 的时候还有点不适应,毕竟以前使用密度最高的是 OmniGraffle,OmniGraffle 是以对象为中心的绘图软件,新建文件就是一个空白的版面(画布),在这个没有「边界」的画布上可以自由的创建绘图对象,然后选择对象对其进行属性设定和操作。如果同样用来设计原型页面,既可以按版面、也可以使用 「画板」(Artboard) 来框选需要输出的范围。

Framer X 与 OmniGraffle 这类传统绘图软件不同,它是服务于原型输出的软件,使用观念上也有很大的不同,Framer X 的构图核心是一个个的框架(frame),顺序上是先有框架再有对象,大到输出单元的画板,小到具体的图标都是如此。

画布

新建 Framer X 文件,在 Framer X 界面我们看到的是灰色的画布,第一步要做的工作是绘制一个 Framer 框架,并以此为画板来承载更多的对象。

如下图所示,按 F 键进入框架绘制模式,可以直接在灰色的画布上绘制一个区域,或者直接在右侧向导栏里选择设备的尺寸。

简单的一个新建文件,已经让人感受到了原型绘图和普通绘图的不同, 原型绘图是布局为先,普通绘图是对象为先。框架是页面布局的基础,基于框架的嵌套和相对位置控制,可以约束对象在页面拉伸、变化时依旧保持版面内容的协调。这样能最大限度的实现设计稿的复用,便于快速适配不同分辨率的多种设备。

了解了框架的作用,就不难理解 Framer X 的工作流,前期更像是在纸上画草图的阶段,先勾勒一个个线框来体现大致的页面布局,然后补充线框内的元素和对象,最后用文本和图示补充说明和描述。落实到 Framer X 的具体绘图上,就是先定外围的框架(按设备或输出页面分辨率来设置),然后按照先大后小、由左往右的方式逐层绘制框架进行布局,布局完成后再补充细节元素。

Framer X 中框架是布局对象,如果要在框架内输入文本,需要添加独立的文本对象并移动到框架内。这一点和 OmniGraffle 等绘图软件不同,OmniGraffle 中矩形是绘图对象,所以可以直接双击添加文本。

坐标

基于框架进行布局的原型绘图中,还有一个和传统绘图软件不同的地方就是坐标模式的区别。

OmniGraffle 是以绝对坐标模式对视图进行定位,绘图对象的坐标基准是整个背景画布,对象的位置是基于版面原点来体现的,随便绘制一个对象,都能在「几何形状」中看到距离左边(X 轴) xx 像素,距离顶部(Y 轴) xx 像素。

Framer X 的坐标模式是相对于父框架的,框架内的对象以父级框架或者同级的其它对象为参照。例如,下图所示的 Logo,中间的图标部分上下(50)左右(60)的尺寸,都是相对于作为白色背景的父级框架而定的。

相对坐标模式保证了对象布局的相对稳定,在缩放时框架内部的对象可以一起变化。如上图示例中锁定(点亮蓝色的短线)了上下的位置,结果会怎样呢?当我们缩放白色背景的外围框架时,中间的图形会在高度发生变化时等比变化,但是宽度方向变化是则不会一起变化。

对象的定位上除了固定(Fixed)的尺寸,相对(Relative)百分比,还有弹性尺寸(Fraction),后面会结合具体案例具体介绍。

快捷

工具栏中展示了常用的操作的快捷热键,在键盘上按单个的字符就可以。布局操作有:F(框架)、U(圆角)、T(文本)、S(堆栈),交互操作有 L(连接)。移动画布和其它绘图软件一样,按住空格拖移。

工具栏快捷方式

工具
F 框架(Frame)
U 圆角(Round)
T 文本(Text)
S 堆栈(Stack)
L 连接(Link)
按住空格 & 双指拖移 平移画布

画布内容显示上,主要会用到的是缩放和选择对象,Framer X 目前只支持 12 级的缩放,10%、25%、50%、75%、100%、150%、200%、300%、400%、800%、1600%、3200%,习惯了 OmniGraffle 的无级缩放会觉的 Framer X 的缩放略显渣渣。

⌘9 可以帮助我们快速的缩放并定位到选中的对象,结合工具栏中的「图层」选择对象并缩放能提到操作效率。

画布的缩放操作热键和快捷键组合

查看
Z 缩放(Zoom)
⌘ + 放大(Zoom In)
⌘ - 缩小(Zoom Out)
⌘ 1 缩放以显示所有对象(Zoom to Fit)
⌘ 9 缩放到选中的对象(Zoom to Selection)
⌘ 0 缩放到 100%(Reset Zoom)

Framer X 里也可以进行矢量绘图,利用线条、矩形、圆形、多边形来完成绘制和形状拼合。拼合后的形状是可逆的,绘图模式中会以层级的方式来显示组成部分。Graphic 可以理解成是一个绘图框架,绘图前一样是先画框架,然后在其内部绘制图形。

绘图模式会列出所有当前文件的绘图对象,按 G 键或者双击已有的图形进入绘图模式。退出绘图模式点击左栏顶部的「Done」。由于 Framer X 的缩放和画布拖移很不平滑,所以在 Framer X 里绘图的体验并不好。

绘图模式下的操作热键

图形
G 图形框架(Graphic)
P 线条(Path)
R 矩形(Rectangle)
O 椭圆(Oval)
⌘G 群组(Group)
⇧⌘G 取消群组(Ungroup)

Framer X 通过图层(Layers)是组织和管理所有对象,以画布上的框架为一个组织单元。框架既是承载对象的容器,也是布局和输出对象的基本单位。Framer X 没有 OmniGraffle 中页的概念,灰色画布上相对独立的框架就是一个「页」,或者称之为「画板」(artboard),同一个画布上允许创建 N 个框架。框架绘制模式中,Framer X 会基于已有框架单元以灰色区域预判新框架的布局和位置,只需要点击就能快速的完成添加。

图层

图层
⌘ return 为选中对象添加框架(Add Frame)
⌘ ← 为选中对象移除框架(Remove Frame)
⌥ ⌘ ↑ 在图层中调整位置,前移(Move Forward)
⌥ ⌘ ↓ 在图层中调整位置,后移(Move Backward)

Framer X 为框架创建提供了很多智能化的操作,多个框架嵌套时,Framer X 会自动基于当前框架的位置变更其层级隶属关系,移动外围的框架就能移动它以及它包含的所有内部对象。拖移框架时,Framer X 会动态显示参考辅助线,帮助用户快速对齐。

由于 Framer X 的框架嵌套特性,所以操作交互上也有些区别。
例如,选择对象时,鼠标指针滑动高亮的往往是最外层的框架,要「穿越」外面的框架选择里面的对象,既双击鼠标,也可以按住 ⌘ 键点选。

⌘D,创建副本,布局时常用的操作,例如,堆栈中新增一个一样的对象,没有比选中对象后 ⌘ D 更快的操作。

⌥⌘C 和 ⌥⌘V 可以当格式刷来使用。快速选择同级对象或者子级对象可以用 ⇧⌘A 和 ⌥⌘A 组合键。

编辑操作经常用到的热键和快捷键组合

编辑
⌘ 箭头 对象尺寸调节(Object Size)
⇧ ⌘ 箭头 以 10 为递进值调整尺寸(Object Size by 10)
0 ~ 9 框架透明度(Opacity)快速设置 0=100% 2=20% 依此类推
显示间距(Show Distance),选中对象和鼠标悬停对象直接的间距(同层级或与父级框架的间距)
⌘ D 创建对象副本(Duplicate In Place)
⌥ 拖移 复制选择的对象(Duplicate Selected Object)
⌥ ⌘ C 拷贝样式(Copy Style)
⌥ ⌘ V 粘贴样式(Paste Style)
⌃ C 拾色器(Color Picker)
⌘ A 选择所有图层(Select All Layers),选择当前主框架内的所有未锁定(Lock)的图层
⇧ ⌘ A 选择所有与当前图层处于同级的图层(Select All Siblings)
⌥ ⌘ A 选择当前图层下的所有子图层(Select All Children)

组件

组件是 Framer X 让人最激动的地方,安装组件后直接拿来就用极大的提高了的效率,对于团队来说更是如此。为了熟悉可用的组件,花时间翻阅一下 Store 里的组件是很有必要的,感觉合用的收藏(Favorites)起来,节省后续使用的时间。

通过 Favorites 的次数和下载量可以对组件的受欢迎度有个判断。Framer X 的组件是随文档走的,所以用的时候才下载到文档中,另外需要注意的是,组件也涉及到一个 Framer Library 库更新的问题,Framer X 升级后可能会在打开文档时因为版本不兼容报错。所以,可供选择的组件虽然很多,还是要审慎的 Install 必要的组件,不要一股脑下载一堆可能用不到的。

组件很多都包含设定参数,可以进行一定的变化,例如图示中的菜单栏组件,可以调节主题色,自行填写菜单项。

下载的组件能进一步改造,存储成自己的组件。组件上右键 Copy Code 复制需要的组件的代码,然后点击组件栏顶部的 New from Code,为新组件取一个名字点击「Create and Edit」,Framer X 会关联打开系统内的代码编辑器,将复制的代码粘贴替换掉默认的代码,根据自己的要求可以修改代码并保存。

选择文档中的任何框架都可以右键 Create Component 将其存成组件,方便复用。

使用组件的过程中需要留意,组件有 Master 和 Instance 的主从区别,Master 的改变会同步到 Instance 组件上,反过来就不会。在 Master 组件的属性定义中可以勾选允许 Instance 组件自定义的部分,例如图示中 Message box 组件的三个 Text 文本。

Comments
Write a Comment