來人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。
信很多視覺設計師會有這樣經歷，當接觸到一個新的項目；如果是熟悉業務類型產品，設計起來輕松熟絡，如果是一個陌生的業務類型，則需去摸索與嘗試，找到合適的設計定位與視覺風格。當視覺對交互的業務性質、框架邏輯、層級關系不熟悉時候，視覺效果是畫出來了卻漏洞百出.
1、交互會問：上下兩個表格為什么用線分開？兩個表格均指index trend，分開都不是從屬關系了..
2、前端會問，以下按鈕是左右無限循環嗎？還是說左右只能按一個？還有它的不可用狀態又是什么？
3、在交互上是有翻頁效果，怎么視覺效果上沒有呈現？
4、下面幾個折線圖是屬于上面對應所選中的指標，視覺上感覺不對呀？
5、上傳包用圓環圖方式呈現，那幾十個上傳包豈不是幾十個圓環圖，還是進度條好點吧？
如果不熟悉業務，視覺上從框架結構到細節跳轉都經不起推敲；缺少業務探究過程與對每個細的深思熟慮，用戶體驗會好么？
作為一個視覺設計師， 在設計開始前－設計過程中－設計結束都需花心思與時間去了解產品業務，統籌性的輸出。能熟悉產品的信息架構、界面邏輯、元素所指，視覺表達能直觀清晰，讓 用戶使用產品時、體驗它認同它、并產生愉悅即是成功－－而懂業務是體驗的基礎。這一過程是需要花心思與技巧的。下面一起分享一下其過程（主要指PC類業 務）。
一、從熟悉業務系統開始不懂業務流程視覺同學拿到交互稿一看，框架結構復雜、海量的信息內容、80%的專業術語與量詞都是沒聽過的；怎么辦？先找se/產品經理看需求文 檔，看不懂沒有關系，起碼先對需求混個眼熟；接著獨自開始熟悉交互稿流程，大概了解產品的業務邏輯與核心場景，心中有個路線；試著理順那繁雜的流程，記錄 不明白的點；再找交互設計師對稿從頭到尾聽講一次，過程中不懂的即問；在大司很多時候過40頁的tob類交互稿需要2小時,更復雜的可能是一個上午的時 間。
總之，在視覺設計前主動投入學習成本，看懂交互說明，做好充足準備；toc業務產品到tob業務產品系統，有時候其繁雜程度就像玩游戲通關，過一個級別難度高一點，等通關完畢游戲順利結束，也勝利了。你們準備好了晉級嗎？
二、系統且有目的學習過程上面講到視覺設計師熟悉交互稿過程中，將不懂的步驟和細節問題記錄下來，再與交互設計師對稿拉通，講解交互邏輯。這里需要理清的具體內容包括以下幾點：
1、產品的類型（toB or toC產品）/ 定位風格／核心功能；心中有個大致的方向
2、布局方式（上導航下內容、左導航右內容等），是否看到了讓用戶清晰知道自己所在的信息結構中的位置，深度與廣度之間合理性，能否找到頁面跳轉的快捷入口；每一個頁面都能清晰了解位置所在則上下鏈接。
3、業務框架邏輯與流程，正如《用戶體驗要素》的框架層，整體界面設計、導航設計、信息呈現設計，因為到了這一步，需要看到真正能呈現給用戶看到的東西，確定其功能范圍和頁面各個模塊的層級關系。
4、頁面承接關系（如：點擊、反饋形式、鏈接、跳轉、下鉆、彈出框、tips等）
5、細節控件的狀態（如：焦點／默認狀態、可以／不可用狀態、點擊／非點擊狀態、默認／鼠標經過／選擇狀態、默認／放大狀態、停止／開始狀態等）
6、挑選典型頁面or是否全量輸出
三、有根據的理性思考理清以上步驟后，對交互有了一個較為大概的思路，即使不是100%清晰但也有了一個可以發散的視覺設計方向。
1、理解業務，產品定位確定后；
開始視覺風格的思考，即《用戶體驗要素》表現層，視覺設計和內容優化。開始設計是有意思的，商業需求的了解和用戶的目標的認清才能做出合理的設計， 表現是最終產品氣質的體現。如toB或許是嚴謹的／數據的／理性的／視覺表現力應該有所收斂的／or toC的應該是感性的／色彩較為豐富的／圖形化的／生動的…
2、是否有設計規范的？
如果有，是否要求根據現有的指導性設計規范來進行設計？100%遵循規范？or80%？還是細節控件？還是說不需要遵循規范，只是統一風格即可？由于每一個產品的設計定位與思考邏輯都是不一樣的，基于當前的設計規范是否適用滿足與支撐現業務產品的視覺設計，都需理清楚。
記得來大司接觸的第一個設計項目是平臺管理類型產品，且基于現有的設計規范——AgileUI進行設計。在設計之前需要花時間逐一去熟悉規范和理解規范，并在規范的基礎上進行視覺輸出。
3.運用設計規范來指導設計，存在它的兩面性
設計規范一般是具有指導性意義，且設計人員進行設計時必須遵守的規定；設計規范具有統籌性作用，可用性原則和審美常識下避免犯錯的方法，可保持設計印象的延續性。但運用規范同時也存在它的雙面性。
優點：
視覺設計輸出的效率高，出錯性少；
高效率的也看輸出，利于項目的快速推薦；
基于項目經驗，開發難度小，技術可實現性強；
版本輸出時間成本低，項目迭代次數快，項目成本相對較少；
缺點：
視覺設計師的設計水平發揮收到限制
挑戰度低，一直遵循規范設計久而久之會感到枯燥，想打破這種設計模式
因此，在項目中遇到設計規范需要遵循時，請在有限的空間中盡量發揮自己的設計才華,從細節處致力用戶體驗的提升。
四、經過前期熟悉、了解、思考、定位后，則開始主體視覺的風格預言1、先確定視覺的分辨率
即我上一篇文章提到的“設計啟動前了解多端的適配情況（分辨率／屏幕精度），綜合考慮優先出什么分辨率”。打個比方，如果是pc的話，是固定一種尺 寸大小，頁面大小是否與現今門戶網站一樣的分辨率？還是一套響應的分辨率，自適應于 1680or1920的屏幕？
2、分辨率需與交互共同商議
分辨率問題，請不要輕視之，與交互一商議。別輸出了十幾個1330度分辨率頁面后，交互再來告訴你業務需求固定分辨率是1440！那么十幾頁視覺頁面需要重新調整，有卡片呈現則需要重新計算像素比例等，再調整頁面元素控件之間的位置，即浪費時間也耗了精力。
3、細節問題記錄下來，再跟蹤，澄清
在具體深入設計的時候，肯定會遇到更多細節問題，這主要視覺設計師適時紀錄，逐一找交互澄清問題。
打個比方：如卡片上的標題文字，一開始視覺效果只能放下一行中文字，那么具體數據或英文版本時會是兩行嗎？如果是，怎么解決？解決辦法是：找交互設計對好呈現的情況，如果是確定有英文版與恁多的保持一行顯示不下是省略。。還是說設計則考慮兩行的方式？又或者如下圖所示：
視覺設計在出稿過程需要與交互針對視覺每一個細節進行考慮并商榷，因為商榷，出了視覺稿；以上頁面有10都有卡片，則需要改動十個頁面；所以盡量的提前關注細節、溝通解決，盡量提高輸出質量。
4、初次評審
規范的遵循，組件的合理利用，可以增加視覺輸出的合理性與效率。視覺典型頁面出來后，組織se（產品經理）、pl、交互、視覺、開發可以進行初次評 審，目的是確定產品視覺風格，以及后續設計方案的可行性；如果第一次視覺設計風格已經敲定，那么后續沿著風格進行即可；否則，視覺設計師則再進行視覺風格 的探索－設計－評審－定稿－方能開始后面設計。
五、講究方法讓視覺設計有序進行當視覺設計風格敲定后，后續的設計則按計劃行事，推進項目的進程。
1、分模塊／按優先次序鋪量輸出，定期進行視覺評審；讓交互直觀指向問題，視覺跟進與迭代輸出；
2、輸出頁面命名的規范性／與交互一一對應拉通，形成合格的交付文檔，在這里可以展開為以下幾點：
作為視覺設計師，在開始設計前也請花心思與時間去了解產品、熟悉業務性質，不要輸出一些沒有意義的設計，讓頁面中的每一個設計元素確實傳達其具體含義。
原文來自：優設
