后臺交互設計:關于中后臺系統設計的4個原則

3 評論 37140 瀏覽 158 收藏 7 分鐘

最近幾個月一直在做中后臺系統的交互和視覺設計,也找了很多國內外的參考資料,今天翻譯的是behance上的一篇文章,鏈接將附在文章底部。

第一次投稿,如有不足,還請各位看官多見諒。

目錄

  1. 運用好線條元素
  2. 文字設計比你想象得更重要
  3. 充分利用空間和比例讓你的設計錦上添花
  4. 交互應點到即止

在設計中后臺系統時別把用戶想得太笨,真正笨的用戶如果沒有設計師的指導完全不會使用產品。用戶的大腦需要通過后臺系統去思考和決定該做什么,并且設計師也無法去引導聰明的用戶。

和所有典型的企業產品界面一樣,中后臺系統需要在有限的空間里展示盡量多的信息。用戶不但要能夠實實在在的看到數據,更重要的是能在查看數據后作出正確的行為。

01.運用好線條元素

數據的分級是中后臺系統設計過程中最困難的部分,而能利用好線條你就能牛逼哄哄的解決一大半問題。

中后臺系統最起碼包括主要控制器(導航條)、重要數字指標顯示區域以及列表這三個部分,而且每一部分都包含著諸多不可忽視的細節。

我們可以運用面來做視覺元素將一些優先級最高的數據區別開來,接下來就可以想辦法對詳細數據進行區別,而線通過自身特有的韻律來輔助閱讀成為我們可用的最好設計元素。當你把注意力放在某些信息上時,線條元素會扮演一個輔助集中注意力的角色,隔絕無關元素。

由于數據信息是最為重要的,線條不應該吸引過多的注意力,因此我們通常都用一個像素的線條。當然,降低用戶對于線條元素的注意不是意味著越模糊越好,只有相對顯眼的線條才能幫助到用戶閱讀。

02.文字設計比你想象得更重要

在保持閱讀清晰的前提下,盡量降低字重,因為在中后臺系統里,經常會遇到大段文字擠在一起的情況,如果字重太高,開發出來你哭的地方都沒有。另外,為了確保信息的易讀性,請使用非襯線字體。

03.充分利用空間和比例讓你的設計錦上添花

在消費品的設計中添加色彩和ICON是我們常用的視覺設計的慣用招數,但是,在中后臺系統的設計中,對顏色和ICON的運用要謹慎一些,以免造成多余的認知障礙。

由于文字能夠傳達清晰準確的信息,無疑是更好的設計元素。通常會有兩種場景會用到ICON,要么是為了幫助用戶快速導航,要么就是能夠產生類似編輯這種直接通用的暗示。能夠謹慎的使用顏色和ICON,你設計的界面就不至于亂糟糟的。充分的利用好空間和比例,別讓界面元素過于擁擠,那么你也能設計出高逼格的中后臺系統。

04.交互應點到即止

在中后臺系統的設計中,使用拖拽等交互方式是大忌,就連雙擊和右鍵都盡量少用。用戶雖然都想著提升工作效率,但他們大部分卻都是懶癌晚期。就和打游戲一樣,老司機能夠飛快地使用鍵盤操作,而菜雞只能拿鼠標亂戳,如果菜雞完全沒有想成為老司機的動力,那他們離開了鼠標就幾乎就是廢人一個。

并且,如果他們的麒麟臂一旦習慣了拿鼠標戳,就根本停不下來。對于這部分菜雞用戶來說,拖拽這種高級交互行為是不存在的。

這四條設計原則很有可能沒法讓你的設計水平突飛猛進,但是我們也得意識到,展示正確的信息哪怕展示的方式不對也比金玉其外敗絮其中要更好,所以,在做設計之前我們首先要做的還是先去做用戶和相關利益者的分析,了解到底該展示些什么信息,以及為什么。

以上。

 

原文地址:https://www.behance.net/gallery/54874727/Dashboard-design-principles

本文由 @王剛 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 最近接觸到中后臺設計,作者有什么不錯的參考資料能推薦下

    來自河北 回復
    1. …國內中后臺比較好的, ant design 和 element 都提供了不錯的規范和基礎控件,以及一些設計方法。。。

      來自北京 回復
  2. 非常棒,請問有后臺設計案例嗎?想膜拜下

    來自湖南 回復