前端工程師如何幹掉設計

　　前端是一個承上啟下的職位，正因為其位置的特殊性導致其必須瞭解設計和後臺的一些基本知識。本文並非教大家如何取代設計的工作，而是講解前端如何更快更便捷的實現一些簡單的設計任務，在沒有設計師的情況下如何利用工具解決UI呈現的問題，讓工作事半功倍。

　Photoshop使用

　　大多數前端工程師都有過切圖的經歷，也就是將設計師製作的PSD等格式的圖片按照需求切成專案需要的大小並實現頁面的呈現，那麼作為一名合格的前端工程師，我們有必要了解並熟練的掌握Photoshop的一些功能，下面介紹下幾個實用的Photoshop技巧（以Adobe Photoshop CS5為例）。

　　1.調整圖片大小

　　如果你在網路上找到了一張圖片或者從設計師那裡拿到一張圖片用於網頁中呈現，但是對圖片的大小不滿意的話，你只需要利用Photoshop進行調整即可，步驟很簡單，如下：

　　（1）利用Photoshop開啟圖片並點選“影像” -> 選擇“影像大小”

　　（2）修改你想要的寬度和高度

　　這裡我們一般修改畫素大小即可，修改的時候如果不勾選下方的“約束比例”，那麼影像可能會被拉扯變形，勾上可以防止寬高比例的失調，即在原圖比例的基礎上縮放。

　　2.調整區域性顏色

　　如果我們需要對圖片的區域性顏色進行更改，比如我想將下方圖片的背景變為黑色，我們可以點選“選擇” -> “色彩範圍” -> 選中背景區域 -> 調整顏色容差即可

　　（1）選擇範圍

　　（2）點選確定後，填充顏色

　　當然除了使用“色彩範圍”外，還可以使用“索套工具”或者“選擇工具”來建立選區，這裡就不做介紹了，建立複雜的選區也需要相對複雜的操作。

　　3.一鍵切圖

　　切圖應該說是前端經常要做的事情，在切圖的過程中如果遇到圖層過於複雜圖片又過於渺小的情況，我們往往需要放大整個圖片並隱藏額外的圖層來選擇我們需要的圖形區域，這相當的浪費時間和精力。這裡介紹下我們如何通過Photoshop的動作功能來實現一鍵切圖的效果。

　　（1）下載動作

　　請戳這裡下載動作檔案：https://pan.baidu.com/s/1i5I3nPb

　　（2）載入動作

　　將剛剛下載的動作檔案載入即可

　　（3）使用動作

　　載入完成後，開啟任一psd檔案，步驟如下：

　　a.首先我們選擇“移動工具”，將“自動選擇”勾選

　　b.點選我們要切的圖示，在圖層皮膚中我們可以看到對應的圖層已經被定位到

　　c.按下F2，圖示就成功切到了

　　d.按下F3儲存為web所用格式

　　關於Photoshop的技巧還有很多，以上只列出幾個對於前端來說比較常用的三個，只要我們熟悉像這樣的一些實用技巧，就可以節省很大的時間和精力。

　工具及網站使用

　　1.圖片壓縮

　　如果你想要壓縮一張圖片，除了利用Photoshop修改品質外，我們還可以利用一些自動化工具進行壓縮，比如glup、grunt等。

　　當你不具備以上開發環境和工具時，我這裡推薦一個壓縮圖片的網站，地址為：https://tinypng.com/。

　　其採用了智慧的有失真壓縮技術，通過選擇性地降低在影像中的顏色的數量，減少位元組的儲存資料量，其效果是幾乎看不見，但它可以很大程度的減少圖片的大小。

　　通過官網的例項我們來對比下兩張圖片壓縮前後的變化：

　　同樣的一張圖片，壓縮後比壓縮前減少了近1/4的體積，但是圖片清晰度任然和壓縮前一樣。

　　2.圖示下載

　　很多時候當我們的團隊中缺乏設計或者設計不在時，如果專案中需要一個logo或者圖示，我們其實可以自己搞定。通過百度搜到的圖片大都不符合我們的需求，這裡我推薦一個比較好用的圖示庫easyicon，擁有海量的圖示資源，地址為：http://www.easyicon.net/

　　如下圖所示，我們只需要輸入我們需要的圖示名稱，便可以搜尋出大量圖示：

　　當我們選擇需要的圖示時，會出現詳細的下載頁，我們可以選擇我們需要的圖示格式比如PNG、ICO或者ICONS，同時我們還可以選擇需要的圖示大小進行下載，如下：

　　相信只需這一個網站就可以滿足你的圖示需求了。

　　3.字型下載

　　這裡的字型主要指純色的字型圖示，現在很多網站的icon圖示都是以字型的形式嵌入，這樣我們可以一定程度的減少網頁中圖片的請求數量，同時也便於維護。這裡我推薦幾款比較熱門的字型圖示庫：

　　（1）阿里巴巴向量圖示庫：http://www.iconfont.cn/

　　通過淘寶的這個圖示庫，我們可以輕鬆的管理及下載我們需要的字型圖示，同時還可以製作和上傳我們的圖示，對於喜歡的圖示還可以進行收藏。

　　（2）icomoon圖示庫：https://icomoon.io/

　　這是一個國外的網站，也提供了一系列的字型圖示資源，同樣具備了圖示下載收藏等功能，不過有些字型圖示需要收費。

　　（3）fontawesome圖示庫：http://fontawesome.io/

　　fontawesome是一個以匯入CSS檔案的形式載入的圖示庫，適合中後臺專案的開發使用。更多精彩內容關注微信公眾號：全棧開發者中心（admin10000_com）

　　4.模板下載

　　這裡的模板可以是PSD格式的檔案，也可以是JPG等圖片格式，一般很多設計師都會從這些網站上尋找素材和靈感，所以我們可以直接拿過來參考和使用，對於我們網站的原型製作很有幫助，當然這也是在缺乏設計師的情況下前端能夠快速實現頁面設計的捷徑。

　　（1）UI中國：http://www.ui.cn/

　　（2）UE設計平臺：http://www.uehtml.com/

　　（3）UI製造者：http://www.uimaker.com/

　　（4）Hiiishare：http://www.hiiishare.com/

　　（5）學UI網：http://www.xueui.cn/

　庫框架使用

　　這裡的框架主要指的是前端開發中的UI框架，合理的利用UI框架可以在美化頁面的同時提高工作效率和開發成本。

　　1.適合PC端

　　（1）Bootstrap：http://www.bootcss.com/

　　Bootstrap應該算得上是最早流行的前端UI框架之一，其面世之後不僅大大方便了前端開發人員的工作，同時也方便了後臺開發人員構建前端頁面。

　　（2）flat-ui：http://www.bootcss.com/p/flat-ui/

　　flat-ui是一款免費的WEB介面工具元件庫，其UI風格十分扁平化，相比Bootstrap其更簡潔小巧。

　　（3）jQuery-ui：http://jqueryui.com/

　　jQuery-ui是jQuery的官方UI庫，其在提高CSS樣式美化的同時也提供了一系列的JS元件供開發者使用，同時也支援定製功能。

　　2.適合移動端

　　（1）Foundation：http://foundation.zurb.com/

　　Foundation是一款體積小並且提供響應式佈局的移動端優先的UI工具庫。

　　（2）Amazeui：http://amazeui.org/

　　Amazeui是中國首個開源 HTML5 跨屏前端框架。其以移動優先為理念，從小屏逐步擴充套件到大屏，最終實現所有螢幕適配，適應移動互聯潮流。

　　（3）MUI：http://dev.dcloud.net.cn/mui/

　　MUI是一款最接近原生APP體驗的高效能前端框架，其不依賴任何第三方JS庫，輕量是其重要特徵。

　　3.其他

　　隨著目前富應用框架的熱潮，很多前端JS框架都擁有自己的UI框架選擇，比如Vue的vux、vue-starp，React的ant-design等，這些框架的誕生都可以很好的給我們提供快速一站式的前端解決方案，使前端無圖化設計的應用日趨繁榮。

　總結

　　一個網站的實現離不開設計師的美化和產品經理的規劃，前端只是承接這一步的重要一環，而不是可以替代這一步的一環，我們所能做的是在缺乏上一環的情況下儘可能的利用工具和知識來彌補不足，而最終是為了更友好的將內容呈現給使用者。