從某種層面上講，設(shè)計(jì)可看做一種利用創(chuàng)造力來(lái)改造世界的方式，單并非傳統(tǒng)意義上的改造，而是以一種更恰當(dāng)，更個(gè)人的尺度，在發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的過(guò)程中，設(shè)計(jì)師可以從商業(yè)（商務(wù)需要，技術(shù)限制）或者藝術(shù)（美學(xué)，易用性，人文因素）的角度來(lái)闡述自己的作品。不管怎么樣，究其本質(zhì)，最成功的設(shè)計(jì)可以簡(jiǎn)化為：在混沌中創(chuàng)造秩序。

首先，作為一個(gè)設(shè)計(jì)師，尤其是UI設(shè)計(jì)師，我們必須掌握前端切圖流程！

這可能意味著你得學(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)建的畫布大小（滿屏響應(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)恩？

再普遍點(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è)，增加矛盾隱患。

三、制定項(xiàng)目設(shè)計(jì)規(guī)范

這也是提升效率和整體視覺(jué)和諧感的重點(diǎn)，你要在大框架下建立小體系，這是你展示自己個(gè)性的部分，記得也要用文檔記錄下來(lái)，在以后的改版和開(kāi)發(fā)過(guò)程中，嚴(yán)格遵守規(guī)范的參數(shù)，減少溝（si）通（bi）成本。

例如：主色色值、按鈕的大小邊框、各文字類型顏色大小、模塊間隔距離等等。

四、學(xué)會(huì)怎么切圖

我一直認(rèn)為做完pSD還是SKETCH文件，往開(kāi)發(fā)那邊一扔，任務(wù)搞定的想法，是相當(dāng)不負(fù)責(zé)任的一種行為。因?yàn)樵O(shè)計(jì)不合理的部分導(dǎo)致導(dǎo)出切圖的工作變困難，因你的爛攤子，開(kāi)發(fā)效率降低，完全是因?yàn)槟愕氖д`，不要抱怨和找任何借口。

比如水平可平鋪的背景是怎么最優(yōu)化導(dǎo)出的？安卓適應(yīng)多屏幕分辨率下，點(diǎn)九圖是怎么進(jìn)行標(biāo)記和拉伸的，應(yīng)該使用什么工具？需要應(yīng)用透明背景的圖片知道應(yīng)該使用什么格式？你必須設(shè)計(jì)出自己獨(dú)立也能完成切圖工作的設(shè)計(jì)稿，再要求開(kāi)發(fā)能夠完整實(shí)現(xiàn)，而不是讓他們又來(lái)找你抱（si）怨（bi）哪里哪里是不行的你得重做。

五、一定要有標(biāo)注說(shuō)明

標(biāo)注的作用何其重要，開(kāi)發(fā)人員對(duì)于元素的間距和文字大小還有透明元素的參數(shù)設(shè)置，是沒(méi)有耐心一點(diǎn)點(diǎn)查看和檢測(cè)的（沒(méi)錯(cuò)，大部分情況會(huì)——憑！！感??！覺(jué)?。。?，你不好好把這些制作成文件白紙黑字，那么這個(gè)最重要的還原環(huán)節(jié)上出差錯(cuò)的幾率也是最多的，往后修改最困難的。

下面推薦兩軟件：

馬克鰻像素大廚

用它們做出詳盡的標(biāo)注文件，交付開(kāi)發(fā)，最后如果出現(xiàn)偏差，就有證據(jù)可以找出是誰(shuí)的問(wèn)題了。

六、結(jié)果對(duì)比調(diào)適

開(kāi)發(fā)完成視覺(jué)部分內(nèi)容以后，要開(kāi)始校對(duì)，那么盡可能給出參照物，參照物是什么呢？

高保真原型

只有同意平臺(tái)下可運(yùn)行的高保證原型可以最直觀對(duì)比設(shè)計(jì)到實(shí)現(xiàn)之間有什么偏差，并以此檢查參數(shù)設(shè)置上的錯(cuò)誤，逐個(gè)調(diào)整。

————————————————分割線————————————————

完成視覺(jué)稿的定稿和評(píng)審并不意味著視覺(jué)的工作已經(jīng)完成，視覺(jué)定稿只算是完成了75%的視覺(jué)工作進(jìn)度，要跟進(jìn)后期的視覺(jué)還原直到上線才能算是100%完成。

我跟過(guò)一些WEb/iOS項(xiàng)目的視覺(jué)還原，覺(jué)得「溝通」最重要。

溝通可分為3個(gè)階段：

前期：多方確認(rèn)

視覺(jué)定稿前的溝通，正常的項(xiàng)目管理中，視覺(jué)稿除了要給產(chǎn)品、策劃確認(rèn)之外，還需要和技術(shù)溝通確認(rèn)。把全部頁(yè)面都和技術(shù)過(guò)一遍，確保你的視覺(jué)稿是可實(shí)現(xiàn)的，不然視覺(jué)稿定稿后技術(shù)做了兩天跑過(guò)來(lái)和你說(shuō)這里做不了那里做不了，你又要返工修改視覺(jué)稿，還要再次和產(chǎn)品、技術(shù)確認(rèn)，這樣太沒(méi)效率。一般視覺(jué)還原偏差大的地方往往是動(dòng)畫效果或是一些像素級(jí)的視覺(jué)呈現(xiàn)，比如iOS端有個(gè)加入購(gòu)物袋的動(dòng)畫，如果你只是口頭和技術(shù)說(shuō)點(diǎn)擊「加入購(gòu)物袋」按鈕后會(huì)有個(gè)圓形飛進(jìn)購(gòu)物袋的ICON，那后期技術(shù)實(shí)現(xiàn)出來(lái)的效果90%不是你想要的效果，因?yàn)榧夹g(shù)不知道這個(gè)飛的弧線是怎么樣的，不知道圓形在飛的過(guò)程中有沒(méi)有大小的變化，不知道需要設(shè)定多長(zhǎng)時(shí)間飛進(jìn)去等很多細(xì)節(jié)問(wèn)題。

你要多站在技術(shù)的角度去思考，單憑口頭表達(dá)他們肯定是無(wú)法準(zhǔn)確理解視覺(jué)的意思，他們需要的是一份直觀的動(dòng)畫演示視頻。在這里只是舉一個(gè)動(dòng)畫的例子，實(shí)際工作中會(huì)遇到很多不同的復(fù)雜的頁(yè)面，你只要把技術(shù)想象成一個(gè)完全不懂設(shè)計(jì)的小白然后該如何讓他明白你的視覺(jué)稿該實(shí)現(xiàn)成什么樣就行了。

中期：視覺(jué)規(guī)范

前期的視覺(jué)稿和項(xiàng)目組相關(guān)的上下游確認(rèn)后，就該做一份詳細(xì)的視覺(jué)規(guī)范和頁(yè)面標(biāo)注了。

視覺(jué)規(guī)范可以理解成視覺(jué)和技術(shù)之間的書面溝通，越是復(fù)雜的大型項(xiàng)目就越需要一份視覺(jué)規(guī)范。原因有二，其一是大型項(xiàng)目會(huì)有好幾個(gè)技術(shù)來(lái)同時(shí)實(shí)現(xiàn)頁(yè)面，視覺(jué)規(guī)范可減少溝通成本。其二是詳盡有效的視覺(jué)規(guī)范可以標(biāo)出細(xì)致的視覺(jué)狀態(tài)供技術(shù)參考。

至于頁(yè)面標(biāo)注，確實(shí)是挺讓視覺(jué)設(shè)計(jì)師頭疼的，這本身是一個(gè)很無(wú)趣的工作，但是多大情況下還是要花時(shí)間去做。至于標(biāo)注的詳細(xì)程度，則取決于技術(shù)對(duì)pSD、視覺(jué)的理解了，我遇到過(guò)對(duì)視覺(jué)完全沒(méi)概念和對(duì)pS完全不懂的技術(shù)，當(dāng)時(shí)我沒(méi)標(biāo)得很仔細(xì)，最后還原出來(lái)的視覺(jué)頁(yè)面連我都不認(rèn)識(shí)，可以想象后期的跟進(jìn)有多累？遇到這種技術(shù)你就老老實(shí)實(shí)仔仔細(xì)細(xì)的標(biāo)注吧，視覺(jué)還原程度取決于你的標(biāo)注詳細(xì)程度。

當(dāng)前文章：【網(wǎng)站制作】怎樣讓前端100%實(shí)現(xiàn)設(shè)計(jì)效果？
文章地址：http://jinyejixie.com/news22/293122.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、用戶體驗(yàn)、網(wǎng)站內(nèi)鏈、電子商務(wù)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)