source
cover

用图层插入功能划分页面布局

在 Figma 的设计工作台中,工具栏里有很多图层插入功能,这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」,一起通过对其首页的布局划分,来上手这些图层插入功能。

教程相关


第一步,插入 Frame

其实 Frame 就是 Sketch 里的 Artboard(画板),点选以后不要着急在画布上拖拽鼠标,右侧检视窗中可以选择现成的市面上设备的尺寸。在这里我们选择 iPhone X。调用 Frame 的快捷键是 F。

第二步,插入矩形

使用 Rectangle 插入一个矩形,选中后按快捷键「6」设置其透明度为60%(请依此类推1~9,0为100%)。然后我们在画板上拖拽该矩形,把整个页面的布局划分出来。调用 Rectangle 的快捷键是 R。

第三步,插入文字

大概划分好页面模块以后,开始用文字进行标记。点击 Text 插入文字图层,双击该图层可以更改文字内容。调用 Text 的快捷键是 T。本系列教材主要讨论 what 和 how,如果想知道为什么这么划分,大家可以读一下 Apple 的 HIG

  • 头部三 Bar 分别为 NaviBar、SearchBar、StatusBar;

  • 身体为内容区,由若干行 MovieList 组成;

  • 尾部则是 TabBar 和全面屏自带的 HomeIndicator。