編輯導(dǎo)讀：點(diǎn)線面是產(chǎn)品設(shè)計(jì)的基礎(chǔ)，面是線的運(yùn)動(dòng)軌跡，由點(diǎn)、線強(qiáng)化自身而來。設(shè)計(jì)的創(chuàng)意層出不窮，但都需要建立在此基礎(chǔ)上。本文作者基于自身工作經(jīng)驗(yàn)，講述面是如何在產(chǎn)品界面進(jìn)行運(yùn)用的，希望對(duì)你有幫助。

上篇文章我們簡單講述了線在界面中的表現(xiàn)及運(yùn)用，這次來講講重頭戲——面。

面可以看作是線的運(yùn)動(dòng)軌跡，可以由一個(gè)閉合的線生成，也可以由點(diǎn)、線強(qiáng)化自身而來。

一、關(guān)于面

1. 點(diǎn)線面的臨界問題

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

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

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

2. 辨識(shí)性

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

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

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

我們可以對(duì)這段文字加粗、加入顏色等等，這的確能做出一些明顯的變化。但是僅僅是對(duì)字體本身的強(qiáng)化，一旦界面需要?jiǎng)澐謱蛹?jí)，就會(huì)顯得很“平”，造成信息關(guān)系的曖昧。

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

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

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

3. 圖標(biāo)

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

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

4. 按鈕

對(duì)于按鈕，面的辨識(shí)性為它的層級(jí)使用提供了更多可能。

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

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

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

比如知乎的答案詳情頁面，答主關(guān)注按鈕是淺灰色樣式，就是為了引導(dǎo)用戶沉浸在內(nèi)容中，避免深色樣式對(duì)閱讀造成干擾。而答主個(gè)人頁的關(guān)注變?yōu)樯钌?，則是由于用戶點(diǎn)擊答主頭像的行為來自了解更多的動(dòng)機(jī)，即用戶對(duì)其產(chǎn)生了特定興趣，在此場(chǎng)景下使用深色樣式便是為了引導(dǎo)用戶采取社交行為。另外按鈕圓角的轉(zhuǎn)化也是為了強(qiáng)化信息的聚焦。

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

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

5. 承載性與分割性

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

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

6. 卡片式設(shè)計(jì)

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

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

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

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

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

1）更高效得獲取信息

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

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

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

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

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

3）更多的交互手勢(shì)

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

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

4）更舒適的視覺觀感

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

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

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

7. 卡片的嵌套和分割

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

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

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

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

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

二、蘋果是如何改頭換面的

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

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

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

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

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

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

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

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

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

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

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

三、最后

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

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

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

作者：Andrew臣；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。