視覺設計，怎樣讓前端100%實現(xiàn)設計效果？

作為一個設計師，尤其是UI設計師，請跟我一起大聲念：必須掌握前端切圖流程��！這可能意味著你得學會HTML+CSS，或者要長時間和IOS或者安卓開發(fā)人員交流他們是怎么把圖片和文字排進屏幕內的。別老是抱怨你是設計怎么能去學碼農的東西，設計人員對這些看似高深的源碼有本能的畏懼和厭惡。無論你所在的公司在項目人員配置上如何貼心到位，但如果你自己沒有掌握這些知識點，就不要妄想最后實現(xiàn)環(huán)節(jié)上能順利收尾，因為你從出發(fā)點開始和程序員的認知就不對稱，這些不對稱是矛盾和偏差的根源。

讓我們來舉舉例子：

例如你設計了這么個樣式，傾斜、層疊，你有沒有在設計的過程中考慮過這么設計的后果（國內外高能前端請不要加入此列）？你在當前寬度畫布中設計效果似乎還不錯，這注定該是個填滿瀏覽器顯示區(qū)域的設計，但是放大后呢？1920寬下怎么辦，難道得是這個模樣？？

因為在水平線上無法直接延伸平鋪的設計，在前端部分你讓開發(fā)人員怎么幫你填補這兩個區(qū)域的空白，你從設計初就不知道在對應設計類型下應該創(chuàng)建的畫布大�。M屏響應式設計要準備好大小兩種或多種方案），那進入切圖環(huán)節(jié)我已經能腦補出你和開發(fā)人員是怎么撕逼的盛況了。

再者，假如我們填滿這個設計稿（咳咳，比較粗糙的填上）：

這些沒有內容被紅線框出的背景區(qū)域最后怎么呈現(xiàn)出來？這里面幾個主要的傾斜圖形上面還疊加了對應內容、圖片、文字，還有前后關系，別指望前端設計人員能輕松實現(xiàn)，如果你用一張背景圖填充，那這張背景圖的大小控制得�。考虞d過程要多久？導出WEB用途格式圖片是選擇“連續(xù)”還是“優(yōu)化”？

再類似這樣的案例：

現(xiàn)在很多小年輕們迷戀追波上大神們做的牛逼的動效，于是設計的時候光靜態(tài)稿件不甘心，也來做個AE特效玩玩，壓根沒有考慮IOS或者安卓在實現(xiàn)這樣的效果時，需要哪些運行機制，有沒有這樣的控件支持，會不會不流暢等等！自己用了一整晚的時間折騰這么酷炫高大上的動畫，開發(fā)這些土鱉居然告訴我不能實現(xiàn)恩？？撕逼ING………

再普遍點的，是不是每次前端開發(fā)完你發(fā)現(xiàn)絕大多數元素和字體都不對，沒有對齊，大小加粗等細節(jié)沒有注意，但是開發(fā)拿設計稿就是沒辦法100%實現(xiàn)的借口的來搪塞你？？

下面就來講重點~~~

一、設計前請審核原型

在原型步驟就想好對應的圖層結構，交互特效，并和開發(fā)人員做好交流，是否可以實現(xiàn)，功能的評估一定要細致，否則會浪費大量的人力成本。還有原型是挺嚴肅一玩意兒，但是大多數團隊或者設計都沒有認識到它們的價值，在這里不展開原型的細節(jié)了，這還可以再寫一個長評，你們懂意思就好拉，畫在紙上的手稿也比沒有強。

下面放我自己平時做的原型：

二、熟悉設計環(huán)境規(guī)范

無論是WEB還是IOS、安卓、WP等等，都有對應的設計規(guī)范文檔，我下面會帖出來。如果連最基礎的設計規(guī)范都不知道就開始做設計，那么你要自己承擔項目拖延和被整個開發(fā)組人員問責的后果。在你動手前，請好好的做完功課，并且在每次環(huán)境大升級時跟進關注（例如新的iPhone6、6+發(fā)布的尺寸變更等）。

前人已經栽好了樹，你需要做的就是在既定框架內完成設計即可。你要牢記自己的設計是基于相應的運行環(huán)境的，沒有足夠的能力前，不要有認為這套體系下的設計都很“土”，你是一個要成“大神”的男人，打破限制和規(guī)范是你的嗜好和品位。如有以上想法，請對著鏡子里的自己說：Navie！

例如WEB設計下，12PX以下的中文字體無法被正常顯示，文本只支持本地客戶端已有字庫，IOS的TABBAR、TOPBAR等高度是不能被隨意變更任意增減層級等等。這樣的稿子如果被交付，并沒有強有力的邏輯說服別人，只會讓你的團隊感受到你的不專業(yè)，增加矛盾隱患。SO，好好看看這些文章：

《ios&安卓設計標準規(guī)范》《iPhone APP設計規(guī)范/iPad》《基礎知識學起來！為設計師量身打造的DPI指南》三、制定項目設計規(guī)范