好的視覺設計能激發(fā)起用戶對你的產(chǎn)品的興趣，如果你的視覺設計沒有貼合到目標市場客戶對于他們想要的產(chǎn)品預期感受，在后期你可能要花費更大的力氣去挽留他們。

說在最前面，一款Saas產(chǎn)品的成功要素，肯定還是功能的設計、業(yè)務的穿透力與牽引力，還有使用體驗是否能夠恰如其分地產(chǎn)生Ah~ha moment(s)。

但是，如果你說：長得好不好看對一個Saas產(chǎn)品而言不重要？嗯，那么祝君好運！

一、為什么Saas產(chǎn)品的視覺設計變得重要了？

客戶第一次打開你的Saas產(chǎn)品的感受就和人們第一次拿起一本書那一刻的感受一樣，彈指間會帶來持久的長期印象。

在視覺上贏得受眾認同這一點上，所有數(shù)字產(chǎn)品設計面對的挑戰(zhàn)都是一樣的。一些行為設計研究告訴我們用戶產(chǎn)生第一印象的時間窗甚至可以窄到0.05秒（見最近的交互設計奇書《The Smarter Screen》），在雨后春筍大家都在爭奪SAAS市場的今天，好的（更重要是對味的）皮囊很重要。這覺悟麻煩放好在兜里了。

瞎聊一下，如果我們以“認識你—>認可你”為onboarding的CX設計目標（之所以不局限于UX，那是因為Saas的onboarding更加多是一個爭取用戶的跨模態(tài)戰(zhàn)場），視覺設計應該怎樣有效進行。

視覺設計整體地定義了你數(shù)字產(chǎn)品的美學意義上的感染力。它是你組織復雜信息的方式與統(tǒng)一規(guī)則，各種特定行為的引導。再有就是如何把可讀性、一致性堅持在一個該有的水平以上的手段與方法。

如果非要說一個唯一的目標，好的視覺設計就是要爭取對你產(chǎn)品持有懷疑態(tài)度的客戶的信任，并且激發(fā)起他們對你產(chǎn)品的興趣。

要達到這個目標我們可以通過設置系列設計原則并且遵守他們，用恰當?shù)姆绞桨炎⒁饬σ龑デ‘數(shù)膬?nèi)容上面。

設計原則通常包括對layout的定義、信息層級（hierarchy）劃分的方式規(guī)則、顏色版及使用規(guī)范，字體樣式與icon組合與使用規(guī)則，并將這些設計原則通用至每一個設計細節(jié)中。如果你始終抱著一個信息傳遞目標：“我就是你要解決的問題最佳的產(chǎn)品選擇了，親愛的客戶爸爸”，所有這些設計原則都會變得合理并且是你設計時的工具，而非限制了。

道理很啰嗦，但是這一步真的很關鍵。如果我們的視覺設計沒有貼合到目標市場客戶對于他們想要的產(chǎn)品預期感受（即便僅僅是onboarding階段），之后留住他們不去投向?qū)耶a(chǎn)品就要花更大的力氣。

明道云與氚云的onboarding page對比。如果沒有任何外部原因影響了采購選型，希望為公司挑一款流程可配的SAAS的你會怎么挑？

二、初創(chuàng)階段科技公司在產(chǎn)品視覺設計上會遇到什么問題？

最常見的問題是產(chǎn)品團隊很大程度上依賴現(xiàn)成的、萬金油式的前端框架。

顯而易見，這樣做你的SAAS產(chǎn)品就成功長得和所有不入流的競爭對手一個樣了。然而不僅如此。大多數(shù)公用前端框架不會隨著你公司的業(yè)務增長、多樣化而產(chǎn)生變化的，這一份開發(fā)成本還是早晚要付出的。再者，這些前端框架套裝會自帶一套與之匹配的設計原則，而萬金油設計原則基本上不可能起到指引設計決定的作用，更不用說用來和產(chǎn)品團隊上下游溝通、統(tǒng)一產(chǎn)品愿景的效果了。

設計的過程全如果寄托于修改代碼，結(jié)果可想而知，更不用說反復修改的過程了…

大多數(shù)科技公司在早期階段也會嘗試去建立視覺設計語言，但大多數(shù)的做法是從不恰當?shù)牡胤饺ふ异`感，例如不相關的產(chǎn)品或者不相關的新設計趨勢，最終導致全靠個人品味來做設計決定。缺乏專業(yè)的設計方法與手段去做往往只會導致災難般的結(jié)果。

缺乏專業(yè)性的設計過程而產(chǎn)生的產(chǎn)品往往都會輸在難以在用戶心中建立信任這一點之上。

三、如何運用情緒板去建立合適的視覺設計？

即使是SAAS產(chǎn)品，我們也可以利用情緒板去快速定義合適我們產(chǎn)品的體驗設計方向。就如這個方法的名稱一樣，我們希望通過情緒板得到的結(jié)果是，當客戶第一次接觸我們產(chǎn)品時，我們希望提供的是一個什么樣的形象與感受。

1. 盡可能全面地收集產(chǎn)品需求

首先要做的是，我們需要面對面與利益干系人、目標客戶（用戶）去了解他們希望這是一個什么樣的產(chǎn)品？他們希望達成什么樣的目的？如果是一個已經(jīng)存在的產(chǎn)品，那么現(xiàn)有的設計、視覺語言是否能夠讓他們產(chǎn)生產(chǎn)品設計者所預設的共鳴？

競品分析、樣例當然也是很重要的手段，用于聽取目標用戶是如何看待市場上其他競爭產(chǎn)品。

通過做這兩點，應該在你開始動手之前你已經(jīng)可以對產(chǎn)品、需求有比較全的理解了。如果我們不在產(chǎn)品策劃早期階段就讓設計師加入、一同理解需求，那么再往后的設計里面出錯的空間可以說是無邊際地大，并且容易導致不必要地延長產(chǎn)品設計周期。

設計師最好能夠爭取參加產(chǎn)品規(guī)劃階段的會議，以設計專業(yè)第一身去感受產(chǎn)品需求。

2. 找設計參考的正確姿勢

其實就是我們建立產(chǎn)品視覺設計情緒板的初期調(diào)研階段。

參考要素可以是來自于多個方面的，因為這一個階段的關鍵是思路開放不要自我局限，否則十分容易淪落成為沖著自己心里面已經(jīng)有的想法去尋找佐證的過程（當然，能夠用視覺手段闡述自己已有想法也是種必要能力…）。

怎樣才算思路開放？一個簡單的方法是審視參考物的時候不要以整套的界面作為單位，把思路和眼睛降維到元素級別、模塊級別去看別人的作品，例如按鈕、用色系統(tǒng)，因為優(yōu)秀的參考物即便在元素級別也有自己細微的特性，它的字體組合、icon風格是否有花了心思，背后是否有合理的理由讓設計師作這樣的挑選。當然也要留意有支撐功能級別的要素如控件、導航系統(tǒng)、數(shù)據(jù)呈現(xiàn)方式的設計。

然后按照不同的主題、你希望講的故事思路去組建你的情緒板。假設你找參考物的時候并沒有帶著自己的思路去找、也沒有得到一些實實在在靈感的話，你講起故事來就難免流于表面，只能聊聊文學了（瞎用自己都不懂的形容詞，去說一些自己不確定的話語）。這也是情緒板為什么在很多產(chǎn)品團隊里沒有起到什么作用的原因：并不是這種方法沒有用，而是也許沒有太多人真正善用。

一個曾經(jīng)用過的情緒板例子，一張圖涵蓋的討論點包括了用色、字體組合策略、可參考的導航布局等等。并不是“我要帶給用戶xxx的感覺”之類的話術(shù)

針對不同的討論點（一些在設計層面需要大家共同確定下來的點）去組織你的情緒板、引導設計討論。在明確的對象范圍內(nèi)（比如抽出字體為獨立討論點）討論怎樣的設計樣式給人怎樣的感受與印象，得出可執(zhí)行的設計指引。

除了找線上完成度高的參考之外，如果對自己視覺轉(zhuǎn)譯能力把握比較高的設計師，十分鼓勵擴寬參考種類的選取。比如說用色策略，我們可以從該數(shù)字產(chǎn)品服務的行業(yè)中找取正面的、共鳴性強的照片與畫面，從而找到自己的顏色策略。

所有這些初期運用情緒板的設計手段無非就是為了達到兩個目的：讓你的設計一步一步走來有理有據(jù)有故事，讓產(chǎn)品團隊包括你自己認同并且對該設計有信心；用這個方法讓非設計背景的大佬們在早期也參與到共同設計當中，減少日后因方向改變而帶來的返工風險。

如果知道自己在為何而設計，參考資料、創(chuàng)作過程就不怕野一點

四、從參考到實現(xiàn)：擼起袖子設計你的key visuals

無論你是哪個級別的設計師，你最終還是要交貨的?。

即便你通過情緒板讓大佬們對于粗略的設計要素達成了共識，也只是第一小步抬起了腳指頭。因為對于即便是同一個參考物，不同的人的理解肯定也會有出入，真正把設計方向落實下來還是要靠你做出若干關鍵典型頁面，若干討論、修改后敲定。但是這次和之前瞎做然后去開會然后重做的玩法稍微有點不一樣了，因為你在動手之前已經(jīng)有了對產(chǎn)品的相對全面地認識，你也有了一個模糊的、大家都認同的設計方向了。

補充一點，隨設計流程推進，當初的情緒板可能對設計的實際影響會越來越弱甚至完全已經(jīng)不是那一回事了。但是這并不重要，因為畢竟它到了最后只是一個溝通工具而已。

不妨從onboarding流程入手

我一般會過濾、整合之前步驟所得，從而得到大致的設計方向。干系人將會被邀請加入到設計邏輯的討論中。每次分享以及討論主體都需要有策略地篩選進行，以便保證：一來大家都參與其中，二來對于產(chǎn)出思路的認同。但是我們不能以“共創(chuàng)”為借口而事無巨細牽扯所有利益干系人在內(nèi)，所以每次討論的主體必須達到：1，有清晰的需要決定的對象與邊界，該涵蓋的一定要充分討論，邊界以外的要回避漫無止境地發(fā)散；2，談論對象需要對設計方向具有里程碑意義，且每次討論應該有策略地以可行性輸出點為結(jié)果。

說白了就是，別瞎聊，還要言之有物、言之有果。

我們可以先從onboarding的流程入手，因為如之前所言視覺設計在數(shù)字產(chǎn)品中承擔主要任務之一是爭取用戶良好且“對味”的感受，onboarding體驗無疑就是最能體現(xiàn)這個任務是否完成得漂亮的一把可靠的尺子。如果把握沒有太大，可以先從確認登入流程的設計開始，定下基調(diào)進而在下一輪里面討論首頁。當然，如果心有成竹的情況下也不妨直接把登入、初始設置、首次首頁展示onboarding全流程都一次搞定，這樣的話基本上UI層面的骨架基本上都有了。

這一步也說明了為什么產(chǎn)品設計師需要在早期階段加入產(chǎn)品規(guī)劃階段的原因。在調(diào)研、探討階段所找到的無論是參考也好、產(chǎn)品要素也好，訓練有素的設計師需要懂得怎樣把他們轉(zhuǎn)譯成能夠引起目標受眾共鳴的設計并且提煉出設計原則。

重要的事情再一遍：整個過程“共創(chuàng)”是最重要的要素。別悶頭自己做。

酒店Saas onboarding流程界面設計（非最終設計樣式）

另外，設計師應該至少在從情緒板到視覺設計這一步中起到主導、帶頭的作用。作為設計師，最起碼動手能力、用稿表達和溝通的能力應該還是有的吧？如果這一步完全沒有設計師在場而完全依仗于沒有設計背景的干系人、工程師去主導的話，往往容易掉進怪圈中：有想法但是沒有設計思維的利益干系人嘗試用很具體的例子A去表達意思a，但是往往A包含的遠遠不止a，不過因為沒有設計師在場的談論產(chǎn)生了對具象設計的集體誤會，終將導致至少第一版產(chǎn)品的設計就算幾輪返工也“怎么看都不太是那回事兒”。

產(chǎn)品的設計需要有整體感，除了交互方式調(diào)性統(tǒng)一當然最明顯的還包括通篇統(tǒng)一的視覺語言。在很多非 真?敏捷 開發(fā)環(huán)境的團隊里面，如果設計師不在需求出生的現(xiàn)場參與接生，產(chǎn)品往往走著走著就會偏了。

這個視覺設計過程參與投入的人越多，就越容易得到所有人一致的認可。

五、把設計原則貫徹始終

在如今數(shù)字產(chǎn)品的大環(huán)境中，Saas產(chǎn)品的用戶已經(jīng)被寵得很挑剔。通過通用的設計原則設計出好用的數(shù)字產(chǎn)品只能稱為及格線，因為你的競爭對手們都知道ant design是個好東西。要做到出色，免不了需要過硬可靠的設計流程、逐步打造具有特色有特點的設計原則并且落實到產(chǎn)品的每個角落。

做好調(diào)研功課，找到對的人（不僅僅是利益干系人，還有客戶和用戶呢）去共創(chuàng)，在細節(jié)處多流些汗水。我絕對不是說追求獨特是我們的設計目標，Saas設計師的專業(yè)性應該體現(xiàn)在如何用產(chǎn)品設計取信于目標用戶。

酒店Saas 統(tǒng)一的設計語言（非最終設計樣式）

說在最后

總而言之，人還是會或多或少僅僅通過一張皮囊去產(chǎn)生對一個數(shù)字產(chǎn)品的喜惡，Saas產(chǎn)品在公開競爭的市場里面視覺設計導致的體驗差異化變得越來越重要。數(shù)字產(chǎn)品每個觸點的第一感受對于最終購買決定的影響必將越來越大。

作者：HaoH，公眾號：HaoH 大鬼西歸

本文由 @HaoH 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議