編輯導讀：用戶在使用一個產品時，視覺觀感是非常重要的，對于某些“顏控”用戶來說甚至起決定作用。每個產品的服務人群不同，界面設計也是千差萬別。但是無論怎么變，始終是堅持一套設計理論。本文作者對此提出了自己的一些看法，與你分享。

一、前言

用戶界面的本質是資源的互換。

用戶為產品提供時間和注意力，產品為用戶提供單位時間內最大價值的內容。

當視覺設計師介入其中后，他們的關系可以用這樣一幅圖表示。

表現層作為用戶體驗五要素的最具象層面，解決的是產品視覺效果的呈現問題。視覺設計師需要借以合理的版式和視覺手段來保障用戶在單位時間內獲取最多的內容資源，即實現信息的高效獲取。

信息的高效獲取來自合理的視覺引導（信息閱讀的優先級安排）。我們一直在說的層次清晰、低信噪比、沉浸感等視覺體驗在本質上其實都屬于合理的視覺引導。

借以實現的手段包括我們熟知的卡片、留白、配色、字體層級、圖標等等。這些手段龐雜繁多，體系化的建設必不可少，但是漫長的積累沉淀中很容易被其淹沒，而且每種手段背后又是什么樣的底層邏輯和依據？

為什么卡片讓頁面層次清晰？為什么面性圖標擁有較高的辨識度？為什么步驟條會有橫縱之分？

而點、線、面解決的就是這些內在邏輯問題，在你熟知它們的特性后，絕大多數的設計手段都可以被其解釋和串聯起來，并且讓你的設計決策和設計推導更加有據可依，而不是簡單的“憑感覺”。

如果我們將各種設計手段比喻為各類武學外功招式，那么點線面理論就好像吐納內功，雖為最基礎的入門心法，但其對內息的作用影響著所有招式的發揮。

1. 點、線、面與康定斯基

點、線、面理論最早由瓦西里·康定斯基提出，他所著的《點、線、面》一書最早曾作為包豪斯學院的形式課程進行教學。他將所有藝術的形式都歸結于點、線和面三種元素的關系。

康定斯基對于點、線、面的獨到思想為設計領域產生了極為深遠的影響。我們目前最熟知運用到它的的一個領域就是平面設計領域。通過這個理論，平面中所有的元素都可以看作點、線、面三類形態，并且每類形態的存在、變化和結合，都可以為畫面傳達出不同的樣式和風格。

雖然用戶界面設計和平面設計分屬于兩個完全不同的設計行業，但點、線、面理論是相通的。

2. 點、線、面淺談

點、線、面具有普適性、相對性。前文已經講過，點、線、面這三種形態存在于所有的元素中。不論是哪種元素都可以用點、線、面來表示。并且，點、線、面之間是相對的，并非對元素的純粹定義。

比如一個界面中的面性圖標，我們可以將其看作一個點，當相對于線性圖標時，我們又可以將其看作面。如果這個圖標和其他圖標一起組成標簽欄，那這串圖標也可看作線。

之后，我將分為點、線和面三大板塊，來講述每類形態基于自身維度所擁有的特性，并如何通過存在、變化來在界面中發揮著各自的作用，實現合理高效的視覺引導。

今天，我們先來講述點。

萬物自一點始。

正如宇宙大爆炸源自一個引力奇點那樣，點是萬物之源，也是所有元素的基礎。點從維度上來說屬于零維，它沒有辦法像線、面那樣延伸，這決定了點本身的向心性和自由性。

康定斯基將點描述為“雄辯與沉默”，這句話的意思就是，當點獨立存在于一個畫面中時，它便開始“雄辯”自己的存在，讓自己成為焦點；而當它的數量增加時，點便傾向于“沉默”，并且根據它的排列方式傾向于對應形態的特性。

二、向心性

當一個點獨立存在時，點的向心性協助它成為視覺焦點。此時點主要起到定位的作用。

以支付寶首頁為例。在以往的界面設計中，我們往往在每個模塊標題旁添加一個小小的短線，而這個小短線便是作為定位點引導用戶迅速注意到標題，實現不同內容的快速定位。并且作品包裝中也常會用到它。

不過在Complexion Reduction去形式化的浪潮洗禮下，這種方式已成為過去式，現在我們會直接用標題本身作為點進行定位。

但是，在其他更多的場景下，僅靠文字其實并不能很好得發揮點的向心性，尤其是一些信息較多、需要迅速辨識的場景下。這時候，我們通常會引入另一種要素——圖標來指代它。

圖標本身可以用來表意，而獨立、精致的特性讓它很適合作為點元素來處理。

比如APP中的標簽欄中的圖標就可看作點元素，每個圖標以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁的每個字段前也會加入對應含義的圖標來幫助用戶迅速錨定當前欄目，并且由于圖標擁有更高的辨識性，這讓閱讀變得輕快而富有節奏。

下圖所示為Google日歷中的活動頁表單，當我們將字段前的圖標去除時，閱讀沒有了強定位元素將會缺失節奏，信息獲取變得困難和緩慢，影響用戶表單的填寫。

三、聚集性

點是自由、精致的，它不會像線那樣有向兩端延伸的特性，這意味著它可以進行各種形式、規則的排列組合以契合版面。

1. 點化線

在這種分布形式下，點通常以圖標的形式進行橫向及縱向的排列，并且傾向于線的引導性進行視線引導。

點的橫向排列通常見于標簽導航欄、單行的金剛區入口等。點的縱向排列通常見于列表布局中。由于點本身對用戶注意力的聚焦，點沿著什么方向進行排列時，用戶視線便傾向于朝對應的方向移動。

上面所舉的Google日歷就是這樣，單個圖標方便定位，而多個線性排布的圖標則具備了線的引導性，便于用戶的由上至下得快速瀏覽。ios自帶的音樂app和QQ音樂的歌單也同樣利用了點化線引導瀏覽，只是圖片和阿拉伯數字的區別而已。

2. 點化面

在這種分布形式下，點常常橫向排列在界面中（一排內通常不超過5個），作為一個個快捷入口存在，形成網格式布局。

比如金剛區業務入口、書籍等類型的布局都屬于網格式。這個布局下的點集合傾向于面元素，界面在這個布局下呈現出富有觀賞性的視覺張力，吸引用戶眼球，而且網格式的布局引導用戶視線均勻遷移，便于視覺區分。

3. 網格與列表

既然講到這了，不得不提下上面兩種形態各自所在的版式——網格布局和列表布局。

4. 列表

通常來說，靜態頁面中的內容大致可分為圖、文兩大類。

從形態上看，文本本身具有線那樣不斷延伸的特點，因此列表的橫向版面更適合長文本的展示。而圖片、圖標通常以固定尺寸的img獨立存在，可看作點元素，像上一節所講的，它既可存在于列表又可存在于網格。

從視覺動線上看，列表布局的動線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點于左側的定位點，再由左向右進行閱讀，接著再垂直掃視，當定位到興趣點后繼續由左至右得閱讀。這種動線符合人類自然的閱讀模式。

并且在由上至下的視線遷移中，用戶的注意力勢必隨著路徑的拉長而逐步遞減。

而這種遞減效應讓列表式布局更適合基于產品及用戶習慣以某種規律排序。

郵件訊息以時間進行排序，這是基于用戶查看最新消息的習慣；電商商品則默認以相關性、銷量等因素綜合排序（同時買家可以根據價格、銷量等進行自定義排序），這是基于用戶的購物喜好習慣；直播平臺以熱度進行排序，這是基于羊群效應制造引流點，同時也刺激用戶發布優質內容。并且在特定的排序規律下可以引導用戶帶有目的的、更迅速得掃視。

但是如果界面變為網格布局，掃視效率將大打折扣，較高的圖版率也導致文字信息被過度弱化。如下圖，健身環大冒險并不屬于外觀型產品，用戶更關心的是價格、好評等文字信息，當其變為網格視圖時，一方面用戶無法根據排序結果迅速垂直掃視，另一方面文字信息被重量級的圖片壓制，用戶無法迅速獲取它們。

5. 網格

網格布局通過犧牲寬度來將界面等分為一個個格子，從形態上直接限制了長文本的存在，這讓它更適合放置一個個獨立的點，比如圖片、圖標。而文本則落于底部淪為一介輔助。

從視覺動線上看，網格布局傾向于Z型瀏覽模式。用戶視覺動線通常由左至右、再由上至下得進行，并可以“雨露均沾”得在數個點上均勻遷移，注意力遞減效應不會像列表布局那么強烈。因此，網格布局非常適合進行不同信息的辨識和區分。

界面中常見的功能業務入口、專輯或者電影的布局、單獨店鋪中的商品，它們不需要明顯的排序處理，并且用戶初始行為都是通過圖片、圖標進行迅速得辨別區分，繼而進行交互決策。

如果將其列表化處理，不同信息的辨識區分效率將受到影響。如下圖，服裝屬于典型的外觀型商品，當變為列表視圖時，商品之間將難以辨識區分。

由此，我們大致可以梳理出兩種布局適用情況：

列表：適用于文本為主要展示，或者按照某種規律排序的信息。

網格：適用于圖片為主要展示，或者沒有排序規則，需要用戶通過圖片、圖標辨識區分的信息。

當然了，這兩種布局并非只能選其一，淘寶、京東這類體量龐大的電商平臺便為了方便用戶習慣，提供了兩種布局視圖便于用戶隨時切換以降低決策成本。

另外，它常被作為一類豐富畫面層次的手段。當點不再按照橫縱方向排列分布時，便可作為圖案被用在特定場景的背景中，以降低背景過平過空的感覺。

比如美食杰封面的加載占位圖就以與產品相關的各種食材圖標隨機得組合為圖案，飽滿的畫面減少了用戶等待時的枯燥無味。

而QQ的群發布功能，在首個卡片背景中便加入了各種學習類的圖標隨機分布在卡片上，烘托出熱鬧趣味的氛圍，和下面的三個次要功能從卡片背景上迅速拉開層級。

四、最后

點的部分就講到這里，點的向心性和聚焦性并不僅僅作為理論牢記就可以，更重要的需要放在實際項目中進行具體分析，以此幫助設計師更好得進行設計決策。

作者：Andrew臣；微信公眾號：轉行人的設計筆記

本文由 @Andrewchen 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Pexles，基于CC0協議。