Support | 微信 & TG: @scomper

Framer X 学习笔记(五)组件

2018.11.28 08:55

浏览 Framer X 组件商店的时候会感慨,组件商店里的内容很丰富,各种动态的组件效果也很炫酷,但是如果不是真的开始搭建一个原型,实际上对组件作用的体会是不深刻的,走马观花式的浏览只能对商店里的组件有一个简单的概念,很多组件功能点近似,只有在具体的运用中才能明确它们之间的差别。所以熟悉组件最好的方式还是创建一个原型实例,例如,复刻一下熟悉的 Telegram 如何。

Framer X 的组件分为:设计组件和代码组件,从商店里下载的大部分都是代码组件,具备可动态调节的部分元素,设计组件则来自于画布里自己想复用的对象。所以组件的思维是两方面的,一个是可以用来搭积木的模块,一个是可以重复使用的对象。界面中 UI 规范的部分尽量基于组件模块来构建,商店里的组件大部分也是服务于这个目的,具体内容的复用则是为了提高生产效率并适应变化和调整。

按组件思维来构建原型是最科学的方式,然而刚开始的阶段不用太顾虑这些,行动起来反而更重要。经过不断的重复劳动自然会体会到组件的构建方式和逻辑。

iPhone 里的 Telegram 是我们非常熟悉的软件,它的使用逻辑和层级简单清晰,是个很好的复刻参照对象。

工作环境

很多组件的交互需要在 Framer X 的预览窗口中才能得以体现,所以,除了编辑界面,最好把预览窗口也同时打开。勾选预览窗口设置中的「Keep On Top」,让窗口一直保持在其它视窗的顶部。

如果不想总是拖移预览窗口来避免编辑器的遮挡,分屏是个不错的选择。

  • 三指悬停在窗口左上角的绿色最大化按钮上进入分屏模式;
  • 另一种方式是最大化编辑器窗口,然后四指上推在窗口调度界面拖移预览窗口到编辑器的缩略图上。

Framer X 还提供了一种基于 Web 页面的实时预览,点击预览三角形旁边的📱 符号会生成一个 https://*.framer.live/preview/ 的类似链接,通过网络分享原型界面,可以用 Safari 或者 Framer for iOS 打开,不过国内访问的速度有点慢。

Framer X 中移除了老版本自带的代码编辑器,用户需要使用外部编辑器来编辑代码组件,这里推荐使用 Visual Studio Code (https://code.visualstudio.com) 作为代码编辑器。另外,安装好 VSC 以后,再安装一个 VSC 扩展 Prettier - Code formatter(在商店中搜索关键词来安装),用来格式化代码内容。Prettier 扩展安装好以后记得到 format 格式设置中勾选「Editor:Format On Save」。

商店组件

Framer X 的商店里,最多的就是不同设备的 UI 公共组件,这些组件也是我们能快速搭积木的基础。通过简单的分析 Telegram 的界面,我们需要用到的界面元素包括:

  • 顶部的状态栏(时间、信号、电量)、底部的 Home Button;
  • 应用的导航条,返回和页面标题
  • 搜索栏
  • 消息输入栏
  • 应用的 Tab 底栏,切换联系人、对话、设置
  • 头像(Avatar)
  • 图标(搜索、附件、麦克风、联系人、对话、设置、图钉)
  • 对话气泡

状态栏、导航条

对照商店已有的组件,大部分都能从从商店下载获取:

  • iPhone X Kit,两个组件:顶部的状态栏(时间、信号、电量)和底部的 Home Indicator,提供了动态设置,可以按照亮色和暗色调调整状态栏和 Home Indicator,可以获取和显示系统时间,电量、Wi-Fi、信号强度、通话状态都可以调节。
  • EqKit,提供了 iOS 布局需要的很多组件,例如:Tab 栏、Table Cells、Keyboards 等等,EqKit 的组件包中同样提供了状态栏的部分,不过可调节性就没有上面的 iPhone X Kit 丰富。

下载的 UI 方面的组件可能并不一定完全符合要求,这种情况下可以将组件「Detach From Master」,将其变成可编辑的对象,改变了组件的形态,组件包含的可调节参数面板也会消失。

下载的组件在 Framer X 更新时同样会牵涉到更新,从维护角度而言,项目文件中下载的组件越少越好,这样不仅能降低文件尺寸,也易于在后期维护中减少问题。以 Telegram 的原型复刻为例,EqKit 组件包含了 iPhone X Kit 组件的内容,虽然调节参数有限,但是够用。

搜索栏、Tab 栏

搜索栏和输入消息栏不用在组件商店里找,可以自行绘制 Frame 来实现。商店里也有类似的组件可供参考,例如微信的两个组件:

Wechat UI Kit 提供了比较完整的微信界面元素,Wechat Mini-app Component 提供了微信小程序界面的顶栏和底栏样式。

如果是自己绘制搜索栏和底栏,图标是个主要问题,想节省时间可以安装组件 Icon 一类的组件来获取图标。

图标

Icon 组件商店里有很多,一番筛选下来,选择了 Icon Generator,同时支持多个 icon 源,通过名称检索图标。

Icon Generator 组件提供了三个可设置项,图标字体的来源(Feather IconsMaterial IconsFont Awesome Icons),图标名称和颜色设置。更多图标的名称可以在来源网站里查看,来源网站提供的都是免费 Icon,所以种类和数量上有一定的局限,用于原型布局和表达意图还是够用的。

作为组件添加的图标不能编辑,也不能像其它下载组件那样「Detach From Master」。好处是 Icon Generator 也可以作为其它组件的一部分,可以动态的变化图标。

头像(Avatar)

头像用的的地方很多,Framer X 商店里比较有代表性的头像组件有几种。其中的 Avaaatar 和 Simple Avatars 通过调整 Radius 数值,可以把头像显示为方形。

  • Profile,带名称和国家文本字段的头像,常用于登录页面;
  • Avataaars,卡通头像,仅头像。可以调节头像的样貌搭配(性别、发型、嘴巴、眼睛、肤色、服饰等)。

- Simple Avatars,真人头像,仅头像。可选择性别、显示照片还是姓名缩写、方角圆角选择等。

  • Twitter UI,Twitter 组件里的 ProfileImage 可以显示对应 Twitter ID 的头像。

随机头像的来源都是网络,如果是不能访问互联网的演示环境会无法正常显示。

交互组件

Framer X 商店里还提供了很多体现不同交互效果的组件,使用方式和 Framer X 自带的 Scroll、Page 类似,整个实现由交互组件和组件内容源组成。

例如,Telegram 的消息条目上向左滑动的选项图标,实现方式上有两种:一种是利用 Table Slide 组件来实现,一种是利用 Framer X 自带的 Page 交互效果来实现。

Table Slide 组件已经包含了三个滑动后的选项卡,绘制 Table Slide 的框架后,将其连接到具体的卡片内容即可。最多可以定义 3 个滑动选项卡,颜色和名称可以自己定义,但是可供选择的图标只有 6 个(checkmark、Clear、heart、setting、share、trash)。

如果要修改预设的图标该怎么办呢?

  • 要修改下载的 Table Slide 组件,首先需要 Copy Code 然后在 Components 栏顶部 New 新建,将下载的组件变成本地组件。
  • 在代码编辑器里全选粘贴复制的组件代码内容,代码中 Const glyphSVG 的部分就是图标定义的内容,自己找一个 hove 在 Framer X 里画一个 svg 的图标,右键 Copy SVG 粘贴替换 <svg ...> </svg> 的部分即可。
  • 6 个图标分别对应着各自的 SVG:checkmark、Clear、heart、setting、share、trash。

同样的道理,还可以把 Table Slide 组件的右边弹出选项卡变成左边弹出,这种形式的改动不需要会写代码,通过关键词能理解代码就可以对代码组件进行改造。

用 Page 交互也能实现滑动选项的效果,将 Page 框架连接到两个内容框架,一个是正常的卡片内容,一个是滑动显示的图标,Width 设定为 Auto,Effect 选择 Slide。

气泡组件

IM 软件对话气泡是少不了的,组件商店里找了一圈没有合用的,只能自己画一个。画这个消息气泡开始还走了一段弯路,以为绘制一个这样的形状就可以,通过实践才发现,如果要让气泡框能灵活的缩放和复用,消息气泡必须是一个 Frame,而且气泡的角必须是单独的一个图形,如此才能在缩放消息气泡时固定位置。

  • 消息气泡是一个单独的 Round frame,便于缩放
  • 单独的气泡角的图形(Graphic)才能实现相对位置的固定并不随气泡大小变化
  • 如果要作为一个组件使用,需要把所有会用到的 UI 元素都集成的组件中,因为组件的包含的内容无法编辑(添加或删除),但是可以隐藏,使用组件的时候可以利用 Hide 做减法,从而获得组件形式的变化。
  • 多层嵌套的 Frame,内部元素的 Width、Height 设置成比例模式(100%)这样缩放最外层的框架时才能自动匹配大小。
  • Stack 嵌套中可以使用框架来控制留白和边距。

图层列表里看上去消息气泡嵌套了很多层,不过拆成一步一步来看就明晰了。内容是一层层逐步添加的,其间为了避免干扰可能经常需要用到 Hide,隐藏其它元素避免干扰。

打开附件的文件,在 Framer X 里实际动手看看:)

附件:FramerX-Sample-Telegram.framerx.zip

Comments
Write a Comment