2023年一套設(shè)計(jì)理論為你解決90%的困惑（上）

一套設(shè)計(jì)理論為你解決90%的困惑（上）一、前言

用戶界面的本質(zhì)是資源的互換。

用戶為產(chǎn)品供應(yīng)時(shí)間和留意力，產(chǎn)品為用戶供應(yīng)單位時(shí)間內(nèi)最大價(jià)值的內(nèi)容。

當(dāng)視覺(jué)設(shè)計(jì)師介入其中后，他們的關(guān)系可以用這樣一幅圖表示。

表現(xiàn)層作為用戶體驗(yàn)五要素的最具象層面，解決的是產(chǎn)品視覺(jué)效果的呈現(xiàn)問(wèn)題。視覺(jué)設(shè)計(jì)師需要借以合理的版式和視覺(jué)手段來(lái)保障用戶在單位時(shí)間內(nèi)獵取最多的內(nèi)容資源，即實(shí)現(xiàn)信息的高效獵取。

信息的高效獵取來(lái)自合理的視覺(jué)引導(dǎo)（信息閱讀的優(yōu)先級(jí)支配）。我們始終在說(shuō)的層次清楚、低信噪比、沉醉感等視覺(jué)體驗(yàn)在本質(zhì)上其實(shí)都屬于合理的視覺(jué)引導(dǎo)。

借以實(shí)現(xiàn)的手段包括我們熟知的卡片、留白、配色、字體層級(jí)、圖標(biāo)等等。這些手段龐雜繁多，體系化的建設(shè)必不行少，但是漫長(zhǎng)的積累沉淀中很簡(jiǎn)單被其沉沒(méi)，而且每種手段背后又是什么樣的底層規(guī)律和依據(jù)？

為什么卡片讓頁(yè)面層次清楚？為什么面性圖標(biāo)擁有較高的辨識(shí)度？為什么步驟條會(huì)有橫縱之分？

而點(diǎn)、線、面解決的就是這些內(nèi)在規(guī)律問(wèn)題，在你熟知它們的特性后，絕大多數(shù)的設(shè)計(jì)手段都可以被其解釋和串聯(lián)起來(lái)，并且讓你的設(shè)計(jì)決策和設(shè)計(jì)推導(dǎo)更加有據(jù)可依，而不是簡(jiǎn)潔的“憑感覺(jué)”。

假如我們將各種設(shè)計(jì)手段比方為各類武學(xué)外功招式，那么點(diǎn)線面理論就似乎吐納內(nèi)功，雖為最基礎(chǔ)的入門心法，但其對(duì)內(nèi)息的作用影響著全部招式的發(fā)揮。

1.點(diǎn)、線、面與康定斯基

點(diǎn)、線、面理論最早由瓦西里·康定斯基提出，他所著的《點(diǎn)、線、面》一書最早曾作為包豪斯學(xué)院的形式課程進(jìn)行教學(xué)。他將全部藝術(shù)的形式都?xì)w結(jié)于點(diǎn)、線和面三種元素的關(guān)系。

康定斯基對(duì)于點(diǎn)、線、面的獨(dú)到思想為設(shè)計(jì)領(lǐng)域產(chǎn)生了極為深遠(yuǎn)的影響。我們目前最熟知運(yùn)用到它的的一個(gè)領(lǐng)域就是平面設(shè)計(jì)領(lǐng)域。通過(guò)這個(gè)理論，平面中全部的元素都可以看作點(diǎn)、線、面三類形態(tài)，并且每類形態(tài)的存在、變化和結(jié)合，都可以為畫面?zhèn)鬟_(dá)出不同的樣式和風(fēng)格。

雖然用戶界面設(shè)計(jì)和平面設(shè)計(jì)分屬于兩個(gè)完全不同的設(shè)計(jì)行業(yè)，但點(diǎn)、線、面理論是相通的。

2.點(diǎn)、線、面淺談

點(diǎn)、線、面具有普適性、相對(duì)性。前文已經(jīng)講過(guò)，點(diǎn)、線、面這三種形態(tài)存在于全部的元素中。不論是哪種元素都可以用點(diǎn)、線、面來(lái)表示。并且，點(diǎn)、線、面之間是相對(duì)的，并非對(duì)元素的純粹定義。

比如一個(gè)界面中的面性圖標(biāo)，我們可以將其看作一個(gè)點(diǎn)，當(dāng)相對(duì)于線性圖標(biāo)時(shí)，我們又可以將其看作面。假如這個(gè)圖標(biāo)和其他圖標(biāo)一起組成標(biāo)簽欄，那這串圖標(biāo)也可看作線。

之后，我將分為點(diǎn)、線和面三大板塊，來(lái)敘述每類形態(tài)基于自身維度所擁有的特性，并如何通過(guò)存在、變化來(lái)在界面中發(fā)揮著各自的作用，實(shí)現(xiàn)合理高效的視覺(jué)引導(dǎo)。

今日，我們先來(lái)敘述點(diǎn)。

萬(wàn)物自一點(diǎn)始。

正如宇宙大爆炸源自一個(gè)引力奇點(diǎn)那樣，點(diǎn)是萬(wàn)物之源，也是全部元素的基礎(chǔ)。點(diǎn)從維度上來(lái)說(shuō)屬于零維，它沒(méi)有方法像線、面那樣延長(zhǎng)，這打算了點(diǎn)本身的向心性和自由性。

康定斯基將點(diǎn)描述為“雄辯與緘默”，這句話的意思就是，當(dāng)點(diǎn)獨(dú)立存在于一個(gè)畫面中時(shí)，它便開(kāi)頭“雄辯”自己的存在，讓自己成為焦點(diǎn)；而當(dāng)它的數(shù)量增加時(shí)，點(diǎn)便傾向于“緘默”，并且依據(jù)它的排列方式傾向于對(duì)應(yīng)形態(tài)的特性。

二、向心性

當(dāng)一個(gè)點(diǎn)獨(dú)立存在時(shí)，點(diǎn)的向心性幫助它成為視覺(jué)焦點(diǎn)。此時(shí)點(diǎn)主要起到定位的作用。

以支付寶首頁(yè)為例。在以往的界面設(shè)計(jì)中，我們往往在每個(gè)模塊標(biāo)題旁添加一個(gè)小小的短線，而這個(gè)小短線便是作為定位點(diǎn)引導(dǎo)用戶快速留意到標(biāo)題，實(shí)現(xiàn)不同內(nèi)容的快速定位。并且作品包裝中也常會(huì)用到它。

不過(guò)在ComplexionReduction去形式化的浪潮洗禮下，這種方式已成為過(guò)去式，現(xiàn)在我們會(huì)直接用標(biāo)題本身作為點(diǎn)進(jìn)行定位。

但是，在其他更多的場(chǎng)景下，僅靠文字其實(shí)并不能很好得發(fā)揮點(diǎn)的向心性，尤其是一些信息較多、需要快速辨識(shí)的場(chǎng)景下。這時(shí)候，我們通常會(huì)引入另一種要素——圖標(biāo)來(lái)指代它。

圖標(biāo)本身可以用來(lái)表意，而獨(dú)立、精致的特性讓它很適合作為點(diǎn)元素來(lái)處理。

比如APP中的標(biāo)簽欄中的圖標(biāo)就可看作點(diǎn)元素，每個(gè)圖標(biāo)以其所具備的向心性關(guān)心我們快速得聚焦到它所在的位置。列表頁(yè)的每個(gè)字段前也會(huì)加入對(duì)應(yīng)含義的圖標(biāo)來(lái)關(guān)心用戶快速錨定當(dāng)前欄目，并且由于圖標(biāo)擁有更高的辨識(shí)性，這讓閱讀變得輕快而富有節(jié)奏。

下圖所示為Google日歷中的活動(dòng)頁(yè)表單，當(dāng)我們將字段前的圖標(biāo)去除時(shí)，閱讀沒(méi)有了強(qiáng)定位元素將會(huì)缺失節(jié)奏，信息獵取變得困難和緩慢，影響用戶表單的填寫。

三、聚集性

點(diǎn)是自由、精致的，它不會(huì)像線那樣有向兩端延長(zhǎng)的特性，這意味著它可以進(jìn)行各種形式、規(guī)章的排列組合以契合版面。

1.點(diǎn)化線

在這種分布形式下，點(diǎn)通常以圖標(biāo)的形式進(jìn)行橫向及縱向的排列，并且傾向于線的引導(dǎo)性進(jìn)行視線引導(dǎo)。

點(diǎn)的橫向排列通常見(jiàn)于標(biāo)簽導(dǎo)航欄、單行的金剛區(qū)入口等。點(diǎn)的縱向排列通常見(jiàn)于列表布局中。由于點(diǎn)本身對(duì)用戶留意力的聚焦，點(diǎn)沿著什么方向進(jìn)行排列時(shí)，用戶視線便傾向于朝對(duì)應(yīng)的方向移動(dòng)。

上面所舉的Google日歷就是這樣，單個(gè)圖標(biāo)便利定位，而多個(gè)線性排布的圖標(biāo)則具備了線的引導(dǎo)性，便于用戶的由上至下得快速掃瞄。ios自帶的音樂(lè)app和音樂(lè)的歌單也同樣利用了點(diǎn)化線引導(dǎo)掃瞄，只是圖片和阿拉伯?dāng)?shù)字的區(qū)分而已。

2.點(diǎn)化面

在這種分布形式下，點(diǎn)經(jīng)常橫向排列在界面中（一排內(nèi)通常不超過(guò)5個(gè)），作為一個(gè)個(gè)快捷入口存在，形成網(wǎng)格式布局。

比如金剛區(qū)業(yè)務(wù)入口、書籍等類型的布局都屬于網(wǎng)格式。這個(gè)布局下的點(diǎn)集合傾向于面元素，界面在這個(gè)布局下呈現(xiàn)出富有欣賞性的視覺(jué)張力，吸引用戶眼球，而且網(wǎng)格式的布局引導(dǎo)用戶視線勻稱遷移，便于視覺(jué)區(qū)分。

3.網(wǎng)格與列表

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

4.列表

通常來(lái)說(shuō)，靜態(tài)頁(yè)面中的內(nèi)容大致可分為圖、文兩大類。

從形態(tài)上看，文本本身具有線那樣不斷延長(zhǎng)的特點(diǎn)，因此列表的橫向版面更適合長(zhǎng)文本的展現(xiàn)。而圖片、圖標(biāo)通常以固定尺寸的img獨(dú)立存在，可看作點(diǎn)元素，像上一節(jié)所講的，它既可存在于列表又可存在于網(wǎng)格。

從視覺(jué)動(dòng)線上看，列表布局的動(dòng)線屬于尼爾森等老前輩所提出的F型掃瞄模式。即用戶首先落點(diǎn)于左側(cè)的定位點(diǎn)，再由左向右進(jìn)行閱讀，接著再垂直掃視，當(dāng)定位到愛(ài)好點(diǎn)后連續(xù)由左至右得閱讀。這種動(dòng)線符合人類自然的閱讀模式。

并且在由上至下的視線遷移中，用戶的留意力勢(shì)必隨著路徑的拉長(zhǎng)而逐步遞減。

而這種遞減效應(yīng)讓列表式布局更適合基于產(chǎn)品及用戶習(xí)慣以某種規(guī)律排序。

郵件訊息以時(shí)間進(jìn)行排序，這是基于用戶查看最新消息的習(xí)慣；電商商品則默認(rèn)以相關(guān)性、銷量等因素綜合排序（同時(shí)買家可以依據(jù)價(jià)格、銷量等進(jìn)行自定義排序），這是基于用戶的購(gòu)物喜好習(xí)慣；直播平臺(tái)以熱度進(jìn)行排序，這是基于羊群效應(yīng)制造引流點(diǎn)，同時(shí)也刺激用戶發(fā)布優(yōu)質(zhì)內(nèi)容。并且在特定的排序規(guī)律下可以引導(dǎo)用戶帶有目的的、更快速得掃視。

但是假如界面變?yōu)榫W(wǎng)格布局，掃視效率將大打折扣，較高的圖版率也導(dǎo)致文字信息被過(guò)度弱化。如下圖，健身環(huán)大冒險(xiǎn)并不屬于外觀型產(chǎn)品，用戶更關(guān)懷的是價(jià)格、好評(píng)等文字信息，當(dāng)其變?yōu)榫W(wǎng)格視圖時(shí)，一方面用戶無(wú)法依據(jù)排序結(jié)果快速垂直掃視，另一方面文字信息被重量級(jí)的圖片壓制，用戶無(wú)法快速獵取它們。

5.網(wǎng)格

網(wǎng)格布局通過(guò)犧牲寬度來(lái)將界面等分為一個(gè)個(gè)格子，從形態(tài)上直接限制了長(zhǎng)文本的存在，這讓它更適合放置一個(gè)個(gè)獨(dú)立的點(diǎn)，比如圖片、圖標(biāo)。而文本則落于底部淪為一介幫助。

從視覺(jué)動(dòng)線上看，網(wǎng)格布局傾向于Z型掃瞄模式。用戶視覺(jué)動(dòng)線通常由左至右、再由上至下得進(jìn)行，并可以“雨露均沾”得在數(shù)個(gè)點(diǎn)上勻稱遷移，留意力遞減效應(yīng)不會(huì)像列表布局那么劇烈。因此，網(wǎng)格布局特別適合進(jìn)行不同信息的辨識(shí)和區(qū)分。

界面中常見(jiàn)的功能業(yè)務(wù)入口、專輯或者電影的布局、單獨(dú)店鋪中的商品，它們不需要明顯的排序處理，并且用戶初始行為都是通過(guò)圖片、圖標(biāo)進(jìn)行快速得辨別區(qū)分，繼而進(jìn)行交互決策。

假如將其列表化處理，不同信息的辨識(shí)區(qū)分效率將受到影響。如下圖，服裝屬于典型的外觀型商品，當(dāng)變?yōu)榱斜硪晥D時(shí)，商品之間將難以辨識(shí)區(qū)分。

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

列表：適用于文本為主要展現(xiàn)，或者根據(jù)某種規(guī)律排序的信息。

網(wǎng)格：適用于圖片為主要展現(xiàn)，或者沒(méi)有排序規(guī)章，需要用戶通過(guò)圖片、圖標(biāo)辨識(shí)區(qū)分的信息。

當(dāng)然了，這兩種布局并非只能選其一，淘寶、京東這類體量浩大的電商平臺(tái)便為了便利用戶習(xí)慣，供應(yīng)了兩種布局視圖便于用戶隨時(shí)切換以降低決策成本。

另外，它常被作為一類豐富畫面層次的手段。當(dāng)點(diǎn)不再根據(jù)橫縱方向排列分布時(shí)，便可作為圖案被用在特定場(chǎng)景的背景中，以降低背景過(guò)平過(guò)空的感覺(jué)。

比如美食杰封面的加載占位圖就以與產(chǎn)品相關(guān)的各種食