会开发的设计师真可怕

和之前的“设计软件”一样，今天说的编程语言专题也是选修的，属于加分项目，感兴趣的同学可以了解一下。所谓“程序（Program）”，就是计算机用来执行的指令序列，而“编程语言（Programming Language）”，也就是能编写程序的语言，它是让开发者能够用人类更容易理解的书写方式写出一系列的计算机运行指令，计算机收到后，就会开始按照开发者的思路执行这些指令序列，比如展示主界面、播放视频、下载游戏等等，程序也就运行起来了。很多设计师可能看到“编程”这两个字就头痛，那一大堆的代码不知道是什么意思，应该是些和数学物理一样麻烦的东西，还是交给开发同学去弄吧，咱就不掺和了行不？当然可以了，不过你是否遇到过这些困扰？

自己辛苦做出的设计，开发出来的效果跟设计稿完全不一样，那些像素对齐的问题也就算了，为什么连很多简单的动画效果都无法实现？

感觉和开发同学沟通非常困难，你说的他听不懂，他说的你听不懂，你只要求这样那样的效果，他却说这个有点难那个不好做，巴不得什么都按最简单的来，你却没办法反驳？

你有好的创意、好的设计，却少一个将网站或者软件写出来的人，这时你又很羡慕能够单枪匹马做出像《Flappy Bird》和《星露谷物语》这样游戏的人。“全栈设计师”真是一个既闪闪发光，又极端两极分化的头衔，好像人人都可以说自己是，但是真正做得好的人却懂得用作品说话。

作为一个理工科出身的交互设计师，我其实一直有一颗写代码的心，所以这么多年总是时不时会学一点，虽然总是在门槛附近徘徊，但是在工作中多少也算是尝到了一点会代码的甜头。上面说的三种困扰，前两种我基本都不会有，因为我知道开发同学是用什么语言什么方式来实现我们做的设计效果，所以我在设计时也就能够提前想好大概的实现方式；当对方说有些地方不好做的时候，我也会和他具体沟通到底是哪一块有难度，一起来从设计和开发两个角度去解决，就算实在不行，也能理解为什么做不到，大不了我们换一种方式嘛。至于第三种，也是我为什么一直在学代码的原因。总有一天，我会独立做出自己的软件和游戏的，并不是为了证明自己，而是我真的喜欢这种从无到有，亲手创造一个完美作品的过程。但是编程语言实在是太多了，并不是所有都适合交互设计师来学，我只讲三个最基本的方向吧。

一、标记语言：HTML + CSS

要说人人都要会的语言，我觉得非HTML和CSS莫属了，在互联网时代，所有的网页都离不开它们，懂得做网站曾经是2000年前后最吃香的一个职业，但现在已经不是了。并不是它们已经不重要了，恰恰相反，是因为会的人实在太多了。而且其实HTML和CSS本身学起来也并不难，所以很推荐大家都去了解一下。

（上图左边是HTML，右边是CSS）

HTML的全称是“超文本标记语言”（Hyper Text Markup Language，HTML），CSS的全称是“层叠样式表”（Cascading Style Sheets，CSS），前者是每个网页的基本内容，后者负责网页的样式美化，都属于标记语言。严格来说，它们并不能算是编程语言，因为编程语言最核心的特征是要能够让计算机运行一系列指令，而标记语言实际上只是用来写文档的，一个HTML网页和一个Word文档本质上都只是一些文字和图形的存储介质而已，但这里就不做区分了，大家把它们当成语言来学就好。1.简单的HTML我一直说HTML简单，估计你是半信半疑的，不如我举个例子吧。

这是网页标题

这是正文中的一级标题

这是第一个正文段落。

第二个段落，写几个都行。

HTML这种标记语言的特色就是像这样带有尖括号的标记了，整个网页其实就是由很多这些标记组成的。如果你要写个标题，那可以用+“标题内容”+，如果你要写个文章正文中的段落，那就用+“段落文字”+，以此类推，你还可以插入图片、视频、链接等等。现在再对照上面的例子看看，是不是就看得懂了，很简单吧！上文写出的网页，用浏览器打开是这个样子：

2.美化专家CSS

整个HTML文档其实就是用来搭建网站内容框架的，它可不管你好不好看，只要能把内容都堆上去就可以了。所以它有个好搭档——CSS，所有的美化工作都是它来做的。CSS的工作方式也很简单，就是挑出想要美化的那个标签，然后给这个标签定义样式就好了。比如上面那个HTML，我们想让正文标题（h1）变成微软雅黑，字号40px，颜色变成蓝色，就这么写：

h1{

font-family:MicrosoftYaHei;

font-size:40px;

color:blue;

}然后把这个CSS文件和HTML网页关联起来，网页就会变成：

也许你会问：为什么要搞这么复杂啊，直接把样式写在HTML文件里就好了，用CSS还要多学一种语言、多关联一个文件，有什么好处？问得好，其实很久以前确实都是直接把样式写在HTML文件里的，但是后来之所以会有人发明CSS这种语言，当然是用来解决一个很大的问题的。这个问题就是设计师最喜闻乐见的——换肤！如果把样式全都写在HTML文件里，就得在每个标签上逐个定义样式，写一次也就算了，如果一旦写错了，或者后来要改样式，那网页前端工程师可就要报警了，因为一个网页动辄几百上千个标签，一个个改过去？这工作量太大了！那有没有办法，把样式和内容分离开来，然后对这些同类的标签批量定义样式呢？比如都是正文，那写一个样式，统一定义成一个字号和颜色可以吗？于是CSS就出现了，只需要两行代码：

p{

font-size:24px;

color:#F78AE0;

}所有的段落文字样式就都变了：

无论多少个段落，只需要一次定义就搞定，等到网页上的样式全都定义好了，你就得到了一个“皮肤”——CSS文件。当你觉得样式有问题，需要微调的时候，甚至需要整套全部换掉的时候，那就去修改或者替换成另一个CSS文件就好了，完全不用去修改现有的HTML文件。这就是“一键换肤”的原理。CSS能够定义的东西有很多，除了字体、颜色、字体大小之外，边框、边距、圆角、背景还有层次等等，甚至鼠标移上按钮后的状态变化，都是它的管辖范围。这就是HTML+CSS这对好搭档，无论多复杂的网页，都是用它俩来搭建出来的，背后的原理其实很简单。思考题现在你能从下图中的网页代码中，找到CSS定义的样式和HTML标签了吗？

3.推荐书籍

如果你觉得做网页还挺有意思，有个网站叫做“W3School”做得挺好，里面有很丰富的教程，可以去看下。如果想要看书也有，我非常推荐这本《Web设计与前端开发秘籍：HTML & CSS 设计与构建网站》，作者是[美] 达科特（Duckett J）。

我看过很多本关于网页开发的书，达科特写的这本是最浅显易懂的，而且样式和排版都很精美，非常适合设计师同学。

二、脚本语言：JavaScript || CoffeeScript

既然HTML和CSS作为标记语言只是文档，不能执行命令，那网页上那些点击、输入、跳转和各种转场动画是怎么来的？这时候就需要用到编程语言了，但是C、C++和Java又太复杂，主要是还需要后台编译生成EXE文件才能执行，有没有可以用浏览器直接执行的语言？于是脚本语言（Script Language）登场了，它具有简单、易学、易用的特点，只在需要的时候被浏览器调用和运行，其中最著名的就是JavaScript了。现在所有网页上的交互动作和动画，包括弹窗、H5上的整屏动画以及输入框提示等等，都是通过JavaScript（简称JS）来实现的。所以如果你要做一个网站，HTML+CSS+JS才是一个完整的网页前端解决方案。但是JavaScript顾名思义，还是基于Java语言简化过来的东西，Java是一个历史比较久的编程语言了，本身的学习成本就很高，就算再简化也好不到哪里去。于是后来又出现了一个基于JS的的简化语言——CoffeeScript，它的语法吸收了很多现代编程语言如Python和Ruby的精髓，非常简洁易懂，而且还可以通过后台转译成JS，和JS的环境无缝连接。下面是两种语言的对比：

(引用自CoffeeScript中文网)看到CoffeeScript这个名字，你是不是觉得有点眼熟？没错，我最喜欢的高保真原型工具——Framer，它的代码部分就是基于CoffeeScript的。它的语法有多简单呢？举个例子：

你想让上面那个界面中的“Get Started”按钮点击后跳转到下一个界面，那就这么写：

GetStarted.onClick->

flow.showNext(OnboardingConnect)GetStarted是按钮的名字，Onclick代表鼠标点击动作，->代表触发一个程序行为，这个行为就是让页面流程Flow切换到下一个界面（showNext），界面名称是OnboardingConnect。这些按钮和界面都是我们在Framer的Desgin Mode下设计并命名的。是不是够简单？一个完整的编程语言，还有很多内容需要你知道：

变量（字符串、布尔值、数组等）

函数

基本的运算

if…else条件判断

for…in循环、while循环

这些内容是每一门编程语言的共通特性，都可以在JavaScript和CoffeeScript中学到，还可以很快地运用到网页设计中去，基于实例的学习才是最快、最有效的。所以我推荐想学一点编程知识的同学，可以从网页设计和开发学起，这样双管齐下，以后至少还能给自己做一个作品集网站吧。推荐书籍虽然CoffeeScript很简单，但是市面上也没啥靠谱的教程书，还是JS的学习体系比较成熟，所以要学的话还是先从JS学起吧，等到学会了基本知识再去了解CoffeeScript，就可以很快上手了。还是推荐同一个作者达科特（Duckett J）写的《Web设计与前端开发秘籍：JavaScript & jQuery 交互式Web前端开发》，推荐理由同上文，我自己也在看这本。

三、高级语言：Swift (Xcode)

如果前面两种都还不能满足你，一定非要亲手做个可以在手机或者电脑上运行的软件的话，那苹果官方推出的Swfit语言和Xcode编辑器无疑是你的最好选择。Swfit和C、C++、Java、Kotlin、Python这些一样，同属于高级编程语言，是可以真正写出电脑上、手机上可执行程序的万能语言，所有的iOS和Mac平台上的App、游戏等都是用它写的。这门语言的最早的形态是由乔布斯领导的NeXT计算机公司发明的Objective C（C语言的高级分支），苹果收购NeXT后，它就成为了iOS和Mac系统的底层语言。但是每一门语言使用久了之后都会逐渐暴露出一些之前设计上的缺陷，同时还有各种效率更高、更简化的新语言在诞生，于是苹果公司就在2014年推出了改进版的、开源的新型编程语言——Swift。相比它的前辈Objective C和C、C++，甚至是安卓以前的官方语言Java，Swift都具有很多独特的优点：它既满足了高级语言的工业化标准，又具有脚本语言简单易学而且有趣的特点；它既可以用来编写像Hello World一样的简单程序，也可以用来编写操作系统的底层代码；它还可以不用生成可执行文件直接在窗口中预览界面效果和代码运行结果。再加上和自家推出的Xcode开发环境，配合起来简直天衣无缝。

上面这就是Xcode的主界面，你可以在这里直接拖动添加各种控件到左边画面中，然后在右边调整各种属性和参数，是不是和Sketch有点像？

配置好控件后，依然可以用拖动的方式将控件添加到代码中，然后为它们添加相应的交互响应事件和运行逻辑。下面这个是我之前做的一个练习，App可以自动生成一个1~100以内的随机数，然后让你来猜，程序会告诉你输入的数字是小了还是大了，就像以前幸运52猜价格一样，直到猜中为止。

这样一个简单的程序，用Swift和Xcode来按照教程学习，就算是新手也只需要一天的时间就能做出来。因为这个是货真价实的软件开发，比较高阶，我就不推荐书了，感兴趣的同学可以去udemy.com这个网站去搜索Swift视频教程，一位叫做Wei Wei的中国台湾开发者讲的非常好。为什么我只推荐苹果系的Swift，而不是安卓系的Kotlin和Java呢？因为相比苹果这种闭环的生态链来说，安卓的开发环境和语言的学习曲线实在太不友好了，对于新手来说简直是信心和乐趣的大杀器，再加上千变万化的屏幕分辨率和无数的机型，还是饶了我吧。系列文章题图的图片授权基于：CC0协议