知乎問題：視覺設(shè)計(jì)師是怎樣讓前端工程師 100% 實(shí)現(xiàn)設(shè)計(jì)效果的？

問題補(bǔ)充：發(fā)現(xiàn)自己設(shè)計(jì)的app和網(wǎng)頁，在前端顯示總是和設(shè)計(jì)效果偏差很遠(yuǎn)。和工程師溝通卻說不可能100%呈現(xiàn)的，但實(shí)際上80%都沒達(dá)到。想了解下，各位設(shè)計(jì)界的前輩是怎么做的，才能讓前端顯示盡量和設(shè)計(jì)效果一致。

下面是知乎用戶 的回答，小編覺得很多價(jià)值，感興趣的讀者可以看一看，領(lǐng)悟一下。

首先，作為一個(gè)設(shè)計(jì)師，尤其是UI設(shè)計(jì)師，請跟我一起大聲念：必須掌握前端切圖流程??！

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

讓我們來舉舉例子：

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

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

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

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

再類似這樣的案例：

現(xiàn)在很多小年輕們迷戀追波上大神們做的牛逼的動效，于是設(shè)計(jì)的時(shí)候光靜態(tài)稿件不甘心，也來做個(gè)AE特效玩玩，壓根沒有考慮IOS或者安卓在實(shí)現(xiàn)這樣的效果時(shí)，需要哪些運(yùn)行機(jī)制，有沒有這樣的控件支持，會不會不流暢等等！自己用了一整晚的時(shí)間折騰這么酷炫高大上的動畫，開發(fā)這些土鱉居然告訴我不能實(shí)現(xiàn)恩？？撕逼ING.........
再普遍點(diǎn)的，是不是每次前端開發(fā)完你發(fā)現(xiàn)絕大多數(shù)元素和字體都不對，沒有對齊，大小加粗等細(xì)節(jié)沒有注意，但是開發(fā)拿設(shè)計(jì)稿就是沒辦法100%實(shí)現(xiàn)的借口的來搪塞你？？

下面就來講重點(diǎn)~~~
==========重點(diǎn)==========

1、設(shè)計(jì)前請審核原型

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

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

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

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

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

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

基礎(chǔ)知識學(xué)起來！

為設(shè)計(jì)師量身打造的DPI指南  

ios&安卓設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范  iPhone APP設(shè)計(jì)規(guī)范/iPad

擦！！突然發(fā)現(xiàn)一些收藏不見了~~后面慢慢更

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

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

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

請看這個(gè)：@souhlin采集到設(shè)計(jì)規(guī)范(76圖)_花瓣UI 交互設(shè)計(jì)

4、學(xué)會怎么切圖

我一直認(rèn)為做完P(guān)SD還是SKETCH文件，往開發(fā)那邊一扔，任務(wù)搞定的想法，是相當(dāng)不負(fù)責(zé)任的一種行為。因?yàn)樵O(shè)計(jì)不合理的部分導(dǎo)致導(dǎo)出切圖的工作變困難，因你的爛攤子，開發(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ì)稿，再要求開發(fā)能夠完整實(shí)現(xiàn)，而不是讓他們又來找你抱（si）怨（bi）哪里哪里是不行的你得重做。

5、一定要有標(biāo)注說明

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

下面推薦兩軟件：

markman：index.title

pixcook:FancyNode - PxCook

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

6、結(jié)果對比調(diào)適

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

高保真原型

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

在這里強(qiáng)烈推薦——Invision在線原型工具

Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool

可以制作APP和WEBSITE，并分享遠(yuǎn)程連接在手機(jī)和別的電腦上預(yù)覽，下面放我之前做過一個(gè)小項(xiàng)目的實(shí)例（最好翻墻訪問比較快）：

傳送門——InVision

或者PSPLAY，這個(gè)請?jiān)L問官網(wǎng)看詳情，也是可以在移動設(shè)備直接查看設(shè)計(jì)文件的工具，不過更適合設(shè)計(jì)過程中使用，但不妨結(jié)尾的時(shí)候做對比

傳送門——Ps Play – 移動設(shè)計(jì)零阻力

還有就是MAC的童鞋們，使用SKETCH的MIRROR~這就不多做贅述，最近風(fēng)頭正勁的設(shè)計(jì)軟件。

傳送門——Bohemian Coding

好了~一下午打了那么多內(nèi)容，還有磚要去搬了~~還有很多內(nèi)容沒空放上來，以后一點(diǎn)點(diǎn)更新，很多疏漏之處，歡迎指正。說了這么多，就是要告訴所有做UI設(shè)計(jì)的同行新手們，能正確的分析問題，從自身的知識能力出發(fā)來看待問題。我們和程序都是項(xiàng)目的執(zhí)行人，需要相互間的磨合和協(xié)助共同輸出產(chǎn)品，在對方的結(jié)果不盡人意時(shí)，請先從上面的幾個(gè)點(diǎn)力反思，自己有哪些不足，再和對方討論，這樣不但給自己帶來進(jìn)步，也為團(tuán)隊(duì)節(jié)省更多的時(shí)間。

新聞名稱：視覺設(shè)計(jì)師是怎樣讓前端工程師 100% 實(shí)現(xiàn)設(shè)計(jì)效果的?
鏈接URL：http://jinyejixie.com/news/159625.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、做網(wǎng)站、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作

廣告

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