品牌設計應該如何交付？

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

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

1、交互會(huì )問(wèn)：上下兩個(gè)表格為什么用線(xiàn)分開(kāi)？?jì)蓚€(gè)表格均指index trend，分開(kāi)都不是從屬關(guān)系了..

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

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

4、下面幾個(gè)折線(xiàn)圖是屬于上面對應所選中的指標，視覺(jué)上感覺(jué)不對呀？

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

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

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

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

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

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

二、系統且有目的學(xué)習過(guò)程

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

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

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

3、業(yè)務(wù)框架邏輯與流程，正如《用戶(hù)體驗要素》的框架層，整體界面設計、導航設計、信息呈現設計，因為到了這一步，需要看到真正能呈現給用戶(hù)看到的東西，確定其功能范圍和頁(yè)面各個(gè)模塊的層級關(guān)系。

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

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

6、挑選典型頁(yè)面or是否全量輸出

三、有根據的理性思考

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

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

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

2、是否有設計規范的？

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

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

3.運用設計規范來(lái)指導設計，存在它的兩面性

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

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

視覺(jué)設計輸出的效率高，出錯性少；

率的也看輸出，利于項目的快速推薦；

基于項目經(jīng)驗，開(kāi)發(fā)難度小，技術(shù)可實(shí)現性強；

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

缺點(diǎn)：

視覺(jué)設計師的設計水平發(fā)揮收到限制

挑戰度低，一直遵循規范設計久而久之會(huì )感到枯燥，想打破這種設計模式

因此，在項目中遇到設計規范需要遵循時(shí)，請在有限的空間中盡量發(fā)揮自己的設計才華,從細節處致力用戶(hù)體驗的提升。

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

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

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

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

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

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

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

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

視覺(jué)設計在出稿過(guò)程需要與交互針對視覺(jué)每一個(gè)細節進(jìn)行考慮并商榷，因為商榷，出了視覺(jué)稿；以上頁(yè)面有10都有卡片，則需要改動(dòng)十個(gè)頁(yè)面；所以盡量的提前關(guān)注細節、溝通解決，盡量提高輸出質(zhì)量。

4、初次評審

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

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

當視覺(jué)設計風(fēng)格敲定后，后續的設計則按計劃行事，推進(jìn)項目的進(jìn)程。

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

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

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

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

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

六、結語(yǔ)

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