5Tips–助力管理平台的信息設計!

Comment

UI/UX設計
19

首先我們來看下面這幅圖:左邊是Dribbble聯合創始人設計師Dan Cederholm的辦公桌,非常乾淨整潔。右邊是天才工程師 Jim Williams的辦公桌,大家第一眼感覺如何?是不是很凌亂。我們常說設計要謹記“Less is More”,簡潔乾淨是人人都追求的,但有時有些複雜是不可避免的,比如下圖中工程師的桌面。仔細觀察其桌面,你會發現雖然這些物件看起來雜亂無章,但其擺放還是有規律可尋的。

1

我進入公司的兩年時間裡,一直在做管理平台的設計工作,而目標用戶就是工程師。這些管理平台都有共同的特點:業務邏輯複雜,信息數據海量,而且還要考慮用戶特定的使用場景和操作習慣。所以在設計中首要的兩個目標就是:

1、保證功能完整流暢,同時兼顧易用性。

2、保證信息組織合理,同時兼顧可讀性。

在實現這些目標的過程中,我總結了5條設計小技巧。下面,我將用一些產品實踐和案例來詳解設計過程中小技巧的應用。

 

Tip1:合理組織表單內容

管理平台的功能大部分需要通過填寫表單來實現,但由於其業務特點,它的表單填寫內容繁多,邏輯複雜。若直接羅列所有表單內容,一定會讓用戶望而生畏,且容易出錯。這時可以根據內容類型,關聯邏輯等維度將表單分成多個主題,再根據前後邏輯關聯性,將這些主題分到多個網頁或單個網頁的不同部分,如果是多個網頁,最好配以進程提示,告知用戶需要的填寫步驟以及當前所處進度。有研究表明,比起完成一項大任務,人們更願意去完成10個小任務,因為每完成一個小任務就能給人帶來一定成就感。

2

雲計算-雲主機服務中,創建雲主機的過程需要填寫15項內容,根據信息類型和業務邏輯將內容分為了三類,再加上一個確認步驟,將整個表單填寫分到了四個網頁,雖然步驟變多,但卻可以讓信息更加有序,減少錯誤的發生。

3

運維平台中添加監控項需完成9項內容,但前後主題之間沒有很強的邏輯關聯,因此在一個網頁中分成3個主題,即可添加成功。

 

Tip2:選擇合適的標籤對齊方式

最貴的不一定是最適合自己的,標籤的對齊方式也是如此。根據不同的使用場景也要選擇不同的對齊方式。業界比較認可的標籤對齊方式有頂對齊、左對齊和右對齊三種,Matteo Penzo的眼動實驗比較了三種方式的完成速度,頂部對齊標籤方式,標籤移動到輸入框需50毫秒,比左對齊標籤方式(500毫秒)快了10倍,比右對齊標籤方式(240毫秒)快了5倍左右。通過下表,可以看出三種對齊方式各有其優缺點。但有時,完成時間並不是表單設計的唯一考慮因素。

4

對於簡易表單可以使用頂對齊;對於較複雜表單,更傾向於選擇右對齊,而對於佈局複雜的表單則可以用左對齊的方式。

5

雲計算-關係型數據庫的創建實例中標籤都較長,且要填寫的表單項數較多,綜合考慮後,為了讓用戶在一屏環境下填完,我選擇了更適合的標籤右對齊方式。

6

雖然標籤右對齊比左對齊的完成效率高些,但若在佈局複雜的情況下標籤右對齊會讓界面顯得非常混亂,從而影響整體的信息瀏覽閱讀。所以在佈局複雜的表單中一般會選擇左對齊。

當然,對於一些空間受限,內容又繁多的表單,還有一些創意的處理方法,如Matt D. Smith的設計。

7

 

Tip3:漸進展開額外內容

漸進展開額外內容也是應對複雜信息的一種手段。根據用戶的使用場景和習慣,將部分內容預先隱藏,在用戶需要時,通過點擊適合的控件,再出現更多額外內容,這樣可使界面保持簡潔,操作邏輯清晰。

8

雲計算中創建安全組的表單,大部分用戶創建一條安全組規則即可滿足需求。對於有額外需求的用戶可通過點擊添加按鈕來補充。這樣在大多數情況下,頁面簡潔,而有需要時,也可以快速添加,不打斷用戶的操作流。

9

10

Airbnb個人資料表單的緊急聯繫人選項,默認情況只有一個說明,若需添加時,點擊編輯才會展開更多內容。

11

雲計算的時間選擇控件,對多數用戶來說,這些快捷選項基本滿足查看不同時間範圍內的數據變化,所以自定義時間範圍就作為高級功能隱藏起來,如有需要通過鼠標點擊自定義即可觸發。

 

Tip4:即時幫助和即時驗證

雖然管理平台的用戶多半都是經驗型用戶,但複雜的表單和特定的規則難免會讓他們有困惑的時候。在輸入框旁邊適時地顯示幫助信息,及時地告訴用戶該如何填寫,以此減輕用戶的記憶負荷。同時,管理平台的表單內容通常會很多,如果在最後提交時才告知用戶有錯誤,無法提交,想必此時用戶肯定會怨聲載道索性放棄填寫。即時驗證讓長表單的填寫成為一種實時溝通,它可以及時確認用戶填寫的內容是否合適,或者實時更新數據給用戶填寫參考。

12

填写集群的名称有其特殊的复杂规则,如果没有即时帮助,让用户每次创建都记住规则再来填写,显然不可能,而每一步的实时验证,可以补救用户在规则查看之余还会犯的错误,顺利完成任务。

13

每個用戶的數據庫服務器數量都有一個初始值,隨著創建會逐漸減少,限制提示可以提醒用戶填寫一個合理的數值。

14

對於一些較複雜的表單項,也可以嘗試在標籤上添加提示

15

而難以解釋的表單項,除了文字提示之外,還可以嘗試使用圖片來表達。例如信用卡的CVC碼,一般人都不清楚是什麼,但用圖片來表達就一目了然了。

 

Tip5: 借助圖形化表達

通常來說,文字可以準確地表達信息,但是過多的文字卻會給界面帶來閱讀負擔,若將部分文字信息通過圖形化表達,則可以把信息更加直觀、準確、清晰地傳達給用戶,以獲得理解和共鳴,甚至快速地被記住。在表格中適當借助圖標來代替文字還可以減少佔用空間,讓表格主次分明。

16

在雲主機名稱旁邊放上雲硬盤的圖標,用戶一目了然就可看出哪些雲主機掛載了雲硬盤,而無需再專門加一列數據,表明雲硬盤的掛載情況。

17

性能監控平台的場景管理中,對每一個輪次都會有一系列使用頻繁的操作,為了讓用戶可以快速找到,且不迷失在文字理解中,用圖標來表示這些操作既美觀又便捷。

18

sbb.ch的火車班次查詢列表,很多信息會通過圖標來表達,很大程度地縮減了佔用面積。雖然有一些圖標的認知需要一定的學習成本,但在熟悉之後,會讓信息傳達變得直觀高效。

 

結論

以上就是我對管理平台信息設計的一點心得。雖然管理平台的用戶受眾面遠不及內容型產品,但這些用戶都是專業用戶,對數據的操作和瀏覽有更嚴格的要求,如何在實現所有功能的基礎上讓用戶覺得這類產品的使用是靈活且便捷,還有許多研究的點值得深入挖掘。

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

 

原文地址:http://designmodo.com/websites-login/