Framer 中文网项目始末

2016/8/15

http://framercn.com

Framer(framerjs.com)是一款革新的交互原型设计工具,它将编程和设计互相结合,让它们各自发挥特长,从而能高效地实现一些复杂的动效。

Framer将界面一分为二,左边是代码编辑区,右边是实时预览区。最开始它虽然支持Photoshop和Sketch文件导入,但所有的动效实现都依赖代码。不过最新版本的Framer新增了设计模式,让设计师可以在右边预览区直接对元素进行移动、旋转、缩放等视觉化操作。对于设计师来说,这种原型设计方式不仅能够让编程和设计互相补充,也能够锻炼设计师的工程思维,有利于设计师和工程师协作。

Framer界面

我很喜欢Framer的理念,所以为了让更多国内设计师能够正确认识编程,了解并使用Framer,我决定建立Framer中文网(framer.juuust.com)(以下简称中文网)。

构想

在正式设计开发之前,我觉得中文网应该要实现这么几个目标。其一,需要一部分浅显易懂的入门介绍让设计师平滑过渡到这种以编程主导的设计模式;其二,因为在Framer中编程占了很大比重,所以需要将英文文档进行翻译。最后,能够展示一些优秀的设计师作品并给设计师提供交流问答的地方。

为此,我确定了中文网的结构,分为入门、中文手册、作品展示和社区几个部分。综合考虑紧急度和实现难易度之后,我决定先完成前面两个部分。

设计&开发

关于设计,最开始我的想法是和照官网统一风格。但后来发现这种方式实现起来自由度不大,代码维护比较麻烦,所以我就重新设计了一套UI,不过是边开发边设计。

因为入门和手册部分文字内容较多,所以发挥自由度较大的就是首页设计了。我的想法是首页能够通过代码到设计的过渡来展现Framer的特点,初步拟定做一个动画,前半部分是一个coding的动效而后半部分是一个designing的动效。我在本子上画了一下草图,coding部分通过光标闪动的效果来模拟编程,designing部分则是通过Framer的logo变化来展现。

Framer首页

最后做出的首页效果如下:

Framer首页

对于网站的移动端展现,考虑到网站的结构并不是很复杂,我采用了自适应方式。因为首页的内容聚焦于中心,所以在移动端只是没有了两边的留白,其他不变。而入门和手册两部分因为在PC端采用了侧边菜单栏,在移动端自适应时我把它改成了弹出式菜单。

Framer自适应

因为我个人独立运营这个网站,需要鼓励用户将网站分享或小额捐助,我将这一部分隐藏在网站顶部,用户可以通过导航栏的小按钮展开或收起。

Framer自适应

未来

在网站设计开发过程中,我接触了很多正在学习Framer的设计师,结合他们的反馈我不断调整自己的想法。我发现了一个最大的问题,那就是设计师在刚开始学习Framer时最重要也最困难的是思维的转变。所以在中文网设计或者文档翻译时需要从设计师的角度去思考,以他们能够接受的方式去讲解如何通过代码语言去描述一个动效。

在未来我觉得最重要的部分是社区的形成,我希望设计师们可以在这里提出或者解答关于Framer的问题,也能够分享自己的作品和思路,吸引更多的人加入。对于设计师个人,我希望他们能够在学会使用Framer的同时,也可以具有一定的工程师思维。

对我来说Framer中文网目前只是刚刚开始,还需要继续去调整或完善。