品牌設(shè)計(jì)應(yīng)該如何交付？

作為一個視覺設(shè)計(jì)師，能熟悉產(chǎn)品的信息架構(gòu)、界面邏輯、元素所指，視覺表達(dá)能直觀清晰，讓用戶使用產(chǎn)品時，體驗(yàn)它認(rèn)同它，并產(chǎn)生愉悅即是成功，而懂業(yè)務(wù)是體驗(yàn)的基礎(chǔ)。但如果你是不懂業(yè)務(wù)的新手，該如何做好視覺設(shè)計(jì)呢？來看今天分享的親歷經(jīng)驗(yàn)。

相信很多視覺設(shè)計(jì)師會有這樣經(jīng)歷，當(dāng)接觸到一個新的項(xiàng)目；如果是熟悉業(yè)務(wù)類型產(chǎn)品，設(shè)計(jì)起來輕松熟絡(luò)，如果是一個陌生的業(yè)務(wù)類型，則需去摸索與嘗試，找到合適的設(shè)計(jì)定位與視覺風(fēng)格。當(dāng)視覺對交互的業(yè)務(wù)性質(zhì)、框架邏輯、層級關(guān)系不熟悉時候，視覺效果是畫出來了卻漏洞百出.

1、交互會問：上下兩個表格為什么用線分開？兩個表格均指index trend，分開都不是從屬關(guān)系了..

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

3、在交互上是有翻頁效果，怎么視覺效果上沒有呈現(xiàn)？

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

5、上傳包用圓環(huán)圖方式呈現(xiàn)，那幾十個上傳包豈不是幾十個圓環(huán)圖，還是進(jìn)度條好點(diǎn)吧？

如果不熟悉業(yè)務(wù)，視覺上從框架結(jié)構(gòu)到細(xì)節(jié)跳轉(zhuǎn)都經(jīng)不起推敲；缺少業(yè)務(wù)探究過程與對每個細(xì)的深思熟慮，用戶體驗(yàn)會好么？

作為一個視覺設(shè)計(jì)師，在設(shè)計(jì)開始前－設(shè)計(jì)過程中－設(shè)計(jì)結(jié)束都需花心思與時間去了解產(chǎn)品業(yè)務(wù)，統(tǒng)籌性的輸出。能熟悉產(chǎn)品的信息架構(gòu)、界面邏輯、元素所指，視覺表達(dá)能直觀清晰，讓用戶使用產(chǎn)品時、體驗(yàn)它認(rèn)同它、并產(chǎn)生愉悅即是成功－－而懂業(yè)務(wù)是體驗(yàn)的基礎(chǔ)。這一過程是需要花心思與技巧的。下面一起分享一下其過程（主要指PC類業(yè)務(wù)）。

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

不懂業(yè)務(wù)流程視覺同學(xué)拿到交互稿一看，框架結(jié)構(gòu)復(fù)雜、海量的信息內(nèi)容、80%的專業(yè)術(shù)語與量詞都是沒聽過的；怎么辦？先找se/產(chǎn)品經(jīng)理看需求文檔，看不懂沒有關(guān)系，起碼先對需求混個眼熟；接著獨(dú)自開始熟悉交互稿流程，大概了解產(chǎn)品的業(yè)務(wù)邏輯與核心場景，心中有個路線；試著理順那繁雜的流程，記錄不明白的點(diǎn)；再找交互設(shè)計(jì)師對稿從頭到尾聽講一次，過程中不懂的即問；在大司很多時候過40頁的tob類交互稿需要2小時,更復(fù)雜的可能是一個上午的時間。

總之，在視覺設(shè)計(jì)前主動投入學(xué)習(xí)成本，看懂交互說明，做好充足準(zhǔn)備；toc業(yè)務(wù)產(chǎn)品到tob業(yè)務(wù)產(chǎn)品系統(tǒng)，有時候其繁雜程度就像玩游戲通關(guān)，過一個級別難度高一點(diǎn)，等通關(guān)完畢游戲順利結(jié)束，也勝利了。你們準(zhǔn)備好了晉級嗎？

二、系統(tǒng)且有目的學(xué)習(xí)過程

上面講到視覺設(shè)計(jì)師熟悉交互稿過程中，將不懂的步驟和細(xì)節(jié)問題記錄下來，再與交互設(shè)計(jì)師對稿拉通，講解交互邏輯。這里需要理清的具體內(nèi)容包括以下幾點(diǎn)：

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

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

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

4、頁面承接關(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)過／選擇狀態(tài)、默認(rèn)／放大狀態(tài)、停止／開始狀態(tài)等）

6、挑選典型頁面or是否全量輸出

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

理清以上步驟后，對交互有了一個較為大概的思路，即使不是絕大部分清晰但也有了一個可以發(fā)散的視覺設(shè)計(jì)方向。

1、理解業(yè)務(wù)，產(chǎn)品定位確定后；

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

2、是否有設(shè)計(jì)規(guī)范的？

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

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

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

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

優(yōu)點(diǎn)：

視覺設(shè)計(jì)輸出的效率高，出錯性少；

率的也看輸出，利于項(xiàng)目的快速推薦；

基于項(xiàng)目經(jīng)驗(yàn)，開發(fā)難度小，技術(shù)可實(shí)現(xiàn)性強(qiáng)；

版本輸出時間成本低，項(xiàng)目迭代次數(shù)快，項(xiàng)目成本相對較少；

缺點(diǎn)：

視覺設(shè)計(jì)師的設(shè)計(jì)水平發(fā)揮收到限制

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

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

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

1、先確定視覺的分辨率

即我上一篇文章提到的“設(shè)計(jì)啟動前了解多端的適配情況（分辨率／屏幕精度），綜合考慮優(yōu)先出什么分辨率”。打個比方，如果是pc的話，是固定一種尺寸大小（本網(wǎng)站喜草品牌設(shè)計(jì)http://www.xicaodesign.com），頁面大小是否與現(xiàn)今門戶網(wǎng)站一樣的分辨率？還是一套響應(yīng)的分辨率，自適應(yīng)于1680or1920的屏幕？（舉兩個自適應(yīng)網(wǎng)頁的例子：大家熟悉的蘋果官網(wǎng)：http://www.apple.com/cn/和設(shè)計(jì)師資源分享網(wǎng)Behance,https://www.behance.net/）。

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

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

3、細(xì)節(jié)問題記錄下來，再跟蹤，澄清

在具體深入設(shè)計(jì)的時候，肯定會遇到更多細(xì)節(jié)問題，這主要視覺設(shè)計(jì)師適時紀(jì)錄，逐一找交互澄清問題。

打個比方：如卡片上的標(biāo)題文字，一開始視覺效果只能放下一行中文字，那么具體數(shù)據(jù)或英文版本時會是兩行嗎？如果是，怎么解決？解決辦法是：找交互設(shè)計(jì)對好呈現(xiàn)的情況，如果是確定有英文版與恁多的保持一行顯示不下是省略。。還是說設(shè)計(jì)則考慮兩行的方式？又或者如下圖所示：

視覺設(shè)計(jì)在出稿過程需要與交互針對視覺每一個細(xì)節(jié)進(jìn)行考慮并商榷，因?yàn)樯倘叮隽艘曈X稿；以上頁面有10都有卡片，則需要改動十個頁面；所以盡量的提前關(guān)注細(xì)節(jié)、溝通解決，盡量提高輸出質(zhì)量。

4、初次評審

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

五、講究方法讓視覺設(shè)計(jì)有序進(jìn)行

當(dāng)視覺設(shè)計(jì)風(fēng)格敲定后，后續(xù)的設(shè)計(jì)則按計(jì)劃行事，推進(jìn)項(xiàng)目的進(jìn)程。

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

2、輸出頁面命名的規(guī)范性／與交互一一對應(yīng)拉通，形成合格的交付文檔，在這里可以展開為以下幾點(diǎn)：

可以建立視覺頁面輸出跟蹤表，交互整理輸出條目，并進(jìn)行編號；視覺跟進(jìn)表格，完成一個勾選一個，形成可預(yù)見的文檔輸出；

視覺頁面psd文件一一對應(yīng)視覺頁面png文件，避免一個psd對應(yīng)多個png的情況；這樣可避免前端或開發(fā)查找文檔找不到；

視覺規(guī)范指導(dǎo)開始時，保持視覺邏輯與開發(fā)邏輯的一致性。

六、結(jié)語

作為視覺設(shè)計(jì)師，在開始設(shè)計(jì)前也請花心思與時間去了解產(chǎn)品、熟悉業(yè)務(wù)性質(zhì)，不要輸出一些沒有意義的設(shè)計(jì)，讓頁面中的每一個設(shè)計(jì)元素確實(shí)傳達(dá)其具體含義。