跳到主要内容

使用Figma创建响应式仪表板

Figma是UI设计师的图形工具。它有一个简单的界面,使您可以与您的队友合作。如果您想脱机工作,可以选择使用桌面应用。或者,Figma适用于任何操作系统(hello,Windows),因此您根本不需要安装任何东西。入门很简单 - 您可以从Sketch导入以前的布局设计。

在Figma中,您可以创建界面所需的一切,从插图矢量图标到自定义布局。多人编辑可以为设计团队节省大量时间,因为这意味着所有团队成员可以同时处理相同的布局。而这些甚至都不是它的所有特色。

在本教程中,我将向您展示如何使用Figma进行设置,然后逐步介绍如何创建移动应用程序屏幕。在这种情况下,我们将为虚构的统计应用设计仪表板。完成后,您将能够在Figma中创建不同的界面,并与您的团队实时协作。

01.注册

首先,您需要注册Www.figma.com。决定是否要在浏览器中使用该工具或下载桌面应用程序。要下载桌面版,请转到左上角的汉堡菜单,然后单击“获取桌面应用程序”。

02.创建画板和网格

Add a baseline grid to help you position your elements harmoniously (click image to enlarge)

添加基线网格以帮助您和谐地定位元素(单击图像放大)

击中一个创建一个画板。您可以选择其中一个预设或创建自己的自定义尺寸。对于这个项目,我们将使用手机> iPhone 7(375x667px)。要创建网格,请先选择画板。然后在右侧边栏上找到“布局网格”并按“+”。设置列数:6,装订线:16,边距:8并键入:拉伸。

03.为背景绘制一个矩形

让我们从背景开始。按[R调出矩形工具并绘制一个没有边框的矩形#5F98FA。使用右侧的属性面板将尺寸设置为375x363。

04.添加状态栏

Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge)

使用屏幕右侧的属性面板设置状态栏的渐变。在这里,您可以调整颜色选项以创建线性渐变(单击图像放大)

接下来,我们要在屏幕顶部放置一个状态栏。按[R设置宽度:375,高度:64,位置(x:0; y:0)。对于我们的导航栏,让我们使用右侧的属性检查器面板设置渐变填充。找到“填充”选项,按下颜色预览,然后从下拉菜单中选择“线性”。顶部的颜色应为#77A6F7,底部的颜色为#5A93F5(两者的不透明度均为100%)。

05.导入iOS状态栏

不幸的是,默认情况下,Figma不包含iOS UI元素。但是,有一个名为“Sample File”的文件,这是一个iOS应用程序设计,所以我们可以从中借用状态栏。复制灯状态栏选项,将其粘贴到当前文件中并将其放在(x:0; y:0)。使用文本工具(Ť),单击您的画板,在导航栏中添加标题。我去了Avenir Heavy,15px,#FFFFFF。将航向与水平中心对齐,y:33。

06.创建一个后退图标

导航栏左侧应为“后退”图标。我将从头开始创建它。创建一个14x14px的矩形,添加45度旋转,x:14; Y:43。复制此矩形并将其放在x:18; Y:43。选择两个矩形,然后在顶部菜单下转到布尔组>减去选择。之后,返回布尔组>展平选择,或按CMD + E

07.完成箭头图标

我们的箭头图标差不多完成了。现在我们只需要将宽度和高度设置为数值 - 在我的情况下宽度:12px;身高:20px。最后一步是将填充颜色设置为#FFFFFF。

08.创建图表

现在我们要创建一个图表。首先,我们将提出一些指导方针。选择矩形工具([R)并设置x:24 y:147;宽度:1;身高:166;填充颜色#B3DCFF和不透明度20%。

使用80px边距复制此矩形四次。在每个指南的底部,我们需要使用文本图层添加日期标签('Feb 2','Feb 9','Feb 16','Feb 23','Mar 1')。我使用了Avenir Medium,11px,#C1D8FF。

09.制作数据线

使用钢笔工具(P)我们需要创建一个向量来表示数据线。单击并拖动以创建Bézier点。此形状应具有4px笔划且无填充#FFFFFF。

让我们添加一个投影来帮助线突出:点击效果部分的'+'并选择'投影'。使用以下设置可以制作流畅优雅的阴影:模糊:3px,y:7px,#2951FF,不透明度:100%。

10.向图表添加细节

Use the Text tool to add values to the places the guidelines intersect with the data line

使用“文本”工具将值添加到指南与数据行相交的位置

在指南与数据线相交的点处,我们将添加圆圈。这次我们将使用椭圆工具(Ø),您可以在矩形工具附带的下拉菜单中找到它。在每个交叉点上绘制8x8px圆圈,并将填充颜色设置为#5F98FA。我们需要添加一个笔划:点击笔划部分旁边的“+”按钮,设置重量:2px并对齐:中心。

11.最后的接触

要完成图形部分,我们只需要为交叉点添加值。使用文本工具(Ť)选择Avenir Black,11px,#1F4991。

12.三个信息框

在折线图下方,我们将创建三个显示更多信息的单元格。使用文本工具(Ť)让我们创建我们的第一个标题:'您的股票的估计价值':x:16; y:391,Avenir Medium,15px,#5D7EB6。在单元格的右侧放置值'$ 1,115',文本样式:Avenir Heavy,22px,#5F98FA,文本对齐:左,x:287; y:387。

13.制作分隔符

绘制一个高度为1px的矩形并跨越屏幕的整个宽度(#F5F5F5; x:0; y:435) - 这将充当单元格之间的分隔符。选择标题,值和分隔符并创建一个组(CMD + G)。

14.添加标题

Underneath the graph will be three cells showing key pieces of data (click image to enlarge)

图表下方将显示三个单元格,显示关键数据(点击图片放大)

复制此组,以便您有三个组,它们之间的垂直距离为24px。将第二个标题更改为“总成员”,将第三个标题更改为“已注册的朋友”并更新相关值。

15.绘制并对齐另一个矩形

现在我们要添加号召性用语。在最后一个单元格下面画一个矩形,宽度:195;高度:44,距离最后一个分离器21px的Y轴距离。

使用“对齐”工具,按水平中心对齐矩形。然后将填充颜色设置为#5F98FA并将圆度设置为22(您将在“属性”面板中的“旋转”后找到此字段)。之后添加阴影效果(颜色:#ABDAFF;不透明度:100%; y:5;模糊:11)。

16.在按钮上放置一些文字

使用“文本”工具向按钮添加文本(Ť):'获得更多股票!'在Avenir Black,15px,#FFFFFFF中设置此项。将文本与按钮的中心对齐。最后,将所有元素组合在一起并正确命名。

17.使其响应

现在我们将调整我们的布局,以便对不同的iPhone(320x568,375x667和414x736)做出响应。为此,我们必须使用约束,您可以在右侧的“属性”菜单中找到这些约束。

18.正确布局

如果您在水平下拉菜单中选择“向左”或“向右”,则该组将固定到您选择的屏幕一侧,并且不会拉伸。如果选择“中心”,则组或图层将拉伸,以填充屏幕的宽度。我们需要使状态栏浮动到位,因此我们需要“向右和向左”选项(或按住'cmd'并单击图中的左右栏)。

19.测试一下

我们来试试吧。选择状态栏后,点击“向右和向左”选项。选择一个画板,而不是iPhone 7,选择iPhone 7 Plus。即使您选择iPhone SE尺寸,它也能正常工作。

20.检查每一层

让我们考虑其余的层。对于导航栏背景,我们要使用“右+左”。对于导航栏标题:“中心”。对于后退箭头图标,最好使用“左”选项 - 这样箭头将固定在屏幕的左侧。

21.设置折线图

现在让我们设置折线图。对于指南,日期和交叉圈,我们希望使用“中心”。对于数据线和背景,我们将使用“右和左”。在额外数据部分,我们要为每个标题使用“Left”,为每个值使用“Right”,为分隔线使用“Right&Left”。对于CTA按钮组,我们设置'中心'。

22.设置垂直约束

最后一步是设置垂直约束。状态栏,导航栏,数据行和交叉圈以及相关标题应设置为“顶部”。图表,日期和指南的背景应设置为“中心”。每组额外数据应设置为垂直“中心”,CTA按钮组应设置为“底部”。

23.使其适用于每种屏幕尺寸

让我们两次复制画板,然后将其设置为iPhone 7 Plus的尺寸,另一个尺寸设置为iPhone SE上的尺寸。在Plus版本中,您需要通过选择单元格组并将其高度从195增加到225来缩小额外信息的最后一个单元格与CTA按钮之间的差距。在SE版本上,您将看到信息单元溢出CTA按钮,所以我们必须选择单元格组并将其高度降低到150。

24.一切都完成了!

嘿,恭喜!我们在Figma中完成了整个应用程序屏幕。现在只需检查一切都已完成,您就可以坐下来感觉自己像专家一样。

这篇文章最初的特色是网络杂志问题288;在这里买。

相关文章:



翻译字数超限