閱讀筆記:UI Density -- What UI density means and how to design for it

定義

UI density is about the amount of information an interface can provide over a series of moments. It’s about how those moments are connected through design design decisions, and how those decisions are connected to the value the software provides.

UI 的密度是由其提供的資訊量、採納的設計原理數量,以及該產品能為使用者提供的價值而定。

視覺密度

不只是根據畫面上的物件數量決定,物件的排列方式也會影響視覺密度。比如以下兩張圖都包含 500 個圓點,但兩張圖在視覺上帶來的緊密感並不相同。

500-dots

資訊密度

出自 The Visual Display of Quantitative Information 一書。資訊密度是根據「一定量的墨水能傳遞多少資訊」而定,如果能用越少的墨水傳遞越多資訊,則資訊密度就越高。

設計密度

概念出自「強調整體而非單一部位」的完形心理學(gestalt psychology)。從這個心理學流派衍伸出來的設計理論如下:

而本文作者認為設計的密度可定義為:「實際發揮作用的完形理論」除以「使用到的完形理論」。有實際作用的理論越多,設計密度就越高。

…a gestalt ratio which compares the strictly necessary design decisions to the total decisions used in a design. This is design density.

時間密度

資訊出現的速度越快,其時間密度越高。但在現實生活中,不可能做到將資訊毫無延遲地送到使用者手上。而 UI 能提供的協助,就是透過動畫或流程來管理使用者的期待。

價值密度

設計想要達成的目標(價值)是什麼?價值密度越高,代表設計越能幫助使用者達成目標。

文中以「填寫表單」為例。通常只有被完整填寫的表單才具有價值,那麼 UI 應該盡可能讓使用者能做完「填寫表單」一事——即使這代表我們可能需要降低設計中的時間、資訊密度等等(比如把表單拆為多個步驟完成,而不是在一個畫面中列出全部需要填寫的欄位)。

參考文章