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

丨原型很重要
視覺(jué)定稿前的溝通很依賴原型，在正常的項(xiàng)目管理中，視覺(jué)稿除了要給產(chǎn)品、策劃確認(rèn)之外，還需要和技術(shù)溝通確認(rèn)。因?yàn)樵O(shè)計(jì)師天馬行空的大腦會(huì)迸發(fā)出各種奇思妙想，例如一個(gè)看起來(lái)酷炫的動(dòng)畫(huà)，結(jié)果跑到工程師面前，工程師很犯難的表示做不了，或者硬著頭皮做到最后也發(fā)現(xiàn)不盡人意。

所以在原型步驟就要想好對(duì)應(yīng)的圖層結(jié)構(gòu)，交互特效，并和開(kāi)發(fā)人員做好交流，是否可以實(shí)現(xiàn)，功能的評(píng)估一定要細(xì)致，否則會(huì)浪費(fèi)大量的人力成本。

原型圖

丨熟悉設(shè)計(jì)環(huán)境規(guī)范
在這里提到設(shè)計(jì)環(huán)境是因?yàn)槿绻�你的原型不遵循設(shè)計(jì)規(guī)范，那就沒(méi)有溝通可言。無(wú)論是 Web 還是 iOS、安卓等等，都有對(duì)應(yīng)的設(shè)計(jì)規(guī)范文檔，如果連最基礎(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ā)布的尺寸變更等）。

舉個(gè)例子，在Web設(shè)計(jì)下，12 PX以下的中文字體無(wú)法被正常顯示，文本只支持本地客戶端已有字庫(kù)，iOS的 Tabbar、Topbar 等高度是不能被隨意變更任意增減層級(jí)等等。這樣的稿子如果被交付，并沒(méi)有強(qiáng)有力的邏輯說(shuō)服別人，只會(huì)讓你的團(tuán)隊(duì)感受到你的不專業(yè)，增加矛盾隱患。

遵循設(shè)計(jì)規(guī)范設(shè)計(jì)

中期：制定明確的項(xiàng)目設(shè)計(jì)規(guī)范**

前期的視覺(jué)稿和項(xiàng)目組相關(guān)的上下游確認(rèn)后，就該做一份詳細(xì)的視覺(jué)規(guī)范和頁(yè)面標(biāo)注了。視覺(jué)規(guī)范可以理解成視覺(jué)和技術(shù)之間的書(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ù)參考。

這里推薦一種知友@匡雪婷的做法：

用2個(gè)頁(yè)面解釋布局，再用1個(gè)頁(yè)面解釋樣式

制定規(guī)范

視覺(jué)稿完成后，每一個(gè)頁(yè)面拿出來(lái)放在左邊，再用三個(gè)畫(huà)板來(lái)說(shuō)明它。

• 橫向布局：解釋元素左右的外間距、內(nèi)間距和橫向?qū)挾�。（這里要考慮到針對(duì)不同寬度屏幕的適配，標(biāo)注是給固定值還是百分比）

• 縱向布局：解釋元素的上下間距和高度。（有時(shí)要確保頁(yè)面里最重要的信息——比如一個(gè) CFA btn——在不同屏幕大小中是否都出現(xiàn)在了首屏，判斷標(biāo)注是向上定位還是向下定位 ）

• 視覺(jué)樣式：字體、字號(hào)、行高、顏色、透明度、圓角。

單獨(dú)拎出可復(fù)用的組件，統(tǒng)一標(biāo)注

統(tǒng)一標(biāo)注

至于標(biāo)注說(shuō)明更是必須的，統(tǒng)一標(biāo)注的好處不僅是我們自己在后續(xù)的設(shè)計(jì)中可以復(fù)用和遵守， 對(duì)于 web/iOS/Andriod 的工程師而言，也能提高代碼效率同時(shí)保持不同平臺(tái)最終效果的統(tǒng)一，后續(xù)迭代的時(shí)候也不會(huì)出現(xiàn)莫名其妙的樣式和代碼。

市面上有很多插件可以幫助設(shè)計(jì)師實(shí)現(xiàn)標(biāo)注，為避免廣告嫌疑這里不做推薦，感興趣的朋友可以自行了解或者來(lái)后臺(tái)跟丁丁討論交流心（ren）得（sheng）。

標(biāo)注

后期：還原跟進(jìn)、反復(fù)驗(yàn)收

開(kāi)發(fā)完成視覺(jué)部分內(nèi)容以后，就要開(kāi)始校對(duì)，這時(shí)候就需要盡可能給出參照物，這個(gè)參照物就是你的高保真原型。對(duì)著高保真原型還原跟進(jìn)最重要的是要有細(xì)心和耐心，視覺(jué)設(shè)計(jì)師的細(xì)心程度要達(dá)到像素級(jí)才能高度還原，如果你不夠細(xì)心，每個(gè)頁(yè)面都有一些元素偏移幾個(gè)像素，那全部頁(yè)面會(huì)有很多出入。如果你不夠細(xì)心在測(cè)試環(huán)境下逐一測(cè)試不同的狀態(tài)頁(yè)面，那很可能到上線后你才發(fā)現(xiàn)有些頁(yè)面的視覺(jué)還原有重要的問(wèn)題。

 

綜上，「跟進(jìn)還原能力」對(duì)一個(gè)設(shè)計(jì)師來(lái)說(shuō)是很重要的，會(huì)做「好看」的設(shè)計(jì)師一抓一大把，但能做好商業(yè)設(shè)計(jì)，所需的能力遠(yuǎn)遠(yuǎn)不止于此，一個(gè)不具備將事情由始至終合格完成的設(shè)計(jì)師在任何時(shí)候都是不及格的，從結(jié)果導(dǎo)向上來(lái)看，甚至不如一個(gè)「你認(rèn)為比你低級(jí)很多」的設(shè)計(jì)師，擁有全方位的素質(zhì)才是「稀缺物種」。