隨著最近十年前端的飛速發(fā)展，前端技術(shù)已經(jīng)成為互聯(lián)網(wǎng)產(chǎn)品中舉足輕重的技術(shù)。作為設(shè)計(jì)師，了解一部分的前端知識(shí)，對于自身的設(shè)計(jì)流程改進(jìn)和團(tuán)隊(duì)幫助都會(huì)大有裨益。

很多時(shí)候很多設(shè)計(jì)師并不了解前端知識(shí)，在滿足需求進(jìn)行設(shè)計(jì)的時(shí)候（低保真和高保真）很少有時(shí)候會(huì)思考到真正到開發(fā)層面上會(huì)有什么樣的問題。我曾經(jīng)和很多前端工程師交流過，他們合作過的很多UI設(shè)計(jì)師是不具備開發(fā)的思維的，一味的考慮頁面的絢麗而從不在開放的層面上進(jìn)行更多的思考。

在設(shè)計(jì)上很好做的一些小元素在實(shí)際的開發(fā)中往往會(huì)有比較麻煩的實(shí)現(xiàn)，這意味著開發(fā)團(tuán)隊(duì)不得不為了設(shè)計(jì)師所謂的視覺需求（很多時(shí)候還不見得對整個(gè)產(chǎn)品有多么大的幫助，視覺糖等等）而花費(fèi)更多的時(shí)間。在項(xiàng)目多排期緊的大環(huán)境下，很多設(shè)計(jì)師這樣的做法還是有些欠考慮。

所以作為一名設(shè)計(jì)師，如果你比較了解前端的知識(shí)，你就會(huì)在一開始的設(shè)計(jì)就考慮開發(fā)團(tuán)隊(duì)的需要，慎用無意義的視覺糖設(shè)計(jì)，更好的幫助開發(fā)團(tuán)隊(duì)節(jié)約他們的開發(fā)成本。在說明需要掌握的前端知識(shí)前，設(shè)計(jì)師擁有開發(fā)的思維是非常重要的

開發(fā)思維

開發(fā)思維，顧名思義，就是站在開發(fā)的角度來進(jìn)行設(shè)計(jì)，這更多要求作為設(shè)計(jì)師更多的體諒開發(fā)團(tuán)隊(duì)進(jìn)行設(shè)計(jì)（而不是要求你要有開發(fā)團(tuán)隊(duì)的腦回路和美感，你們也見到了很多開發(fā)工程師的美感簡直是可怕）

設(shè)計(jì)組件化，復(fù)用性思維。

開發(fā)組件化在近來大行其道，因?yàn)楸旧頁碛辛己玫倪m用型和封裝性，非常多的前端框架（也包括其他語言的框架）都比較強(qiáng)調(diào)組建化的概念。很多開發(fā)工程師會(huì)不停的復(fù)用一些組建，或者對一些組建進(jìn)行自我的修改以方便整個(gè)項(xiàng)目的需要，這樣的好處是大大的減少了開發(fā)的時(shí)間，工程師并不需要花時(shí)間去造新輪子，做好拿來主義就可以了。

設(shè)計(jì)組件化的思維很類似，由于很多互聯(lián)網(wǎng)產(chǎn)品比如移動(dòng)端網(wǎng)頁，比如APP我們經(jīng)常會(huì)有很多類似的頁面布局或者相聯(lián)系的功能，當(dāng)我們保持了設(shè)計(jì)元素組件化，對于開發(fā)團(tuán)隊(duì)會(huì)減少他們的理解成本和開發(fā)成本。

我們很多時(shí)候強(qiáng)調(diào)的設(shè)計(jì)規(guī)范實(shí)際上和這個(gè)思路有關(guān)系，但是設(shè)計(jì)組件化更多的是考慮到一些具體的控件比如按鈕，卡片化設(shè)計(jì)，通知設(shè)計(jì)等等。在很多情況下為開發(fā)團(tuán)隊(duì)在不同的開發(fā)場景需要提供一種或者幾種設(shè)計(jì)元素或者組建就可以解決很多設(shè)計(jì)開發(fā)溝通成本的問題。

位置和尺寸一樣重要

我見過很多UI設(shè)計(jì)師的切圖方式，很多圖片的標(biāo)注只是標(biāo)注了主要元素的尺寸（長寬），而并沒有為前端開發(fā)提供不同元素的位置（position）。而這樣會(huì)給前端帶來非常多的困擾，因?yàn)榍岸斯こ處煵]有很準(zhǔn)確的去預(yù)估兩個(gè)不同的網(wǎng)頁元素之間的距離應(yīng)該是多少（畢竟前端工程師沒有像素眼）。

由于在網(wǎng)頁開發(fā)中的CSS盒子模型，很多APP或者網(wǎng)頁設(shè)計(jì)中不同元素的距離，不同元素和畫布的距離是通過CSS的代碼控制的。舉個(gè)例子

由于中間的文字的css設(shè)定了相應(yīng)的margin值，所以這段文字和另外兩個(gè)段落會(huì)出現(xiàn)邊距的效果，而這就是設(shè)計(jì)稿里面我們做出來的間距。

這是一個(gè)簡化的版本,它代表了這個(gè)元素和周邊的css位置。很多時(shí)候前端工程師的代碼需要把他們寫出來，這些元素才會(huì)形成和我們設(shè)計(jì)稿上一樣的布局，而如果你沒有給前端工程師很好的標(biāo)注，他們就只能去自己測，會(huì)浪費(fèi)掉很多的時(shí)間。

我建議大家可以去W3C School的網(wǎng)站上去跟著敲一遍，你就會(huì)對HTML和CSS的位置有一個(gè)大概的了解，也就會(huì)知道為什么我會(huì)強(qiáng)調(diào)位置和尺寸并重。

Sketch有一個(gè)插件叫Marketch，他會(huì)吧你當(dāng)前頁面所有不同元素的主要CSS代碼通過js生成為一個(gè)index的網(wǎng)頁，開發(fā)想知道具體的位置和尺寸，只要上這個(gè)網(wǎng)頁點(diǎn)擊不同的元素就會(huì)知道了，Zeplin也可以做到這樣的效果，但是他是收費(fèi)的而且國內(nèi)的網(wǎng)速并不給力。

Marketch

Zeplin

理解HTML，CSS，JS

我們大部分見到的形形色色的網(wǎng)頁都是通過這三種語言來進(jìn)行編寫的。知乎有位答主胖胖小對這三者的有一個(gè)很好的回答。

HTML

HTML是一種標(biāo)記語言，他是大部分網(wǎng)頁的骨架，所有的設(shè)計(jì)元素都會(huì)需要工程師寫一些既定的代碼來實(shí)現(xiàn)他們，比如說列表和表格，或者是其他的div元素。

這些元素可以嵌套其他的元素也可以被嵌套，你可以把它想像成一層一層的樣子。

比如Material Design 熱衷的卡片化設(shè)計(jì)，這個(gè)卡片化設(shè)計(jì)你可以把它想象成外面一個(gè)大盒子，里面上下兩個(gè)小盒子，上面的盒子放圖片，下面的盒子放文字。在未來的運(yùn)營或迭代工作中，他們分管不同的內(nèi)容，不會(huì)出現(xiàn)矛盾。

如圖就是個(gè)典型的卡片化設(shè)計(jì)。

CSS

但是如果一個(gè)網(wǎng)頁僅僅只有HTML是不能滿足大部分用戶的需要，因?yàn)橐粋€(gè)純粹的骨架實(shí)在是不夠好看，我們需要讓這個(gè)骨架有血肉，有皮膚才能不會(huì)讓用戶感到難受。

一個(gè)沒有CSS代碼幫助的網(wǎng)頁大概是這樣。

這是一個(gè)知乎的沒有CSS幫助的網(wǎng)頁，他顯然就過于赤裸裸了，但是你會(huì)發(fā)現(xiàn)所有的相關(guān)網(wǎng)頁活動(dòng)（關(guān)注，點(diǎn)贊，鏈接跳轉(zhuǎn)）都是可以實(shí)現(xiàn)的，他們只是不好看罷了。

CSS的主要作用就是對網(wǎng)頁的美觀進(jìn)行優(yōu)化，我們很多漂亮的設(shè)計(jì)實(shí)現(xiàn)，實(shí)際上是通過CSS來進(jìn)行控制的，所以相關(guān)的代碼我非常建議大家去了解一下。這會(huì)幫助你在設(shè)計(jì)的時(shí)候第一時(shí)間就會(huì)考慮到他的CSS代碼會(huì)是怎么樣的。

CSS是通過不同的選擇器對HTML進(jìn)行控制的，比如類選擇器class。

Html

Capagemini is the best!

Css

.text1{

font-size:16px;

font-family:Georgia, Microsoft Yahei;

color:#02abdf;

}

由于類text1 通過css的代碼控制了這段html代碼的三個(gè)屬性（參數(shù)） font-size,font-family和color（顏色），由于CSS代碼的存在，瀏覽器在加載的時(shí)候會(huì)讓這段html的文字出現(xiàn)了顏色和字體的變化。

至于這個(gè)類（class）叫text1，你不用過多的糾結(jié)，這只是給類起一個(gè)名字，讓它更容易被記住和使用，如果你愿意你給這個(gè)控制文字的類起名叫“sadasdjaklsdjl1”也沒人管你，但是和你一起工作的前端小伙伴可能會(huì)把你吊起來活活打死。

在任何一項(xiàng)代碼中都會(huì)有定量和變量的思路，所有的變量都是可以進(jìn)行自我命名的，而定量的大部分代碼是相對比較固定的，我們通過很多固定的套路來使用這些代碼背后隱藏的功能（如果仔細(xì)的來講這些編程的理論和具體實(shí)現(xiàn)可能會(huì)花很大的篇幅，而我想你也不會(huì)有耐心去看）。

Javascript –Js

Js的全稱是Javascript，它的歷史我就不和大家贅述了，總之是個(gè)牛人用了十天就創(chuàng)造出來的語言。Javascipt里面有個(gè)Java，我們知道Java也是一個(gè)很著名的編程語言，那么這兩者的關(guān)系是什么呢？

HTML和CSS的搭配會(huì)創(chuàng)造出一個(gè)靜態(tài)網(wǎng)頁，但是靜態(tài)網(wǎng)頁的意義就是他真的就是一個(gè)安靜的美男子或者美女子，他不會(huì)很主動(dòng)的為用戶作出很多交互的功能和后臺(tái)信息的推送。

在技術(shù)日新月異的今天，通過不停的按F5來刷新的方式實(shí)在是讓人難以接受，所以Js的出現(xiàn)很好的幫助網(wǎng)頁解決了這些可交互需要的問題，他會(huì)幫助網(wǎng)頁生成很多小動(dòng)畫，可交互型，彈出框，模態(tài)，警告，信息展示的效果。

舉個(gè)栗子

Medium的網(wǎng)頁會(huì)有通知的選項(xiàng)，大部分的社交類或者博客類的網(wǎng)頁都會(huì)有這個(gè)功能，但是如果這是一個(gè)靜態(tài)網(wǎng)頁，用戶需要了解他的新的信息，他需要通過這個(gè)icon跳轉(zhuǎn)到一個(gè)新的頁面上去，這樣的做法的確不是很合適，我們對于這個(gè)通知的期望應(yīng)該是類似于Facebook那樣會(huì)有一個(gè)下拉的框里面包含了我們需要看的信息，這就足夠了，如果進(jìn)行額外的跳轉(zhuǎn)就會(huì)產(chǎn)生壞的用戶體驗(yàn)。

當(dāng)你在Medium里點(diǎn)擊這個(gè)icon的時(shí)候，他會(huì)出現(xiàn)一個(gè)下拉框如圖

而這樣的交互行為就是通過js來控制的。

很多時(shí)候大部分看來比較酷炫的網(wǎng)頁效果都是可以通過js來實(shí)現(xiàn)的（通過操作DOM，DOM就不過多贅述，你大概知道就可以了），但是js的發(fā)展非?？欤琂avascript可以做到的東西就非常多了。Js是前端里面真正意義上的編程語言，它包含所有編程語言的大部分特性（變量，函數(shù)，字符串，運(yùn)算等等），由于這樣的特性它的創(chuàng)造力就可以更強(qiáng)，在短短幾年出現(xiàn)了非常多的優(yōu)秀的js開源代碼和庫來方便從業(yè)者進(jìn)行使用。

HTML5

H5這個(gè)概念以訛傳訛被大家當(dāng)成了一種在微信廣為流傳的比較酷炫的移動(dòng)端小頁面。所以我猜HTML5的貢獻(xiàn)者和從業(yè)開發(fā)人員在面臨這樣的尷尬境地，我猜他們的內(nèi)心是這樣的。

HTML5并不是一個(gè)技術(shù)，而是一個(gè)標(biāo)準(zhǔn)。標(biāo)準(zhǔn)是什么，就是一個(gè)代碼編寫的規(guī)范，因?yàn)镠TML的代碼最終是通過瀏覽器進(jìn)行渲染，然后實(shí)現(xiàn)了網(wǎng)頁。而之前的HTML4.01 標(biāo)準(zhǔn)由于有很多冗長的代碼和缺乏對新內(nèi)容的支持（音頻，視頻等）的原因，大家覺得這樣不行，于是優(yōu)秀的開發(fā)人員設(shè)定了一個(gè)新的標(biāo)準(zhǔn)，HTML5 對于很多新的元素提供了支持，在代碼上進(jìn)行了冗余的刪改，但是這個(gè)標(biāo)準(zhǔn)依然在發(fā)展。

HTML5 對于很多元素的支持，讓前端工程師可以做出一些很酷炫的那種移動(dòng)端小頁面（典型的比如網(wǎng)易天天做的那種微信瘋狂轉(zhuǎn)發(fā)的頁面）。

HTML5的生成是可以通過一些三方軟件（易企秀）通過拉拽生成，但是這樣的頁面容易受到限制，因?yàn)楹芏嘣囟家呀?jīng)被定死了，另外一種就是原生的自己寫，所以這種所謂的H5開發(fā)和就是一個(gè)實(shí)際的網(wǎng)頁開發(fā)，他們本質(zhì)上并沒有什么區(qū)別，也不是什么可以解決一切的黑科技。

具體場景的應(yīng)用也需要去考慮，由于我們常說的H5很多是移動(dòng)端的，有很多網(wǎng)頁并不適合通過移動(dòng)端來進(jìn)行編寫，比如網(wǎng)頁后臺(tái)，比如toB的產(chǎn)品，而最適合Html5開發(fā)的頁面應(yīng)該是小輕快的網(wǎng)頁，有快速收集用戶需要，信息的填表網(wǎng)頁，有營銷宣傳的廣告小網(wǎng)頁，至于里面放多么刺激的視頻和動(dòng)感的音樂理論上并沒有太多區(qū)別。

最后給大家看一下這名前端工程師的怨念，來自知乎答主王德福。

我也希望大家作為設(shè)計(jì)師，不要和那些搞營銷的一樣天天H5H5掛在嘴邊，你會(huì)容易被前端工程師鄙視的。

CSS3

和HTML5 一樣，CSS3也算是CSS的升級版本，它提供了更多的樣式支持，比如陰影，比如圓角，比如幀動(dòng)畫，所以很多時(shí)候新的CSS3的一些代碼所渲染出來的東西很像是js做的，（他們會(huì)動(dòng)）。

如果說CSS是皮膚血肉的話，那么CSS3就是更好看的皮囊了，大部分主流的瀏覽器對于CSS3都有很好的支持。

近幾年比較流行的一些設(shè)計(jì)由于CSS3的支持可以更好的變成酷炫的網(wǎng)頁元素，比如在以前一個(gè)元素如果有陰影通過老的CSS寫出來是很痛苦的。

移動(dòng)端網(wǎng)頁開發(fā)

移動(dòng)端網(wǎng)頁的應(yīng)用非常多，移動(dòng)端網(wǎng)頁的好處顯而易見，開發(fā)者只要做出一套網(wǎng)頁基本可以應(yīng)對不同的設(shè)備（iPhone和安卓手機(jī)等），開發(fā)團(tuán)隊(duì)不需要iOS開發(fā)人員和安卓開發(fā)人員了，而這種移動(dòng)端網(wǎng)頁的功能和效果往往并不差，這都幫助了移動(dòng)端開發(fā)成為重要的網(wǎng)頁開發(fā)需求點(diǎn)。

移動(dòng)端網(wǎng)頁開發(fā)理論上就是具有更好適配移動(dòng)設(shè)備的網(wǎng)頁開發(fā)，大部分代碼和功能和傳統(tǒng)的網(wǎng)頁開發(fā)需要并沒有什么不同。

移動(dòng)端網(wǎng)頁開發(fā)最主要的技術(shù)了解就是對于適配的思考，在實(shí)際開發(fā)中，依然會(huì)出現(xiàn)不同設(shè)備的適配問題，而且和系統(tǒng)版本，使用瀏覽器是有關(guān)的，出現(xiàn)各種各樣的bug都是有可能的，作為設(shè)計(jì)師，我們在和開發(fā)溝通的時(shí)候要記下開發(fā)碰到的一些問題，在相關(guān)項(xiàng)目的未來開發(fā)有更好的改進(jìn)。

移動(dòng)端適配主要分為幾種：

Boostrap等前端框架

Flexbox，Viewpoint的CSS支持

Rem適配

使用Boostrap等響應(yīng)式前端框架，Boostrap是Twitter團(tuán)隊(duì)開發(fā)的一個(gè)前端框架，他對與HTML CSS和JS進(jìn)行了相應(yīng)配套的支持，在實(shí)際開發(fā)上，開發(fā)團(tuán)隊(duì)只需要使用Boostrap的庫，對內(nèi)容和相關(guān)需要的CSS進(jìn)行修改就可以快速完成一個(gè)響應(yīng)式的網(wǎng)頁了，減少了很多開發(fā)的時(shí)間。但是它本身也有一個(gè)問題，這些輪子是其他團(tuán)隊(duì)做的，如果你的開發(fā)團(tuán)隊(duì)并不了解這個(gè)框架的時(shí)候，會(huì)出現(xiàn)很多使用的問題，而由于這個(gè)框架本身的原因，他會(huì)有非常多冗余的代碼，在很多小應(yīng)用或者網(wǎng)頁并不需要Boostrap事無巨細(xì)的代碼量，他會(huì)增加開發(fā)的負(fù)擔(dān)以及網(wǎng)頁的效能。

所以使用Boostrap這樣的庫可以很快的做出一些前期的網(wǎng)頁或者應(yīng)用或者小網(wǎng)頁，而不用去過多糾結(jié)適配的問題，因?yàn)樗麄儼押芏鄦栴}都解決了。但是如果比較復(fù)雜的頁面是不推薦團(tuán)隊(duì)使用Boostrap的。

Flexbox，和Viewpoint實(shí)際上都是CSS支持的功能，但是使用的相對來說還是比較少。

Rem適配是移動(dòng)端網(wǎng)頁常用的方式，rem的思路你可以把它想象成一個(gè)變量，前端開發(fā)規(guī)定rem=X值 那么在開發(fā)工作的時(shí)候很多字體和元素的長寬大小都可以通過幾 rem來計(jì)算，這樣在不同的分辨率下用這樣的一個(gè)思路就不會(huì)出現(xiàn)多種適配的可能，只要用rem的思路來進(jìn)行計(jì)算就可以了。

舉個(gè)例子

h2{

font-size：24px；

font-size:2.4rem /* 24/10=2.4 */

}

這個(gè)例子中1rem=10px，而像素在不同的分辨率和設(shè)備下往往代表了不同的長度。

理論上來講，優(yōu)秀的前端開發(fā)工程師都會(huì)對rem進(jìn)行良好的適配，作為設(shè)計(jì)師，我們需要在開發(fā)之前就和工程師進(jìn)行溝通，來劃定你設(shè)計(jì)稿上的像素值（PX）究竟換算為多少rem，保持單位的統(tǒng)一，會(huì)幫助開發(fā)團(tuán)隊(duì)更好的進(jìn)行工作。

以上的這幾點(diǎn)只是前端知識(shí)中比較基礎(chǔ)的知識(shí)，而日新月異的前端發(fā)展，每天都會(huì)大量更新出非常多的前端技術(shù)，框架中的新的輪子，對于設(shè)計(jì)師來說要保持學(xué)習(xí)還是相對來說比較困難的。因此，我個(gè)人認(rèn)為設(shè)計(jì)師掌握了這些并且有一定的開發(fā)能力和思考就已經(jīng)是比較優(yōu)秀的設(shè)計(jì)師了，而很多UX設(shè)計(jì)師的硬性標(biāo)準(zhǔn)就是需要有這樣開發(fā)思維和開發(fā)技術(shù)知識(shí)的儲(chǔ)備，只有這樣，UX才能真正成為團(tuán)隊(duì)中承上啟下的粘合劑，進(jìn)而推動(dòng)整個(gè)團(tuán)隊(duì)而并不是一個(gè)簡單的設(shè)計(jì)工具。

作者