SaaS產品的交互設計流程

編輯導讀：SaaS產品是屬于云計算中的一種服務類型，近年來成為一種流行趨勢。而作為一名設計師，如何設計SaaS產品的交互呢？首先要對SaaS產品有一個綜合了解，形成規范流程。本文作者對此進行分析，希望對你有幫助。

一、前言

近幾年國家提出的新基建，給我們帶來了很多新概念，比如5G、大數據、云計算、物聯網、區塊鏈等，而SaaS產品其實是屬于云計算中的一種服務類型。云計算則依次包括：IaaS基礎設施即服務、PaaS平臺即服務、SaaS軟件即服務。

二、背景知識

關于SaaS產品的商業發展，可以有兩種類型，即橄欖型和啞鈴型。

• 橄欖型，即頭部窄，中間寬，尾部窄的結構。對應商業發展，就是頭部大企業很少，中間中小型企業很多，尾部小微企業很少。大企業的業務比較復雜，并且在具體的行業里有標桿性，我們做一套SaaS產品可能很難覆蓋全大企業的業務需求，大部分都會要求在這個標準化產品的基礎上進一步定制化。從大企業那里獲取到的行業規則又可被SaaS標準化產品吸收，進一步提升中小型企業的業務滿足度。所以說，橄欖型商業結構很適合SaaS產品發展。
• 啞鈴型，即頭尾很大，中間很小的結構。對應商業發展，就是頭部企業很多，中小型企業很少，小微企業很多。這種模式其實不是很適合SaaS產品的標準化發展，大企業定制化需求多，小微企業喜歡免費產品，就算開始花錢用了，可能后面倒閉就不再續費了，市場價值很低。

關于SaaS產品的分類，可以分為通用型和行業型。

• 通用型就是指不限于某個行業的產品，所有行業都可以用，比如CRM、HR、OA、ERP系統等。
• 行業型就是指只針對某個垂直行業來做企業的信息化產品，比如生鮮行業、餐飲行業、金融行業等。

隨著SaaS產品的發展，目前我們還可以分為工具型和商業型。

• 工具型就是指我們只是給企業提供一個信息化的工具，可以給企業增效降本，但是具體如何操作，需要企業自己去摸索，就好比某個人肚子餓了，我只負責提供餐具和炊具，至于如何解決肚子餓的問題，管不了。
• 商業型就是我們需要讓企業成功，需要深入到企業的業務里面去，幫助其打通上下游鏈路，最終幫企業創造價值并獲得商業成功。比如企業是一個藥店，我們需要幫助藥店提升利潤，幫助其賺到錢。前面說的那個肚子餓的問題，在這里就是需要給那個人提供豐盛的食物，而不僅僅只是給他提供工具和食材那么簡單了。

三、商業分析

關于如何分析SaaS產品的商業環境，有一個模型可以用，即波特五力模型：

• 現有競爭者——就是你選擇的賽道，目前跟你一起跑的產品。
• 新入競爭者——新加入你這個賽道的產品。
• 替代品競爭者——就是客戶可以不用你這個產品，改用其他解決方案，同時有其他產品可以提供這種解決方案。
• 供應商議價能力——這個其實是指做這個產品的成本，主要還是人力資源成本。
• 買家議價能力——客戶購買你這個產品的意愿，關鍵還是續費的動力。

前期需要對負責產品的商業環境進行充分了解，可以詢問高層及其他決策人員，也可以直接問產品經理。

四、協助產品

這個過程主要是協助產品經理完成一些工作，包括參與對需求進行分析等。

1. 梳理產品目標

目標是第一位的，有了正確的方向才好沿著正確的道路一直走下去。

我們可以先了解行業背景，比如我們的產品是屬于哪個行業的，或者是針對多個行業的通用產品。另外可以了解下我們服務行業的上下游全鏈路，我們是處于末端環節、中間環節、還是頭部環節。有了這些準備工作后，開始重點了解目標了。

目標其實有很多，企業在不同的發展階段，其目標也是不一樣的，比如某年的目標，以及拆分到季度和月度的目標，另外還有3到5年的戰略發展目標等，這個目標我們也可以理解為商業目標。我們的用戶也有用戶目標，就是用戶希望通過使用這個產品達到一個什么期望。有了這么多的目標，也不是全部都要遵守的，這個時候產品經理需要去平衡商業目標與用戶目標，最終得出產品需要遵循的目標，即產品目標，以此作為后續工作的指導思想。

作為交互設計師，我們主要是參與這部分工作，用自己專業的交互知識幫助產品經理去梳理出最終的產品目標。

2. 梳理業務流程圖

這里需要分兩種情況，如果是0到1的產品，我們需要分析線下的實際業務流程，先梳理出來，然后考慮要是搬到線上解決時，應該如何來設計業務流程。

如果是1到N的產品，應該已經有了業務流程圖，我們要做的就是去熟悉，了解產品的業務流程；如果沒有，我們要做的就是對照實際系統去梳理出業務流程圖。

做這個工作的最主要目的還是幫助我們先有一個全局的產品感覺。

3. 梳理功能架構圖

同上，這里也需要分兩種情況，0到1的產品，可以先對需求文檔進行分析，將里面的功能點提煉出來，繪制功能架構圖。如果需求文檔編寫還沒有開始，則可以參與對需求進行處理，并細化成功能點，然后再繪制功能架構圖。

關于需求搜集，我們一般是把零散的需求丟進需求池進行管理。關于需求處理，則可以用需求四象限法則來處理。這個方法需求分析師和產品經理用的多，主要是對需求池里的需求進行優先級排序，十字軸里面縱向代表緊急程度，橫向代表重要程度。重要又緊急的自然是優先處理的，以前很多體驗問題都被放在不重要不緊急的尷尬位置，隨著體驗時代的到來，體驗估計會被提升到戰略高度。

1到N的產品，功能架構就比較簡單了，對著需求文檔或者對著實際系統去梳理出來就行。目的就是讓自己對產品的整體功能點有個大致了解。

4. 整理權限說明、字段表

我個人覺得，在需求文檔中，這部分內容屬于底層的部分。可以對產品寫好的需求文檔進行分析，提煉出權限說明和字段表。如果產品寫的需求文檔中沒有此部分內容，則需要找產品經理面對面溝通了，這樣做主要是了解產品的底層邏輯。

5. 協助完成PRD文檔

如果產品經理已經完成了PRD，我們就用自己專業的交互方法去協助產品經理優化PRD文檔。如果產品經理沒有開始寫PRD，就可以用以上幾步去協助產品經理來編寫PRD文檔。

主要是業務規則、輸入輸出等的編寫。

五、交互設計

1. 設計目標

基于前面的產品目標，我們需要提煉出交互設計師要遵循的設計目標。關于設計目標，我們常用KANO模型來梳理，此方法可以幫助我們找準可以提升用戶體驗的需求點。

下面我會詳細聊聊如何使用KANO模型：

十字軸里面縱向代表用戶滿意度，橫向代表功能滿足程度。

• 這個需求點滿足后，用戶滿意度有明顯提升，但是不滿足，用戶滿意度也不會很低，我們把這種需求叫做興奮型需求，也可以理解為人打了興奮劑一般，但是不打，人也能正常生活。
• 這個需求點滿足后，用戶滿意度有明顯提升，但是不滿足，用戶滿意度也會明顯下降，我們把這種需求叫做期望型需求，也可以理解為一種正比關系。
• 這個需求點滿足后，用戶滿意度提升不明顯，但是不滿足，用戶滿意度卻會明顯下降，我們把這種需求叫做基本型需求。
• 這個里面基本型需求和期望型需求，都是客戶的剛需，必須要滿足的，不然客戶就會很不爽，而興奮型需求則是交互設計師需要努力挖掘的點，提升轉化的發力點。
• 這個需求點滿足后，用戶滿意度沒有任何變化，可有可無的感覺，我們把這種需求叫做無差異型需求，這種需求就是可以直接拋棄掉做減法了。
• 這個需求點滿足后，用戶滿意度反而明顯下降，我們把這種需求叫做反向需求，這種就可以理解為禁區了，同樣也是要直接拋棄掉做減法了。

通過KANO模型梳理出產品的交互設計目標后，我們可以根據產品迭代的進度，將目標拆分到不同的版本中去。

2. 需求分析

把產品經理輸出的需求文檔仔細閱讀，并用交互設計師的思路來進行需求分析。比如分析需求范圍、功能點、權限說明和字段表，如果在協助階段，交互設計師充分參與了以上步驟，這里的工作也會比較簡單了，進一步掌握產品業務，逐漸讓自己成為業務顧問，以便項目推進時可以更好地去解答下游成員的疑問。

如果交互設計師沒有參與協助產品的工作，在這里只需要對照需求文檔，去分析需求范圍、功能點、權限說明和字段表，需求文檔不清晰的，也可以當面找產品經理去溝通這些細節。

3. 競品分析

競品分析首先需要分析我們產品的直接競爭對手，比如跟我們做類似產品的老對手、新加入的對手等。其次需要分析我們產品的間接競爭對手，可能是跟我們同一個行業，但是做的產品不同，不能保證他們未來不會做我們這個領域。最后是行業巨頭的競爭，這里主要是看一下我們的市場規模是否足夠吸引巨頭來加入，所以說做SaaS產品還是盡量專注于一個細分領域，這樣市場天花板在那里，巨頭看不上這種小利的。

引申一下，我想詳細談談如何打造SaaS產品的護城河。B端產品不同于C端產品，隨著行業深度的積累，對新競爭者有很高的門檻，我們俗稱護城河。下面我從以下幾個方面來聊聊如何打造SaaS產品的護城河：

1）替換成本

客戶一直用我們的產品，如果某天被競爭對手的銷售成功策反了，轉而改用他們的產品，這個時候，客戶會發現，替換成本很高。

首先就是數據遷移成本，需要把我們系統中的數據全部遷移到新的服務商那里；另外業務理解上的差異會造成數據結構不同，由此可能會造成很多數據缺失或者無法遷移過來。

其次是客戶培訓成本，老系統可能當時花了很多精力已經用的很熟練了，如今要切換系統，系統使用者又得花很大精力去學習新的系統。

2）品牌效應

在某個領域或者某個行業內有了一定口碑，解決了客戶的某些痛點，受到客戶歡迎，由此形成了自己的品牌感。

3）網絡效應

客戶的上下游已經習慣了使用某個公司的系統，雖然該客戶沒有使用這個產品，但是為了方便與上下游協作，也不得不使用該產品，這就是所謂的網絡效應。舉個C端的例子，微信的使用，你的朋友都是用微信了，如果你不用，是不是不方便去聯系他們，所以你也不得不使用。

有了網絡效應的產品，正是瘋狂增長的時期，大量新客戶不得不使用你的產品。

4）聚焦細分行業

精力有限，很難大而全，特別是很多大廠虎視眈眈的。如果我們可以聚焦某個很細分的行業，本身利潤天花板就那樣，大廠看不上這點市場，自然不會與你來競爭。另外其他新進競爭者也由于你的專注度望而生畏，不敢去挑戰你，故而你可以在該領域持續發展。

5）總結

說了那么多，其實護城河最根本的也是服務好客戶，給客戶帶來價值，讓客戶保持續費。

開發團隊不管多厲害，要是做出來的產品，沒有客戶愿意買單，等于一無是處。關鍵的點還是得公司的戰略去把控大的方向，產品經理去把控細節的方向，包括商業價值，客戶價值，客戶體驗等。

4. 交互模型

如果說前面三步都屬于準備工作的話，那交互模型階段則是正式開始交互設計了。

我總結而來的交互模型方法還是挺好用的，即用戶、場景、目標。

• 用戶，指使用這個項目或產品的都是些什么人。B端行業，我們面對的是客戶，但是客戶作為一個企業，里面也有形形色色的個人，這些具體的人也就是用戶。用戶可能有很多，需要找到我們的目標用戶，對應的我們可能會有用戶畫像或者客戶畫像。我們常說的以用戶為中心，或者以客戶為中心，基本就是以此為基礎。中國經濟的下半場也越來越注重B端行業的客戶體驗了。繼續深挖下，我們可以有用戶體驗地圖以及用戶旅行地圖，而這兩者的區別主要在于體驗。體驗地圖主要是針對所思、所做、所感；旅行地圖則針對所做。
• 場景，大公司有很多基于場景化的B端設計方法，我們需要去挖掘可能存在的用戶場景，常用的方法有故事板，用講故事的方式把場景描述清楚。很多用戶體驗設計以及情感化設計也是基于對場景的挖掘為基礎。
• 目標，也可以理解為任務，用戶或者客戶使用這個系統要做的事情，或者我們也可以理解為用戶的痛點以及期望，我們設計這款系統就是為了要解決客戶的這些問題。關于目標，深挖下，我們有用戶目標和商業目標，兩者平衡下，得出產品目標或者業務目標，設計師可以根據業務目標提煉出設計目標，當然這個目標一定是可量化，可驗證的，我們只有準確知道了目標完成的如何，才好安排迭代的方向。

交互模型主要是讓我們先對產品整體的框架有個認識，最后我想把用戶再深挖下，針對SaaS產品的設計過程其實我們需要做到很懂客戶。

這里我想分兩種情況，如果是0到1的產品，我們肯定是需要把線下的業務搬到線上來解決的，所以需要對客戶線下的痛點摸得很清楚，比如客戶目前存在哪些無法解決的痛點、無法解決時以前又是通過何種變通方法來解決的。另外需要對客戶線下的業務流程梳理的很清楚，可以區分出不同的用戶和場景。

如果是已經上線的產品，不管是迭代到第幾個版本了，這個時候我們屬于對產品進行優化的階段。如果是還處于發展期，這個時候的戰略目標是進一步擴大新客量以及保證老客戶續費量，產品設計需要圍繞這個目標去開展。如果是處于成熟期，這個時候客戶可能覺得我們的產品沒有創新了，新客戶變少以及部分老客戶開始不續費了，或者是產品不滿足目前的客戶市場了。這個時候的戰略目標就是優化產品，可能是用戶體驗的提升，也可能是調整產品功能方向等。優化時的懂客戶，主要是需要把客戶目前線上的痛點給找出來，并對用戶流程做精細化的梳理，找到優化的方向。

5. 信息架構

在我看來，信息架構設計其實就是把前面的功能架構圖按照用戶視角來設計，主要是設計產品的導航體系了。另外一點就是為后面正式畫頁面原型打下基礎，有一些交互設計師在拿到需求后就直接開始畫原型，其實這是很不對的，不僅效率低，返工率也很高，正確的做法還是進行詳細的分析后，再來畫原型，這樣思路不僅很清晰，反而節省了時間。

6. 任務流程

針對前面分析的交互模型，我們需要針對不同用戶在不同場景下的不同任務做一個精細化設計，盡量覆蓋全所有的用戶任務流程。任務流程可以理解為很多個節點，而每個節點則是一到多個頁面，這樣主體的頁面原型框架就出來了，同樣可以為后面畫原型打下基礎，只不過在這里是為了不漏掉一些細節頁面和邊界頁面，提高原型繪制的準確度。

7. 頁面原型

有了信息架構和任務流程兩個階段的準備，頁面原型階段自然會省事很多，在這里我主要想說說畫原型還需要遵循的一些原則。除了格式塔原理和菲茨定律，還有交互設計的四種策略，即組織、刪除、隱藏、轉移。

• 組織——可以理解為分組，相近和相似原則，對產品的信息架構進行設計。
• 刪除——少即是多原則，精簡用戶看到的界面，提高用戶解決問題的專注力。
• 隱藏——不是很重要的信息，都隱藏起來，當用戶需要時，可以通過操作找到。
• 轉移——給用戶簡單的體驗，把復雜的東西轉移到后臺；另外一些設置參數的，也是盡量轉移給后臺，給用戶一種簡單的操作。

交互設計的方法有很多，關鍵看你怎么用了，我們最終的目標是希望用戶看頁面時知道如何操作，系統反饋后，用戶知道如何走下一步，如此形成流暢的操作體驗，并進一步讓產品自動化、智能化、人性化。

8. 交互評審

我覺得在進行交互評審之前，有一些準備工作需要提前完成。原型畫好后，需要與產品、技術老大、老板先進行溝通，達成共識，然后再補充交互說明，并輸出交互文檔，然后拿著交互文檔與關鍵人物再溝通一遍。因為我覺得交互評審如果只是給下游UI、開發、測試以及其他人員傳達交互文檔，這樣阻力會小很多。另外在設計過程中如果有一些疑問點，也可以找相關人進行確認，這樣可以提高整體的設計效率。

正式的交互評審流程如下：

1）介紹產品背景

剛開始講解時，需要簡單說下這個產品成立的大環境，比如為什么要做，如何產生的，以及產品背景等。

2）說問題

我們總體的商業訴求是啥？本次我們解決了哪些用戶痛點？我們的產品目標是什么？以及交互設計目標是什么？對以上問題進行講解，告訴大家自己在開始做交互設計之前做了哪些準備工作。

3）如何解決的問題，講設計過程

有數據分析的可以先說，作為一個前奏，沒有的也不要緊。

這個時候可以對整個交互文檔，從頭到尾講解。對一些關鍵點的原型設計探討可以詳細聊聊，為什么要這樣設計，之前推導的過程可以說下，或者說下比稿，多個方案的選擇等。

另外可以講下設計策略，問題如何解決的，解決過程中發生了什么。

六、設計落地

設計落地主要指交互評審通過后，如何將交互設計方案有效落地。

1. 設計推進

這個時候下游的伙伴們都開始按計劃開工了，這個過程中，需要解答UI、開發、測試的業務疑問，作為產品的業務顧問，這個工作應該是有很多的，當被問住的時候，我們也可以翻閱交互文檔去理清思路。UI拿到交互文檔后也會開始進行UI設計，交互設計師則需要把控下UI的輸出物，并協助UI設計師進行UI評審。

UI最終的效果如果不好，是會影響產品的體驗感的，所以交互設計需要去把控這些細節。作為產品需求的執行者，在測試階段，除了要把控交互測試，保證交互文檔中的細節都能完美實現；同時也要把控好需求測試，保證產品實現效果是符合需求設計的。

2. 可用性測試

測試工程師把功能測穩定后，交互設計師需要主導可用性測試過程，關于可用性測試，我個人有一些看法。可用性測試就是在產品功能穩定后，找一部分真實用戶在測試環境走完核心的用戶任務流程，以此驗證投入產出比，解決產品易用的問題。用戶測試前，可以設定一些指標，比如完成率和完成時間，即多少用戶可以走完流程以及走完流程的用戶一共花了多少時間。

通過現場觀察用戶的感受以及最終的數據結果，可以綜合得出以下結論:

• 產品是否解決了用戶的業務痛點，是否是自己想用的產品，可以理解為是否可用。
• 體驗流程過程中，用戶的操作和系統反饋是否順暢，不進行培訓用戶上手的難度如何以及培訓后用戶操作的流暢性如何等，可以理解為是否易用，同時也可以提前知道后期培訓用戶的成本會有多大。
• 產品的視覺美觀度如何，部分用戶可能會提一些好不好看的問題。
• 產品的品牌傳播效果如何，通過以上的結果，可以自己挖掘到該產品以后去推廣時，品牌傳播效應如何。

3. 漏斗分析

項目上線后，我們需要搜集用戶使用情況反饋以及數據分析，并根據反饋結果和數據分析結果進行版本迭代設計，不斷去優化產品的最終體驗效果。

關于數據分析，我們會經常用到漏斗指標。針對用戶的任務流程展開，可以選擇核心流程，看每一步的用戶損耗比。比如第一步時用戶數是1萬，到了第二步是8000，最終走完流程的只有100人，這時轉化率就只有1%，損耗了99%。流程中損耗很大的步驟，也可以作為用戶體驗提升的分析點。漏斗分析另外也可以作為A/B測試的數據憑證。

七、總結

洋洋灑灑寫了這么多，最后我想談談如何利用用戶體驗點去判斷產品的最終體驗效果，簡單說就是用戶體驗好的產品一般都具有哪些特點？

1. 從體驗的五個層來說

1）商業層，符合商業目標

就是需要符合產品發展的戰略目標，我們做的都是商業商品，所有產品首先得滿足自己的商業價值。當然我們需要平衡商業價值與用戶價值，不能一邊倒的只關注商業價值，不管用戶，這樣時間長了，用戶也會拋棄這款產品；同理也不能一邊倒的只關注用戶價值，這樣產品沒有商業閉環，無法盈利，最后也會因為供應端成本而垮掉。

2）功能層，對功能做減法

這個減法的意思主要是突出產品的核心價值，不要一股腦兒什么功能都做。有句話叫做多即是少，什么功能都有，找不到重點，等于什么都沒有，對用戶而言體現不出價值來。所以我們需要遵循少即是多原則，精簡產品功能，突出核心價值，先把解決用戶痛點放在首位，后期再不斷放大這個核心價值。

3）流程層，對不同用戶不同場景做精細化設計

首先需要對用戶進行分層，這個用戶可能還分屬于不同的機構，簡單說就是先把用戶的層次梳理出來。常見的就是老板、管理者、員工這三層。其次基于這些分層用戶，梳理可能存在的場景，比如老板會在哪些情況下使用這款產品，痛點是什么等。

有了上面的梳理，再來對任務流程進行精細化設計，盡量把所有可能的流程都梳理出來。

4）認知層，頁面擁有良好的認知屬性

這個主要針對頁面的使用成本而言，可以考慮交互四策略原則，即組織、刪除、隱藏、轉移。對整體的頁面架構進行設計，降低頁面使用成本，提高產品的反饋能力等。

5）視覺層，擁有良好的視覺美感

產品的外在形象良好，吸引用戶，同時有好的情感化設計。視覺層比較高級的是產品有品牌感，作為一個受用戶喜愛的品牌，在市場上去推廣。

2. 從用戶流程優化來說

前面的方法可以用來設計0到1的產品，也可以作為1到N的產品優化。這里則只針對后期優化的產品，不過需要公司把用戶體驗提升到戰略高度才行。

1）降低用戶認知成本，讓產品自動化、智能化、人性化

這里跟上面的認知層類似，只是需要更進一步，我們需要產品更具有人性。人是群居生活的，人總是喜歡跟人打交道的，如果產品足夠人性化，那用戶使用產品就跟和人打交道那樣簡單，似乎就能做到超出用戶預期了。有句話叫做好的產品會說話，就是這個道理。

2）減少場景切換，簡單場景獨立化，復雜場景拆分化

這里主要針對用戶場景的優化，場景有很多種，產品發展到后期，需要進一步提煉體驗感，就需要對場景進一步優化。

盡量讓用戶在一個頁面完成一個功能，不要做一件簡單的事情，需要來回切換頁面。如果是復雜的功能操作，則可以將操作拆分成多個步驟，然后每一個步驟又獨立化，這樣就類似于大事化小，小事化無，極大的降低了用戶的操作成本。

3）優化用戶行為

產品發展到一定階段，用戶的很多行為都可以通過數據分析來獲取。我們如果希望用戶做什么事情，也可以通過對用戶行為的設計，讓用戶按照我們的預想來操作。簡單說就是引導用戶去做一些我們希望用戶去做的事情，當然主要是考慮商業層的價值，例如轉化率、點擊率等指標提升。

 

作者：D.cheerful，武漢地區野路子產品經理，3年+網頁設計，6年+交互設計，3年+產品經理；公眾號：D哥設計。

本文由 @D.cheerful 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 unsplash，基于 CC0 協議