阿里巴巴設計師:如何給后臺產品做設計?

首先解釋一下后臺,它是指服務的管理操作部分,主要是對內容、數據的增刪改查。后臺產品也主要是 To B?的平臺型產品,例如企業內部的管理、運維產品。本文就自己一年多在后臺運維產品設計中遇到的挑戰和思考進行整理,一方面可以和大家分享經驗,一方面可以好好的總結下自己。

在后臺產品的設計中,設計師充當了業務轉化為界面的「翻譯」,尤其是在團隊中沒有產品經理時,設計師則需要對業務有更深的理解且具備更多的專業能力,協調需求方與開發,進行設計賦能。文章通過以下兩部分進行介紹。

一、后臺產品特征分析與設計挑戰

在工作中做后臺產品和做 C 端產品還是有不小差別,以下僅以本人在設計工作中遇到的挑戰進行舉例,對比分析。

1. 業務理解難度大,專業詞匯多

接觸后臺產品的首要任務是對業務的理解,這點對于產品尤為重要,且對設計師來說較有難度。比如企業提供的云平臺后臺運維系統,如圖1,它涉及到云計算多種服務類型、數據結構、業務邏輯及權限把控等,覆蓋領域非常廣泛,專業知識要求較強。這樣一個龐大的后臺、業務理解量對于一個新手(未接觸過后臺產品設計)來說,上手難度較大,并且這類后臺運維產品,都是公司內部使用,很難找到可借鑒參考的案例,以往的經驗也無法直接復用。再者,后臺產品中經常使用各種技術專業詞匯,這都需要我們通過學習交流,了解其含義以及所在業務中的作用。

阿里巴巴設計師:如何給后臺產品做設計?

△ 圖1 云計算 IAAS 基礎設施服務的業務組成

2.?用戶群體專業性強

我們面對一批具有專業性的高級用戶,此時設計師如果以「同理心」或「假裝用戶」的方法去推導會略顯蒼白。通過下圖,對兩類產品的用戶特征進行對比分析。C 端產品,用戶量較多,至少是幾萬用戶,用戶分布比較雜,文化水平和電腦操作水平各異,他們習慣于帶有引導的單線程操作,盡量簡化頁面信息。而對于后臺產品,用戶基數較少,以公司內部的運維人員為主,人員特征相對集中,具備很好的電腦操作水平,用戶特征也較明顯,他們注重高效率操作,編輯時經常采用輸入搜索、編輯代碼的交互方式,目標明確,快速精準直達;排查問題時需要多視角,多維度判斷問題。

阿里巴巴設計師:如何給后臺產品做設計?

△ 圖2 C 端與后臺產品用戶分析

針對不同的用戶特征,我們在設計界面時也有所側重。對 C 端產品,用戶水平差異較大,設計界面應盡量兼顧中間層用戶的理解度,使操作符合其認知,但對于后臺運維人員,過多的封裝可能會影響操作效率,哪怕鼠標懸停顯示、點擊查看詳情等。當然,過度封裝界面也可能會增加用戶理解的成本。

阿里巴巴設計師:如何給后臺產品做設計?

△?圖3 用戶理解度與界面封裝的關系

舉兩個界面設計的例子,以更直觀的視角了解用戶特征對界面設計的影響。C端產品,如圖4,設計師在設計界面時會考慮適量的交互動效,吸引用戶;簡單直觀的導航和架構,引導用戶;圖文結合的信息布局,注意信息疏密、留白,利于用戶閱讀效率和瀏覽心情;文案用語通俗易懂且注重情感化。

阿里巴巴設計師:如何給后臺產品做設計?

△ 圖4 C端產品界面? 圖片來源:https://www.templatemonster.com/cn/demo/63945.html

而后臺產品,如圖5所示,在設計時會有以下側重:

阿里巴巴設計師:如何給后臺產品做設計?

△??圖5? 后臺產品界面? ?圖片來源:https://dribbble.com/JanLosert

  • 大多是滿屏信息,充分利用頁面空間。
  • 頁面信息會包含技術人員習慣的英文專業術語,用圖標或中文很難清晰表達語義,識別率較低。
  • 以圖表、列表、表單等形式進行數據展示,少有交互動效。
  • 必要詳情信息外露,展示多維度的全局信息,便于用戶判斷異常的優先級。
  • 為常用操作留有入口且加大反饋熱區,便于用戶操作。
  • 在組件選擇上要考慮可擴展性、信息連貫性,避免浪費空間,分散用戶注意力。

3.?產品設計思路存在差異

首先從需求來說,后臺產品,一般需求是技術或業務直接推進到需求。較少像 C 端那樣通過用戶畫像、同理心等方法分析用戶的行為,發掘用戶需求。相比之下后臺產品的需求是明確的,但是,需求的明確并不代表需求的簡單。因為后臺產品的業務邏輯的復雜,同時流程性會更強。大量的字段堆積及繁瑣的操作都需要設計師去思考,將整個流程梳理清楚。在當前操作下哪個字段需要保留或者去除;業務流程如何跳轉才能清晰引導用戶;各種閾值如何有效顯示;一個頁面中操作會不會有關聯或沖突,這些都需要建立在對業務的足夠了解之上。

其次是設計產出,后臺產品有時出于技術角度,會先搭起主體架構提供頁面,展現業務,之后可通過技術改進與用戶反饋進行迭代。 C 端產品設計時一般都會由產品經理與設計師一起討論好較全面、較完善的操作流程;相關功能和操作都配備齊全;注重用戶使用體驗與界面美觀。

阿里巴巴設計師:如何給后臺產品做設計?

△ 圖6 C 端產品與后臺產品設計對比

因此,在產品設計時就會有不同的思路側重。后臺產品「效率壓倒一切」,注重界面的實用性和操作效率,對交互細節要求不會很高,提供必備功能即可,用戶穩定。C 端產品則是「體驗為王」,關注的是流量 PV、UV 等數據,換句話說也就是產品更關注用戶的粘度,需要以美觀的視覺感受和流暢的交互體驗來滿足用戶。

4.?技術迭代快

物聯網、云計算等領域的快速發展,會催促技術的更新與迭代,后臺運維產品作為一個由技術團隊主導的產品類別,自然會受到影響,尤其是開拓中的新產品,會在技術的發展中不斷迭代,利用新的技術提升運維效率。

5.?需求層次存在差異

這里的差異主要是由于用戶管理目標的數量級、權限、習慣的不同所導致的。舉個例子,用戶管理50多個集群,一個一個進行多服務升級會很麻煩,這類用戶更習慣于通過代碼的方式直接批量修改,而對于運維數量級較少的用戶,則可以通過選擇服務及要升級的版本完成操作。

后臺產品的設計需要兼顧高級與初級用戶的使用習慣,既滿足操作高效,也要確保新用戶知道如何操作。既要提供必要的頁面流程引導,也要滿足相關操作的快速跳轉切換。這點會與 C 端產品有所不同,C 端產品大多是由設計師確認好一條清晰的線性操作流程,用戶根據引導逐步找到對應目標。

二、后臺產品設計思考

作為后臺交互設計師,有時不僅要充當 PD,與業務方對接,負責需求的分析與功能結構梳理,也要配合開發,進行測試驗收并收集上線反饋,甚至要負責相關視覺設計、使用推廣等工作。在具體的工作中,需要我們具備更加全面的視角,以下幾點思考與大家共勉。

1.?轉變自身態度

  • 與團隊共建、協作,為產品負責。當團隊中職能界定模糊時,我們作為產品的用戶代表,需要為最終的體驗負責,協調上下游工作,確保產品為用戶提供所需的服務。
  • 為用戶而設計,尊重用戶使用習慣。不同的產品所對應的目標用戶也不相同,這需要我們立足于本產品,了解用戶的使用習慣、發掘痛點、洞見方向。
  • 尊重平臺特性,了解技術限制。
  • 設計賦能。向前分析需求,向后配合開發。

2.?深入了解自己的業務

這一點在后臺產品中尤為突出,了解才有發言權,才能提出合理建議,并正確推動前后端協調,否則脫離了業務,設計工作將無實質意義,即無法解決用戶需求,也無法帶來優質體驗。

阿里巴巴設計師:如何給后臺產品做設計?

△ 圖7 后臺產品用戶體驗與業務的關系

3.?設計方法

  • 協助梳理業務。把業務轉化為容易理解的內容,整理出產品不同的角色、任務以及可能的頁面,提煉功能與內容。
  • 敢嘗試。提供備選 A\B 方案,讓用戶基于一個可供討論和對比的界面進行反復修正,在此基礎上進行細節補充,提高產品設計效率。
  • 小而快。把需求細分,快速進行產品開發與后續迭代。

4.?產品體驗標準側重

  • 操作效率。后臺管理運維的數量級較大,會涉及到對多目標的重復性操作,如何簡化操作流程,合并重復模塊,減少選項,有效的設計信息是較為重要的一點。
  • 準確性。面對大量信息和多維度的判斷,提供準確的信息展示與反饋同樣可以提高操作效率。例如精準文案,減少界面視覺元素的干擾,增加預防出錯的機制等,提高準確性,讓用戶聚焦于當前任務。
  • 降低學習成本。后臺產品本身就具有一定的學習成本,這與它的專業性不可分割,那么在設計時,減少信息層級,利用運維用戶習慣的、純粹的元素與操作方式,能夠降低額外的學習成本。

三、總結

以上是我在工作中一些小的總結,經驗有限,免不了還有些膚淺。總之,作為后臺產品的交互設計師,需要我們加強自身學習,進行產品知識和業務補充,在這里引用一句話「使用方法解決需求方的問題是設計最本真的用處」。無論面對多么底層,復雜的業務,多么各異的用戶訴求,我們都要緊貼業務、服務用戶,為產品體驗負責。

 

關注阿里巴巴體驗技術團隊公眾號,第一時間了解更多精彩內容,還有設計職位期待你的加入!

阿里巴巴設計師:如何給后臺產品做設計?

后臺界面設計好文」

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備: http://hao.uisdc.com

收藏 223
點贊 11

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。