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

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

使用教程見：《想要一稿過不加班？Sketch絕配神器Mirror搶先體驗(yàn)》

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

請(qǐng)一起為更好的產(chǎn)品努力吧！！

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

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

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

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

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

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

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

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

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

我還遇到過對(duì)視覺有一定理解，PS操作也比較熟悉的技術(shù)，像這樣的技術(shù)就比較省心了，只需要大體框架標(biāo)一下，然后把PSD給他就行了，他會(huì)自己去測(cè)量間距、色值、字體、字號(hào)等，最后技術(shù)首次還原的效果至少都80%以上，剩下20%就自己跟進(jìn)一下就好了，不太費(fèi)心。

后期的視覺還原跟進(jìn)最重要的是要有細(xì)心和耐心。

技術(shù)初步完成頁面實(shí)現(xiàn)后，就得靠視覺主動(dòng)去跟進(jìn)還原了。

如果是在小公司，可以買飲料和零食坐在技術(shù)旁邊，對(duì)照著視覺稿一一修改。

如果是在大公司，一般都會(huì)有項(xiàng)目管理平臺(tái)，需要把看到的視覺問題記錄在視覺BUG文檔，提交到平臺(tái)上，技術(shù)會(huì)對(duì)照著文檔來修改，一般這種視覺修改會(huì)有2次以上才能還原到視覺稿95%的程度。

這個(gè)視覺跟進(jìn)的過程中極其需要細(xì)心和耐心，缺一不可。視覺設(shè)計(jì)師的細(xì)心程度要達(dá)到像素級(jí)才能高度還原，如果你不夠細(xì)心，每個(gè)頁面都有一些元素偏移幾個(gè)像素，那全部頁面會(huì)有很多出入。如果你不夠細(xì)心在測(cè)試環(huán)境下逐一測(cè)試不同的狀態(tài)頁面，那很可能到上線后你才發(fā)現(xiàn)有些頁面的視覺還原有重要的問題。還有，你需要耐下心來把檢測(cè)到的視覺BUG寫進(jìn)文檔里，提交給技術(shù)。視覺BUG多的時(shí)候可能會(huì)寫好幾十條，夠?qū)憘�(gè)半天了，沒耐心還真不行。