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

還有就是MAC的童鞋們，使用SKETCH的MIRROR~這就不多做贅述，最近風頭正勁的設計軟件。

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

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

請一起為更好的產品努力吧�。�

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

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

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

溝通可分為3個階段：

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

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

前期的視覺稿和項目組相關的上下游確認后，就該做一份詳細的視覺規(guī)范和頁面標注了。

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

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

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

后期的視覺還原跟進最重要的是要有細心和耐心。

技術初步完成頁面實現后，就得靠視覺主動去跟進還原了。

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

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

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