用Framer的实例,说说设计师学习代码的那些事

2017/07/03

@Sophia的玲珑阁 :前段时间Framer改版,让这个软件大热,分出了设计和代码两种模式。我喜欢尝试新鲜事物的性格,这下子也是跃跃欲试。这一周,终于静下心来去尝试做了一个demo。通过做这个demo,来说说设计师到底有没有必要学习代码。

Framer简介

先来说说我对Framer的理解。

Framer是一个用来做动效的软件,用来将咱们二维平面软件设计出来的方案做成可以在手机上可以进行真实模拟操作交互的原型出来。市面上有很多种这样的软件,每个软件的原理可能不太一样,比方说Flinto,Principle,Origami等等。

绝大部分都是在视觉基础上进行一些手势的串联,设计师只需要设置出类似流程线的东西,设置好一些参数(不需要写代码),软件就会帮忙进行计算,然后渲染出demo,即咱们所说的原型。

Framer的不同之处,它是真的是让设计师去写代码呀,通过代码实现出原型,当然Framer它自己也做了很多的类似于效果包的代码库,设计师只需要调出来进行使用就可以。意思就是,不是每行代码设计师都要敲,Framer是简化后的代码模式软件。还有就是它支持Sketch等文件的导入,也就是说咱们可以在sketch上画好了,再到Framer进行动态效果的呈现,不需要将每个图层都在Framer进行代码实现。(后来验证,画图还是在Framer自己的设计模式进行画实现才比较方便)

怎样学习

入手Framer的时候,我先从它全英文的手册开始看,跳过设计模式(粗略看了一下觉得跟sketch的用法很像),直接从代码模式进行查看。知道了原来它是基于CoffeeScript语言进行demo开发的。当然,手册网上也可以找到部分的中文翻译,但更新不完全,我也下了一番功夫,将最新的Framer的代码手册翻译成了中文,整理好了之后会给分享给大家。

CoffeeScript我也不会,于是又从网上去找相应的官方手册,发现太难了,一点也不想看(原谅我也是个萌妹纸,偶尔也会任性)。

于是,我一不做二不休,直接从Framer官方网站的简易版手册和部分教学视频开始学习。然后画好了sketch文件,导入到Framer进行敲代码了。当然也是不完全会的,先在官网上看手册,然后加入一些学习小组的群在群里进行讨论。

然后遇到都不懂的问题(毕竟咱们都是设计师),我就在下班后拿去请教公司的开发GG们,当然也不能太多,可以分开进行问几个人,这样每个人都比较轻松。

就这样纠结了好几天,一个雏形的demo算是做出来了。

我现在说的是很轻松,每一步实施起来都是困难重重,因为不懂所以会遇到很多问题,然后自己再耐心一个个解决。

学习中的收获

这一个礼拜的收获除了自己入门的Framer,还有几点比较重要。

一是验证了我一直强调的学习方法,即实践总是让自己学习最快的流程,没有之一。

二是最为交互设计师,领悟到了之前开发GG们一直强调的一句话“设计师的方案是会影响到开发代码实现的逻辑的”。设计师在做方案的过程中不要突发奇想去想一些很创新的idea,往往这些idea可以解决当前的交互问题,可能却不知道影响了哪些地方的操作和逻辑的统一性。考虑问题的时候不单单从一个小的点进行思考,如果可以,尽量从大局,即所有的功能点都进行一些思考。操作越统一,代码越简单,逻辑越清晰,实现起来也越方便。

设计师到底要不要学代码

如果从大的方向来思考一下,设计师到底需不需要学习代码?随着我工作经验的丰富,我从现阶段的理解来跟大家聊聊。

主要可以分为两个阶段,如果是新手,也就是想换行到互联网领域的设计师,或者说从业大概1~2年以内的设计师(求职的时候会给会代码的设计师加分但不是主要的判断依据),这个阶段我建议暂时不需要将精力放在学代码上面,这个阶段主要是设计基本功的扎实,颜色、字体、排版的功底在这个阶段更重要。

度过新手期,处于上升期或者稳定期的设计师,也就是工作2~3年以上的设计师,可以开始这方面的着手了,但依个人精力来进行一个判定,不强求。学了代码自己思维训练又多了一个维度,跟开发交流起来更加方便。不学的话自己主攻视觉UI这一层也很不错。

总的来说,学了更好,不学影响也不是很大,术业有专攻,这只是一件锦上添花的事情。个人愚见,只限于同行进行交流。

会代码的设计师会让人看起来很酷,但不代表着职场核心竞争力会变强,人最核心的竞争力还是寻找问题核心的分析力以及解决问题的执行力。

作者简介:Sophia的玲珑阁,一枚爱折腾,爱健身的交互设计妹纸。

职场设计技能,更多教程抢先看,请关注作者的微信公众号:「Sophia的玲珑阁」


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/designer-about-learn-code

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里