All About Information - Part 1

在原來的團隊做的一個 Keynote,重新整理、擴充後配上文字發佈在這裏。

Speaker Deck

這次我要講的話題是「All About Information」。

既然是「All About Information」,那麼內容的核心自然是信息(information)。

Information?

當「信息」這個詞從一個設計師的口中說出來時,大家會想到什麼呢?Information Architecture?Data Visualisation?還是什麼別的呢?大家的腦海裏可能會迸發出很多詞彙,但今天我想講的並不是大家想到的具體某個專業領域的內容,而是背後的更深層的東西。

那就是「認知(cognition)」。

認知是什麼?簡單地講,認知是獲取知識(knowledge)的過程。而知識又是怎樣被獲取的呢?通過以各種形式表現出來的信息。信息和知識的區別就在於,信息永恆不變、不受觀察者因素影響,而人們獲取到的知識則由認知過程決定。例如,當一個狡猾的政客或推銷員想欺騙別人的時候,除了直接傳遞虛假的信息,還可以更高明地通過特殊的表達方式,使對方在理解的過程中產生認知偏誤,從而「不謊而騙」(lie by not telling a lie),這就是信息和知識不對等的情況。當然,作為設計師,我們的職責是通過對信息的加工、設計,使認知的過程更加準確、快速。

如果認知上出了什麼偏差,你們是要負責的!

認知受很多因素的影響:有天生的自然因素,例如人對由不同方式表現出來的信息獲取的準確度和效率不同,可以並行處理多種表現形式而成本不會線性增長;也有環境因素,例如同樣的紅色和綠色在交通和股市上會被理解出相反的意義而觸發不同的情緒;還有文化因素,比如說母語為阿拉伯語的人在面對為母語為英語的人設計的排版時會遇到很大的困難。(一些研究者會將「時間」單獨劃分為一類因素,但我更傾向於將其歸類到「環境」中。)

人感知信息的窗口有很多個,眼睛看到的、耳朵聽到的、鼻子嗅到的、舌頭嚐到的和皮膚觸碰到的。

今天我們暫且只說眼睛看到的。


Part 1 - The Basics

先從一些基礎的、比較易於實踐的開始吧。

首先我們要明白的是:設計不等於繪畫。

屏幕並不是一張畫紙,那麼我們在上面呈現的是什麼呢?是信息流。

iTunes

拿一張 iTunes 的截屏來舉例,其中蘊藏的信息並不是如魔法般被翻印到我們的大腦中的,而是被我們像這樣流式地獲取的。設計的基礎核心就是對信息流的加工和整理。

想把基礎做好,並不難,這裏我總結了幾條幾本原則:

  • Minimisation
  • Continuity
  • Comparison
  • Consistency

1.1 Minimisation

首先是「最小化(minimisation)」。有些學藝不精的設計師看到這個詞就會想:「不就是『極簡風格』嗎?只要把字號調得超大,中間再加上大量的 negative space 就好了。」如果真是這樣,那豈不是誰都能做設計師了。

「最小化」並不等於「成噸的 negative space」,而是指將認知成本最小化,使用者看到的無用元素越少,獲取到的有效信息就越多。

以下這些內容都是我們做設計時需要精簡的對象:

  • 無關信息
  • 重複信息
  • 無用的視覺元素

舉幾個例子。

無關信息

Tweetbot for iPhone

首先是一張 Tapbots 的 Tweetbot for iPhone 的截屏,我們可以看到每一條 Tweet 都被帶上了發送這條 Tweet 的客戶端信息,然而我們真的需要知道每一條 Tweet 是經由什麼客戶端發送的嗎?

重複信息

Weico

第二張截屏來自 eico design 的 Weico,這無數個「Settings」是什麼情況呢?難道標題還不足以說明此頁下的內容都是使用者設定嗎?

Tweetbot for macOS

第三張圖是來自 Tapbots 的 Tweetbot for macOS 的截屏,在一對一的對話中,訊息氣泡的位置和顏色已經按發送者明確地區分開了,卻還是浪費了大量屏幕空間將自己的頭像顯示出來,就好像生怕使用者不知道自己是誰一樣。

無用的視覺元素

Dribbble

高光、陰影、漸變⋯⋯可能有些設計師覺得用起來真是炫酷無比,有些甲方也會覺得多了這麼多元素就好像同樣的錢多買到了東西一樣,其實每一種都在吞噬著使用者的腦細胞。這些元素只應該在能輔助使用者認知的情況下使用,其它場合請統統去掉。圖中這位設計師做的飛機稿就是極好的反面教材,如果按照這樣的方式做設計,要付出極大的研發成本不說,還會使產品特別難用,最後只能產出 Smartisan OS 這種在進化路上開倒車的奇葩產品。

1.2 Continuity

接下來再講講「連續性(continuity)」。

說到連續性,大家覺得我指的是什麼的連續性呢?剛剛有提到,人獲取信息的過程是流式的。我們都知道,自己專心工作的時候如果被打斷,會感到非常焦躁,因為等到回去繼續工作的時候,就會需要耗費很多的精力去重建 context 才能繼續原來的工作。最簡單的認知過程也是一樣的,所以這裏我們說的其實是「認知的連續性」。如果你做了一套設計,看起來似乎沒什麼問題,該有的都有了,用起來卻覺得不是那麼順暢,那就要考慮下是不是沒有做好這一點。

要保證認知的連續性,就要做好這幾點:

  • 保持正確的順序
  • 聚集相關的信息
  • 注意間隔
  • 錨點和掃描線

保持正確的順序

第一點是很容易做好但是卻被很多人做錯的。什麼才是「正確」的順序呢?「正確」即順應人類認知方式,即由全局到個體、由因到果等順序。

最常見的例子就是郵件。我們回覆郵件時,有兩種不同風格的排版方式可以選擇:正文先於引用(top-posting),和引用先於正文(bottom-posting)。比較傳統的方式是正文先於引用。許多不專業的設計師不明白這樣做的原因,就在設計其它內容時採取了同樣的策略,做出了很糟糕的結果。

這樣做的問題在哪兒呢?我們來看看這樣一段按正文先於引用的方式排列的對話。

Top-posting

為什麼看起來這麼費力呢?因為我們習慣的閱讀順序是從上至下,當它被翻轉過來的時候,我們就要不斷地從下方尋找 context,再返回到上方確認結果,這個過程會耗費大量的精力。

而我們將其翻轉過來變成引用先於正文的排列,看起來就順暢多了。

Bottom-posting

那又是為什麼一開始會形成正文先於引用的傳統呢?那是因為早期的郵件客戶端不像現在這麼成熟,並不是都能夠自動將單獨的郵件組織成對話,如果按照引用先於正文的方式排列,每次打開郵件就要翻很多頁到底部才能看到最新回覆的內容了。

聚集相關的信息

第二點是聚集相關的信息。看起來挺簡單是吧?其實它不僅僅是把相關的內容分組放在一起那麼簡單,當信息結構非常複雜時,組織邏輯就成了一個很大的挑戰。許多設計師正是因為缺乏駕馭複雜信息結構的能力,當產品變得越來越複雜時,他們設計的 app 中就會不約而同地出現一個叫做「探索(Explore)」或「更多(More)」的 tab,所有他們不知道放在哪兒的內容就被以列表形式堆積在裏面,非常可怕。甚至連 Apple 這樣的大公司,也經常在細節之處因為這種事情翻船,就像這張來自 Apple Music 的截屏一樣,足足十一個選項平行鋪開,被嚇到了沒有?

Apple Music

注意間隔

第三點是注意間隔。軌道交通愛好者看到這兒可能會偷笑了,在設計上,間隔也是個非常值得注意的地方。做過平面設計的同僚們應該知道,在對文章進行排版時,每行的字數是有限制的,如果每行有超過一百個字母,閱讀將會是一場災難。做 UI 設計也是同樣。我們可以看一下有著頂尖設計水準的 Telegram 團隊在他們的客戶端上是怎樣小心地處理這一點的。

在這個視頻中可以看到,本來分列於兩側排布的對話,當窗口寬度大於一個數值時,就會變為左側對齊排布,改用頭像代替位置來區分訊息的發送者。這樣就可以使使用者免於視線在如此大的間隔間跳來跳去的苦惱。

當然,間隔也有著區分不同信息塊的作用,要怎樣控制它在合適的範圍,需要足夠的經驗。我的做法是按照區分度分級處理,並為自由格式設定一個合適的閾值來保證極限情況下不會出問題。

錨點和掃描線

第四點是錨點和掃描線。當視線在不同的元素或同元素的不同部分間跳躍時,可以將跳躍的終點稱為錨點,而由錨點連成的線則可以被稱為掃描線。

Scan Lines

我們可以看這組 PayPal 頁面的對比圖。將內容對齊在一條線上後,使用者的視線在元素間跳轉時就可以很容易地通過這條隱形的線對準目標,在快速掃瞄時也能更快、更全地獲取到內容。

永遠不要將元素居中對齊。

— 魯迅(其實並沒有)

1.3 Comparison & Consistency

在這一部分的最後我來說說「對比(comparison)」和「統一性(consistency)」。因為這兩點並不怎麼複雜,所以就放在一起說了。

對比即區分樣式,目的很簡單,就是讓使用者在閱讀內容之前就能通過樣式知道自己看到的是什麼。樣式需要體現的主要是這三種信息:

  • 信息的類型:例如標題、副標題、正文使用不同的樣式
  • 交互的類型:例如可點按的元素使用特定的主題色,不可用的元素變暗變灰
  • 相關度(或重要度):和當前主要內容相關度高的元素加重,相關度低的元素減輕

而保持統一性的原因很簡單:這樣使用者就能在不同的場景下按習慣的方式獲取信息了。


Part 2 - Use the Force

基礎的說完了,我們再說說怎樣利用人的認知規律做出更好的設計。

2.1 ______ is worth a thousand words.

有句話叫做「一圖勝千言(A picture is worth a thousand words)」。為什麼這麼講呢?我們能從一張圖上能多看到哪些東西呢?

我們重新從人類基本的感知能力入手。例如我現在舉起一顆蘋果,來觀察它,它是近球型的,上下有凹陷,通體深紅色帶有一些斑點,直徑大約三到四英吋,在我的手中,距離我的眼睛約一英尺遠。上面這段話就涵蓋了我們用眼睛能觀察到的一切:形狀、色彩、尺寸、位置,完全等同於我們在一個平面上做設計時能操控的內容。

如果給你一個真實的蘋果,你可以立刻掌握它的各種特徵,但如果讓你閱讀一段描述這個蘋果的文字,你就需要花費一些時間和精力才能在腦海中想像出它的樣子,還不一定會準確。為什麼呢?

第一,因為人腦對於不同類型信息的處理方式是不同的。閱讀文字時,首先需要根據形狀識別文字的內容,接下來才能去理解它。第二,人腦對不同種類信息——如形狀、顏色等——的處理是並行的,並不會額外耗費許多成本,卻能獲取到更多信息。就像這張圖展示的那樣,雖然只根據形狀也能判斷出符號的意思,但是加上了顏色之後這個判斷的過程會更容易。

Continue to Read Part 2 »


Part 3 - Accessibility & Localisation

第三部分要說的是關於可用性(accessibility)和本地化(localisation)的內容。

在中國大陸,很少會有互聯網公司會重視這兩點。畢竟中國十四億人口,隨便拿出一小部分就可以把一家公司養得很好。但我還是要說。暫且不提從事設計行業所代表的責任和義務,只列舉幾個事實:

  • 色盲(包括色弱)影響了世界上約 8% 的男性和 0.5% 的女性
  • 世界上有約 6% 的人日常使用的是阿拉伯語
  • 即便僅在中國,有約 4 億人無法使用普通話交流

如果拒絕把這兩點做好,就等於把世界上絕大多數的人類拒之門外。這就是我要提一下這兩點的原因。

Continue to Read Part 3 »