設計師要懂那些前端知識

隨著最近十年前端的飛速發展，前端技術已經成為互聯網產品中舉足輕重的技術。作為設計師，了解一部分的前端知識，對於自身的設計流程改進和團隊幫助都會大有裨益。

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

在設計上很好做的一些小元素在實際的開發中往往會有比較麻煩的實現，這意味著開發團隊不得不為了設計師所謂的視覺需求（很多時候還不見得對整個產品有多麼大的幫助，視覺糖等等）而花費更多的時間。在項目多排期緊的大環境下，很多設計師這樣的做法還是有些欠考慮。

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

開發思維

開發思維，顧名思義，就是站在開發的角度來進行設計，這更多要求作為設計師更多的體諒開發團隊進行設計（而不是要求你要有開發團隊的腦迴路和美感，你們也見到了很多開發工程師的美感簡直是可怕）

設計組件化，復用性思維。

開發組件化在近來大行其道，因為本身擁有良好的適用型和封裝性，非常多的前端框架（也包括其他語言的框架）都比較強調組建化的概念。很多開發工程師會不停的復用一些組建，或者對一些組建進行自我的修改以方便整個項目的需要，這樣的好處是大大的減少了開發的時間，工程師並不需要花時間去造新輪子，做好拿來主義就可以了。

設計組件化的思維很類似，由於很多互聯網產品比如移動端網頁，比如APP我們經常會有很多類似的頁面布局或者相聯繫的功能，當我們保持了設計元素組件化，對於開發團隊會減少他們的理解成本和開發成本。

我們很多時候強調的設計規範實際上和這個思路有關係，但是設計組件化更多的是考慮到一些具體的控制項比如按鈕，卡片化設計，通知設計等等。在很多情況下為開發團隊在不同的開發場景需要提供一種或者幾種設計元素或者組建就可以解決很多設計開發溝通成本的問題。

位置和尺寸一樣重要

我見過很多UI設計師的切圖方式，很多圖片的標註只是標註了主要元素的尺寸（長寬），而並沒有為前端開發提供不同元素的位置（position）。而這樣會給前端帶來非常多的困擾，因為前端工程師並沒有很準確的去預估兩個不同的網頁元素之間的距離應該是多少（畢竟前端工程師沒有像素眼）。

由於在網頁開發中的CSS盒子模型，很多APP或者網頁設計中不同元素的距離，不同元素和畫布的距離是通過CSS的代碼控制的。舉個例子

由於中間的文字的css設定了相應的margin值，所以這段文字和另外兩個段落會出現邊距的效果，而這就是設計稿裡面我們做出來的間距。

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

我建議大家可以去W3C School的網站上去跟著敲一遍，你就會對HTML和CSS的位置有一個大概的了解，也就會知道為什麼我會強調位置和尺寸並重。

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

Marketch

Zeplin

理解HTML，CSS，JS

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

HTML

HTML是一種標記語言，他是大部分網頁的骨架，所有的設計元素都會需要工程師寫一些既定的代碼來實現他們，比如說列表和表格，或者是其他的div元素。

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

比如Material Design 熱衷的卡片化設計，這個卡片化設計你可以把它想像成外面一個大盒子，裡面上下兩個小盒子，上面的盒子放圖片，下面的盒子放文字。在未來的運營或迭代工作中，他們分管不同的內容，不會出現矛盾。

如圖就是個典型的卡片化設計。

CSS

但是如果一個網頁僅僅只有HTML是不能滿足大部分用戶的需要，因為一個純粹的骨架實在是不夠好看，我們需要讓這個骨架有血肉，有皮膚才能不會讓用戶感到難受。

一個沒有CSS代碼幫助的網頁大概是這樣。

這是一個知乎的沒有CSS幫助的網頁，他顯然就過於赤裸裸了，但是你會發現所有的相關網頁活動（關注，點贊，鏈接跳轉）都是可以實現的，他們只是不好看罷了。

CSS的主要作用就是對網頁的美觀進行優化，我們很多漂亮的設計實現，實際上是通過CSS來進行控制的，所以相關的代碼我非常建議大家去了解一下。這會幫助你在設計的時候第一時間就會考慮到他的CSS代碼會是怎麼樣的。

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

Html

<p class="text1">Capagemini is the best!</p>

Css

.text1{

font-size:16px;

font-family:Georgia, Microsoft Yahei;

color:#02abdf;

}

由於類text1 通過css的代碼控制了這段html代碼的三個屬性（參數） font-size,font-family和color（顏色），由於CSS代碼的存在，瀏覽器在載入的時候會讓這段html的文字出現了顏色和字體的變化。

至於這個類（class）叫text1，你不用過多的糾結，這只是給類起一個名字，讓它更容易被記住和使用，如果你願意你給這個控制文字的類起名叫「sadasdjaklsdjl1」也沒人管你，但是和你一起工作的前端小夥伴可能會把你吊起來活活打死。

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

Javascript –Js

Js的全稱是Javascript，它的歷史我就不和大家贅述了，總之是個牛人用了十天就創造出來的語言。Javascipt裡面有個Java，我們知道Java也是一個很著名的編程語言，那麼這兩者的關係是什麼呢？

HTML和CSS的搭配會創造出一個靜態網頁，但是靜態網頁的意義就是他真的就是一個安靜的美男子或者美女子，他不會很主動的為用戶作出很多交互的功能和後台信息的推送。

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

舉個栗子

Medium的網頁會有通知的選項，大部分的社交類或者博客類的網頁都會有這個功能，但是如果這是一個靜態網頁，用戶需要了解他的新的信息，他需要通過這個icon跳轉到一個新的頁面上去，這樣的做法的確不是很合適，我們對於這個通知的期望應該是類似於Facebook那樣會有一個下拉的框裡面包含了我們需要看的信息，這就足夠了，如果進行額外的跳轉就會產生壞的用戶體驗。

當你在Medium里點擊這個icon的時候，他會出現一個下拉框如圖

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

很多時候大部分看來比較酷炫的網頁效果都是可以通過js來實現的（通過操作DOM，DOM就不過多贅述，你大概知道就可以了），但是js的發展非常快，Javascript可以做到的東西就非常多了。Js是前端裡面真正意義上的編程語言，它包含所有編程語言的大部分特性（變數，函數，字元串，運算等等），由於這樣的特性它的創造力就可以更強，在短短几年出現了非常多的優秀的js開源代碼和庫來方便從業者進行使用。

HTML5

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

HTML5並不是一個技術，而是一個標準。標準是什麼，就是一個代碼編寫的規範，因為HTML的代碼最終是通過瀏覽器進行渲染，然後實現了網頁。而之前的HTML4.01 標準由於有很多冗長的代碼和缺乏對新內容的支持（音頻，視頻等）的原因，大家覺得這樣不行，於是優秀的開發人員設定了一個新的標準，HTML5 對於很多新的元素提供了支持，在代碼上進行了冗餘的刪改，但是這個標準依然在發展。

HTML5 對於很多元素的支持，讓前端工程師可以做出一些很酷炫的那種移動端小頁面（典型的比如網易天天做的那種微信瘋狂轉發的頁面）。

HTML5的生成是可以通過一些三方軟體（易企秀）通過拉拽生成，但是這樣的頁面容易受到限制，因為很多元素都已經被定死了，另外一種就是原生的自己寫，所以這種所謂的H5開發和就是一個實際的網頁開發，他們本質上並沒有什麼區別，也不是什麼可以解決一切的黑科技。

具體場景的應用也需要去考慮，由於我們常說的H5很多是移動端的，有很多網頁並不適合通過移動端來進行編寫，比如網頁後台，比如toB的產品，而最適合Html5開發的頁面應該是小輕快的網頁，有快速收集用戶需要，信息的填表網頁，有營銷宣傳的廣告小網頁，至於裡面放多麼刺激的視頻和動感的音樂理論上並沒有太多區別。

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

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

CSS3

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

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

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

移動端網頁開發

移動端網頁的應用非常多，移動端網頁的好處顯而易見，開發者只要做出一套網頁基本可以應對不同的設備（iPhone和安卓手機等），開發團隊不需要iOS開發人員和安卓開發人員了，而這種移動端網頁的功能和效果往往並不差，這都幫助了移動端開發成為重要的網頁開發需求點。

移動端網頁開發理論上就是具有更好適配移動設備的網頁開發，大部分代碼和功能和傳統的網頁開發需要並沒有什麼不同。

移動端網頁開發最主要的技術了解就是對於適配的思考，在實際開發中，依然會出現不同設備的適配問題，而且和系統版本，使用瀏覽器是有關的，出現各種各樣的bug都是有可能的，作為設計師，我們在和開發溝通的時候要記下開發碰到的一些問題，在相關項目的未來開發有更好的改進。

移動端適配主要分為幾種：

Boostrap等前端框架

Flexbox，Viewpoint的CSS支持

Rem適配

使用Boostrap等響應式前端框架，Boostrap是Twitter團隊開發的一個前端框架，他對與HTML CSS和JS進行了相應配套的支持，在實際開發上，開發團隊只需要使用Boostrap的庫，對內容和相關需要的CSS進行修改就可以快速完成一個響應式的網頁了，減少了很多開發的時間。但是它本身也有一個問題，這些輪子是其他團隊做的，如果你的開發團隊並不了解這個框架的時候，會出現很多使用的問題，而由於這個框架本身的原因，他會有非常多冗餘的代碼，在很多小應用或者網頁並不需要Boostrap事無巨細的代碼量，他會增加開發的負擔以及網頁的效能。

所以使用Boostrap這樣的庫可以很快的做出一些前期的網頁或者應用或者小網頁，而不用去過多糾結適配的問題，因為他們把很多問題都解決了。但是如果比較複雜的頁面是不推薦團隊使用Boostrap的。

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

Rem適配是移動端網頁常用的方式，rem的思路你可以把它想像成一個變數，前端開發規定rem=X值 那麼在開發工作的時候很多字體和元素的長寬大小都可以通過幾 rem來計算，這樣在不同的解析度下用這樣的一個思路就不會出現多種適配的可能，只要用rem的思路來進行計算就可以了。

舉個例子

h2{font-size：24px；font-size:2.4rem /* 24/10=2.4 */}

這個例子中1rem=10px，而像素在不同的解析度和設備下往往代表了不同的長度。

理論上來講，優秀的前端開發工程師都會對rem進行良好的適配，作為設計師，我們需要在開發之前就和工程師進行溝通，來劃定你設計稿上的像素值（PX）究竟換算為多少rem，保持單位的統一，會幫助開發團隊更好的進行工作。

以上的這幾點只是前端知識中比較基礎的知識，而日新月異的前端發展，每天都會大量更新出非常多的前端技術，框架中的新的輪子，對於設計師來說要保持學習還是相對來說比較困難的。因此，我個人認為設計師掌握了這些並且有一定的開發能力和思考就已經是比較優秀的設計師了，而很多UX設計師的硬性標準就是需要有這樣開發思維和開發技術知識的儲備，只有這樣，UX才能真正成為團隊中承上啟下的粘合劑，進而推動整個團隊而並不是一個簡單的設計工具。

推薦閱讀：