起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識一套設計理論為你解決90%的困惑（下）
編輯導讀：點線面是產(chǎn)品設計的基礎，面是線的運動軌跡，由點、線強化自身而來。設計的創(chuàng)意層出不窮，但都需要建立在此基礎上。本文作者基于自身工作經(jīng)驗，講述面是如何在產(chǎn)品界面進行運用的，希望對你有幫助。
上篇文章我們簡單講述了線在界面中的表現(xiàn)及運用，這次來講講重頭戲——面。
面可以看作是線的運動軌跡，可以由一個閉合的線生成，也可以由點、線強化自身而來。
一、關于面
1. 點線面的臨界問題
康定斯基在書中曾講到，線的強化加粗，與點不斷增大面臨同樣的問題，即與面之間的臨界。
這句話的意思就是，當點、線通過強化自身的面積、寬度后，和面的界限開始模糊，從而具備了面本身的性質(zhì)。
比如ios11中讓人印象深刻的大標題，便是由通過增加每個點的面積（增加每個字的字號），以及筆畫的線寬（增加每個字的字重）來趨向于面，以來營造出飽滿、沖擊的視覺張力。
2. 辨識性
面二維的屬性讓它可以向四周無限得擴張自己的領土，這個優(yōu)勢讓面可以輕松承載各類信息，并且也讓它具備了絕佳的視覺張力。
在一個點線面同時存在的畫面中，人眼優(yōu)先注意到的必定是擁有絕對視覺張力的面元素。這意味著面擁有著遠勝于前兩者的辨識性，或者說，在一部各類元素參演的戲劇里，面更擅長主角。
比如在一個放置了文字的界面中，我們希望其中一段比較重要的文字完全和其他文字區(qū)分開，也就意味著這段文字需要進行對比。
我們可以對這段文字加粗、加入顏色等等，這的確能做出一些明顯的變化。但是僅僅是對字體本身的強化，一旦界面需要劃分層級，就會顯得很“平”，造成信息關系的曖昧。
不過，當加入一層淡淡的色塊充當文字背景后，便可以制造出極為明朗的層次關系。一方面，這段文字神奇得與其他信息迅速孤立開來，另外，有面作為“靠山”讓它變得稍微與眾不同，并且相比其他文字能被更快得注意到。
當然，如果你覺得它很重要，那你可以增強文字與背景的顏色對比，給面加入各種各樣的顏色。而當顏色對信息可讀性造成影響時，為保證信息的順利辨識，我們不得不對文字進行反色處理，以此作為視覺落點來強制用戶迅速注意到它。這就是我們熟知的反白視覺手段。
面的這種強力屬性被用到了界面的方方面面，比如按鈕和圖標。
3. 圖標
相比前面所講的線性圖標，面的辨識性讓面性圖標可以更快得被識別。因此，界面中一些重要的業(yè)務入口通常都以醒目的面性圖標存在，并且常以面性圖標代表激活、選中時的狀態(tài)，線性圖標代表未激活、未選中時的狀態(tài)。
不過線性圖標薄弱的辨識性并非完全適合標簽欄狀態(tài)的切換。用戶在選中到當前頁時，并不代表其他頁面徹底弱化了，用戶同樣需要關注其他未選中的頁面。正因如此，ios11中所有未選中的icon全部由線性更改為了面性。同樣的，國內(nèi)的簡書、天貓等產(chǎn)品也進行了圖標的改版以提升其他頁面的點擊率。
4. 按鈕
對于按鈕，面的辨識性為它的層級使用提供了更多可能。
如下圖，按鈕從樣式上來看大致有六種樣式，反白、同色、灰色、幽靈、文字和圖標按鈕，其中面性按鈕就占了一半。相比幽靈、文字和圖標按鈕，三種面性按鈕都以面的強辨識性引導用戶迅速注意到它。因此面性按鈕相對對應更高的層級。
當頁面中存在多個功能按鈕時，就需要以樣式進行主次之分。深色按鈕以強烈的顏色對比制造吸引力，因此常以深色表達層級最高的主按鈕，而次按鈕通常對應層級較低的淺色、灰色等樣式。
當頁面中沒有主次功能之分時，按鈕的樣式通常取決于當前的用戶場景及業(yè)務需求。
比如知乎的答案詳情頁面，答主關注按鈕是淺灰色樣式，就是為了引導用戶沉浸在內(nèi)容中，避免深色樣式對閱讀造成干擾。而答主個人頁的關注變?yōu)樯钌?，則是由于用戶點擊答主頭像的行為來自了解更多的動機，即用戶對其產(chǎn)生了特定興趣，在此場景下使用深色樣式便是為了引導用戶采取社交行為。另外按鈕圓角的轉(zhuǎn)化也是為了強化信息的聚焦。
app store同理。商品列表頁的按鈕一致以淺灰色樣式表達，而詳情頁使用了深色。
我們在按鈕樣式的選擇上，務必需要考慮到當前的用戶場景，避免過低的信噪比而影響信息的傳達效率。比如App store列表頁中，用戶的場景是非特定的瀏覽行為，如果使用深色按鈕將會讓其成為視覺焦點，強制用戶不斷注意到它，致使其成為“噪音”，影響用戶對有效信息的獲取。
5. 承載性與分割性
面無限延展的屬性讓它可以承載各類信息。包括文字、圖片或視頻元素，異或是元素自由組合所形成的信息單元。并且我們僅加深界面的背景色，就可以基于面的分割性，通過控制模塊間距實現(xiàn)區(qū)域的劃分。（這里的間距即我們熟知的分割條）
但這種文字墻一般平鋪式的布局并不能更好得反映當前模塊所在的層次，或者從用戶認知上說它們傾向于一個層面上。而且直角矩形的四個頂角所形成的四個焦點，也讓用戶的視線傾向于發(fā)散而非聚焦。直到卡片的出現(xiàn)，問題得以順利解決。
6. 卡片式設計
卡片在我們生活中隨處可見，信件、名片、便利貼、甚至是我們的手機屏幕，它們從形態(tài)來說都屬于面，并且都充分利用了面的承載性來充當一個收納信息的容器或載體。信件收納來信人的寄語，名片收納對方的個人信息、便利貼收納事項清單、屏幕收納用戶界面。而且它們方便攜帶，我們想要知道更多，打開它即可。
2012年I/O開發(fā)者大會中，隨安卓4.1系統(tǒng)一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。這種后擬物時代的設計不僅一改google以往混亂的信息展示問題，而且熟悉的擬物感收獲了足量用戶的喜愛。初嘗甜頭之后，Google將卡片應用到了所有的產(chǎn)品，并且將其作為基礎元素列入了一門偉大的設計語言中——material design。
你可以在material design中更系統(tǒng)得看到，google通過為界面添加了z軸（海報高度），來擬物映射生活中的一張張卡片。并且通過陰影的濃淡反應卡片所在的高度，通過不同的高度實時反映當前元素的層級關系。
而在ios11中，改版后的app store也使用了大量的卡片進行排列組合，形成格外的清晰的頁面層次引導用戶的視覺動線。
相比原本平鋪直敘的信息，卡片式設計通過以下優(yōu)點讓其風靡設計界。
1）更高效得獲取信息
每張卡片都是一個獨立的面。從面的辨識性上說，獨立和聚焦的特點讓卡片與其他內(nèi)容形成天然的斷層，更易形成視覺焦點。從面的分割性上說，卡片通過犧牲屏幕空間（四周的塊外距）的方式讓區(qū)域的分割相較分割條更為明確，清晰的層次關系便于用戶迅速辨識和獲取信息。
比如改版后的支付寶，通過引入圓角卡片來引導用戶更好得留意到下方的各類生活服務，以實現(xiàn)向生活服務數(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)格布局的常用載體，富有觀賞性的視覺張力讓頁面更加吸引眼球。
當然，卡片并不是通用的，原本可以靠留白或分割線分割的信息，如果為了視覺效果硬是卡片化處理，就會導致閱讀的低效，而且浪費空間。
比如常見的一些feed流，相比卡片，這類同類的信息流更適合以列表來幫助用戶迅速得掃視，并節(jié)省頁面空間。
7. 卡片的嵌套和分割
產(chǎn)品的功能并非完全互相剝離的，很多時候存在包含和平行的關系。這兩類關系分別可以以卡片的嵌套和分割進行處理。前者通過卡片堆砌表達信息的包含關系，而后者則通過視覺分割所形成的點擊域傳達信息的平行關系。
比如天貓點評頁中的金香蕉好物推薦，每個卡片承載了商品信息以及點評信息，通過卡片的嵌套表示出兩者的包含關系。而單條推選理由及入口的引導屬于平行關系，因此采用了視覺分割來進行劃分。
并且前者跳轉(zhuǎn)的是點評詳情，后者跳轉(zhuǎn)的頁面中包含了所有點評、商品推薦以及我要點評，因此在后者所屬的面中加入了淡淡的一層業(yè)務主色來強化它的地位。
在支付寶改版后的卡包頁中同樣進行了一次嵌套處理，以更好得容納不同的業(yè)務并傳達各自所在的層級，并且以尺寸和顏色對比進行業(yè)務區(qū)分。
京東金融的付費業(yè)務卡片中存在兩個平行關系的功能，因此以分割線形式進行了區(qū)域的劃分。同時，它利用了顏色進行了有效的視覺及情緒引導：黑色背景進行反白處理將其作為一個單獨的視覺落點，強制用戶注意到這里，并且又傳達了付費用戶所尊享的高級感。
二、蘋果是如何改頭換面的
自從ios7轉(zhuǎn)型扁平后，線元素在蘋果設計語言中一直占有重要地位，線自身的纖細、輕盈感可以迅速打造apple獨有的輕量調(diào)性，不僅是按鈕、圖標的樣式，包括字體本身也更加傾向纖細的字重。
但是，這個僵局在ios11發(fā)布的那天被徹底打破。2017年6月6日，蘋果設計師喬納森仿佛和線有了隔夜仇一般，從解鎖頁面到原生應用中，原本ios10中曾經(jīng)被大量使用的線元素基本全部被面元素取代。
鎖屏頁面，所有撥號按鈕全部由幽靈樣式改為了面性樣式，而數(shù)字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識，并且降低了線所產(chǎn)生的視覺噪音。
App store中也同樣發(fā)生著形態(tài)的易主。原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。另外，11代中眾所周知的大標題同樣也可以看做化面的傾向（通過增加自身的面積），強烈的視覺張力引導用戶迅速得進行辨識。
另外，所有的數(shù)字全部提至文字的前方，基于用戶由左至右的動線更突出產(chǎn)品自身，以點化線的形式更好得引導用戶進行掃視。
追求極致的蘋果顯然不能容忍tab中未選中態(tài)下出現(xiàn)的線元素，你可以在ios13中看到，線元素得到了徹底的消除，并且顏色一并得到了克制，再次提升了閱讀內(nèi)容的沉浸感。
ios11中的商品詳情頁獲取按鈕也同樣使用了面性，深色的強調(diào)樣式更好得契合了頁面所在的用戶場景，召喚用戶對其感興趣的商品采取點擊行為。
控制中心頁面，基于面元素的承載與分割性，所有的信號類功能獨立收納到了卡片中。亮度和音量的調(diào)節(jié)則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強了兩者的辨識力，另一方面，根據(jù)菲茨交互定律，面積的增大帶來了更好的點擊體驗。這一點在miui11的控件優(yōu)化中也得到了應用。
所有的未選中態(tài)圖標也進行了面性處理，大幅提升了10代中未選中頁標簽的辨識性。并且每個圖標對應的文字也進行了加粗。
縱觀ios11中所有形態(tài)的變化，我們可以發(fā)現(xiàn)這次改版的最終目的是：促進內(nèi)容的高效獲取。
順從作為蘋果歷來遵循的設計法則之一，和包豪斯“形式追隨功能”設計理念不謀而合。設計永遠只幫助用戶理解內(nèi)容，但永遠不與內(nèi)容競爭。這一點在ios11的這次“改頭換面”被徹底應用及實現(xiàn)，并且對設計圈影響至今。
三、最后
點、線、面理論并不像格式塔、尼爾森可用性法則等方法論那樣，為設計者提供切實可行的具體指導，它更類似一種內(nèi)斂的全局觀，幫助設計師拋開顏色、質(zhì)感等額外手段，從宏觀的角度以點、線和面的方式將所有的設計元素抽象化處理，讓原本雜亂無序的萬象有章可循。
最后，以康定斯基的一句話結(jié)尾——
研究藝術構成的目的無非如此：找到內(nèi)在的生命，讓生命的脈動顯得可感，并為生命尋求規(guī)則。
作者：Andrew臣；微信公眾號：轉(zhuǎn)行人的設計筆記
本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
你寫的太好了