手段之编程语言（上）

和之前的“设计软件”一样，今天说的编程语言专题也是选修的，属于加分项目，感兴趣的同学可以了解一下。所谓“程序（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文档本质上都只是一些文字和图形的存储介质而已，但这里就不做区分了，大家把它们当成语言来学就好。简单的HTML我一直说HTML简单，估计你是半信半疑的，不如我举个例子吧。

这是网页标题

这是正文中的一级标题

这是第一个正文段落。

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

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

美化专家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文件。这就是“一键换肤”的原理。这就是HTML+CSS这对好搭档，无论多复杂的网页，都是用它俩来搭建出来的，背后的原理其实很简单。思考题现在你能从下图中的网页代码中，找到CSS定义的样式和HTML标签了吗？

推荐书籍

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

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

虽然是选修，但是我怎么写着写着就这么长了……主要是不展开介绍呢好像又等于啥也没说，一展开又有点刹不住车，这个度还挺难把握的。网页这部分这样写已经是极限了，后面两个模块我会写简单些。（未完待续）系列文章题图的图片授权基于：CC0协议【书斋小笺】过分了过分了，现在周末发文章可是越来越晚了，主要是没有一个上班时间做约束，我真的可以边想边写，然后又带娃又开车回东莞，不知不觉就到了晚上了。这样的好处是不会那么紧张，可以慢慢想，但是坏处也很明显，就是我好像一整天都在围绕着一篇文章在转，只要没写完就一直有件心事，很焦虑。这样不行，周末大好时光，我以后还是争取早点起床早点写完吧。这篇文章编号228，首发于2018年6月16日。