用戶界面密度意味著什么以及如何為其設(shè)計(jì)

界面變得越來越不密集。

我通常對懷舊情緒和“我們喜歡那樣”的偏見持懷疑態(tài)度，但將2024年的網(wǎng)站和應(yīng)用程序與2000年代的同類產(chǎn)品進(jìn)行比較，軟件的擴(kuò)散是難以忽視的。

為了解釋這一趨勢，并提出我們?nèi)绾慰赡芑謴?fù)密度，我首先從詢問UI密度究竟是什么開始。它不僅僅是界面在某一時(shí)刻的外觀；它是關(guān)于一個(gè)界面在一系列時(shí)刻能夠提供的信息量。它是關(guān)于這些時(shí)刻是如何通過設(shè)計(jì)決策連接的，以及這些決策是如何與軟件提供的價(jià)值相關(guān)聯(lián)的。

我想分享我的發(fā)現(xiàn)。希望這次探索能幫助您以具體和可用的術(shù)語定義用戶界面密度。如果您是設(shè)計(jì)師，我希望您質(zhì)疑您正在創(chuàng)建的界面的密度；如果您不是設(shè)計(jì)師，使用用戶界面密度的視角來理解您使用的軟件。

視覺密度

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

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

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

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

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

Craigslist首頁的截圖McMaster-Carr產(chǎn)品頁面的截圖

大約2024年的Craigslist首頁和McMaster-Carr產(chǎn)品頁面的截圖。

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

兩個(gè)矩形。左邊的矩形填充了許多隨機(jī)排列的點(diǎn)。右邊的矩形填充了相同數(shù)量的點(diǎn)，但它們整齊地排列在行和列中。

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

那么這兩個(gè)圖像呢？

兩個(gè)矩形。左邊的矩形填充了許多整齊地排列在行和列中的點(diǎn)。右邊的矩形填充了相同數(shù)量的點(diǎn)，排列成兩個(gè)整齊有序的點(diǎn)組。

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

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

信息密度

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

圖形上的每一點(diǎn)墨水都需要有理由。而且?guī)缀蹩偸沁@個(gè)理由應(yīng)該是墨水呈現(xiàn)了新信息。

塔夫特引入了“數(shù)據(jù)墨水”的概念，定義為給定可視化中有用的部分。塔夫特認(rèn)為，不嚴(yán)格傳達(dá)數(shù)據(jù)的視覺元素，無論是刻度值、標(biāo)簽還是數(shù)據(jù)本身，都應(yīng)該被消除。

數(shù)據(jù)墨水不僅僅是圖表所占用的空間。一些圖表使用非常少的額外墨水，但仍然占據(jù)了很多物理空間。塔夫特談?wù)摰氖?span style="font-weight: 700;">信息密度，而不是視覺密度。

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

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

1. 添加數(shù)據(jù)墨水：提供額外（有用的）數(shù)據(jù)

2. 移除非數(shù)據(jù)墨水：擦除圖形中不傳達(dá)數(shù)據(jù)的部分

元素周期性的圖像。它使用了許多不必要的視覺元素，如不傳達(dá)信息的網(wǎng)格標(biāo)記。改進(jìn)后的元素周期性圖像。它移除了網(wǎng)格標(biāo)記，并在相同的空間中添加了額外的信息。

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

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

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

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

數(shù)據(jù)墨水比率接近1，允許大量的信息——超過260個(gè)到達(dá)和出發(fā)時(shí)間——被打包到一個(gè)相對較小的空間中。

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

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

塔夫特明確提出了這個(gè)觀點(diǎn)：

在合理的范圍內(nèi)（同時(shí)利用可用數(shù)據(jù)展示技術(shù)的最大分辨率），最大化數(shù)據(jù)密度和[數(shù)據(jù)量]。

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

圖形可以大幅度縮小

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

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

但等式的后半部分——墨水——有點(diǎn)難以翻譯。很容易認(rèn)為像素和墨水是等價(jià)的。但任何超過幾個(gè)元素的界面都需要分隔符、結(jié)構(gòu)元素和標(biāo)志，以幫助用戶理解每個(gè)部分與其他部分的關(guān)系。

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

所以，雖然信息密度是一個(gè)有用的墊腳石，但很明顯它只是更大畫面的一部分。我們?nèi)绾螌⒔缑嬷械乃性O(shè)計(jì)決策納入一個(gè)更客觀、量化的密度理解？

設(shè)計(jì)密度

您可能已經(jīng)在用設(shè)計(jì)決策來定義密度時(shí)看到了第一個(gè)挑戰(zhàn)：什么算是一個(gè)決策？

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

這些問題激發(fā)了20世紀(jì)德國心理學(xué)家探索人類如何理解和解釋形狀和模式。他們稱這個(gè)領(lǐng)域?yàn)椤案袷剿保诘抡Z中意為“形式”。在他們的探索過程中，格式塔心理學(xué)家描述了一些原則，這些原則描述了為什么某些事物看起來有序、對稱或簡單，而其他事物則不是。雖然這些心理學(xué)家不是設(shè)計(jì)師，但他們在某種意義上發(fā)現(xiàn)了設(shè)計(jì)的基本原理：

1. 接近性：我們認(rèn)為彼此靠近的事物組成了一個(gè)單一的組

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

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

4. 對稱性：如果我們看到彼此對稱的形狀，我們認(rèn)為它們是圍繞一個(gè)中心點(diǎn)形成的組

5. 共同命運(yùn)：當(dāng)對象移動時(shí)，我們心理上會將以相同方式移動的對象分組

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

7. 過去經(jīng)驗(yàn)：即使在不熟悉的上下文中，我們也能識別熟悉的形狀和模式。我們的期望基于我們過去對這些形狀和模式的學(xué)習(xí)經(jīng)驗(yàn)。

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

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

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

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

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

• 由于我們對開關(guān)的過去經(jīng)驗(yàn)，結(jié)合圖形-背景原則，一個(gè)模擬開關(guān)的擬態(tài)設(shè)計(jì)將讓用戶立即明白如何打開一個(gè)功能。

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

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

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

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

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

時(shí)間中的密度

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

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

彭博社的終端瞬間加載了充滿數(shù)據(jù)的屏幕

彭博社的終端瞬間加載了充滿數(shù)據(jù)的屏幕

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

但假設(shè)您已經(jīng)從應(yīng)用程序的加載時(shí)間中擠出了每一秒鐘。接下來呢？有些東西就是無法加速：您無法改變用戶的互聯(lián)網(wǎng)連接速度，或者他們CPU的計(jì)算速度。一些操作，如上傳文件、等待客戶支持響應(yīng)或處理支付，涉及具有不可預(yù)測變量的復(fù)雜系統(tǒng)。在這些情況下，與其改變?nèi)蝿?wù)之間的時(shí)間，不如改變時(shí)間的感知：

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

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

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

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

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

最終，使UI在時(shí)間和空間上密集只是一種手段。沒有UI因其外觀而有價(jià)值。界面之所以有價(jià)值，是因?yàn)樗鼈兡軌驅(qū)崿F(xiàn)的結(jié)果——無論是直接與商業(yè)軟件的一些美元價(jià)值相關(guān)聯(lián)，還是與娛樂或教育等無形價(jià)值相關(guān)聯(lián)。

那么密度到底是關(guān)于什么的呢？它是關(guān)于在最少的時(shí)間、空間、像素和墨水中提供最高價(jià)值的結(jié)果。

價(jià)值密度

這里有一個(gè)價(jià)值密度如何體現(xiàn)的例子：對于任何基于表單的界面，一個(gè)常見的建議是將長表單分成較小的部分，然后將這些部分組合在一個(gè)向?qū)ь愋偷慕缑嬷校摻缑嬖谀M(jìn)行過程中保存您的進(jìn)度。這是因?yàn)椴糠痔顚懙谋韱螞]有價(jià)值；將所有問題放在一個(gè)頁面上可能看起來視覺上更密集，但如果填寫時(shí)間更長，許多用戶根本不會提交它。

這個(gè)表單被分成了多個(gè)部分，有清晰的錯(cuò)誤和解決指令。

這個(gè)表單被分成了多個(gè)部分，有清晰的錯(cuò)誤和解決指令。

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

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

借鑒塔夫特的觀點(diǎn)，我們應(yīng)該盡可能地增加價(jià)值密度。

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

2001年谷歌首頁的截圖

2001年雅虎首頁的截圖

2024年谷歌首頁的截圖

2024年雅虎首頁的截圖

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

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

結(jié)論

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

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

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

腳注 & 參考文獻(xiàn)

1. 這是一個(gè)非常不科學(xué)的說法，基于對我20名同事的調(diào)查。可重復(fù)性值得懷疑。

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

3. 我對這個(gè)說法沒有科學(xué)依據(jù)，但我相信這是因?yàn)榈湫偷恼Ｑ郯l(fā)生在100ms內(nèi)。當(dāng)我們眨眼時(shí)，我們的大腦用我們看到的最后一件事填補(bǔ)空白，所以我們沒有注意到眨眼。這就是為什么我們沒有注意到兩個(gè)動作之間不到100ms的間隔。您可以在這篇文章中閱讀更多關(guān)于這種效應(yīng)的信息：視覺感知：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指出這是一個(gè)荒謬的說法。它確實(shí)是。當(dāng)然，價(jià)值密度不是谷歌在雅虎失敗的地方成功的唯一原因。但作為每家公司如何思考他們的產(chǎn)品的反映，它是一個(gè)好的領(lǐng)先指標(biāo)。

引用鏈接

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

[2] 桑德拉·倫登關(guān)于火車時(shí)刻表的迷人歷史：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