“殺死” App 的留白設計!

近幾年,應用程序界面設計留白似乎已成為一種趨勢,因為不少設計師認為 App 以及桌面應用頁面的留白不僅可以減輕頁面帶給用戶的負擔,還可以帶來視覺上的美感。

但在本文中,作為用戶體驗設計總監的 Christie Lenneville 想法卻完全相反,其認為完全可以在不降低應用程序現代美感的情況下,提高數據密度,減少應用的留白。

“殺死” App 的留白設計!

作者 | Christie Lenneville,用戶體驗設計總監

譯者 | 彎月

出品 | CSDN(ID:CSDNNews)

空白代表著寬敞,整潔,極簡主義。適量的空白已成為消費者應用程序中的設計美學。

我並非討厭這種趨勢。如果善加利用,空白確實很有吸引力,可以大大提高簡單界面的可用性。大量的空白萬歲!

但是,複雜的界面又怎麼樣呢?企業軟件設計人員明白我的意思:技術性的控制面板,數據密集的物流系統,以及擁有大量數字的會計系統。這些都是我們的業務用戶每天賴以完成工作的工具。

我給你講一個悲傷的故事

主人公是一家大型高科技公司的用戶體驗設計師,他參加了一個新項目:重新設計一個非常醜陋,難以學習的內部控制面板,每個頁面都塞得滿滿當當(好多的數據)。每個人都覺得它需要現代化的設計,畢竟它是2000年左右設計的!

因此,這位設計師開始著手解決問題,吸取了現代消費者應用中的設計。

新的設計簡化了每個頁面。將大頁面分解成更小更集中的頁面。還採用了逐步披露的方式隱藏了可能無關緊要的信息。由於如今的用戶不介意滾屏,所以新的設計在所有常見的位置上都加上了空白區域,包括標題、正文塊和表格行。這些留白非常好看。

但是,僅過了一個月,公司就勒令放棄了這份設計。

他們的用戶十分討厭這個新系統。當然,舊系統很醜,但是它包含了用戶需要的一切,使用起來非常方便!他們的工作節奏非常快——他們在技術支持呼叫中心工作,並根據生產率指標進行評級。工作時間裡,他們需要分秒必爭,沒有時間點擊或滾動屏幕查找信息。

在他們看來,這個新系統不是一次升級,而是一次勞民傷財的無效投資。這不僅有點令人沮喪——新系統惹惱了他們的客戶。

故事的教訓

大型企業本來就擁有大規模的數據,動輒數千名用戶直接與之交互——搜索、操作、報告等。他們需要快速瀏覽這些數據,而無需在界面中大量挖掘。

打個比方:你肯定不會喜歡每頁只有10個單詞的字典(需要翻閱這麼多頁面!)企業用戶不希望使用系統的時候花時間找東西。

但這並不意味著系統的界面就一定很醜。

經過精心設計的數據密度可以在每個頁面上顯示大量信息,同時仍然保持清晰且易於閱覽的內容層次結構。如果設計得好,用戶可以快速準確地訪問他們所需的數據,而不會影響他們閱讀文本或與整個應用程序交互的能力。

以下是關於如何在不降低應用程序現代美感的情況下,提高數據密度的一些建議。

首先,嘗試減少數據量

在開始縮小字體大小以方便在每個頁面添加更多數據之前,請查看是否所有數據都是必需的。試著問你自己以下幾個問題:

  • 我可以消除冗餘數據嗎?很多系統只是將相同的數據略加修改後重複顯示了很多次。(你可以從大規模表格開始尋找重複信息。)
  • 有沒有我的用戶其實並不需要看到的內容?如果你不知道,可以問問他們!他們真的在使用所有顯示出來的內容嗎?
  • 我可以更好地分組相關的信息嗎? 並非每個離散數據元素都需要單獨的表格單元格,即使後臺系統存儲時採用了這樣的方式。看看你是否可以通過組合元素降低頁面的複雜性,例如,將客戶的姓氏和名字放在同一個字段中。
“殺死” App 的留白設計!

不方便閱覽

“殺死” App 的留白設計!

方便閱覽

使用良好的排版標準

“對於快速讀取冗長且基本無意義的字符串(例如序列號)來說,間距至關重要;即使對於較短的字符串(如電話號碼和日期)來說,間距也很有用。”

—— 書:《The Elements of Typographic Style》,作者:Robert Bringhurst

在企業應用程序中,合理的排版至關重要。 字體粗細、字距調整和間距都會影響用戶閱覽信息的速度。

  • 在比較行與行之間的數字時,請考慮使用等寬數字。
  • 如果需要顯示角和分,那麼請考慮貨幣的小數對齊。
  • 保持很細的分割線,但要小心,保留足夠的空白區域來整齊地分割內容。

善用顏色

儘可能減少在不太重要的內容上使用顏色。在設計中使用保守的色調,會讓你使用的顏色更具影響力,而且更有益於交互式或視覺意義,例如用顏色(通常為紅色)表示錯誤消息或鏈接文本。

“殺死” App 的留白設計!

在上面的例子中,由於缺少其他顏色,所以灰色主題表中的紅色格外顯眼。每行的水平閱覽性稍有下降,但增加了表整體的閱覽性。你需要考慮對應用程序來說哪個更重要。

少用“擺設”

在討論製作更易讀的表時,Robert Bringhurst指出,

“應該用最少量的擺設(尺子、框、點、以及其他橫穿空白區域的導軌),並最大化信息量。”

—— 書:《The Elements of Typographic Style》,作者:Robert Bringhurst

在提高應用程序密度時,請考慮頁面上哪些元素只是為了美觀,而對頁面的內部邏輯和可視結構來說並沒有價值。

讓用戶導出數據

有時你無法做到足夠的數據密集。在處理大型數據集、長列表、複雜表格或逐頁的結果時,有時最好的解決方案是讓用戶能夠將這些數據轉移到另一個可以與之進行不同交互的工具中。

考慮為用戶提供導出數據的功能,讓他們通過XML、XLS、JSON或CSV查看數據(或者支持所有這些!要是你導出的數據比屏幕上顯示的要多,那該多好!)

不要忘記觸摸屏

除非你確信不必支持觸摸式交互,否則千萬不要忘記觸摸目標的最小尺寸。例如,Material在他們的主頁上(https://material.io/design/usability/accessibility.html#layout-typography)針對觸摸目標的佈局提供了良好的指導,你應該檢查一下。

查看Material的更新

最近,在Material的更新中,Google添加了增加數據密度的新標準(https://material.io/design/layout/density.html#usage),使其更適用於企業應用程序。 他們提供了經過深思熟慮的具體建議,其中包含大量關於密度如何影響佈局的精彩示例。

功能大於形式

企業的設計人員可以從消費者的設計中獲得很多啟發,但歸根結底功能才是我們最關心的問題。這是因為我們的用戶沒有選擇權,他們必須使用我們設計的工具——即使他們覺得某個系統沒法用,也無法去下載一個不同的系統。 因此,我們始終應該把他們的日常生產力放在首位。

原文:https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a

本文為 CSDN 翻譯,如需轉載,請註明來源出處。


分享到:


相關文章: