視覺(jué)設(shè)計(jì)，怎樣讓前端100%實(shí)現(xiàn)設(shè)計(jì)效果？

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

讓我們來(lái)舉舉例子：

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

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

再者，假如我們填滿這個(gè)設(shè)計(jì)稿（咳咳，比較粗糙的填上）：

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

再類似這樣的案例：

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

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

下面就來(lái)講重點(diǎn)~~~

一、設(shè)計(jì)前請(qǐng)審核原型

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

下面放我自己平時(shí)做的原型：

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

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

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

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

《ios&安卓設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范》《iPhone APP設(shè)計(jì)規(guī)范/iPad》《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》三、制定項(xiàng)目設(shè)計(jì)規(guī)范