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

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

1、交互會問：上下兩個表格為什么用線分開？兩個表格均指index trend，分開后的視覺效果會更好嗎？

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

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

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

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

不熟悉產(chǎn)品業(yè)務(wù)，視覺從框架結(jié)構(gòu)到細(xì)節(jié)跳轉(zhuǎn)都經(jīng)不起推敲；缺少對業(yè)務(wù)探究過程與對每個細(xì)的深思熟慮，用戶體驗會好么？作為一個視覺設(shè)計師，在設(shè)計開始前－設(shè)計過程中－設(shè)計結(jié)束都需花心思與時間去了解產(chǎn)品業(yè)務(wù)，統(tǒng)籌性的輸出。能熟悉產(chǎn)品的信息架構(gòu)、界面邏輯、元素所指，視覺表達能直觀清晰，讓用戶使用產(chǎn)品時、體驗時認(rèn)同它、并產(chǎn)生愉悅即是成功；而這一過程是需要花心思與技巧的，下面一起分享一下其過程（主要指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)系，起碼先對需求混個眼熟；接著獨自開始熟悉交互稿流程，大概了解產(chǎn)品的業(yè)務(wù)邏輯與核心場景，心中有個路線；

試著理順那繁雜的流程，記錄不明白的點；

再找交互設(shè)計師對稿從頭到尾聽講一次，過程中不懂的即問；

在大司很多時候過40頁的tob類交互稿需要2小時,更復(fù)雜的可能是一個上午的時間。有時候toc業(yè)務(wù)產(chǎn)品到tob業(yè)務(wù)產(chǎn)品系統(tǒng)，其繁雜程度就像玩游戲通關(guān)，過一個級別難度高一點，等通關(guān)完畢游戲順利結(jié)束；你準(zhǔn)備好逐一晉級了嗎？

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

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

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ù)框架邏輯與流程，正如《用戶體驗要素》的框架層，整體界面設(shè)計、導(dǎo)航設(shè)計、信息呈現(xiàn)設(shè)計，因為到了這一步，需要看到真正能呈現(xiàn)給用戶看到的東西，確定其功能范圍和頁面各個模塊的層級關(guān)系；

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

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

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

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

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

1、產(chǎn)品定位后的確定視覺風(fēng)格方向

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

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

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

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

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

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

優(yōu)點：

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

高效率的輸出，利于項目的快速推進；

基于以往的規(guī)范經(jīng)驗，開發(fā)難度小，技術(shù)可實現(xiàn)性強；

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

缺點：

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

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

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

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

1、先確定視覺的分辨率

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

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

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

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

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

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

4、初次評審

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

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

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

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

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

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

視覺源文件psd文檔一一對應(yīng)視覺頁面png文件，避免一個psd對應(yīng)多個png的情況；其他設(shè)計師、前端或開發(fā)拿到文件時也是清晰了然；

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

六、結(jié)語

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

candice_huang（用戶體驗設(shè)計師）

「技多不壓身的設(shè)計師才有高薪資！」

1. 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》

作者：@candice_7777

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com