面可以看作是線的運動軌跡，可以由一個閉合的線生成，也可以由點、線強化自身而來。

往期回顧：

點線面的臨界問題

康定斯基在書中曾講到，線的強化加粗，與點不斷增大面臨同樣的問題，即與面之間的臨界。

這句話的意思就是，當(dāng)點、線通過強化自身的面積、寬度后，和面的界限開始模糊，從而具備了面本身的性質(zhì)。

比如ios11中讓人印象深刻的大標(biāo)題，便是由通過增加每個點的面積（增加每個字的字號），以及筆畫的線寬（增加每個字的字重）來趨向于面，以來營造出飽滿、沖擊的視覺張力。

辨識性

面二維的屬性讓它可以向四周無限得擴張自己的領(lǐng)土，這個優(yōu)勢讓面可以輕松承載各類信息，并且也讓它具備了絕佳的視覺張力。

在一個點線面同時存在的畫面中，人眼優(yōu)先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠(yuǎn)勝于前兩者的辨識性，或者說，在一部各類元素參演的戲劇里，面更擅長主角。

比如在一個放置了文字的界面中，我們希望其中一段比較重要的文字完全和其他文字區(qū)分開，也就意味著這段文字需要進(jìn)行對比。

我們可以對這段文字加粗、加入顏色等等，這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化，一旦界面需要劃分層級，就會顯得很“平”，造成信息關(guān)系的曖昧。

不過，當(dāng)加入一層淡淡的色塊充當(dāng)文字背景后，便可以制造出極為明朗的層次關(guān)系。一方面，這段文字神奇得與其他信息迅速孤立開來，另外，有面作為“靠山”讓它變得稍微與眾不同，并且相比其他文字能被更快得注意到。

當(dāng)然，如果你覺得它很重要，那你可以增強文字與背景的顏色對比，給面加入各種各樣的顏色。而當(dāng)顏色對信息可讀性造成影響時，為保證信息的順利辨識，我們不得不對文字進(jìn)行反色處理，以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。

面的這種強力屬性被用到了界面的方方面面，比如按鈕和圖標(biāo)。

1. 圖標(biāo)

相比前面所講的線性圖標(biāo)，面的辨識性讓面性圖標(biāo)可以更快得被識別。因此，界面中一些重要的業(yè)務(wù)入口通常都以醒目的面性圖標(biāo)存在，并且常以面性圖標(biāo)代表激活、選中時的狀態(tài)，線性圖標(biāo)代表未激活、未選中時的狀態(tài)。

不過線性圖標(biāo)薄弱的辨識性并非完全適合標(biāo)簽欄狀態(tài)的切換。用戶在選中到當(dāng)前頁時，并不代表其他頁面徹底弱化了，用戶同樣需要關(guān)注其他未選中的頁面。正因如此，ios11中所有未選中的icon全部由線性更改為了面性。同樣的，國內(nèi)的簡書、天貓等產(chǎn)品也進(jìn)行了圖標(biāo)的改版以提升其他頁面的點擊率。

2. 按鈕

對于按鈕，面的辨識性為它的層級使用提供了更多可能。

如下圖，按鈕從樣式上來看大致有六種樣式，反白、同色、灰色、幽靈、文字和圖標(biāo)按鈕，其中面性按鈕就占了一半。相比幽靈、文字和圖標(biāo)按鈕，三種面性按鈕都以面的強辨識性引導(dǎo)用戶迅速注意到它。因此面性按鈕相對對應(yīng)更高的層級。

當(dāng)頁面中存在多個功能按鈕時，就需要以樣式進(jìn)行主次之分。深色按鈕以強烈的顏色對比制造吸引力，因此常以深色表達(dá)層級最高的主按鈕，而次按鈕通常對應(yīng)層級較低的淺色、灰色等樣式。

當(dāng)頁面中沒有主次功能之分時，按鈕的樣式通常取決于當(dāng)前的用戶場景及業(yè)務(wù)需求。

比如知乎的答案詳情頁面，答主關(guān)注按鈕是淺灰色樣式，就是為了引導(dǎo)用戶沉浸在內(nèi)容中，避免深色樣式對閱讀造成干擾。而答主個人頁的關(guān)注變?yōu)樯钌?，則是由于用戶點擊答主頭像的行為來自了解更多的動機，即用戶對其產(chǎn)生了特定興趣，在此場景下使用深色樣式便是為了引導(dǎo)用戶采取社交行為。另外按鈕圓角的轉(zhuǎn)化也是為了強化信息的聚焦。關(guān)于圓角的內(nèi)容可以去我的前一篇文章《寫給設(shè)計師看的圓角背后的邏輯》，里面有更詳細(xì)的講解。

app store同理。商品列表頁的按鈕一致以淺灰色樣式表達(dá)，而詳情頁使用了深色。

我們在按鈕樣式的選擇上，務(wù)必需要考慮到當(dāng)前的用戶場景，避免過低的信噪比而影響信息的傳達(dá)效率。比如app store列表頁中，用戶的場景是非特定的瀏覽行為，如果使用深色按鈕將會讓其成為視覺焦點，強制用戶不斷注意到它，致使其成為“噪音”，影響用戶對有效信息的獲取。

承載性與分割性

面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素，異或是元素自由組合所形成的信息單元。并且我們僅加深界面的背景色，就可以基于面的分割性，通過控制模塊間距實現(xiàn)區(qū)域的劃分。（這里的間距即我們熟知的分割條）

但這種文字墻一般平鋪式的布局并不能更好得反映當(dāng)前模塊所在的層次，或者從用戶認(rèn)知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點，也讓用戶的視線傾向于發(fā)散而非聚焦。直到卡片的出現(xiàn)，問題得以順利解決。

卡片式設(shè)計

卡片在我們生活中隨處可見，信件、名片、便利貼、甚至是我們的手機屏幕，它們從形態(tài)來說都屬于面，并且都充分利用了面的承載性來充當(dāng)一個收納信息的容器或載體。信件收納來信人的寄語，名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶，我們想要知道更多，打開它即可。

2012年I/O開發(fā)者大會中，隨安卓4.1系統(tǒng)一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。這種后擬物時代的設(shè)計不僅一改google以往混亂的信息展示問題，而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后，Google將卡片應(yīng)用到了所有的產(chǎn)品，并且將其作為基礎(chǔ)元素列入了一門偉大的設(shè)計語言中——material design。

你可以在material design中更系統(tǒng)得看到，google通過為界面添加了z軸（海報高度），來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應(yīng)卡片所在的高度，通過不同的高度實時反映當(dāng)前元素的層級關(guān)系。

而在ios11中，改版后的app store也使用了大量的卡片進(jìn)行排列組合，形成格外的清晰的頁面層次引導(dǎo)用戶的視覺動線。

相比原本平鋪直敘的信息，卡片式設(shè)計通過以下優(yōu)點讓其風(fēng)靡設(shè)計界——

1. 更高效得獲取信息

每張卡片都是一個獨立的面。從面的辨識性上說，獨立和聚焦的特點讓卡片與其他內(nèi)容形成天然的斷層，更易形成視覺焦點。從面的分割性上說，卡片通過犧牲屏幕空間（四周的塊外距）的方式讓區(qū)域的分割相較分割條更為明確，清晰的層次關(guān)系便于用戶迅速辨識和獲取信息。

比如改版后的支付寶，通過引入圓角卡片來引導(dǎo)用戶更好得留意到下方的各類生活服務(wù)，以實現(xiàn)向生活服務(wù)數(shù)字平臺的轉(zhuǎn)型。

2. 更輕量的入口跳轉(zhuǎn)

每個卡片除了承載信息外，都可以作為單獨的入口承載內(nèi)頁的所有信息，并且卡片的屬性讓內(nèi)頁的展示變?yōu)榱苏归_而非跳轉(zhuǎn)。

比如app store點擊卡片后，便以非線性的展開動畫呈現(xiàn)所有內(nèi)頁信息，返回則只需下滑手勢即可，輕量而有趣。

3. 更多的交互手勢

卡片獨立的特點讓它可排列也可堆疊，這為頁面帶來了更多的交互方式。我們可以通過左右滑動（scroll）解鎖橫向更多的空間，也可以左右輕劃（flick）形成類似tinder那樣新的產(chǎn)品機制。

比如知乎的書架引入滑動手勢展示更多內(nèi)容，輕劃手勢切換問題卡片。

4. 更舒適的視覺觀感

卡片基于自身獨立的特征讓它成為網(wǎng)格布局的常用載體，富有觀賞性的視覺張力讓頁面更加吸引眼球。

當(dāng)然，卡片并不是通用的，原本可以靠留白或分割線分割的信息，如果為了視覺效果硬是卡片化處理，就會導(dǎo)致閱讀的低效，而且浪費空間。

比如常見的一些feed流，相比卡片，這類同類的信息流更適合以列表來幫助用戶迅速得掃視，并節(jié)省頁面空間。

卡片的嵌套和分割

產(chǎn)品的功能并非完全互相剝離的，很多時候存在包含和平行的關(guān)系。這兩類關(guān)系分別可以以卡片的嵌套和分割進(jìn)行處理。前者通過卡片堆砌表達(dá)信息的包含關(guān)系，而后者則通過視覺分割所形成的點擊域傳達(dá)信息的平行關(guān)系。

比如天貓點評頁中的金香蕉好物推薦，每個卡片承載了商品信息以及點評信息，通過卡片的嵌套表示出兩者的包含關(guān)系。而單條推選理由及入口的引導(dǎo)屬于平行關(guān)系，因此采用了視覺分割來進(jìn)行劃分。

并且前者跳轉(zhuǎn)的是點評詳情，后者跳轉(zhuǎn)的頁面中包含了所有點評、商品推薦以及我要點評，因此在后者所屬的面中加入了淡淡的一層業(yè)務(wù)主色來強化它的地位。

在支付寶改版后的卡包頁中同樣進(jìn)行了一次嵌套處理，以更好得容納不同的業(yè)務(wù)并傳達(dá)各自所在的層級，并且以尺寸和顏色對比進(jìn)行業(yè)務(wù)區(qū)分。

京東金融的付費業(yè)務(wù)卡片中存在兩個平行關(guān)系的功能，因此以分割線形式進(jìn)行了區(qū)域的劃分。同時，它利用了顏色進(jìn)行了有效的視覺及情緒引導(dǎo)：黑色背景進(jìn)行反白處理將其作為一個單獨的視覺落點，強制用戶注意到這里，并且又傳達(dá)了付費用戶所尊享的高級感。

蘋果是如何改頭換面的

自從ios7轉(zhuǎn)型扁平后，線元素在蘋果設(shè)計語言中一直占有重要地位，線自身的纖細(xì)、輕盈感可以迅速打造apple獨有的輕量調(diào)性，不僅是按鈕、圖標(biāo)的樣式，包括字體本身也更加傾向纖細(xì)的字重。

但是，這個僵局在ios11發(fā)布的那天被徹底打破。2017年6月6日，蘋果設(shè)計師喬納森仿佛和線有了隔夜仇一般，從解鎖頁面到原生應(yīng)用中，原本ios10中曾經(jīng)被大量使用的線元素基本全部被面元素取代。

鎖屏頁面，所有撥號按鈕全部由幽靈樣式改為了面性樣式，而數(shù)字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識，并且降低了線所產(chǎn)生的視覺噪音。

app store中也同樣發(fā)生著形態(tài)的易主。原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。另外，11代中眾所周知的大標(biāo)題同樣也可以看做化面的傾向（通過增加自身的面積），強烈的視覺張力引導(dǎo)用戶迅速得進(jìn)行辨識。

另外，所有的數(shù)字全部提至文字的前方，基于用戶由左至右的動線更突出產(chǎn)品自身，以點化線的形式更好得引導(dǎo)用戶進(jìn)行掃視。

追求極致的蘋果顯然不能容忍tab中未選中態(tài)下出現(xiàn)的線元素，你可以在ios13中看到，線元素得到了徹底的消除，并且顏色一并得到了克制，再次提升了閱讀內(nèi)容的沉浸感。

ios11中的商品詳情頁獲取按鈕也同樣使用了面性，深色的強調(diào)樣式更好得契合了頁面所在的用戶場景，召喚用戶對其感興趣的商品采取點擊行為。

控制中心頁面，基于面元素的承載與分割性，所有的信號類功能獨立收納到了卡片中。亮度和音量的調(diào)節(jié)則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力，另一方面，根據(jù)菲茨交互定律，面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優(yōu)化中也得到了應(yīng)用。

所有的未選中態(tài)圖標(biāo)也進(jìn)行了面性處理，大幅提升了10代中未選中頁標(biāo)簽的辨識性。并且每個圖標(biāo)對應(yīng)的文字也進(jìn)行了加粗。

縱觀ios11中所有形態(tài)的變化，我們可以發(fā)現(xiàn)這次改版的最終目的是：促進(jìn)內(nèi)容的高效獲取。

順從作為蘋果歷來遵循的設(shè)計法則之一，和包豪斯“形式追隨功能”設(shè)計理念不謀而合。設(shè)計永遠(yuǎn)只幫助用戶理解內(nèi)容，但永遠(yuǎn)不與內(nèi)容競爭。這一點在ios11的這次“改頭換面”被徹底應(yīng)用及實現(xiàn)，并且對設(shè)計圈影響至今。

最后

點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣，為設(shè)計者提供切實可行的具體指導(dǎo)，它更類似一種內(nèi)斂的全局觀，幫助設(shè)計師拋開顏色、質(zhì)感等額外手段，從宏觀的角度以點、線和面的方式將所有的設(shè)計元素抽象化處理，讓原本雜亂無序的萬象有章可循。

最后，以康定斯基的一句話結(jié)尾——

研究藝術(shù)構(gòu)成的目的無非如此：找到內(nèi)在的生命，讓生命的脈動顯得可感，并為生命尋求規(guī)則。

歡迎關(guān)注作者微信公眾號：「轉(zhuǎn)行人的設(shè)計筆記」