从菜鸟到行家,从面条说起

这几天在给公司页面加新功能,前前后后改了三四天。我司的代码混乱不堪的程度,让“找到需要改的部分”都成为了一项技能,对,我时不时就会收到帮忙找文件的请求……添功能本身不是件麻烦事,大部分的时间用来整理代码结构和逻辑。我把其中一部分面条截图给小伙伴,相顾无言,唯有泪千行。

花了一整天把功能整理好,重写了方法,回头想了想,我大概又 Level Up 了。如果说美工和设计师,打字工和程序员有什么质的区别,可能很多人都会说,学习和思考。学什么,想什么,如何判断哪些东西是自己要学的,如何判断哪些东西是自己该想的,却鲜少有人提及。我也只是想站在设计师与程序员的夹缝地带聊一聊这些事。

在整理代码的时候,跃入眼帘的词,是抽象化,这个词对于程序员来说并不陌生,但是对于设计师来说可能就不太熟悉了。

抽象化,虽然听起来就很抽象,但其实我们早就很熟悉这种模式了。早在小学乃至幼儿园时期,我们学算术的时候,老师从来不会直接讲1+1=?,而是会说,这里有1个苹果,再拿来1个苹果,于是我们有了几个苹果?然后再多次举例,1个苹果,1棵树,1栋房子,1个人,虽然都是不一样的东西,但是我们都可以用“1”来表示。这应该就是我能想到的,我们最早接触抽象化这一思考行为的实际例子了。

而抽象化在设计、艺术上更是常见的很了。最广为人知的例子应属毕加索的《牛》(The Bull),这套画一直是用来解释如何抽象精简概念的名作(顺便还搜到一篇文章 How Apple Uses Picasso To Teach Employees About Product Design 2333)。

the Bull
牛——毕加索

谷歌公司的 Material Design 也是基于真实材料的构想,使用光效、表面质感、运动感这三个要点,在手机屏幕上呈现具有真实感,而适用性极佳的设计。

好了,小学生就学过的抽象化和谷歌公司所使用的抽象化有什么不同呢?答案是,没有区别,是一样的行为。只是所用之处和所用情景不同,才导致了不同的结果。

回到我们的面条上…在程序中所指的面条并不可食用,而是指那些结构复杂逻辑混乱的代码块。被迫学了点代码的设计师,就是最容易写出面条代码的一类人群。但是我们是设计师嘛,为什么要操心代码的事,操心我们的设计稿就好,然而,你确定你的设计稿不是乱成一锅馄饨?

一般来说,界面设计过程中的抽象化的过程大概是这样的:找到复用性高的组件,将其特点总结出来,并制定成一个在某些方面可定制的套件。感觉是否似曾相识?如果你曾经看过 Material Design 的 Guideline、VI或者任何前端框架的组件库,它们基本都是按照相似的方式排列组件的,然而有些厂商(我就不点名了2333)的界面,界面元素不统一、样式不统一、反馈不统一、设计语言不一致…简直噩梦,全心全意为用户,添堵。

我们现在习惯的设计过程大抵是反过来的,先设计组件,再组合模式。这是因为前人都在不断的实践中帮我们总结好了这些规律,我们只需要站在巨人的肩膀上去套用就可以了。尽管如此,经验的巨大差别还是会反映在作品中。一个按钮有几种状态?有哪些场合需要区别使用?一段提示消息有几种展现方式?每种方式都适用于何种情形?这就是所谓细节的魔鬼,在习惯了高度抽象化的组件之后,反而缺乏对具体场景的分析和思考,无法超越框架为设计者框下的框架。

写代码的时候更需要这种高度抽象的能力,一切编程问题都可以归结到两样东西上,一是数据结构,二是算法。在前端世界,这个绝大多数的“程序员”都是非科班出身的世界里,拥有这两项技能的人,微乎其微。很多地方都会指出,学软件工程或者 CS 出身的人,大都不屑于去写前端。HTML也不过是 markup,CSS更是混乱不堪毫无逻辑(连编程的毛毛都算不上)还跟DOM高度耦合,唯一稍微接近于程序语言的 JavaScript,也以其自身糟糕的过往而成功被科班程序员踹进垃圾堆。而令人庆幸的是,大部分前端业者都是自学成才,而他们最引以为傲的技能也是——自学。

值得庆幸的是,很多需要学习的东西,早就被前人整理为系统的教学方法,无论是设计中的三大构成,还是编程中的数据结构,都可以说是通向专家的捷径(教育本身也就是为此诞生的…高效地传递知识),但是很多时候我们的能力让我们无法看到其中的本质,我们的态度让我们不屑于挣扎于无趣的基础知识中,而只能从浅层去关注实现的细节,导致我们的学习过程更像是来回翻滚,本应在一开始打好的基本功,却在之后一样样补(切记,出来混,迟早是要还的)。

如果说学习就是多看,多记,多背。思考就是从看到的记住的东西中,整理总结出一套自己的模式和方法。如果说学习是学习理论基础、模式范式,思考就是整理它在实际应用中的具体细节。当你积累了足够多的实例,也掌握了足够多的概念和方法论,那应该就可以向菜鸟的自己说永别,而进入新世界了。至于专家,或者大师,他们是创造这个世界的人,创造并奠定了整个学科体系的人,而他们所做的,也不过就是从已有的(和尚未有的)实例中,抽象出新的概念,进而推进整个学科更进一步的发展。不过这又是另一码事,而我等初阶小屁孩触不可及的另一次元了。

本部落格采用DISQUS评论系统,如果您无法见到留言框,可前往我的GitHub微博提Issue(留言)。
为您带来了不便我也很尴尬╮(╯_╰)╭