視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?(3)

所有的項目和產(chǎn)品都會有開發(fā)計劃，雖然很多情況下計劃總是趕不上變化（需求變更啦，上線時間提前啦），但是大體上每個開發(fā)人員對自己所負責的部分有自己的優(yōu)先級排序。在我所做的產(chǎn)品和項目中，研發(fā)人員大部分情況下的關(guān)注度是：功能實現(xiàn)>效果實現(xiàn)。這個時候其實更重要的是統(tǒng)一對優(yōu)先級的認識。

如果開發(fā)計劃已指定，同時研發(fā)人員也認可交付時間點，那么在開發(fā)任務(wù)內(nèi)的計劃，視覺設(shè)計師撒潑打滾躺地賣萌，曉之以情動之以理，怎么打動前端工程師，網(wǎng)上也有很多同仁的經(jīng)驗技巧，總是能實現(xiàn)的。

設(shè)計的實現(xiàn)，不僅僅是前端工程師的工作，有時候也需要后臺的配合，想要實現(xiàn)，那就得給咱們工程師時間，不能又想馬兒跑，又不給馬吃草吧？

同時設(shè)計和程序是息息相關(guān)的，有時候并不是不想實現(xiàn)這樣的設(shè)計，而是因為確實有一些問題，比如說在 Digg 還流行的那段時間，他們的首席設(shè)計師和首席程序員之間的爭論：

丹尼爾·博卡（Daniel Burka）（Digg 的首席設(shè)計師）和喬·思湯普（Digg 首席程序員）之間有一場非常著名的爭論。那個時候丹尼爾想要在 Digg 的「按鈕」上做出一次設(shè)計上的變動。對于丹尼爾來說，這個變動就是微小的一點；但對于首席程序員喬來說，即便設(shè)計上微小的一點變動都會對整個網(wǎng)站的響應(yīng)時間產(chǎn)生巨大的影響。為了適應(yīng)這一點點的變化 Digg 網(wǎng)站必須提升自己的處理效率，改善服務(wù)器的內(nèi)部架構(gòu)：http://tech2ipo.com

所以在我們團隊做一些設(shè)計咨詢項目時，會把技術(shù)人員引入進來。

溝通不到位

切好圖，標注好。

用對方聽得懂的語言。前面說了很多視覺設(shè)計師并沒有技術(shù)基礎(chǔ)，但是理解一些術(shù)語對于和程序員溝通是非常有效的。比如說動效里有很多，你說了半天「從這里到那里」，「速度稍微慢一點」，可能也很難做到你想要的那種效果。但是如果你說，這個動畫的 Tension（拉力） 數(shù)值，F(xiàn)riction（摩擦力）數(shù)值，cubic-bezier函數(shù)是多少，那程序人員相對會比較好理解。

可以參考這個網(wǎng)站，找到很多動畫效果的名稱： Form Follows Function

不斷跟進。設(shè)計給完圖之后不能不聞不問，等到代碼寫完后才傲嬌地說：“哎呀，沒按我的設(shè)計效果來”。確保設(shè)計效果的實現(xiàn)也是設(shè)計人員的職責，建立 Bug 文檔，貼圖對比，描述清楚，因為并不是每個人都是像素眼，對美的認識也不一樣。

總結(jié)一下

過程：溝通—>設(shè)計評審—>交付設(shè)計圖—>再次溝通—> 跟進追蹤

每一份工作都不是看上去的那么簡單，設(shè)計不僅僅只是個畫圖把東西變得好看些的人，程序員也不只是寫寫代碼（在我們團隊的一些項目中，很多設(shè)計不合理的地方都是程序員指出來的），最重要的相互間的溝通和理解。

其實我建議能修改下這個問題的說辭，什么叫「是怎樣讓前端工程師100%實現(xiàn)設(shè)計效果的呢」，這并不只是前端工程師的工作，不是「怎么樣讓人去實現(xiàn)的」，而是「怎么配合」的問題。