粉丝1718获赞5148


给大家讲一下这个圆形是怎么做的,因为非常简单,你只要看完就会做了。首先我们下载一个 fig 码,或者在网页打开 fig 码也可以,这个是画板, 我们先选中画板,可以在这里直接拖动一个画板,也可以选中画板之后,直接在右边选择一个他预设好的画板尺寸。比如说我们选 iphone 十四,这里它是一个竖屏,想要横屏的话就点一下这里,给他改一个名字,叫主界面,改一个颜色,改成深一点的颜色,然后我们假装上面有一个按钮,先画一个圆形, 比如说在这里有一个小按钮,然后这个时候我们想点击这个按钮,弹出一个弹窗,我们先复制一个画板出来, ctrl 加 c, ctrl 加 v, 在 这里给它拖过来,我们画一个弹窗,用这个矩形来一下颜色, 给它居中一下,点击这里它是直接可以居中的,然后再画一个小按钮上去, 你是居中一下,按一个字体上去,点成个 t, 是 没有确定 是给他居中一下,我们可以把按钮也选中,按 ctrl 加 g, 那 就成个组了,一个组之后再把这个文字直接给居中,他就会在这个按钮里面居中,然后我们也可以给他调一下尺寸,然后让他居中对齐,再居中一下。 ok, 这样我们两个界面就做好了。那怎么把这个按钮设定成点击这个圆,然后就弹出这个弹窗,再点击这个确定再回到这个主界面呢?我们在右边这个 prototype 里,这个 prototype 就是 圆形的意思, 选中主界面里选中这个按钮,然后他这里旋停的时候会出现一个小加号,把这个小加号拖到下面这个界面里,然后这里选项是点击,是的,我们需要点击,如果你需要别的东西可以选,还有旋停,有拖动等等, 我们选择点击,然后,呃,这个是跳转,跳转到主下面这个主界面我没有改名字,先不管他,然后这个是动画方式,现在是静态的动态,我们改成这个聪明的自动动态 好就可以了。然后这个时候我们就是点击,他就直接会跳转过来了,然后这个按钮也设定一下,选中,然后把这个这个箭头拖到上面这个界面也同样的是点击,然后跳转 啊,下面是聪明的自动动画,然后就可以了,我们点右上角这个小三角播放试一下, 点击这里弹出了弹窗,点确定回到主界面,再试一下点击,点击, ok, 没有问题。那这个时候你想分享给你的小伙伴看一下,可以点右上角的这个分享复制链接就可以发给你的小伙伴了。 如果你想把你这个呃圆心稿输入成图片导出给别人的话,可以选选回来这个设计,然后选中你的所有画板,点最下面右边,最下面有一个导出 右边的加号放大缩小的倍数,一倍就是,呃,一倍的话就是你这个二百的原尺寸,现在是九三二乘以四三零, 然后你也可以选放大,因为它这个软件是矢量的,所以你放大也不会。呃, 六十像素,这里可以选格式,格式你可以选 png 或者 jpeg, 点导出它就会分别把这两个画板都导出了。呃,然后每一个文件是一个画板,但如果你不想那么多的图片,你可以把这些画板创建成一个图片,这样的话你就把 所有的画板都放在另一个画板里面。我们选中画板,然后把这个画板拖到能包含这个两个画板,然后再稍微改一下颜色吧。 这个时候你看左边他的顺序就是这两个画板是在我们这个大画板的子集里面的,如果他没有在里的话,你可以手动给它拖进来,也可以,然后再选中这个大画板,导出 点点,下面这个导出他就是一整个的一个图片了。如果你们是和小伙伴一起做的话,这个软件是支持多人协助的,就像那个共享文档一样,你可以直接点右上角的分享,也是分享这个链接给别人,别人进来的话,你们就可以两个人一起做了, 你可以实时看到别人在干嘛。下面这个是我之前做的一个稍微完整一点的飞马原型,大家可以看下效果。 为什么要做这个原型呢?一方面是想做一下界面内容的布局,就是你再把这个黑白框框的布局定下来之后,以后做 ui 就 很快, 你之后再去调整 ui, 改 ui 要快很多。另一方面呢,是想验证一下玩法,很多功能我不是很确定能不能行, 所以做一下可以点击的动态原型,然后自己点一点试一试,有的会觉得,哎,这样我的想法是没有问题的,有的会发现一些问题,然后再回头去改策划案,或者也会遇到我在写策划案的时候没有想到的东西, 做画面性质的设计的时候会想这里可能缺一点内容,然后又回去在策划案里增添我需要的内容。另一方面,以后你再去做开发,写代码的时候会有一些动态直观的参考。还有呢,比如说你想和小伙伴讨论一下,让大家帮你看一下 这个玩法能不能行,也会比让人家去看你长篇大论的策划案要直观一点,和你的策划案也是相辅相成的。所 这个动态原型其实花不了多少时间,我这个只花了两三天的时间,我觉得还是很值得的。好,今天的视频就到这里,这期可能会比较枯燥,谢谢大家看到这里,拜拜。