Support | 微信 & TG: @scomper

Framer X 学习笔记(一)概览

2018.09.27 12:34

设计一款应用之前,通常都会用到软件界面设计工具,以便把软件的样子和基本使用流程展现出来。行业里习惯把这个过程称之为「原型」化。最简单的方式是用纸和笔绘制草图,勾勒一下产品的样子,结合语言描述来实现更有效的交流。比草图再进一步就会用到设计类的软件,绘制出更具体的可以互动的界面形态。

按照不同阶段的原型绘图要求,可以用于绘制的软件很多,例如:Microsoft Visio、Axure、OmniGraffle、Sketch,一路学习这些软件的同时,能感受到设计工具在不断演进,通用型软件和专业型软件之间的分野越来越明显。绘制图示、平面图这些 Visio、OmniGraffle 是好的选择,但是具体到原型设计领域,Sketch 和 Framer 这些专门的软件更让人得心应手。灵活的框架和嵌套、模块化和可复用的组件、一对多的输出设定、动态内容生成、团队协作等等。针对性的功能点不仅提高了效率,还营造出了一种设计生态,不必所有的工作都从 0 开始,基于前人的分享,我们有了更高的起点。

最新推出的 Framer X 融合了很多原型设计方面的需求,官网的特性介绍也让人眼前一亮,设计师可以像搭积木一样快速的搭建一个原型并进行输出。内置的组件商店使得 UI 组件得到了规范和统一,同时也加速了原型构建的速度,因为有了这样一个分享的平台,相信未来 UI 组件模组会越来越丰富。

Framer X 的另一个目标是提高设计成果在开发层面的复用,UI 组件都是基于 React 和 TypeScript 来实现,一方面设计师通过代码的方式可以创造出更丰富的效果,另一方面代码层面的输出使得 Framer X 有一个面向开发的好结果,虽然代码的质量和开发要求还有距离,但对于设计师和开发人员的协作是一个巨大的进步。

快速概览

Framer X 官网有其特性介绍的几个基础视频(https://framer.com/resources/),分别介绍了 Layout Tools(布局工具)、Components(组件)、Interactive Tools(交互工具)、Store(商店),热心的网友还提供了一个「Framer X 官方视频教程(中文字幕)」的版本。

通过视频我们能快速的对 Framer X 有一个概念,知道它能做什么,有些什么新特性

如果已经安装了 Framer X(14 天试用期),软件的欢迎页面上也提供了教程和视频的入口,Tutorial 教程会引导用户一步一步的认识它的基本特性。

Docs 指向的是详细的在线帮助 ,更详细的介绍了软件的功能和快捷键。

界面

Framer X 的界面和我们熟悉的大多数设计软件类似,三栏结构,依次是功能模块区、画布区域和属性栏。功能模块区中的工具层级展现了 Framer X 的侧重点:以布局和交互设计为主,同时也提供了基础的绘图工具,侧边栏分列了 Framer X 的 4 个大的模块:工具、图层、组件、商店。

右上角的预览可以查看最终的页面呈现和转场动画效果,属性栏中是我们熟悉的各种参数的设定项,值得注意的是顶部的位置锁定选择,上下左右四个方向都可以进行限定,以便固定对象的相对位置,这在缩放页面时会非常有用。Framer X 在你设定位置锁定时(点击上下左右的蓝色短线)下方还会有演示动画,让你直观的看到设定后的锁定效果。

布局

Framer X 是一款为交互设计而生的软件,布局和响应式的交互是它的主要特点,框架是 Framer X 设计的开端,它依靠框架来实现界面布局和元素的约束,这样在页面拉伸和变化时能保证布局中元素的相对位置的不变。

框架和框架之间可以并列,也可以嵌套,嵌套后会形成自然的父层和子层的层级关系,层级关系会显示在 Layers(图层)栏中,Framer X 的框架支持自动层级,框架会根据它的位置来确定它在图层中的层级,当我们将框架中的其它 框架或堆栈拖出这个框架时,拖出的框架自动从子集变成和同级的框架。

最外围的框架有个特殊的地方,通常我们会从绘制外围的框架作为开始设计工作,并将其作为一个「页」来看待,和它对应的就是具体设备不同分辨率的页面,例如直接在属性栏中选择常见的设备,创建一个 iPhone 8 分辨率的框架,然后再基于这个「页」绘制其中包含的对象。

Framer X 中画布只是一个载体,我们可以在画布上排列 N 多个框架来组织设计内容,输出时也是以框架为单元。对画布最常用的操作就是缩放、移动画布,以此来定位框架目标。绘制和移动框架时,画布上会显示动态辅助线协助对齐和控制间距。

Stack(堆栈)是 Framer X 引入的新布局工具,和框架一样可以作为对象容器使用,同时它会自动对齐和分布其包含的对象,堆栈同样支持嵌套,可以以类似群组的方式来组织对象。Stack 的范例文件中包含了多个 Stack 的,可以如图示一样尝试移动它们来感受 Stack 组织对象的神奇方式,或者新建一个 Stack 把 Tab Bar 上的三个图标组织起来。


图片来源:DEX Group:Framer X 与 Framer 的区别以及新变化

交互

Framer X 里可以轻松的实现内容滚动和页面跳转两种页面交互,对于原型演示来说非常实用。点击工具栏中的 Link 或者按热键 L 就可以连接页面,Link 连接页面后可以进一步选择页面切换的转场效果,转场效果包括:Push(推送)、Overlay(覆盖)、Modal(弹出层)、Instant(瞬间)、Fade(淡出)、Flip(翻转)。其中 Push、Overlay、Flip 可以设置方向,从而实现拟真的交互效果。

Link 的跳转的源对象既可以是 Frame 框架的页,也可以是页面当中包含的框架对象。这样就能实现点击页面中不同的对象跳转到不同页面的效果。在画布上可以直观的看到页面之间的连接情况,再次点击连接线的圆点删除连接。

Scroll(滚动)效果和 Link(连接)效果类似,不同的地方是先需要指定一个用于呈现滚动内容的区域,然后连接到用来显示的内容框架上。显示区域像蒙版一样限制内容只在当前的框架范围内展示,滚动方向可以选横向或纵向。

Framer X v5 更新后增加了一个新的交互 Page,可以用来表达页面的翻转和滑动,例如,用来处理日期选择的交互,只需要将切换的多个内容以 Page 的方式连接到框架就可以,官网提供了范例下载。

绘图

Framer X 中的绘图工具很基础,可以绘制形状、线条和多边形。和绘图软件中的类似工具用法一样,通过调节线条、形状的句柄、形状之间的混合计算绘制复杂的图形。

绘图前首先需要一个绘图的框架,不能在画布或框架上直接开始绘图,按 G 键绘制一个图形框架,或者从属性栏中选择一个分辨率。双击图形框架进入 Drawing Mode 模式,画布顶栏会出现绘图工具栏图标。如果觉的在 Framer X 中绘制图标不顺手,还可以支持从 Sketch 中粘贴过来,或者直接从 Icon8 一类的图标管理软件中拖拽位图图标来快速构图。位图的不足是缩放超过原始分辨率以后会有马赛克。

Framer X 的商店中可以下载到一些常用的组件和图标。

组件(Components)

Framer X 的组件是其最主要的特点之一,通过组件我们可以像搭积木一样快速的构建一个界面原型。和以前接触的 OmniGraffle 不同,OmniGraffle 的模版库是单独的,所有的 OmniGraffle 文件都可以共享访问模版库中的素材,Framer X 的组件则是随当前文件一起保存,这意味着如果新建一个项目,需要重新下载需要的组件。

Framer X 的组件分为两种,一种是静态绘图元素组成的设计组件,一种是提供动态参数调节的代码组件

组件都是从 Store(商店)下载的关联副本,所以组件也有 update 更新的概念,当商店的版本更新时,文档中调用的组件也会更新,对于团队开发来说这个特性很好,但是也强化了 Framer X 对网络速度的依赖性,打开文档时 Framer X 会联网请求组件的状态。从另一个侧面来看,这也是 Framer X 推订阅制的保障之一,Store 中的组件可以随时免费下载,但是前提你需要订阅(每个 Framer X 用户以 email 地址作为登录账户)。

代码组件的好处是,通过调节组件所提供的参数,就能获得不同的组件外观。例如图示中的 Status Bar,我们可以改变配色、任务状态、信号强度、电池容量等的参数。代码组件可以右键「Copy Code」,但是目前的试用版本中这块好像还不行。

组件库(Store)

商店是下载和共享上传组件的地方,常用的组件只能通过 Favorites 的方式进行标记,这样新建文档时能快速的 Install 到文件的 Components(组件)当中使用。

组件库中已经包含了很多知名软件公司的 UI 组件,相信随着 Framer X 的推动和使用团队的增加,组件内容会越来越丰富。组件库是 Framer X 的大杀器,官方文档 API 接口的部分还为发布,但是可以预见会增加团队私有组件库的接口,如此一来 Framer X 不仅构建了一个新的生态,还通过组件库的方式长期绑定了用户。

售价

Framer X 的个人订阅费用是 $12/月,合算下来人民币 CN¥1,009.07/年,如果不是专门做原型开发好像有点高。团队的价格需要单独填表,不知道如何收费。

Comments
Write a Comment