狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

用戶界面密度意味著什么以及如何為其設計

界面變得越來越不密集。

我通常對懷舊情緒和“我們喜歡那樣”的偏見持懷疑態度，但將2024年的網站和應用程序與2000年代的同類產品進行比較，軟件的擴散是難以忽視的。

為了解釋這一趨勢，并提出我們如何可能恢復密度，我首先從詢問UI密度究竟是什么開始。它不僅僅是界面在某一時刻的外觀；它是關于一個界面在一系列時刻能夠提供的信息量。它是關于這些時刻是如何通過設計決策連接的，以及這些決策是如何與軟件提供的價值相關聯的。

我想分享我的發現。希望這次探索能幫助您以具體和可用的術語定義用戶界面密度。如果您是設計師，我希望您質疑您正在創建的界面的密度；如果您不是設計師，使用用戶界面密度的視角來理解您使用的軟件。

視覺密度

我們首先用眼睛考慮密度。乍一看，密度只是我們在給定空間中看到的東西的數量。這是視覺密度。一個視覺密集的軟件界面在屏幕上放置了很多元素。一個視覺稀疏的界面在屏幕上放置了較少的元素。

彭博社的終端可能是這種密度最常見的例子。在僅僅一個屏幕上，您將看到滾動的主要市場指數的迷你圖表、詳細的交易量分解、帶有數十行和列的表格、滾動的包含世界各地機構最新新聞的標題，以及帶有鍵盤快捷鍵和快速操作的所有上述內容的用戶界面標志。

終端界面的截圖。通過Objective Trade在YouTube上

終端界面的截圖。通過Objective Trade^[1]在YouTube上

Craigslist是另一個視覺密集的例子，它的數百個普通鏈接指向類別和簡樸的搜索和過濾界面。McMaster-Carr的網站在非常小的空間內列出了許多產品變體的詳細信息，具有相似的設計提示。

Craigslist首頁的截圖McMaster-Carr產品頁面的截圖

大約2024年的Craigslist首頁和McMaster-Carr產品頁面的截圖。

您可以通過在圖像上看一眼的一小部分時間形成對這些網站密度的意見。這種意見來自我們的潛意識，所以它快速且直觀。但像其他快速判斷一樣，它是有偏見且不可靠的。例如，這些圖像中哪一個更密集？

兩個矩形。左邊的矩形填充了許多隨機排列的點。右邊的矩形填充了相同數量的點，但它們整齊地排列在行和列中。

兩張圖像都有相同數量的點（500個）。它們都占據了相同的空間。但乍一看，大多數人會說圖像B看起來更密集。1^[2]

那么這兩個圖像呢？

兩個矩形。左邊的矩形填充了許多整齊地排列在行和列中的點。右邊的矩形填充了相同數量的點，排列成兩個整齊有序的點組。

同樣，兩張圖像都有相同數量的點，大小也相同。但將點組織成組改變了我們對密度的感知。視覺密度——我們對密度的第一種、本能的判斷——是不可預測的。

在設計問題上，我們不可能完全客觀。但如果我們想要討論密度，我們應該盡可能地尋求最一致、最有意義和最有用的定義。

信息密度

在《定量信息的視覺展示》中，愛德華·塔夫特從基礎開始探討圖表和圖形的設計：

圖形上的每一點墨水都需要有理由。而且幾乎總是這個理由應該是墨水呈現了新信息。

塔夫特引入了“數據墨水”的概念，定義為給定可視化中有用的部分。塔夫特認為，不嚴格傳達數據的視覺元素，無論是刻度值、標簽還是數據本身，都應該被消除。

數據墨水不僅僅是圖表所占用的空間。一些圖表使用非常少的額外墨水，但仍然占據了很多物理空間。塔夫特談論的是信息密度，而不是視覺密度。

信息密度是一個可測量的數量：要計算它，您只需將圖表中的“數據墨水”數量除以打印它所需的總墨水量。當然，什么是和不是數據墨水有點主觀，但這不是重點。重點是盡可能接近1的比率。

您可以通過兩種方式增加比率：

1. 添加數據墨水：提供額外（有用的）數據

2. 移除非數據墨水：擦除圖形中不傳達數據的部分

元素周期性的圖像。它使用了許多不必要的視覺元素，如不傳達信息的網格標記。改進后的元素周期性圖像。它移除了網格標記，并在相同的空間中添加了額外的信息。

塔夫特關于數據墨水比率低（第一張）和高（第二張）的圖形示例。摘自愛德華·塔夫特的《定量信息的視覺展示》

信息密度有一個上限，這意味著您可能會減去太多的墨水，或者添加太多的信息。受眾也很重要：在他們的四顯示器桌面上的債券交易員將有一個相當高的閾值；閱讀教科書的二年級學生將有一個低閾值。

信息密度可以與視覺密度相關。通常，信息密度越高，可視化看起來就越密集。

例如，看看E.J. Marey在1885年發布的火車時刻表2^[3]。它顯示了從巴黎到里昂的13個站點上數十列火車的到達和出發時間。水平軸是時間，垂直軸是空間。圖表上站點之間的距離反映了它們在現實世界中的遠近。

數據墨水比率接近1，允許大量的信息——超過260個到達和出發時間——被打包到一個相對較小的空間中。

從巴黎到里昂的火車時刻表的可視化。水平軸是時間，垂直軸是空間。圖表上站點之間的距離反映了它們在現實世界中的遠近。

E.J. Marey在1885年發布的時刻表可視化。摘自愛德華·塔夫特的《定量信息的視覺展示》

塔夫特明確提出了這個觀點：

在合理的范圍內（同時利用可用數據展示技術的最大分辨率），最大化數據密度和[數據量]。

他更簡潔地稱之為“收縮原則”：

圖形可以大幅度縮小

信息密度顯然對圖表和圖形很有用。但我們能將其應用于界面嗎？

等式的前半部分——信息——適用于屏幕。我們應該最大化每個部分的界面顯示的信息量。

但等式的后半部分——墨水——有點難以翻譯。很容易認為像素和墨水是等價的。但任何超過幾個元素的界面都需要分隔符、結構元素和標志，以幫助用戶理解每個部分與其他部分的關系。

也很想遵循塔夫特的收縮原則，試圖消除界面中的所有空白。但有些空白的意義幾乎和圖形元素的暗像素一樣顯著。我們甚至還沒有觸及陰影、漸變或顏色高光；它們在數據墨水方程中扮演什么角色？

所以，雖然信息密度是一個有用的墊腳石，但很明顯它只是更大畫面的一部分。我們如何將界面中的所有設計決策納入一個更客觀、量化的密度理解？

設計密度

您可能已經在用設計決策來定義密度時看到了第一個挑戰：什么算是一個決策？

在UI、UX和產品設計中，我們有意識和無意識地做出許多決策，以傳達信息和想法。但為什么這些特定的選擇會傳達它們的意義？哪些是卓越的或僅僅是美學的，哪些實際上在做重活？

這些問題激發了20世紀德國心理學家探索人類如何理解和解釋形狀和模式。他們稱這個領域為“格式塔”，在德語中意為“形式”。在他們的探索過程中，格式塔心理學家描述了一些原則，這些原則描述了為什么某些事物看起來有序、對稱或簡單，而其他事物則不是。雖然這些心理學家不是設計師，但他們在某種意義上發現了設計的基本原理：

1. 接近性：我們認為彼此靠近的事物組成了一個單一的組

2. 相似性：在形狀、大小、顏色或其他方面相似的對象，看起來彼此相關。

3. 閉合性：我們的大腦會在設計中填補空白，因此我們傾向于看到完整的形狀，即使沒有形狀

4. 對稱性：如果我們看到彼此對稱的形狀，我們認為它們是圍繞一個中心點形成的組

5. 共同命運：當對象移動時，我們心理上會將以相同方式移動的對象分組

6. 連續性：即使它們重疊，我們也可以將對象視為分開的

7. 過去經驗：即使在不熟悉的上下文中，我們也能識別熟悉的形狀和模式。我們的期望基于我們過去對這些形狀和模式的學習經驗。

8. 圖形-背景關系：我們以三維的方式解釋我們所看到的，允許即使是平面的2D圖像也有前景和背景元素。

接近性（左）、相似性（中）和閉合性（右）的原則示例。

格式塔原則解釋了為什么UI設計超越了屏幕上的像素。例如：

• 由于相似性原則，用戶會理解具有相同大小、字體和顏色的文本在界面中具有相同的目的。

• 接近性原則解釋了為什么當圖表靠近標題時，很明顯標題指的是圖表。同樣的原因，緊密排列的元素網格看起來相關，并且與上方由充足空間分隔的菜單分開。

• 由于我們對開關的過去經驗，結合圖形-背景原則，一個模擬開關的擬態設計將讓用戶立即明白如何打開一個功能。

所以，我們不是專注于像素，而是將設計決策視為我們有意使用格式塔原則來傳達意義。就像塔夫特的數據墨水比率比較了打印圖表所必需的嚴格必要的墨水與所使用的總墨水量一樣，我們可以計算一個格式塔比率，該比率比較了設計中嚴格必要的設計決策與所使用的總決策。這是設計密度。

使用不同類型的格式塔原則和不同數量的格式塔原則處理相同信息的四種不同方式。哪一種是最密集的？

使用不同類型的格式塔原則和不同數量的格式塔原則處理相同信息的四種不同方式。哪一種是最密集的？

這仍然是主觀的：對某些人來說似乎必要的設計決策對其他人來說可能是多余的。我們的偏見會扭曲我們的評估，無論是個人品味還是文化規范。但在用戶界面方面，計算設計決策的數量比僅僅計算數據或“墨水”的數量更有用。

設計密度并不完美。用戶界面的存在是為了工作、娛樂、消磨時間、創造理解、促進個人聯系等。這些需要用戶采取一個或多個行動，因此密度需要超越組件、布局和屏幕。密度應該包括用戶在其旅程中采取的所有行動——它應該在空間和時間上計算。

時間中的密度

就像給定空間中的東西數量決定視覺密度一樣，用戶在給定時間內可以做的事情的數量決定時間——時間上的——密度。

加載時間是時間密度中最大的因素。界面對操作的響應速度越快，加載新頁面或屏幕的速度越快，UI就越密集。與二維空白不同，時間間隔所需的空間幾乎沒有下限。

彭博社的終端瞬間加載了充滿數據的屏幕

彭博社的終端瞬間加載了充滿數據的屏幕

對于當今膨脹的軟件來說，使UI在時間上更密集比僅僅在每個屏幕上擠壓更多的東西更有影響力。這就是為什么彭博社的終端仍然是金融分析領域中如此占主導地位的工具；它幾乎瞬間加載數據。一個熟練的終端用戶可以在毫秒之間瀏覽數十個圖表和圖形。有很多方法可以將大量金融數據塞進一個表格中，但無延遲地加載它是終端的真正超能力。

但假設您已經從應用程序的加載時間中擠出了每一秒鐘。接下來呢？有些東西就是無法加速：您無法改變用戶的互聯網連接速度，或者他們CPU的計算速度。一些操作，如上傳文件、等待客戶支持響應或處理支付，涉及具有不可預測變量的復雜系統。在這些情況下，與其改變任務之間的時間，不如改變時間的感知：

• 相隔不到100毫秒的行動會感覺同時發生。如果您點擊一個圖標，100ms后，一個菜單出現，感覺好像兩個動作之間沒有時間流逝。因此，如果兩個動作之間有動畫——例如，菜單滑入——同時性的幻覺可能會被打破。對于最小的時間空間，動畫和過渡可以使應用程序感覺更慢。3^[4]

• 在100毫秒到1秒之間，兩個動作之間的聯系被打破。如果您點擊一個鏈接，一秒鐘內沒有任何變化，懷疑就會潛入：您真的點擊了什么嗎？應用程序壞了嗎？您的互聯網工作正常嗎？動畫和過渡可以彌合這種感知上的差距。在這些空間中的視覺提示使UI在時間上感覺更密集。

• 在1到10秒之間的間隔不能僅用動畫橋接；研究表明4^[5]用戶最有可能在前10秒內放棄頁面。這意味著如果兩個動作足夠遠，用戶將離開頁面而不是等待第二個動作。如果您無法減少這些動作之間的時間，請顯示一個不確定的加載指示器——一個小動畫，告訴用戶系統正在正常運行。

• 在10秒到1分鐘之間的間隔更難填補。在看到不確定的加載器超過10秒后，用戶可能會將其視為靜態的，而不是動態的，并開始假設頁面沒有按預期工作。相反，您可以使用一個確定的加載指示器——像一個更大的進度條——清楚地指示直到下一個動作發生還有多少時間。事實上，正確的設計可以使等待時間看起來比實際短；蘋果的“Aqua”設計系統中突出顯示的反向移動條紋使等待時間看起來短了11%。5^[6]

• 對于超過1分鐘的間隔，最好讓用戶離開頁面（或做其他事情），然后在下一個動作發生時通知他們。超過一分鐘阻止某人做任何有用的事情會造成挫敗感。此外，漫長、復雜的過程也容易出錯，這可能會加劇挫敗感。

最終，使UI在時間和空間上密集只是一種手段。沒有UI因其外觀而有價值。界面之所以有價值，是因為它們能夠實現的結果——無論是直接與商業軟件的一些美元價值相關聯，還是與娛樂或教育等無形價值相關聯。

那么密度到底是關于什么的呢？它是關于在最少的時間、空間、像素和墨水中提供最高價值的結果。

價值密度

這里有一個價值密度如何體現的例子：對于任何基于表單的界面，一個常見的建議是將長表單分成較小的部分，然后將這些部分組合在一個向導類型的界面中，該界面在您進行過程中保存您的進度。這是因為部分填寫的表單沒有價值；將所有問題放在一個頁面上可能看起來視覺上更密集，但如果填寫時間更長，許多用戶根本不會提交它。

這個表單被分成了多個部分，有清晰的錯誤和解決指令。

這個表單被分成了多個部分，有清晰的錯誤和解決指令。

使用設計使用戶能夠以更少的錯誤完成表單可能需要占用更多空間。可能需要更多的步驟，并且需要更多的時間。但如果視覺和時間密度的權衡使得結果對用戶或業務更有價值——無論是通過增加提交率還是使努力更值得用戶的時間去完成——那么我們就增加了整體的價值密度。

同樣，如果我們可以通過使表單更緊湊、加載更快、更少錯誤，而不減少對用戶或業務的價值，來增加視覺和時間密度，那么這就是整體密度的增加。

借鑒塔夫特的觀點，我們應該盡可能地增加價值密度。

解決這個優化問題可能會有一些違反直覺的結果。當互聯網還很年輕的時候，像Craigslist這樣的公司通過聚合和策劃信息并以鏈接頁面的形式展示來創造價值密度。像雅虎和Altavista這樣的公司使得搜索那些信息成為可能，但仍然將聚合放在首位。谷歌采取了一種截然不同的方法：使用互聯網的長鏈鏈接列表中獲得的信息來驅動一個搜索框。信息正在自我聚合；用戶需要訪問整個網絡只需要一個文本輸入框。

2001年谷歌首頁的截圖

2001年雅虎首頁的截圖

2024年谷歌首頁的截圖

2024年雅虎首頁的截圖

從2001年（第一組截圖存檔）到2024年（第二組截圖拍攝），谷歌和雅虎對數據、設計和價值密度的方法沒有改變。這兩家公司股票的價值反映了這些不同方法的結果。

UI在視覺上不那么密集，但價值密度卻高出幾個數量級。結果不言自明：谷歌的估值從2004年的230億美元增長到今天超過2萬億美元——接近100倍的增長。雅虎從2000年的1250億美元價值被出售為48億美元——不到其峰值價值的3%。6^[7]

結論

為UI密度設計超越了界面的視覺方面。它包括我們做出的所有隱含和明確的設計決策，以及我們選擇在屏幕上顯示的所有信息。它包括所有時間和用戶為從軟件中獲得有價值的東西而采取的所有行動。

那么，UI密度的具體定義是：UI密度是用戶從界面獲得的價值除以界面所占據的時間和空間。

速度、可用性、一致性、可預測性、信息豐富性和功能性都在這個等式中扮演了重要角色。通過考慮所有這些方面，我們可以了解為什么一些界面成功而其他界面失敗。通過為密度而設計，我們可以幫助人們從我們構建的軟件中獲得更多的價值。

腳注 & 參考文獻

1. 這是一個非常不科學的說法，基于對我20名同事的調查。可重復性值得懷疑。

2. 圖表的出處很有趣。關于原始設計師查爾斯·伊布里（Charles Ibry）的了解不多；但我們所知道的指向了設計的更早版本。如果您感興趣，請閱讀桑德拉·倫登關于火車時刻表的迷人歷史^[8]。

3. 我對這個說法沒有科學依據，但我相信這是因為典型的眨眼發生在100ms內。當我們眨眼時，我們的大腦用我們看到的最后一件事填補空白，所以我們沒有注意到眨眼。這就是為什么我們沒有注意到兩個動作之間不到100ms的間隔。您可以在這篇文章中閱讀更多關于這種效應的信息：視覺感知：Saccadic Omission — Suppression or Temporal Masking?^[9]

4. Nielsen, Jakob. “How Long Do Users Stay on Web Pages?” Nielsen Norman Group, 11 Sept. 2011, https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/^[10]

5. Harrison, Chris, Zhiquan Yeo, and Scott E. Hudson. “Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations.” Carnegie Mellon University, 2010, https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf^[11]

6. HackerNews指出這是一個荒謬的說法。它確實是。當然，價值密度不是谷歌在雅虎失敗的地方成功的唯一原因。但作為每家公司如何思考他們的產品的反映，它是一個好的領先指標。

引用鏈接

[1] Objective Trade：https://www.youtube.com/watch?v=2ee-x6IXWK8

[2] 桑德拉·倫登關于火車時刻表的迷人歷史：https://sandrarendgen.wordpress.com/2019/03/15/data-trails-from-paris-with-love/

[3] 視覺感知：Saccadic Omission — Suppression or Temporal Masking?：https://www.sciencedirect.com/science/article/pii/S0960982209011105

[4] https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/：https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

[5] https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf：https://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf