2月份的时候我在一期 Framer 视频 最后聊了对设计师学代码的看法，还挖了坑说会持续更 Framer 教程。之后发现催更的小伙伴几乎全都没有代码基础，所以决定先出一套图文版入门教程，为想学习 Framer 或单纯想写个人网站之类个人项目的设计师装备必要的开发知识。这篇文章就是熊猫人填坑的第一步，进来看文章的你也迈出了掌握强大代码能力的第一步。「全栈设计师」这个词的实际意义和字面意思并不完全匹配，最初的意思是“能独立将自己设计的UI通过代码实现出来的设计师”。后来2017年火了「全链路」这个词，部分人把「全栈设计师」和「全链路设计师」等同起来，这样理解在国内这个环境下也行吧，毕竟国内的设计师如果想让自己的技能“全”起来都会朝着「全链路」努力而不会考虑「全栈」。不过熊猫人提到的所有全栈都是指敲代码那种。在国内，敲代码的那种全栈只是一种优雅的个人追求，被少年按照说明书组装复杂大玩具一般的造物热情所驱动。前端开发的代码运行在用户的电脑或手机上，普通网站只用前端开发就能搞定。当网站的逻辑非常复杂、数据非常庞大，用户电脑无法担负这些工作，就划分出了后端开发。后端开发代码运行在服务器上，通常负责处理逻辑和数据。
注意「前端后端」和「前台后台」意思不一样，代码开发语境下务必使用前端、后端，可以减少歧义。虽然前后端开发的区别主要是看计算发生在用户端还是服务器，但目前世界范围内流行“前后端分离”的开发模式确定了信息表现的工作由前端承担，数据处理的工作由后端承担。和设计师视觉输出物关系最密切的是前端开发，你可以认为如果没有特别确定的理由就不需要关注后端开发。前端开发语言有很多种，写Web前端的是 HTML+CSS+JS (下文简称H5时默认包含css和js)，写iOS原生应用的是 Object-c 或 Swift，写 Android 的是 Java。原生语言仅用于本平台应用开发，不具备跨平台特性，比重份额非常少，如今移动APP开发在大规模应用H5，“套壳开发”这个词你可能听过，说的就是APP里面页面用H5替代原生语言去实现。对于接触开发尚浅的同学来说，H5的上手难度最小、成本也最低、应用范围超广，学会H5就能写个人网站、微信小程序，学 Framer 的前提也是会H5。所以得到一个结论，前端语言我们只学H5就好了。写代码对工具使用的要求不苛刻，第一个网页案例的话，Win系统用记事本写就行，MAC系统可以在公众号回复“代码编辑器”获取一款最流行的写代码工具。
看，虽然这段代码很简陋甚至不规范，但它真的是一个网页，只要我们不断向里面增加细节，这个网页总有一天会进化成让人买不起的样子。
设计师学代码就算是第一课案例也不可能止步于看到一行字符串，所以我们继续往里面增加信息和样式。今天不需要了解得太深，只需要尝试跟着写就OK了。网页代码需要有且只有一个 body 标签，用<body>开头，用</body>结尾，写在这中间的所有代码才是网页的主体内容。然后添加样式，写上一些style。我给整个网页指定了一张背景图(background-image)，然后让网页所有元素都始终居中显示。
写代码时候满屏的单词可能是一部分人的恐惧源头，这真的不用担心，补全代码是所有代码编辑工具的基础功能，比如下图中我只敲出“j”，工具会将“justify-content”这一大串属性名帮我自动补齐，连冒号都帮我写上。
p 标签是文本标签，我们也给它加上一些样式，比如字号、颜色、字体。各种标签、属性现在你不知道能加什么，之后只要用过一两次就能大概记住，配合代码工具可以轻松敲出来。
<body style='background-image: url(http://senioryehe.com/dtc/resource/universe.jpg);display: flex;justify-content: center;align-items: center;'><p style='color: #ffffff;font-size: 66;font-family: 'Impact';'>HELLO WORLD</p></body>
开发做的永远和设计想要的不一样，这是永恒不变的真理。也不是注定了开发和设计相克，只是信息没有传达到位，不过将所有信息对所有人都正确的及时的同步到位这件事几乎不可能。我想拿上面的简单网页举个例子。用代码实现出来的效果是唯一的，但是如果这张图是设计图，那么实现这个效果的代码并不唯一。很典型的一个不经常被同步的信息是「垂直居中」。对于上面的设计图，开发同事容易这样写👇。
<body style='background-image: url(http://senioryehe.com/dtc/resource/universe.jpg);'><div style='color: #ffffff;font-size: 66;font-family: 'Impact';width: 100%;text-align: center;margin-top: 200px;'>HELLO WORLD</div></body>
能够发现这一版本和上面的版本区别在于父容器 body 上少了些样式属性，子元素变成了 div 而且多了些样式属性。效果如何？如下图，2份代码在某个状态下一模一样，但是浏览器尺寸改变时，后边这套代码文字是固定高度(没有垂直居中属性)。
第二套代码(左)的文本没有垂直居中属性
为什么开发倾向写第二套代码？因为开发和设计的出发点不同，设计要的是“酷炫”，开发要的是“稳定”。在第一套代码中熊猫人使用的“flex”是更新更好的布局属性，但是“新”就意味着可能不兼容再过古早的浏览器，浏览器兼容适配的工作相信是每一位开发同学的噩梦。
下面是“flex”的兼容性情况，能发现连 Chrome 的古早版本都可能不兼容这个属性。不光有旧版本引起的兼容问题，还有跨不同品牌浏览器的兼容问题，这个属性写全了应该写下面这一堆👇
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
很庆幸我们是设计师，我们就是要“酷炫”，什么性能、什么兼容性这些限制对设计师可以降到无限低从而换取巨大的视觉表现力。所以，来学代码吧，带着无牵无挂追求美好的心去敲出你理想的网站。再来继续理清一些概念，下一期开始就进入真正专业的、需要做笔记的代码学习内容，最终熊猫人会带大家搭建起自己的作品集网站。有人认为H5特指移动端Web开发，其实不然，H5是当代 HTML 的版本，第5版，它不特指应用平台，说H5是移动页面开发技术就像说 Sketch 只能做移动端页面设计一样。和UI设计做个类比，H5相当于 Sketch 普及之前的 Photoshop，依靠 Photoshop 也能输出可用的优质结果，但是在大型项目推进过程中会出现一大堆源文件，进而产生逻辑混乱、不能互通、不能复用、效率低下等种种问题。React 和 Vue 的出现相当于 Sketch 横空出世，带来3个好处：①开发大型项目时路由结构更清晰。②完善的组件化机制，降低重复劳动量。③丰富的开发插件进一步降低整体工作量。但要注意：设计软件可以跳过 Ps 直接学 Sketch，但学前端开发不能跳过H5直接学 Vue。入门系列文章也将重点讲H5，后面进阶内容可能会有 React 和 Vue。学会H5之后自己做东西就够用了，个人项目根本不可能庞大到需要考虑复用啊、优化啊这些东西的地步。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
