全棧設計師指南-不正經的設計師

綜合上一篇說的，你可能已經想深入了解全棧設計師了，下面我們繼續發散一下思維。

在日常工作中，設計需要懂前端，前端其實也需要懂設計。因為工作中經常有個尷尬的問題：前端不僅吐槽你不懂代碼實現，也會對你認真輸出的設計指指點點，甚至他晚上加班寫頁面的時候突然打個電話給你：喂，設計，我覺得你這設計圖的顏色用的丑，按鈕的顏色也不好看，你看人家微信的設計。

此時怎麼回答？承認自己做的不好？不存在的，你的設計是辛苦做了那麼多版本才確定的，是你讓中國的PSD全球遙遙領先的。那這尷尬的事怎麼辦呢，你是一本正經的和他談下設計理論或者配色之道，還是不正經的隨口敷衍的連diss都不想。

在各自專業領域裡，我們都有未知的盲區，而美和丑的成因不過是因為每個人的欣賞觀點和美感層次不那麼統一，我們需要深入了解對方才能予以糾正。

回到正題，我們就說說這個與設計師下游最密切的職位：前端開發。

前端開發又分為網頁端和原生客戶端，同時由於這兩個端實現語言的差別導致他們所引發的問題和解決的難度也都不一樣，後續我們會講到設計師如何在沒有前端開發的情況下輸出完整網頁。

1、先說網頁端

網頁端又分為了傳統的PC端和強勢佔比的移動端，比較具象一點的關鍵詞是：公司官網、後台管理系統、大促專題、H5、APP；就其核心實現語言來說：HTML、CSS、JS是網頁端的基礎，APP客戶端中安卓是用Java、iOS是用Objective-C和Swift，與之對應的還有更深層的技術，譬如網頁端還有jquery、react、sass、vue等，坑深預警。

所以在做全棧設計師這個事情上，要分等級，大部分情況下你不會抱著寫代碼的心態去學前端，這跟你做了三四年設計卻一直沒學畫畫沒學攝影基本一個意思，我們只是需要懂得一些實現的邏輯和難度以及在專業術語上不弱勢。

當然還有另外一個等級，你是想在一個完整項目里扮演設計師和前端開發兩個角色，這就需要我們細細說來，甚至我們有必要促膝長談，因為的確還是有很多應用是設計開發一個人獨立完成的，其設計和體驗也都很好。

2、再說說客戶端

目前客戶端主要是指Android端和iOS端。

上圖是系統及解析度佔比

UI設計師一般需要手動切圖和標註，然後分發給安卓和iOS，而這中間如果需求改動或者被你的像素眼看穿，可能你就得把座位移到兩個端的開發中間去反覆講解調試。現在有很多解放生產力的工具可以導圖和快捷標註，甚至如藍湖，可以直接上傳就生成了切圖（需要預先處理下圖層）和標註，而sketch天生就是干UI設計的，在這方面的優勢更突出，measure一鍵導出，但是只有Mac端。

在精準還原設計圖這條路上，前端開發走的還是頗為尷尬的，最早的網頁端因為IE低版本瀏覽器的兼容性問題，可能精準還原都基本不可能，特別是後期的各種特效（漸變、陰影、動畫等）。一般都是保證能夠不錯亂的顯示，或者完全不去支持IE8及以下，那低版本的瀏覽怎麼辦呢？提示升級是常規做法，要麼用Chrome或者QQ瀏覽器之類的雙核瀏覽器。

而客戶端開發由於不需要自己切圖和標註，還原上能精準很多，但是依然逃不過像素眼的你，擼起袖子就是左左右右上上下下各5像素，可能大講個幾天進展還是那麼緩慢，但是此時如果你會用客戶端的開發工具，是不是如虎添翼，說不定還有即時靈感加持。

2、最後說下切圖

這個出錯概率不多，但是也會有命名和格式的問題。

切圖的注意事項中，一般而言：

動圖導出gif（也可以用png序列處理成動畫）；

顏色豐富的圖片導出JPG（品質60%）會讓尺寸小很多；

顏色單一的圖標類可以導出PNG格式，有條件的可以處理成svg或ttf字體，這樣清晰度和大小都能得到有效控制；

也可以轉成webp格式（支持純圖和動圖），壓縮率很大，圖片質量也較高，但是兼容性不好，特別是IE上；

還有騰訊的TPG格式，不過第三方應用的不多；

iOS端可以只切一倍的pdf，矢量圖任性；

安卓端會有點9切圖稍微有點難度，不過現在也都有工具可以快速繪製。

在學習的進程上，我覺得除了知己知彼，還要先把本職工作做完整，所以我們打開PS，等待下一篇的操作。

PS：本篇內容和第一篇類似，主要是概念或者描述，下面幾篇是以實際工作為切入點。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！