好的視覺設計能激發起用戶對你的產品的興趣，如果你的視覺設計沒有貼合到目標市場客戶對於他們想要的產品預期感受，在後期你可能要花費更大的力氣去挽留他們。
說在最前面，一款Saas產品的成功要素，肯定還是功能的設計、業務的穿透力與牽引力，還有使用體驗是否能夠恰如其分地產生Ah~ha moment(s)。
但是，如果你說：長得好不好看對一個Saas產品而言不重要？嗯，那麼祝君好運！
一、為什麼Saas產品的視覺設計變得重要了？
客戶第一次打開你的Saas產品的感受就和人們第一次拿起一本書那一刻的感受一樣，彈指間會帶來持久的長期印象。
在視覺上贏得受眾認同這一點上，所有數字產品設計面對的挑戰都是一樣的。一些行為設計研究告訴我們用戶產生第一印象的時間窗甚至可以窄到0.05秒（見最近的交互設計奇書《The Smarter Screen》），在雨後春筍大家都在爭奪SAAS市場的今天，好的（更重要是對味的）皮囊很重要。這覺悟麻煩放好在兜裡了。
瞎聊一下，如果我們以“認識你—>認可你”為onboarding的CX設計目標（之所以不侷限於UX，那是因為Saas的onboarding更加多是一個爭取用戶的跨模態戰場），視覺設計應該怎樣有效進行。
視覺設計整體地定義了你數字產品的美學意義上的感染力。它是你組織複雜信息的方式與統一規則，各種特定行為的引導。再有就是如何把可讀性、一致性堅持在一個該有的水平以上的手段與方法。
如果非要說一個唯一的目標，好的視覺設計就是要爭取對你產品持有懷疑態度的客戶的信任，並且激發起他們對你產品的興趣。
要達到這個目標我們可以通過設置系列設計原則並且遵守他們，用恰當的方式把注意力引導去恰當的內容上面。
設計原則通常包括對layout的定義、信息層級（hierarchy）劃分的方式規則、顏色版及使用規範，字體樣式與icon組合與使用規則，並將這些設計原則通用至每一個設計細節中。如果你始終抱著一個信息傳遞目標：“我就是你要解決的問題最佳的產品選擇了，親愛的客戶爸爸”，所有這些設計原則都會變得合理並且是你設計時的工具，而非限制了。
道理很囉嗦，但是這一步真的很關鍵。如果我們的視覺設計沒有貼合到目標市場客戶對於他們想要的產品預期感受（即便僅僅是onboarding階段），之後留住他們不去投向對家產品就要花更大的力氣。
明道雲與氚雲的onboarding page對比。如果沒有任何外部原因影響了採購選型，希望為公司挑一款流程可配的SAAS的你會怎麼挑？
二、初創階段科技公司在產品視覺設計上會遇到什麼問題？
最常見的問題是產品團隊很大程度上依賴現成的、萬金油式的前端框架。
顯而易見，這樣做你的SAAS產品就成功長得和所有不入流的競爭對手一個樣了。然而不僅如此。大多數公用前端框架不會隨著你公司的業務增長、多樣化而產生變化的，這一份開發成本還是早晚要付出的。再者，這些前端框架套裝會自帶一套與之匹配的設計原則，而萬金油設計原則基本上不可能起到指引設計決定的作用，更不用說用來和產品團隊上下游溝通、統一產品願景的效果了。
設計的過程全如果寄託於修改代碼，結果可想而知，更不用說反覆修改的過程了…
大多數科技公司在早期階段也會嘗試去建立視覺設計語言，但大多數的做法是從不恰當的地方去尋找靈感，例如不相關的產品或者不相關的新設計趨勢，最終導致全靠個人品味來做設計決定。缺乏專業的設計方法與手段去做往往只會導致災難般的結果。
缺乏專業性的設計過程而產生的產品往往都會輸在難以在用戶心中建立信任這一點之上。
三、如何運用情緒板去建立合適的視覺設計？
即使是SAAS產品，我們也可以利用情緒板去快速定義合適我們產品的體驗設計方向。就如這個方法的名稱一樣，我們希望通過情緒板得到的結果是，當客戶第一次接觸我們產品時，我們希望提供的是一個什麼樣的形象與感受。
1. 儘可能全面地收集產品需求
首先要做的是，我們需要面對面與利益干係人、目標客戶（用戶）去了解他們希望這是一個什麼樣的產品？他們希望達成什麼樣的目的？如果是一個已經存在的產品，那麼現有的設計、視覺語言是否能夠讓他們產生產品設計者所預設的共鳴？
競品分析、樣例當然也是很重要的手段，用於聽取目標用戶是如何看待市場上其他競爭產品。
通過做這兩點，應該在你開始動手之前你已經可以對產品、需求有比較全的理解了。如果我們不在產品策劃早期階段就讓設計師加入、一同理解需求，那麼再往後的設計裡面出錯的空間可以說是無邊際地大，並且容易導致不必要地延長產品設計週期。
設計師最好能夠爭取參加產品規劃階段的會議，以設計專業第一身去感受產品需求。
2. 找設計參考的正確姿勢
其實就是我們建立產品視覺設計情緒板的初期調研階段。
參考要素可以是來自於多個方面的，因為這一個階段的關鍵是思路開放不要自我侷限，否則十分容易淪落成為衝著自己心裡面已經有的想法去尋找佐證的過程（當然，能夠用視覺手段闡述自己已有想法也是種必要能力…）。
怎樣才算思路開放？一個簡單的方法是審視參考物的時候不要以整套的界面作為單位，把思路和眼睛降維到元素級別、模塊級別去看別人的作品，例如按鈕、用色系統，因為優秀的參考物即便在元素級別也有自己細微的特性，它的字體組合、icon風格是否有花了心思，背後是否有合理的理由讓設計師作這樣的挑選。當然也要留意有支撐功能級別的要素如控件、導航系統、數據呈現方式的設計。
然後按照不同的主題、你希望講的故事思路去組建你的情緒板。假設你找參考物的時候並沒有帶著自己的思路去找、也沒有得到一些實實在在靈感的話，你講起故事來就難免流於表面，只能聊聊文學了（瞎用自己都不懂的形容詞，去說一些自己不確定的話語）。這也是情緒板為什麼在很多產品團隊裡沒有起到什麼作用的原因：並不是這種方法沒有用，而是也許沒有太多人真正善用。
一個曾經用過的情緒板例子，一張圖涵蓋的討論點包括了用色、字體組合策略、可參考的導航佈局等等。並不是“我要帶給用戶xxx的感覺”之類的話術
針對不同的討論點（一些在設計層面需要大家共同確定下來的點）去組織你的情緒板、引導設計討論。在明確的對象範圍內（比如抽出字體為獨立討論點）討論怎樣的設計樣式給人怎樣的感受與印象，得出可執行的設計指引。
除了找線上完成度高的參考之外，如果對自己視覺轉譯能力把握比較高的設計師，十分鼓勵擴寬參考種類的選取。比如說用色策略，我們可以從該數字產品服務的行業中找取正面的、共鳴性強的照片與畫面，從而找到自己的顏色策略。
所有這些初期運用情緒板的設計手段無非就是為了達到兩個目的：讓你的設計一步一步走來有理有據有故事，讓產品團隊包括你自己認同並且對該設計有信心；用這個方法讓非設計背景的大佬們在早期也參與到共同設計當中，減少日後因方向改變而帶來的返工風險。
如果知道自己在為何而設計，參考資料、創作過程就不怕野一點
四、從參考到實現：擼起袖子設計你的key visuals
無論你是哪個級別的設計師，你最終還是要交貨的。
即便你通過情緒板讓大佬們對於粗略的設計要素達成了共識，也只是第一小步抬起了腳指頭。因為對於即便是同一個參考物，不同的人的理解肯定也會有出入，真正把設計方向落實下來還是要靠你做出若干關鍵典型頁面，若干討論、修改後敲定。但是這次和之前瞎做然後去開會然後重做的玩法稍微有點不一樣了，因為你在動手之前已經有了對產品的相對全面地認識，你也有了一個模糊的、大家都認同的設計方向了。
補充一點，隨設計流程推進，當初的情緒板可能對設計的實際影響會越來越弱甚至完全已經不是那一回事了。但是這並不重要，因為畢竟它到了最後只是一個溝通工具而已。
不妨從onboarding流程入手
我一般會過濾、整合之前步驟所得，從而得到大致的設計方向。干係人將會被邀請加入到設計邏輯的討論中。每次分享以及討論主體都需要有策略地篩選進行，以便保證：一來大家都參與其中，二來對於產出思路的認同。但是我們不能以“共創”為藉口而事無鉅細牽扯所有利益干係人在內，所以每次討論的主體必須達到：1，有清晰的需要決定的對象與邊界，該涵蓋的一定要充分討論，邊界以外的要回避漫無止境地發散；2，談論對象需要對設計方向具有里程碑意義，且每次討論應該有策略地以可行性輸出點為結果。
說白了就是，別瞎聊，還要言之有物、言之有果。
我們可以先從onboarding的流程入手，因為如之前所言視覺設計在數字產品中承擔主要任務之一是爭取用戶良好且“對味”的感受，onboarding體驗無疑就是最能體現這個任務是否完成得漂亮的一把可靠的尺子。如果把握沒有太大，可以先從確認登入流程的設計開始，定下基調進而在下一輪裡面討論首頁。當然，如果心有成竹的情況下也不妨直接把登入、初始設置、首次首頁展示onboarding全流程都一次搞定，這樣的話基本上UI層面的骨架基本上都有了。
這一步也說明了為什麼產品設計師需要在早期階段加入產品規劃階段的原因。在調研、探討階段所找到的無論是參考也好、產品要素也好，訓練有素的設計師需要懂得怎樣把他們轉譯成能夠引起目標受眾共鳴的設計並且提煉出設計原則。
重要的事情再一遍：整個過程“共創”是最重要的要素。別悶頭自己做。
酒店Saas onboarding流程界面設計（非最終設計樣式）
另外，設計師應該至少在從情緒板到視覺設計這一步中起到主導、帶頭的作用。作為設計師，最起碼動手能力、用稿表達和溝通的能力應該還是有的吧？如果這一步完全沒有設計師在場而完全依仗於沒有設計背景的干係人、工程師去主導的話，往往容易掉進怪圈中：有想法但是沒有設計思維的利益干係人嘗試用很具體的例子A去表達意思a，但是往往A包含的遠遠不止a，不過因為沒有設計師在場的談論產生了對具象設計的集體誤會，終將導致至少第一版產品的設計就算幾輪返工也“怎麼看都不太是那回事兒”。
產品的設計需要有整體感，除了交互方式調性統一當然最明顯的還包括通篇統一的視覺語言。在很多非 真•敏捷 開發環境的團隊裡面，如果設計師不在需求出生的現場參與接生，產品往往走著走著就會偏了。
這個視覺設計過程參與投入的人越多，就越容易得到所有人一致的認可。
五、把設計原則貫徹始終
在如今數字產品的大環境中，Saas產品的用戶已經被寵得很挑剔。通過通用的設計原則設計出好用的數字產品只能稱為及格線，因為你的競爭對手們都知道ant design是個好東西。要做到出色，免不了需要過硬可靠的設計流程、逐步打造具有特色有特點的設計原則並且落實到產品的每個角落。
做好調研功課，找到對的人（不僅僅是利益干係人，還有客戶和用戶呢）去共創，在細節處多流些汗水。我絕對不是說追求獨特是我們的設計目標，Saas設計師的專業性應該體現在如何用產品設計取信於目標用戶。
酒店Saas 統一的設計語言（非最終設計樣式）
說在最後
總而言之，人還是會或多或少僅僅通過一張皮囊去產生對一個數字產品的喜惡，Saas產品在公開競爭的市場裡面視覺設計導致的體驗差異化變得越來越重要。數字產品每個觸點的第一感受對於最終購買決定的影響必將越來越大。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
