Support | 微信 & TG: @scomper

Framer X 学习笔记(八)Web 原型

2019.03.16 15:24

Framer X 经过几个版本的更新越来越好用了,尤其曾经被诟病的画布缩放问题得到了彻底的解决。另外 Frame 和 Stack 的创建被添加到右键菜单里,并提供了快捷键 ⌘↩︎ (Add frame),⌥⌘↩︎(Add stack),对绘图效率的提高很有助益。

一直想尝试一下用 Framer X 绘制 Web 页面原型,最近刚好有这样的工作需求可以实际在 Framer X 里演练一下。Web 页面的绘制方法和 iOS 原型基本一样,不同的是 Web 页面侧重的是内容布局和跳转,元素的堆叠和框架使用的更多。

绘图的顺序

Web 原型的绘制顺序是从大到小,由外向内的。例如,内容区域、边栏、顶栏、标签栏等等。每个区域的框架对应的是一个 Frame,Frame 里再嵌入小的框架,完成元素的布局。

遇到重复的要素,可以先绘制一个或一组,然后选择对象添加 Stack,通过 ⌘D 快速生成多个并自动排列。像边栏中的菜单项、顶栏的标签项、软电话中的图标、搜索页面的卡片等等。最后组织完页面的内容会发现 到处都是 Stack,标签栏是一个长条状的 Stack 套(N 个左右结构 Stack 组件),而每个 Stack 组件又是文本+图标的左右或上下组合。

  • Stack 组件中的元素可以 Hide,从而在复用重复的同时可以显示的不一样;
  • Stack 不支持 Link,如果需要连接到其他 Frame 需要在其外面再添加一个 Frame;
  • Stack 和 Frame 一样可以设置背景色、边框线条(可以单独设置某一条边);
  • Stack 中的对象左右或上下移动会自动排版。

用 Frame 定内容布局的大的范围,每个 Frame 内部多尝试用 Stack 堆叠相同的元素,实现对象排布的灵活性。绘制时可以先绘制 Frame 然后将其转为 Stack。

Web 原型会用到的组件

为了提高绘图效率,绘制工作开始前可以到 Store 里先下载一些常用的组件到本地,尽量使用已有的组件来快速搭建原型,节省绘制元素的时间。

例如,图示中的云客服 Web 页面,既需要常规的搜索栏、按钮、导航,也有一些视觉化的进度显示元素。

  • Circle Graph,圆圈进度示意图,可以定义颜色、线条的粗细和进度数值,圆圈中的数值可以并排写两个,使用的时候我们只需要输入百分比图示会自动匹配为相应的结果;
  • Icon Generator,图标显示,支持调用 Feather IconsMaterial IconsFont Awesome Icons 三家的图标,只需要输入图标的英文名称,设置图标大小即可,图标均为矢量免费的图标,是 Web 原型绘制不可或缺的组件之一;
  • Interactive Form Elements,文本输入框组件,可以在页面上输入和显示默认文本内容;
  • Progress Bar,一个带动画效果的进度条,动态循环显示进度条从 0 到 100 的增长效果,Web 原型中用到的机会不多,很多时候我们用 Round 自己画一个比这个快;
  • Tag,标签组件,填写好用 逗号 区隔的文本内容自动显示为标签,比较省事,而且颜色字体都可调。例如下图中测试任务的标签都是用这个组件完成的。
  • Web UI Kit,算是 Web 原型绘制中必装组件之一,包含了导航、表格、边栏、按钮等各种常用的 Web 绘制组件。

图标的来源

Icon Generator 组件里包含了很多常用的图标,访问 Feather IconsMaterial IconsFont Awesome Icons 网站可以直观的看到这些图标。

因为是免费的图标源,所以有些图标并不一定有,另外图标内容不太接地气,例如软电话中的图标依靠 Icon Generator 就不太可能都找到,这里推荐访问阿里的 Iconfont 网站来搜集这类图标。

Iconfont 里包含的图标很丰富,支持颜色的自定义,可以下载 SVG 的适量格式。通过关键词的搜索,添加到购物车,然后批量下载。考虑到以后可能还会使用,可以创建一个项目归类保存。

用 Stack 快速创建相同元素

边栏中的菜单项是比较直观的 Stack 嵌套,先创建一个文本和一个图标,然后把它们组合(选中后右键 Add Stack)成 Stack,设定这个 Stack 的属性为左右方向,对齐方式是 Start,适当调整一下间距(Gap)和边距(Padding)。等这个菜单项单项(绿色框选部分)设置好以后,在它外面绘制一个和边栏同等大小的 Stack(红色框选部分),外面的这个 Stack 方向设置为上下,间距为 0。

设置好以后选中里面的 Stack 菜单项 ⌘D 复制产生多个,接下来的工作就是修改文本和图标。

除了边栏这种一眼看过去就知道可以用 Stack 的地方以外,Web 元素布局中还有很多局部也可以这么操作。例如,图示中「客户意向等级」部分,每一条记录可以组成一个 Stack 堆栈,然后外面再套一个 Stack 实现快速复制和自动排版。

需要注意的是,Stack 中的元素为了适配和视觉统一,文本的宽度需要取最大的值,这样在才能实现对齐的效果。

板块之间的分割线是基于外围的 Stack 的设置的,不是单独绘制的线条,Framer X 中的 Border 设置可以分别设置上下左右的线条。

创建复用组件

画好一个页面之后,先不忙着开始画其他页面,分析一下后续的页面会共用的元素,把它们变成组件(Components),例如图示中每个页面都会重复出现的边栏、导航条、软电话条,就可以变成组件来使用。

组件的优势是改动 Master,所有的 Instance 都会随之变化,这样一来即便后面调整了边栏的配色、软电话的图标等地方,其他引用同一个组件的页面不用逐一修改。

导航栏的科目可能不同页面会不一样,在创建成组件后可以选中 Master 在属性设置中勾选允许修改的文本。

边栏的部分选中的条目颜色不一样,这个区别留到具体每个页面中单独加一个 Frame 叠加到菜单项上即可,而且单独的 Frame 还可以用来 Link 其他页面实现跳转。

将边栏变成组件还有一个好处就是,添加连接的时候只需要在 Master 中添加透明的 Frame 连接到具体的页面,所有引用这个组件的其他页面也会自动添加对应的跳转链接,这在组织很多页面时尤为有用。添加一次,每个页面都通用同一个导航体系。

有了复用的组件,接下来的其他页面只需要绘制内容不同的地方即可,可以极大的提高效率。
另外有个小的技巧就是,不一定所有元素都需要在 Framer X 中绘制,如果是从其他页面中借鉴和参考,有些局部可以直接截图贴到原型中,尽快把逻辑先串联起来,后续再根据实际情况将图片变成绘图元素。

绘图过程很容易让人陷入诸多细节的纠缠,建议先在思维导图软件(如 MindNode)中把框架和节点写出来,隔断时间回到 MindNode 验证一下推进的情况,保持目标的一贯性。