起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識5Tips–助力管理平臺的信息設計
首先我們來看下面這幅圖：左邊是Dribbble聯合創始人設計師Dan Cederholm的辦公桌，非常干凈整潔。右邊是天才工程師?Jim Williams的辦公桌，大家第一眼感覺如何？是不是很凌亂。我們常說設計要謹記“Less is More”，簡潔干凈是人人都追求的，但有時有些復雜是不可避免的，比如下圖中工程師的桌面。仔細觀察其桌面，你會發現雖然這些物件看起來雜亂無章，但其 擺放還是有規律可尋的。 我進入公司的兩年時間里，一直在做管理平臺的設計工作，而目標用戶就是工程師。這些管理平臺都有共同的特點：業務邏輯復雜，信息數據海量，而且還要考慮用戶特定的使用場景和操作習慣。所以在設計中首要的兩個目標就是： 1、保證功能完整流暢，同時兼顧易用性。 2、保證信息組織合理，同時兼顧可讀性。 在實現這些目標的過程中，我總結了5條設計小技巧。下面，我將用一些產品實踐和案例來詳解設計過程中小技巧的應用。 管理平臺的功能大部分需要通過填寫表單來實現，但由于其業務特點，它的表單填寫內容繁多，邏輯復雜。若直接羅列所有表單內容，一定會讓用戶望而生 畏，且容易出錯。這時可以根據內容類型，關聯邏輯等維度將表單分成多個主題，再根據前后邏輯關聯性，將這些主題分到多個網頁或單個網頁的不同部分，如果是 多個網頁，最好配以進程提示，告知用戶需要的填寫步驟以及當前所處進度。有研究表明，比起完成一項大任務，人們更愿意去完成10個小任務，因為每完成一個 小任務就能給人帶來一定成就感。 云計算-云主機服務中，創建云主機的過程需要填寫15項內容，根據信息類型和業務邏輯將內容分為了三類，再加上一個確認步驟，將整個表單填寫分到了四個網頁，雖然步驟變多，但卻可以讓信息更加有序，減少錯誤的發生。 運維平臺中添加監控項需完成9項內容，但前后主題之間沒有很強的邏輯關聯，因此在一個網頁中分成3個主題，即可添加成功。 最貴的不一定是最適合自己的，標簽的對齊方式也是如此。根據不同的使用場景也要選擇不同的對齊方式。業界比較認可的標簽對齊方式有頂對齊、左對齊和 右對齊三種，Matteo Penzo的眼動實驗比較了三種方式的完成速度，頂部對齊標簽方式，標簽移動到輸入框需50毫秒，比左對齊標簽方式(500毫秒)快了10倍，比右對齊標 簽方式(240毫秒)快了5倍左右。通過下表，可以看出三種對齊方式各有其優缺點。但有時，完成時間并不是表單設計的唯一考慮因素。 （引用自Justin Mifsud的《An Extensive Guide To Web Form Usability》） 對于簡易表單可以使用頂對齊；對于較復雜表單，更傾向于選擇右對齊，而對于布局復雜的表單則可以用左對齊的方式。 云計算-關系型數據庫的創建實例中標簽都較長，且要填寫的表單項數較多，綜合考慮后，為了讓用戶在一屏環境下填完，我選擇了更適合的標簽右對齊方式。 雖然標簽右對齊比左對齊的完成效率高些，但若在布局復雜的情況下標簽右對齊會讓界面顯得非?；靵y，從而影響整體的信息瀏覽閱讀。所以在布局復雜的表單中一般會選擇左對齊。 當然，對于一些空間受限，內容又繁多的表單，還有一些創意的處理方法，如Matt?D.?Smith的設計。 漸進展開額外內容也是應對復雜信息的一種手段。根據用戶的使用場景和習慣，將部分內容預先隱藏，在用戶需要時，通過點擊適合的控件，再出現更多額外內容，這樣可使界面保持簡潔，操作邏輯清晰。 云計算中創建安全組的表單，大部分用戶創建一條安全組規則即可滿足需求。對于有額外需求的用戶可通過點擊添加按鈕來補充。這樣在大多數情況下，頁面簡潔，而有需要時，也可以快速添加，不打斷用戶的操作流。 Airbnb個人資料表單的緊急聯系人選項，默認情況只有一個說明，若需添加時，點擊編輯才會展開更多內容。 云計算的時間選擇控件，對多數用戶來說，這些快捷選項基本滿足查看不同時間范圍內的數據變化，所以自定義時間范圍就作為高級功能隱藏起來，如有需要通過鼠標點擊自定義即可觸發。 雖然管理平臺的用戶多半都是經驗型用戶，但復雜的表單和特定的規則難免會讓他們有困惑的時候。在輸入框旁邊適時地顯示幫助信息，及時地告訴用戶該如 何填寫，以此減輕用戶的記憶負荷。同時，管理平臺的表單內容通常會很多，如果在最后提交時才告知用戶有錯誤，無法提交，想必此時用戶肯定會怨聲載道索性放 棄填寫。即時驗證讓長表單的填寫成為一種實時溝通，它可以及時確認用戶填寫的內容是否合適，或者實時更新數據給用戶填寫參考。 填寫集群的名稱有其特殊的復雜規則，如果沒有即時幫助，讓用戶每次創建都記住規則再來填寫，顯然不可能，而每一步的實時驗證，可以補救用戶在規則查看之余還會犯的錯誤，順利完成任務。 每個用戶的數據庫服務器數量都有一個初始值，隨著創建會逐漸減少，限制提示可以提醒用戶填寫一個合理的數值。 對于一些較復雜的表單項，也可以嘗試在標簽上添加提示。 而難以解釋的表單項，除了文字提示之外，還可以嘗試使用圖片來表達。例如信用卡的CVC碼，一般人都不清楚是什么，但用圖片來表達就一目了然了。 通常來說，文字可以準確地表達信息，但是過多的文字卻會給界面帶來閱讀負擔，若將部分文字信息通過圖形化表達，則可以把信息更加直觀、準確、清晰地傳達給用戶，以獲得理解和共鳴，甚至快速地被記住。在表格中適當借助圖標來代替文字還可以減少占用空間，讓表格主次分明。 在云主機名稱旁邊放上云硬盤的圖標，用戶一目了然就可看出哪些云主機掛載了云硬盤，而無需再專門加一列數據，表明云硬盤的掛載情況。 性能監控平臺的場景管理中，對每一個輪次都會有一系列使用頻繁的操作，為了讓用戶可以快速找到，且不迷失在文字理解中，用圖標來表示這些操作既美觀又便捷。 sbb.ch的火車班次查詢列表，很多信息會通過圖標來表達，很大程度地縮減了占用面積。雖然有一些圖標的認知需要一定的學習成本，但在熟悉之后，會讓信息傳達變得直觀高效。 以上就是我對管理平臺信息設計的一點心得。雖然管理平臺的用戶受眾面遠不及內容型產品，但這些用戶都是專業用戶，對數據的操作和瀏覽有更嚴格的要求，如何在實現所有功能的基礎上讓用戶覺得這類產品的使用是靈活且便捷，還有許多研究的點值得深入挖掘。 原文來自：網易UEDTip1：合理組織表單內容
Tip2：選擇合適的標簽對齊方式
Tip3：漸進展開額外內容
Tip4：即時幫助和即時驗證
Tip5:?借助圖形化表達
結語
- 目前還沒評論，等你發揮！
