作為一個(gè)視覺(jué)設(shè)計(jì)師，能熟悉產(chǎn)品的信息架構(gòu)、界面邏輯、元素所指，視覺(jué)表達(dá)能直觀清晰，讓用戶使用產(chǎn)品時(shí)、體驗(yàn)時(shí)認(rèn)同它、并產(chǎn)生愉悅即是成功。

相信很多視覺(jué)設(shè)計(jì)師會(huì)有這樣經(jīng)歷，當(dāng)接觸到一個(gè)新的項(xiàng)目；如果是熟悉業(yè)務(wù)類(lèi)型產(chǎn)品，設(shè)計(jì)起來(lái)輕松熟絡(luò)，如果是一個(gè)陌生的業(yè)務(wù)類(lèi)型，則需去摸索與嘗試，找到合適的設(shè)計(jì)定位與視覺(jué)風(fēng)格。

當(dāng)視覺(jué)對(duì)產(chǎn)品業(yè)務(wù)不熟悉時(shí)，視覺(jué)效果是出來(lái)了卻漏洞百出。

1、交互會(huì)問(wèn)：上下兩個(gè)表格為什么用線分開(kāi)？?jī)蓚€(gè)表格均指index trend，分開(kāi)后的視覺(jué)效果會(huì)更好嗎？

2、前端會(huì)問(wèn)，以下按鈕是左右無(wú)限循環(huán)嗎？還是說(shuō)左右只能按一個(gè)？還有它的不可用狀態(tài)又是什么？

3、在交互上此內(nèi)容是有翻頁(yè)效果，怎么視覺(jué)效果上沒(méi)有呈現(xiàn)？

4、下面幾個(gè)折線圖是屬于上面對(duì)應(yīng)所選中的指標(biāo)，視覺(jué)上邏輯感覺(jué)不對(duì)呀？

5、上傳包用圓環(huán)圖方式呈現(xiàn)，那幾十個(gè)上傳包豈不是幾十個(gè)圓環(huán)圖，還是進(jìn)度條好點(diǎn)吧？不熟悉產(chǎn)品業(yè)務(wù)，視覺(jué)從框架結(jié)構(gòu)到細(xì)節(jié)跳轉(zhuǎn)都經(jīng)不起推敲；缺少對(duì)業(yè)務(wù)探究過(guò)程與對(duì)每個(gè)細(xì)的深思熟慮，用戶體驗(yàn)會(huì)好么？作為一個(gè)視覺(jué)設(shè)計(jì)師，在設(shè)計(jì)開(kāi)始前－設(shè)計(jì)過(guò)程中－設(shè)計(jì)結(jié)束都需花心思與時(shí)間去了解產(chǎn)品業(yè)務(wù)，統(tǒng)籌性的輸出。能熟悉產(chǎn)品的信息架構(gòu)、界面邏輯、元素所指，視覺(jué)表達(dá)能直觀清晰，讓用戶使用產(chǎn)品時(shí)、體驗(yàn)時(shí)認(rèn)同它、并產(chǎn)生愉悅即是成功；而這一過(guò)程是需要花心思與技巧的，下面一起分享一下其過(guò)程（主要指PC類(lèi)業(yè)務(wù)）。

一、從熟悉業(yè)務(wù)系統(tǒng)開(kāi)始

不懂業(yè)務(wù)流程視覺(jué)同學(xué)拿到交互稿一看，框架結(jié)構(gòu)復(fù)雜、海量的信息內(nèi)容、80%的專(zhuān)業(yè)術(shù)語(yǔ)與量詞都是沒(méi)聽(tīng)過(guò)的；怎么辦？

先找se/產(chǎn)品經(jīng)理看需求文檔，看不懂沒(méi)有關(guān)系，起碼先對(duì)需求混個(gè)眼熟；接著獨(dú)自開(kāi)始熟悉交互稿流程，大概了解產(chǎn)品的業(yè)務(wù)邏輯與核心場(chǎng)景，心中有個(gè)路線；

試著理順那繁雜的流程，記錄不明白的點(diǎn)；再找交互設(shè)計(jì)師對(duì)稿從頭到尾聽(tīng)講一次，過(guò)程中不懂的即問(wèn)；在大司很多時(shí)候過(guò)40頁(yè)的tob類(lèi)交互稿需要2小時(shí),更復(fù)雜的可能是一個(gè)上午的時(shí)間。

有時(shí)候toc業(yè)務(wù)產(chǎn)品到tob業(yè)務(wù)產(chǎn)品系統(tǒng)，其繁雜程度就像玩游戲通關(guān)，過(guò)一個(gè)級(jí)別難度高一點(diǎn)，等通關(guān)完畢游戲順利結(jié)束；你準(zhǔn)備好逐一晉級(jí)了嗎？

二、系統(tǒng)且有目的了解過(guò)程

上面講到視覺(jué)設(shè)計(jì)師熟悉交互稿過(guò)程中，將不懂的步驟和細(xì)節(jié)問(wèn)題記錄下來(lái)，再與交互設(shè)計(jì)師對(duì)稿拉通，講解交互邏輯。

這里具體需要理清的內(nèi)容包括以下幾點(diǎn)：

1、產(chǎn)品的類(lèi)型（toB or toC產(chǎn)品）/ 定位風(fēng)格／核心功能，心中有個(gè)大致的方向；

2、布局方式（上導(dǎo)航下內(nèi)容、左導(dǎo)航右內(nèi)容等），是否看到了讓用戶清晰知道自己所在的信息結(jié)構(gòu)中的位置，深度與廣度之間合理性，能否找到頁(yè)面跳轉(zhuǎn)的快捷入口，每一個(gè)頁(yè)面都能清晰了解位置所在則上下鏈接；

3、了解業(yè)務(wù)框架邏輯與流程，正如《用戶體驗(yàn)要素》的框架層，整體界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、信息呈現(xiàn)設(shè)計(jì)，因?yàn)榈搅诉@一步，需要看到真正能呈現(xiàn)給用戶看到的東西，確定其功能范圍和頁(yè)面各個(gè)模塊的層級(jí)關(guān)系；

4、頁(yè)面承接關(guān)系（如：點(diǎn)擊、反饋形式、鏈接、跳轉(zhuǎn)、下鉆、彈出框、tips等）；

5、細(xì)節(jié)控件的狀態(tài)（如：焦點(diǎn)／默認(rèn)狀態(tài)、可以／不可用狀態(tài)、點(diǎn)擊／非點(diǎn)擊狀態(tài)、默認(rèn)／鼠標(biāo)經(jīng)過(guò)／選擇狀態(tài)、默認(rèn)／放大狀態(tài)、停止／開(kāi)始狀態(tài)）；

6、理清以上內(nèi)容后，則開(kāi)始挑選典型頁(yè)面，or是否全量輸出視覺(jué)頁(yè)面；

三、有根據(jù)的理性思考

以上步驟做完，則對(duì)交互有了一個(gè)較為大概的思路，即使不是100%清晰但也有了一個(gè)可以發(fā)散的視覺(jué)設(shè)計(jì)方向，接下來(lái)就是視覺(jué)設(shè)計(jì)開(kāi)始的籌劃。

1、產(chǎn)品定位后的確定視覺(jué)風(fēng)格方向視覺(jué)風(fēng)格的思考，即《用戶體驗(yàn)要素》表現(xiàn)層，視覺(jué)設(shè)計(jì)和內(nèi)容優(yōu)化；開(kāi)始設(shè)計(jì)是有意思的，商業(yè)需求的了解和用戶的目標(biāo)的認(rèn)清才能做出合理的設(shè)計(jì)，表現(xiàn)是最終產(chǎn)品氣質(zhì)的體現(xiàn)。如是toB類(lèi)產(chǎn)品或許是嚴(yán)謹(jǐn)?shù)模瘮?shù)據(jù)的／理性的／視覺(jué)表現(xiàn)力應(yīng)該有所收斂的；or toC類(lèi)產(chǎn)品應(yīng)該是感性的／色彩較為豐富的／圖形化的／生動(dòng)的…

2、是否有設(shè)計(jì)規(guī)范的？該業(yè)務(wù)產(chǎn)品的設(shè)計(jì)是否要求根據(jù)現(xiàn)有的指導(dǎo)性設(shè)計(jì)規(guī)范來(lái)進(jìn)行？100%遵循規(guī)范？or80%？還是細(xì)節(jié)控件？還是說(shuō)不需要遵循規(guī)范，只是統(tǒng)一風(fēng)格即可？由于每一個(gè)產(chǎn)品的設(shè)計(jì)定位與思考邏輯都是不一樣的，基于當(dāng)前的設(shè)計(jì)規(guī)范是否適用滿足與支撐現(xiàn)業(yè)務(wù)產(chǎn)品的視覺(jué)設(shè)計(jì)，都需理清楚。如下為某個(gè)控件的視覺(jué)規(guī)范示意

記得來(lái)大司接觸的第一個(gè)設(shè)計(jì)項(xiàng)目是平臺(tái)管理類(lèi)業(yè)務(wù)產(chǎn)品，且基于現(xiàn)有的設(shè)計(jì)規(guī)范——AgileUI進(jìn)行設(shè)計(jì)。在設(shè)計(jì)之前需要花時(shí)間逐一去熟悉規(guī)范和理解規(guī)范，并在規(guī)范的基礎(chǔ)上進(jìn)行視覺(jué)輸出。

3.運(yùn)用規(guī)范來(lái)指導(dǎo)設(shè)計(jì)，存在它的兩面性

設(shè)計(jì)規(guī)范一般是具有指導(dǎo)性意義，且設(shè)計(jì)人員進(jìn)行設(shè)計(jì)時(shí)必須遵守規(guī)范；設(shè)計(jì)規(guī)范具有統(tǒng)籌性作用，是可用性原則和審美常識(shí)下避免犯錯(cuò)的方法，可保持設(shè)計(jì)印象的延續(xù)性；但運(yùn)用規(guī)范同時(shí)也存在它的雙面性。

優(yōu)點(diǎn)：視覺(jué)設(shè)計(jì)輸出的效率高，出錯(cuò)性少；高效率的輸出，利于項(xiàng)目的快速推進(jìn)；基于以往的規(guī)范經(jīng)驗(yàn)，開(kāi)發(fā)難度小，技術(shù)可實(shí)現(xiàn)性強(qiáng)；版本輸出時(shí)間成本低，項(xiàng)目迭代次數(shù)快，項(xiàng)目成本相對(duì)較少；

缺點(diǎn)：視覺(jué)設(shè)計(jì)師的設(shè)計(jì)水平發(fā)揮收到限制；

對(duì)設(shè)計(jì)師的挑戰(zhàn)度低，一直遵循規(guī)范進(jìn)行設(shè)計(jì)久而久之會(huì)感到枯燥，想打破這種設(shè)計(jì)模式；

因此，在項(xiàng)目中遇到設(shè)計(jì)規(guī)范需要遵循時(shí)，請(qǐng)?jiān)谟邢薜目臻g中盡量發(fā)揮自己的設(shè)計(jì)才華,從細(xì)節(jié)處致力用戶體驗(yàn)的提升。

缺點(diǎn)：視覺(jué)設(shè)計(jì)師的設(shè)計(jì)水平發(fā)揮收到限制；

對(duì)設(shè)計(jì)師的挑戰(zhàn)度低，一直遵循規(guī)范進(jìn)行設(shè)計(jì)久而久之會(huì)感到枯燥，想打破這種設(shè)計(jì)模式；

因此，在項(xiàng)目中遇到設(shè)計(jì)規(guī)范需要遵循時(shí)，請(qǐng)?jiān)谟邢薜目臻g中盡量發(fā)揮自己的設(shè)計(jì)才華,從細(xì)節(jié)處致力用戶體驗(yàn)的提升。

四、經(jīng)過(guò)前期熟悉、了解、思考、定位后，則開(kāi)始主體視覺(jué)的風(fēng)格預(yù)言

1、先確定視覺(jué)的分辨率

即我上一篇文章提到“設(shè)計(jì)啟動(dòng)前了解多端的適配情況（分辨率／屏幕精度），綜合考慮優(yōu)先出什么分辨率”。打個(gè)比方，如果是pc的話，是固定一種尺寸大?。ㄈ缭O(shè)計(jì)資源分享網(wǎng)站酷），頁(yè)面大小是否與現(xiàn)今門(mén)戶網(wǎng)站一樣的分辨率？還是一套響應(yīng)式的設(shè)計(jì)，自適應(yīng)于1680or1920的屏幕？（舉兩個(gè)自適應(yīng)的例子蘋(píng)果官網(wǎng)和騰訊的isux）。

2、分辨率需與交互共同商議

分辨率問(wèn)題，請(qǐng)不要輕視之，與交互一商議。別輸出了十幾個(gè)寬為1330度分辨率頁(yè)面后，交互再來(lái)告訴你業(yè)務(wù)需求固定分辨率是1440！那么十幾頁(yè)視覺(jué)頁(yè)面需要重新調(diào)整，有卡片呈現(xiàn)則需要重新計(jì)算卡片大小比例等，頁(yè)面元素控件之間的位置也需重新調(diào)整，即浪費(fèi)時(shí)間也耗了精力。

3、細(xì)節(jié)問(wèn)題記錄下來(lái)，再跟蹤，澄清

在具體深入設(shè)計(jì)的時(shí)候，肯定會(huì)遇到更多之前沒(méi)遇見(jiàn)的細(xì)節(jié)問(wèn)題，這需要視覺(jué)設(shè)計(jì)的適時(shí)紀(jì)錄，逐一找交互澄清問(wèn)題。打個(gè)比方：如卡片上的標(biāo)題文字，一開(kāi)始視覺(jué)效果設(shè)計(jì)的是智能放下一行中文字，那么具體數(shù)據(jù)或英文版本時(shí)是兩行怎么解決？還是需要預(yù)留兩行的空間？還是顯示不下用“…”顯示？解決辦法是：不確定的地方先找交互設(shè)計(jì)勾兌的真實(shí)場(chǎng)景；如果是確定文字會(huì)有兩行的情況，或是英文版標(biāo)題時(shí)放不下，設(shè)計(jì)預(yù)留位置則需考慮兩行的方式，最終視覺(jué)效果應(yīng)改為兩行文字的呈現(xiàn)。

視覺(jué)設(shè)計(jì)在出稿過(guò)程需要與交互針對(duì)視覺(jué)每一個(gè)細(xì)節(jié)進(jìn)行考慮并商榷，并敲定。含糊通過(guò)的話，如以上的情況在10個(gè)視覺(jué)頁(yè)面都有，那么最后交付時(shí)再發(fā)現(xiàn)此問(wèn)題，則需要改動(dòng)十個(gè)頁(yè)面的視覺(jué)。所以，盡量的提前關(guān)注細(xì)節(jié)、溝通解決，規(guī)避問(wèn)題，提高輸出質(zhì)量。

4、初次評(píng)審

規(guī)范的遵循，組件的合理利用，可以增加視覺(jué)輸出的合理性與效率。視覺(jué)典型頁(yè)面出來(lái)后，組織se（產(chǎn)品經(jīng)理）、pl、交互、視覺(jué)、開(kāi)發(fā)可以進(jìn)行初次評(píng)審，目的是確定產(chǎn)品視覺(jué)風(fēng)格，以及后續(xù)設(shè)計(jì)方案的可行性；如果第一次視覺(jué)設(shè)計(jì)風(fēng)格已經(jīng)敲定，那么后續(xù)沿著風(fēng)格進(jìn)行即可；否則，視覺(jué)設(shè)計(jì)師則再進(jìn)行視覺(jué)風(fēng)格的探索－設(shè)計(jì)－評(píng)審－定稿－方能開(kāi)始后面設(shè)計(jì)。

五、講究輸出細(xì)節(jié)讓視覺(jué)設(shè)計(jì)有序進(jìn)行

當(dāng)視覺(jué)設(shè)計(jì)風(fēng)格敲定后，后續(xù)的設(shè)計(jì)則按計(jì)劃行事，推進(jìn)項(xiàng)目的進(jìn)程，但輸出過(guò)程的細(xì)節(jié)也需要值得關(guān)注。

1、分模塊／按優(yōu)先次序鋪量輸出，定期進(jìn)行視覺(jué)評(píng)審；讓交互直觀指向問(wèn)題，視覺(jué)跟進(jìn)與迭代輸出；

2、輸出頁(yè)面命名的規(guī)范性／與交互一一對(duì)應(yīng)拉通，形成合格的交付文檔，在這里可以展開(kāi)為以下幾點(diǎn)：可以建立視覺(jué)頁(yè)面輸出跟蹤表，交互整理輸出條目，并進(jìn)行編號(hào)；

視覺(jué)跟進(jìn)表格，完成一個(gè)勾選一個(gè)，形成可預(yù)見(jiàn)的文檔輸出；

視覺(jué)源文件psd文檔一一對(duì)應(yīng)視覺(jué)頁(yè)面png文件，避免一個(gè)psd對(duì)應(yīng)多個(gè)png的情況；

其他設(shè)計(jì)師、前端或開(kāi)發(fā)拿到文件時(shí)也是清晰了然；

視覺(jué)規(guī)范指導(dǎo)開(kāi)始時(shí)，規(guī)范輸出邏輯保持與開(kāi)發(fā)邏輯的一致性。

六、結(jié)語(yǔ)

作為一名視覺(jué)設(shè)計(jì)師，了解產(chǎn)品、熟悉業(yè)務(wù)性質(zhì)，避免輸出一些沒(méi)有意義的設(shè)計(jì)，讓頁(yè)面中的每一個(gè)設(shè)計(jì)元素傳達(dá)具有準(zhǔn)確含義；在視覺(jué)設(shè)計(jì)前主動(dòng)投入學(xué)習(xí)成本，看懂交互，做好充足準(zhǔn)備－－因?yàn)?，懂業(yè)務(wù)是體驗(yàn)的基礎(chǔ)。