南平高端网站设计:用Sketch和Flinto创建iOS应用程序

2019.05.31 |
标签

欢迎回来!您现在应该有在本教程的第一部分..做得好!现在让我们将原型工具Flinto(用于Mac)投入使用,并使我们的屏幕焕发生机。

快速说明:我们将保持相对简单。在本教程中,并不是所有的东西都是可点击的。但是,老实说,一旦你和Flinto玩过一次,并且发现它是多么的友好,你就会准备好让这个应用程序在每一个可以想象的地方进行交互。

安装和安装Flinto

如果你还没有,那就去拿对Flinto的免费审判(对于Mac),并且不要忘记下载草图插件我也是。

安装Flinto和Sketch插件,然后我们南平高端网站设计就可以创建一些原始的好东西了。

点燃Flinto

打开Flinto之后,您将看到一个飞溅的屏幕,您可以在那里继续并单击新文件..这反过来又打开了“新文档”窗口(是的,我知道,显而易见的情况已经很好,而且确实被说明了)。

从那里开始,将设备类型设置为iPhone 6,然后单击创造.

undefined

一旦显示了新屏幕,就可以使用与Sketch…相同的键盘快捷方式

· 放大Cmd + (+)

· 放大Cmd + (-)

…轻松放大,并在您的屏幕上,直到它显示适合您的设置。

快速说明:再一次,和Sketch一样,你可以拿着画布在画布上移动空间点击和拖动。

当然,我们不需要刚刚创建的屏幕,因为我们从Sketch导入屏幕。所以要么按下屏幕,要么删除屏幕删除,或右击在屏幕上选择删除.

记住要快速保存新文档,并给它命名,以便很快引用Sketch插件。

跳回Sketch,选择所有的Artboard(屏幕),选择插件>发送到Flinto从菜单栏中,或使用键盘快捷方式。Shift + Ctrl + Cmd + F.

在弹出窗口中,插件知道将iPhone 6 Retina屏幕的艺术品放大(到2倍),这样就可以保留所有设置,然后单击送.

在下一个窗口中,检查前面保存的Flinto文件是否被选中,然后单击合并.

回到Flinto,您将看到所有的屏幕都已导入到应用程序中。从层板您将看到您的所有层/组都已被导入,就像它们在Sketch中一样,并且任何向量都已转换为位图以提高原型的速度。太棒了!

快速说明:如果(在图层面板中)您的屏幕名称与它们在Sketch中的顺序不同,您可以很容易地单击并拖动来正确地重新排序它们。

你会发现有很多类似的动作,键盘快捷键的那些你使用的素描。Flinto确实让两个应用程序之间的转换感觉非常熟悉,这是我喜欢的!

欢迎屏幕

带着欢迎当然,屏幕是我们的主屏幕,我们需要让Flinto知道这一点。因此,选择了该屏幕后,请选择主屏幕从屏幕特性在检查小组中。

现在,您将在屏幕和图层面板中看到一个小主页图标。

现在,我们将从欢迎屏幕,到取景器屏幕。所以选择定时器链路在检查专员中输入以下设置(或您选择的任何设置):

· 超时:1000 ms

· 目标:取景器

· 过渡:淡入

现在是一个很好的时机来点燃预览窗户。我知道现在还没有什么可看的,但从现在开始,你就有能力看到你的变化发生了。单击预览图标,或使用简单快捷方式。Cmd + P.

快速说明:如果你还没有,你也可以从iOS应用商店抓取Flinto应用程序。

取景器屏幕

从Viewfinder屏幕,我们将完成一个简单的转换(通过文件夹图标)到我们的图像库屏幕。我们将坚持默认的过渡,但请随意使用,然后单击新过渡如果你想加入你自己的。

因此,选择文件夹图标,然后单击F若要创建新链接,请执行以下操作。将橙色线程拖出图像库屏幕,然后单击以显示手势/过渡窗户。

从这里选择手势你需要的。水龙头对于这种类型的链接来说,这将是明智的选择。然后选择过渡..我要和你一起去滑上..然后单击已完成..过渡完毕。测试它在预览,或在你的iOS设备!

决定一个特定的转变不是真的在摇动你的卡西巴?没问题,跳到检查员小组,并从那里编辑转换。

图片库屏幕

因此,首先,我们在屏幕的顶部有导航栏,我们在Sketch中创建了后退按钮,我们希望轻松地回到Viewfinder屏幕。我来教你怎么做:

首先点击D拔出链接热点在Back按钮周围,然后简单地将LinkThread拖回Viewfinder屏幕,然后选择一个手势和转换。

快速说明:在本例中,我们希望后退按钮返回到Viewfinder屏幕,并且只返回该屏幕。在本教程的后面,我将向您展示如何设置一个反向链接,该链接将考虑到您可能已经从不同的访问点输入了某个屏幕。

现在还记得,在本教程的第一部分,当我提到我们的图片缩略图坐在我们的艺术板外?你知道,酷。这是为了我们可以测试滚动组功能的Flinto,这是相当棒!让我们把它设置在这个屏幕上:

因此,首先选择图像缩略图层(您将看到它已经转换成一个简单的位图层,供我们在Flinto内部使用)。

您将看到,一旦它已被选中,它将显示的重叠以外的艺术板,使我们很容易参考在下一个步骤。

选滚动组从工具栏,或使用快捷方式Alt + Cmd + G若要将此层转换为可滚动区域,请执行以下操作。如果您查看“图层面板”,您将看到我们的缩略图层现在位于滚动组文件夹中。

继续,在预览或者你的设备上进行测试,你会看到缩略图在屏幕上滚动,在导航栏下面。好的,漂亮的!

我们会保留我们的滚动组使用默认设置,但请随意使用可供您使用的许多选项。组选项检查专员小组的一节。

对于我们的第一个缩略图,我们希望这个链接到我们的下一个屏幕(选择过滤器),所以再次绘制一个链接热点。(D)围绕缩略图,然后设置一个链接到下一个屏幕。

您可能注意到的第一件事关于选择过滤器屏幕是,我们没有后退按钮!恐怖!但是,如果需要,我们如何返回到前一个屏幕呢?

让我告诉你:

点击(D)绘制链接热点,并使其达到屏幕的全部高度,以及大约220在宽度,并将其放置在屏幕的左边。然后简单地将其链接回前一个屏幕,并用于手势选择右击,为了过渡选弹右..现在,您可以轻松地导航回前一个屏幕,通过一个滑动手势。问题解决了!

继续为过滤器应用屏幕做这一点。

过渡设计器

最好的特性之一(包括许多其他特性)是过渡设计器..到目前为止,我已经向您展示了可用的默认转换。但是,一旦您决定尝试自己的过渡,这就是过渡设计器发挥作用。

希望您可以从我们的选择过滤器和Filter应用屏幕中看到,我们希望有一个转换,在屏幕底部选择一个过滤器选项,然后改变大图像以反映这一点。

我们会很简单的。单击极右图像缩略图,将大图像更改为应用梯度的图像(如过滤器应用屏幕上所示),然后在单击最左边的缩略图时切换回默认图像。让我们启动这种类型的交互,并与转换设计器一起运行。

在选择过滤器屏幕上绘制一个链接热点(D)在最后一个缩略图,并连接到过滤器应用屏幕。然后点击新过渡…

…还有砰!我们进入了过渡设计器.

您将看到我们希望在其中转换的两个屏幕,并且在层面板(启动屏幕和结束屏幕)中将相应地标记这些屏幕。

要达到我们所需要的效果,请继续拖动终端屏幕(应用过滤器)到开始屏幕的顶部(选择过滤器)。

快速说明:您可以通过单击屏幕周围的红色边框,然后将其拖动到另一个屏幕上来选择整个屏幕。注意到红色的指导方针,使之完美地对齐。

当然,你现在可能在想等等,我不想显示在过渡开始时应用的过滤器“”你当然不知道。因此,在图层面板中选择渐变层(在终端屏幕上):

然后从检查员小组,减少不透明度从那一层下降到0%..仅此而已。

您可以单击玩,打,踢控件在画布区域的顶部查看转换操作,然后,一旦您高兴地单击储蓄与退出回到主窗口。

我们希望有能力也回到图像没有梯度应用。所以和以前一样,画一个链接热点(D)在“筛选应用”屏幕的最左边缩略图上,链接回“选择筛选”屏幕,然后选择新过渡从弹出式窗口。

回到转换设计器中,拖动启动屏幕(应用过滤器)在端屏(选择过滤器)。我们仍然希望在过渡开始时显示渐变,所以选择端屏(选择筛选器)并减少不透明度降至0%.

点击储蓄与退出,为什么不用Preview快速测试一下呢?Cmd + P.

在本教程的这一部分中,我只浏览了过渡设计器所能做的事情。这是一个强大的工具,和袋有趣的玩,所以在本教程的最后一个屏幕,我们将进一步推动它。“真的很好”就像盐-N-佩帕曾经唱过的一样!

信息屏幕

有了这个屏幕,我们有两个访问点(通过快门链接),一个从选择过滤器屏幕,以及滤波器应用屏幕。

我们来处理一下选择过滤器先看屏幕。

绘制热点链接(D)在选择过滤器屏幕,然后选择新过渡,这会让你回到过渡设计器.

从下面的图像中,您可以在端屏(信息)我已经提取了徽标,并以交错的方式从屏幕上移出按钮,所以当使用这种转换时,这些元素将一次滑动一次。这就是Flinto最棒的地方。您可以尝试这么多不同的转换,Flinto将为您填写动画(所有没有时间线的帮助)。

我还调整了计时这些层的设置(徽标和按钮)。改到经典,并增加了持续时间到700毫秒.

给你的过渡一个名字。我叫这个错位滑动..然后储蓄与退出.

现在可以继续创建另一个链接热点(D)在Filter Application屏幕上,选择您刚刚从可用选项中创建的转换。

要完成,我们需要在信息屏幕要考虑到我们已经进入这个屏幕从不同的访问点。所以画一个链接热点(D),并拖动链接螺纹指向显示在信息屏幕顶部的橙色箭头。这将创建一个回链它没有设置为特定的屏幕。

我想我们都完蛋了!

我只触及了过渡设计器可能实现的一小部分内容,但我将让您享受它的乐趣,并探索更多内容。

我希望通过本教程,您可以看到Flinto是Sketch的一个很好的配套应用程序,并且值得在您的下一个项目中给予一些关注。

您可能还想看看我以前的Sketch教程:

· 在Sketch中设计iOS应用程序

· 基于Marvel和Sketch的原型设计

寻找最快,最实用的方式学习素描?

素描应用要点是一个完美的指南,帮助你认识到这个惊人的应用程序的全部潜力。瞧一瞧这里.

南平高端网站设计使用报价代码中接受20%折扣任何一个包裹。


相关推荐

南平高端网站设计:用Sketch和Flinto创建iOS应用程序
 

南平高端网站设计:用Sketch和Flinto创建iOS应用程序

欢迎回来!您现在应该有在本教程的第一部分..做得好!现在让我们将原型工具Flinto(用于Mac)投入使用,并使我们的屏幕焕发生机。快速说明:我们将保持相对简单。在本教程中,并不是所有的东西都是可点击的。但是,老...
2019.05.31
南平做网站:如何创建新的一年内容营销策略
 

南平做网站:如何创建新的一年内容营销策略

南平做网站在这篇文章中,我将告诉你为什么和如何创建你自己的内容营销策略。你将更有效地进行市场营销,并从博客中消除猜测。这是双赢。什么是内容营销?让我们南平做网站从一开始就开始:定义内容营销。内容营销是...
2019.04.29
南平企业网站开发:使用Divi主题的17个教育网站示例
 

南平企业网站开发:使用Divi主题的17个教育网站示例

像大多数企业一样,教育提供者需要设计良好的网站,为潜在的学生提供他们需要了解的关于学校或课程的一切信息。这意味着互联网上有很多教育网站可以帮助你为自己的设计提供灵感,而且和大多数领域一样,有些网站是用...
2019.04.29
南平企业网站建设:本地WordPress开发的优秀工具
 

南平企业网站建设:本地WordPress开发的优秀工具

南平企业网站建设当谈到WordPress开发时,本地的测试站点是一件好事。他们可以让你修补新的功能,插件和主题,而不用担心破坏任何东西-这是非常棒的!它们唯一的缺点是,不管您的是什么,它们都可能是一种痛苦的设...
2019.04.29

最新文章

南平建站:概念在Web设计中的应用
 

南平建站:概念在Web设计中的应用

在平面设计中,南平建站在设计时使用一个概念通常是有用的。一个概念是一个想法,你建立你的网站周围。它会把你的网站变成一个故事。如你所知,人们喜欢故事.我在读这本书有一天,我惊讶地发现,除了设计之外,概念在...
2019.05.31
南平高端网站设计:用Sketch和Flinto创建iOS应用程序
 

南平高端网站设计:用Sketch和Flinto创建iOS应用程序

欢迎回来!您现在应该有在本教程的第一部分..做得好!现在让我们将原型工具Flinto(用于Mac)投入使用,并使我们的屏幕焕发生机。快速说明:我们将保持相对简单。在本教程中,并不是所有的东西都是可点击的。但是,老...
2019.05.31
南平网页设计:WordPress主题和插件设计者的草图资源
 

南平网页设计:WordPress主题和插件设计者的草图资源

素描很受欢迎,但令人遗憾的是,设计工具这是在过去几年里真正起飞的。虽然您可以将它用于各种设计,但设计师使用Sketch的方法之一是为WordPress主题和插件创建设计。南平网页设计为了帮助那些正在使用Sketch的W...
2019.05.14
南平公司网站设计:如何使用Typeform创建时尚调查表单网站
 

南平公司网站设计:如何使用Typeform创建时尚调查表单网站

如果有一件事网上调查不是以他们的风格而出名,而是他们的风格。它们往往是枯燥乏味的事情,你只是从一个问题跳到另一个问题。然而,你没有理由不能在你的身上增加一点才能。南平公司网站设计在那里型态进来。这个工...
2019.05.14
南平企业网站制作:20+奇异平面设计网站的WordPress主题
 

南平企业网站制作:20+奇异平面设计网站的WordPress主题

为您的下一个项目寻找一些平面设计WordPress主题?非常赞成!它的简约外观和注重可用性,平面设计是一个伟大的选择,您的下一个WordPress网站。但许多流行的WordPress主题仍然挂在浮华的三维设计上,这些设计与...
2019.05.06

热门推荐

选择您希望南平网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

建站咨询 星总监

投诉