刚接触 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 文本。