簡(jiǎn)單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)。
簡(jiǎn)單的細(xì)節(jié)調(diào)整就能加強(qiáng)設(shè)計(jì)品質(zhì)，昨天沒(méi)想到幾個(gè)小時(shí)寫(xiě)的一篇小文章很受大家歡迎，后續(xù)我多寫(xiě)一些類(lèi)似使用技巧，大家多給我點(diǎn)贊一些，支持我繼續(xù)寫(xiě)下去，那今天再給大家分享幾個(gè)設(shè)計(jì)小技巧。希望能幫助到大家。
小輪廓能讓設(shè)計(jì)更精致
電商設(shè)計(jì)中，白色商品圖非常多，很多時(shí)候如果細(xì)節(jié)處理不好，就會(huì)體驗(yàn)非常糟糕，如上圖就是大家經(jīng)常用到的一個(gè)場(chǎng)景。列表中有一個(gè)商品圖，這個(gè)設(shè)計(jì)有一個(gè)很大的問(wèn)題，就是列表是灰色，商品圖是白色，白色和app的底色白色融為一體了，看起來(lái)非常缺乏平衡感。
仔細(xì)分析，你會(huì)發(fā)現(xiàn)問(wèn)題是商品圖頂部有些白色部分和背景頁(yè)面的白色融合在一起了，同時(shí)卡片背景是灰色，所以色彩白色和灰色非常突兀，那么如何解決。其實(shí)有一個(gè)很小的方法就能解決這個(gè)問(wèn)題。
我們直接在商品圖片周邊留出2px的邊框，就能很好的解決這個(gè)問(wèn)題，因?yàn)楸尘笆腔疑模舫龅倪吙騽偤米尠咨珗D片看著有一個(gè)輪廓，整體更加和諧。
前后效果圖對(duì)比，加了一個(gè)淺淺的邊框就解決了白色圖片的問(wèn)題，是不是頁(yè)面一下子精致起來(lái)。
同樣的原理，在大的商品圖上，留下小的邊框也很好的解決了白色地圖和背景的問(wèn)題，這個(gè)小技巧希望大家能掌握。
善用色彩疊加讓頁(yè)面效果更潮
上圖這個(gè)場(chǎng)景我想是很多同學(xué)每天工作都在用的，圖片上需要去放一些文字，我們一般處理方式就是在上面疊加一個(gè)黑色，給一個(gè)透明度，這樣文字就能看清楚。這是一個(gè)設(shè)計(jì)手法。
還一種設(shè)計(jì)手法就是在圖片頂部，加一個(gè)黑色到透明的一個(gè)蒙版，這個(gè)大家都會(huì)。
但是這兩個(gè)設(shè)計(jì)如果對(duì)于一些比較年輕，比較潮流的頁(yè)面處理，可能就會(huì)感覺(jué)少點(diǎn)什么，那么這個(gè)時(shí)候就需要我們大膽一點(diǎn)，用一個(gè)色彩疊加的方式去設(shè)計(jì)，效果就會(huì)完全不一樣。
直接在圖片上根據(jù)你產(chǎn)品調(diào)性，疊加一個(gè)彩色，然后講顏色模式改為線性光，那么整體的感覺(jué)就瞬間不一樣，畫(huà)面潮了很多。
我們來(lái)看看效果對(duì)比，是不是瞬間一個(gè)普通的設(shè)計(jì)就潮起來(lái)了，當(dāng)然這個(gè)效果也需要看你頁(yè)面實(shí)際場(chǎng)景去使用。如果你頁(yè)面就是一個(gè)傳統(tǒng)的設(shè)計(jì)，用戶就是普通用戶，那么可以就上面2個(gè)方法去設(shè)計(jì)，如果你的產(chǎn)品調(diào)性需要傳遞出很潮流，很時(shí)尚，那么就可以試試這個(gè)方法。
當(dāng)然你也可以在局部去疊加色彩，效果一樣很棒，我最喜歡的音樂(lè)軟件Spotify在頁(yè)面中就大量使用這種手法在設(shè)計(jì)，有興趣同學(xué)可以下載看看。
善用空格和留白
有的時(shí)候負(fù)空間非常重要，很多同學(xué)的設(shè)計(jì)稿，非常的擁擠，頁(yè)面都像要溢出屏幕了。如上圖，文字和圖片過(guò)于緊湊，圖片下面的圖標(biāo)，熱區(qū)不夠，看起來(lái)非常擁擠。
大家都太吝嗇運(yùn)用空格了，但是留白和空隙是提升設(shè)計(jì)中非常重要的點(diǎn)。能讓你頁(yè)面呼吸感更強(qiáng)，是優(yōu)化設(shè)計(jì)，讓設(shè)計(jì)更精致非常重要的一個(gè)小技巧。
簡(jiǎn)單優(yōu)化下，把信息分成3部分，然后加大留白，讓信息留白更多，增強(qiáng)設(shè)計(jì)呼吸感。
最后來(lái)看下效果，是不是看起來(lái)舒服多了，節(jié)奏感和呼吸感更強(qiáng)了，也有例如我們理解信息內(nèi)容。
最后
今天就和大家分享這么幾個(gè)小點(diǎn)，希望大家都成為一個(gè)關(guān)注細(xì)節(jié)的設(shè)計(jì)師。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
對(duì)于按鈕控件，Material Design 在規(guī)范中寫(xiě)下了“突出一個(gè)按鈕”原則：布局中應(yīng)包含一個(gè)視覺(jué)突出按鈕，以使其他按鈕在層次結(jié)構(gòu)中的重要性降低，讓此高強(qiáng)調(diào)按鈕吸引用戶最多的關(guān)注。
依據(jù)用戶體驗(yàn)設(shè)計(jì)的宗旨，把這么長(zhǎng)一段話說(shuō)直白一些，其實(shí)就是：讓按鈕幫助用戶做出最優(yōu)選擇。
越是權(quán)威的設(shè)計(jì)團(tuán)隊(duì)，對(duì)自家所探尋出來(lái)的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計(jì)，始終遵循著MD規(guī)范這一個(gè)標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn)，來(lái)展開(kāi)對(duì)于「按鈕」設(shè)計(jì)的探索。
Material Design 按照視覺(jué)強(qiáng)調(diào)程度將按鈕分為了四個(gè)類(lèi)型：
文字按鈕（低強(qiáng)調(diào)）：通常用于次要操作；
輪廓按鈕（中等強(qiáng)調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；
填充按鈕（重點(diǎn)強(qiáng)調(diào)）：填充按鈕具有視覺(jué)重點(diǎn)，因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/p>
切換按鈕（按鈕組）：使用布局將同類(lèi)按鈕分組。與其他按鈕類(lèi)型相比，它們的使用頻率較低。
MD規(guī)范之所以如此定義按鈕類(lèi)型，其實(shí)就是為了滿足設(shè)計(jì)原則中的「對(duì)比」原則，足夠差異化的對(duì)比才能讓用戶視線有明確的著陸點(diǎn)。
你可以用“較高視覺(jué)級(jí)+較低視覺(jué)級(jí)”的按鈕搭配，來(lái)引導(dǎo)用戶在當(dāng)前場(chǎng)景做出更重要的操作。
這一手法示例在許多產(chǎn)品中屢見(jiàn)不鮮。例如在一些功能性場(chǎng)景中，出于用戶體驗(yàn)，用“較高視覺(jué)級(jí)”按鈕來(lái)輔助用戶進(jìn)行正確操作。
而在一些非功能性場(chǎng)景中，許多產(chǎn)品還使用這個(gè)手法來(lái)突出重要操作，為業(yè)務(wù)引流。甚至你可以從中去摸索到競(jìng)品當(dāng)前對(duì)哪一塊業(yè)務(wù)更具有側(cè)重點(diǎn)。
例如信用消費(fèi)類(lèi)金融產(chǎn)品常常用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶對(duì)賬單進(jìn)行分期。而京東白條在賬單還款時(shí)，也用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶進(jìn)行“小金庫(kù)還款”，為自家的金融業(yè)務(wù)引流。
這些案例都是在視覺(jué)上幫用戶做出選擇。
但反其道而行之，我們也可以推敲出，當(dāng)當(dāng)前場(chǎng)景的敏感度較高時(shí)，我們也可以降低按鈕的視覺(jué)對(duì)比，不要對(duì)用戶進(jìn)行引導(dǎo)，讓用戶自行謹(jǐn)慎操作，做出選擇。一般在協(xié)議、隱私條款場(chǎng)景這樣的設(shè)計(jì)會(huì)更為常見(jiàn)。
按鈕尺寸是設(shè)計(jì)界老生常談的一個(gè)問(wèn)題了，想必最經(jīng)典的按鈕尺寸標(biāo)準(zhǔn)就是 iOS人機(jī)設(shè)計(jì)規(guī)范提到的“44pt”。除此之外還有MD規(guī)范對(duì)安卓按鈕定義的“36dp”、“56dp”等等。
但你是不是也疑惑，為什么我們常?？吹桨粹o五花八門(mén)的設(shè)計(jì)尺寸？“44pt”真的是按鈕尺寸的標(biāo)準(zhǔn)嗎？
這個(gè)回答可以在設(shè)計(jì)師 Scott Hurff 曾寫(xiě)過(guò)一篇關(guān)于按鈕可行性的博文中找到答案。
Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時(shí)，遇到了問(wèn)題：
在我想切歌時(shí)，我常常無(wú)法一次就點(diǎn)中切歌按鈕，我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量，或是按到暫停。
而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。
等到 iOS 10 更新了這一設(shè)計(jì)之后，上述情況改善了許多。同時(shí)也提起了 Scott Hurff 對(duì)于按鈕設(shè)計(jì)尺寸研究的興趣，并展開(kāi)了一系列科學(xué)性的論證。
Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進(jìn)行的實(shí)驗(yàn)。研究人員測(cè)試了兩個(gè)場(chǎng)景：
執(zhí)行單個(gè)任務(wù)場(chǎng)景（如激活按鈕、點(diǎn)選復(fù)選框或單選按鈕）
執(zhí)行連續(xù)任務(wù)場(chǎng)景（如輸入電話號(hào)碼）
在研究過(guò)程中，研究人員在每個(gè)場(chǎng)景下都測(cè)試了一系列不同大小的按鈕。他們發(fā)現(xiàn)，當(dāng)按鈕小于9.2毫米時(shí)，單個(gè)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加；當(dāng)按鈕小于9.6毫米時(shí)，連續(xù)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加。
當(dāng)時(shí)這個(gè)實(shí)驗(yàn)只確定了按鈕尺寸的合適區(qū)間。但五年后，兩所德國(guó)大學(xué)的研究人員又進(jìn)行了另一項(xiàng)研究。這一次他們的目標(biāo)是：確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。
這一次研究人員發(fā)布了一個(gè)Android游戲，該游戲被下載約10萬(wàn)次，記錄了約1億2千萬(wàn)次點(diǎn)擊事件。游戲的玩法很簡(jiǎn)單：玩家要點(diǎn)擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動(dòng)圓圈來(lái)通關(guān)。
分析游戲中的點(diǎn)擊事件后，研究人員發(fā)現(xiàn)當(dāng)圓圈尺寸小于15毫米，玩家的錯(cuò)誤率逐步增加；當(dāng)圓圈小于12毫米左右時(shí)急劇上升；當(dāng)點(diǎn)擊目標(biāo)小于8毫米時(shí)，玩家沒(méi)點(diǎn)中圓圈的概率超過(guò)40%。
但圓圈的尺寸大于 12毫米時(shí)，玩家的正確率也沒(méi)有顯著的數(shù)據(jù)變化。即 12毫米 就像一個(gè)按鈕尺寸用戶體驗(yàn)的最大臨界點(diǎn)。
通過(guò)兩個(gè)實(shí)驗(yàn)印證了按鈕尺寸設(shè)計(jì)的科學(xué)性后，提煉出了4個(gè)關(guān)鍵數(shù)據(jù)：9.2毫米、9.6毫米、12毫米與15毫米。
而通過(guò)換算之后經(jīng)過(guò)換算可以發(fā)現(xiàn)，iOS 的按鈕建議尺寸約為 7毫米；Android 約為 9毫米。但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的，定義為 13毫米。
經(jīng)過(guò)數(shù)據(jù)的換算總結(jié)可以得出以下結(jié)論：
1.Android 所定義的 36pt 按鈕高度約為5.5毫米，在設(shè)計(jì)按鈕時(shí)，盡量不要低于這個(gè)高度（文字按鈕也應(yīng)該盡量把可點(diǎn)擊熱區(qū)擴(kuò)展到這個(gè)高度）；
2.36pt、44 pt、56 pt，這些規(guī)范參考數(shù)據(jù)在具體的頁(yè)面中需具體分析運(yùn)用，目前各大規(guī)范已放開(kāi)了按鈕高度的指導(dǎo)建議，并不是一定要讓按鈕保持一個(gè)固定的尺寸，只要在合適的可點(diǎn)擊范圍內(nèi)，均是合理的；
3.根據(jù)以上的實(shí)驗(yàn)結(jié)論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶可點(diǎn)擊概率，更多是視覺(jué)方面的考慮。
合理科學(xué)的按鈕尺寸可以讓用戶準(zhǔn)確地點(diǎn)擊并進(jìn)行操作，能夠避免發(fā)生類(lèi)似 iOS 9 Apple Music 所遇到的狀況。
我發(fā)現(xiàn)當(dāng)下許多 APP 好像或多或少會(huì)忽略按鈕的狀態(tài)樣式設(shè)計(jì)。似乎許多人認(rèn)為移動(dòng)端按鈕狀態(tài)并沒(méi)有 Web 端重要，可能是因?yàn)橐苿?dòng)端按鈕沒(méi)有 hover（懸?。?態(tài)，認(rèn)為按鈕在移動(dòng)端只有常態(tài)與點(diǎn)擊態(tài)，狀態(tài)較少，覺(jué)得用戶本身就易于區(qū)分。
但實(shí)際上MD規(guī)范提到按鈕狀態(tài)，不但沒(méi)有簡(jiǎn)單地一筆帶過(guò)，還展開(kāi)了一個(gè)專題進(jìn)行了深入研究，可見(jiàn)把UI控件的“狀態(tài)”準(zhǔn)確地反饋給用戶，是多么重要的一件事。
按照MD規(guī)范，按鈕的狀態(tài)，一般會(huì)發(fā)現(xiàn)有：
Enabled - 激活狀態(tài)（按鈕常規(guī)狀態(tài)）
Hover-懸浮狀態(tài)（Web場(chǎng)景下的鼠標(biāo)懸浮狀態(tài)）
Focused-聚焦?fàn)顟B(tài)（長(zhǎng)按聚焦?fàn)顟B(tài)，如長(zhǎng)按語(yǔ)音輸入）
Pressed-點(diǎn)擊狀態(tài)（按鈕被點(diǎn)擊按下的狀態(tài)）
Disable-禁用狀態(tài)（按鈕不可用的狀態(tài)）
Loading-加載狀態(tài)（我自行添加進(jìn)來(lái)的，當(dāng)下較為流行的多態(tài)按鈕）
正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式，對(duì)按鈕的合理設(shè)計(jì)與用戶體驗(yàn)而言其實(shí)十分重要。按鈕狀態(tài)可以有效地傳達(dá)給用戶當(dāng)前操作狀態(tài)，如發(fā)生失誤操作時(shí)可以及時(shí)止損，減少撤銷(xiāo)/返回操作的成本。
狀態(tài)樣式定義的過(guò)程其實(shí)并沒(méi)有想象中那么麻煩，一般視覺(jué)上可以高度與顏色來(lái)營(yíng)造效果。
· 高度 ：界面中往往使用陰影來(lái)營(yíng)造高度視覺(jué)差，例如常態(tài)時(shí)的陰影能夠營(yíng)造懸浮、可點(diǎn)擊的效果；禁用狀態(tài)取消陰影，可以營(yíng)造按鈕觸底，無(wú)法點(diǎn)擊的效果。
· 顏色 ：顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見(jiàn)性，并且針對(duì)每種不同的狀態(tài)，應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議，可以進(jìn)行參考。
“幫用戶做出最優(yōu)選擇”說(shuō)起來(lái)很容易，做起來(lái)卻容易被忽視或令產(chǎn)品設(shè)計(jì)者糾結(jié)頭疼，不然 Steve Krug 也不會(huì)寫(xiě)一整本《Don’t Make Me Think》來(lái)教大家如何揣摩用戶思想的書(shū)了。
我盡量從我能考慮得到的方面，聊了關(guān)于按鈕交互的設(shè)計(jì)點(diǎn)，可能不太全面，也歡迎補(bǔ)充與校正。至于按鈕的視覺(jué)設(shè)計(jì)，因?yàn)檫^(guò)于個(gè)性化，且篇幅原因，我就不再展開(kāi)討論了。
希望這篇文章能夠幫助到你對(duì)按鈕有新的認(rèn)識(shí)。我是耍家，我們下期再見(jiàn)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
點(diǎn)線面在用戶界面中的應(yīng)用貌似很少有人寫(xiě)，我挑業(yè)余時(shí)間進(jìn)行了大量案例的翻閱分析，發(fā)現(xiàn)其中確有規(guī)則。
首篇萬(wàn)字長(zhǎng)文獻(xiàn)給你。
用戶界面的本質(zhì)是資源的互換。
用戶為產(chǎn)品提供時(shí)間和注意力，產(chǎn)品為用戶提供單位時(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)的積累沉淀中很容易被其淹沒(méi)，而且每種手段背后又是什么樣的底層邏輯和依據(jù)？
為什么卡片讓頁(yè)面層次清晰？為什么面性圖標(biāo)擁有較高的辨識(shí)度？為什么步驟條會(huì)有橫縱之分？...
而點(diǎn)、線、面解決的就是這些內(nèi)在邏輯問(wèn)題，在你熟知它們的特性后，絕大多數(shù)的設(shè)計(jì)手段都可以被其解釋和串聯(lián)起來(lái)，并且讓你的設(shè)計(jì)決策和設(shè)計(jì)推導(dǎo)更加有據(jù)可依，而不是簡(jiǎn)單的“憑感覺(jué)”。
如果我們將各種設(shè)計(jì)手段比喻為各類(lèi)武學(xué)外功招式，那么點(diǎn)線面理論就好像吐納內(nèi)功，雖為最基礎(chǔ)的入門(mén)心法，但其對(duì)內(nèi)息的作用影響著所有招式的發(fā)揮。
點(diǎn)、線、面理論最早由瓦西里·康定斯基提出，他所著的《點(diǎn)、線、面》一書(shū)最早曾作為包豪斯學(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)、線、面三類(lèi)形態(tài)，并且每類(lèi)形態(tài)的存在、變化和結(jié)合，都可以為畫(huà)面?zhèn)鬟_(dá)出不同的樣式和風(fēng)格。
雖然用戶界面設(shè)計(jì)和平面設(shè)計(jì)分屬于兩個(gè)完全不同的設(shè)計(jì)行業(yè)，但點(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)講述每類(lèi)形態(tài)基于自身維度所擁有的特性，并如何通過(guò)存在、變化來(lái)在界面中發(fā)揮著各自的作用，實(shí)現(xiàn)合理高效的視覺(jué)引導(dǎo)。
正文開(kāi)始。
萬(wàn)物自一點(diǎn)始。
正如宇宙大爆炸源自一個(gè)引力奇點(diǎn)那樣，點(diǎn)是萬(wàn)物之源，也是所有元素的基礎(chǔ)。點(diǎn)從維度上來(lái)說(shuō)屬于零維，它沒(méi)有辦法像線、面那樣延伸，這決定了點(diǎn)本身的向心性和自由性。
康定斯基將點(diǎn)描述為“雄辯與沉默”，這句話的意思就是，當(dāng)點(diǎn)獨(dú)立存在于一個(gè)畫(huà)面中時(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)的向心性協(xié)助它成為視覺(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ò)在Complexion Reduction去形式化的浪潮洗禮下，這種方式已成為過(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)以其所具備的向心性幫助我們迅速得聚焦到它所在的位置。列表頁(yè)的每個(gè)字段前也會(huì)加入對(duì)應(yīng)含義的圖標(biāo)來(lái)幫助用戶迅速錨定當(dāng)前欄目，并且由于圖標(biāo)擁有更高的辨識(shí)性，這讓閱讀變得輕快而富有節(jié)奏。
下圖所示為Google日歷中的活動(dòng)頁(yè)表單，當(dāng)我們將字段前的圖標(biāo)去除時(shí)，閱讀沒(méi)有了強(qiáng)定位元素將會(huì)缺失節(jié)奏，信息獲取變得困難和緩慢，影響用戶表單的填寫(xiě)。
點(diǎn)是自由、精致的，它不會(huì)像線那樣有向兩端延伸的特性，這意味著它可以進(jìn)行各種形式、規(guī)則的排列組合以契合版面。
在這種分布形式下，點(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和QQ音樂(lè)的歌單也同樣利用了點(diǎn)化線引導(dǎo)瀏覽，只是圖片和阿拉伯?dāng)?shù)字的區(qū)別而已。
在這種分布形式下，點(diǎn)常常橫向排列在界面中（一排內(nèi)通常不超過(guò)5個(gè)），作為一個(gè)個(gè)快捷入口存在，形成網(wǎng)格式布局。
比如金剛區(qū)業(yè)務(wù)入口、書(shū)籍等類(lèi)型的布局都屬于網(wǎng)格式。這個(gè)布局下的點(diǎn)集合傾向于面元素，界面在這個(gè)布局下呈現(xiàn)出富有觀賞性的視覺(jué)張力，吸引用戶眼球，而且網(wǎng)格式的布局引導(dǎo)用戶視線均勻遷移，便于視覺(jué)區(qū)分。
既然講到這了，不得不提下上面兩種形態(tài)各自所在的版式——網(wǎng)格布局和列表布局。
通常來(lái)說(shuō)，靜態(tài)頁(yè)面中的內(nèi)容大致可分為圖、文兩大類(lèi)。
從形態(tài)上看，文本本身具有線那樣不斷延伸的特點(diǎn)，因此列表的橫向版面更適合長(zhǎng)文本的展示。而圖片、圖標(biāo)通常以固定尺寸的img獨(dú)立存在，可看作點(diǎn)元素，像上一節(jié)所講的，它既可存在于列表又可存在于網(wǎng)格。
從視覺(jué)動(dòng)線上看，列表布局的動(dòng)線屬于尼爾森等老前輩所提出的F型瀏覽模式。即用戶首先落點(diǎn)于左側(cè)的定位點(diǎn)，再由左向右進(jìn)行閱讀，接著再垂直掃視，當(dāng)定位到興趣點(diǎn)后繼續(xù)由左至右得閱讀。這種動(dòng)線符合人類(lèi)自然的閱讀模式。
并且在由上至下的視線遷移中，用戶的注意力勢(shì)必隨著路徑的拉長(zhǎng)而逐步遞減。
而這種遞減效應(yīng)讓列表式布局更適合基于產(chǎn)品及用戶習(xí)慣以某種規(guī)律排序。
郵件訊息以時(shí)間進(jìn)行排序，這是基于用戶查看最新消息的習(xí)慣；電商商品則默認(rèn)以相關(guān)性、銷(xiāo)量等因素綜合排序（同時(shí)買(mǎi)家可以根據(jù)價(jià)格、銷(xiāo)量等進(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ú)法迅速獲取它們。
網(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ì)像列表布局那么強(qiáng)烈。因此，網(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ū)分。
由此，我們大致可以梳理出兩種布局適用情況：
列表：適用于文本為主要展示，或者按照某種規(guī)律排序的信息。
網(wǎng)格：適用于圖片為主要展示，或者沒(méi)有排序規(guī)則，需要用戶通過(guò)圖片、圖標(biāo)辨識(shí)區(qū)分的信息。
當(dāng)然了，這兩種布局并非只能選其一，淘寶、京東這類(lèi)體量龐大的電商平臺(tái)便為了方便用戶習(xí)慣，提供了兩種布局視圖便于用戶隨時(shí)切換以降低決策成本。
另外，它常被作為一類(lèi)豐富畫(huà)面層次的手段。當(dāng)點(diǎn)不再按照橫縱方向排列分布時(shí)，便可作為圖案被用在特定場(chǎng)景的背景中，以降低背景過(guò)平過(guò)空的感覺(jué)。
比如美食杰封面的加載占位圖就以與產(chǎn)品相關(guān)的各種食材圖標(biāo)隨機(jī)得組合為圖案，飽滿的畫(huà)面減少了用戶等待時(shí)的枯燥無(wú)味。而QQ的群發(fā)布功能，在首個(gè)卡片背景中便加入了各種學(xué)習(xí)類(lèi)的圖標(biāo)隨機(jī)分布在卡片上，烘托出熱鬧趣味的氛圍，和下面的三個(gè)次要功能從卡片背景上迅速拉開(kāi)層級(jí)。
線條是一種簡(jiǎn)單、輕盈的存在，可以看作是點(diǎn)受外驅(qū)力作用下的運(yùn)動(dòng)軌跡。它從維度上來(lái)說(shuō)屬于一維，不同的外驅(qū)力結(jié)合使得線可以沿著任意方向自由得延伸，從而讓它擁有了高效的引導(dǎo)性、分割性和造型性。
康定斯基在書(shū)中以溫度去定義線的情感，他將水平線定義為無(wú)限冷能的表現(xiàn)形式，將垂直線定義為無(wú)限暖能的表現(xiàn)形式。看似晦澀難懂，但聯(lián)系到現(xiàn)實(shí)生活就相對(duì)容易理解一點(diǎn)。
現(xiàn)實(shí)生活中的水平線通常存在于地平線中，因此給人的感覺(jué)是穩(wěn)定、平和，類(lèi)似非啟動(dòng)時(shí)的“冷”態(tài)；而垂直線常見(jiàn)于那些從基線建造、生長(zhǎng)的事物，比如高樓大廈、參天巨木，它們都通過(guò)能量來(lái)實(shí)現(xiàn)垂直方向的高低變化，因此給人的感覺(jué)是上升、下落、變化等感覺(jué)，類(lèi)似啟動(dòng)后的“暖”態(tài)。
而線具備的冷暖態(tài)決定了水平和垂直線發(fā)揮各自作用時(shí)所傳達(dá)的感受。
線可沿任意方向延伸的特點(diǎn)讓它具備了很強(qiáng)的引導(dǎo)性。界面中最常見(jiàn)的就是跑步、地圖類(lèi)app中的路線顯示，就是通過(guò)線的引導(dǎo)性來(lái)顯示起點(diǎn)到終點(diǎn)所行進(jìn)的軌跡。
如果我們將起點(diǎn)和終點(diǎn)對(duì)齊歸于一條線上時(shí)，便可以通過(guò)降維的方式將其縮減至單個(gè)維度。
時(shí)間維度可以引申到界面中的時(shí)間軸、步驟條、加載條和音視頻中的進(jìn)度條等，這類(lèi)維度通常需要加入點(diǎn)元素，通過(guò)點(diǎn)的向心性輔助定位。空間維度則引申到滑動(dòng)頁(yè)面時(shí)出現(xiàn)的滾動(dòng)條等。
如上文對(duì)溫度的解釋，“暖”態(tài)的垂直線象征變化。當(dāng)我們希望用戶能夠感知到時(shí)間的變化，或者流程需要花費(fèi)較長(zhǎng)時(shí)間時(shí)，垂直線相對(duì)來(lái)說(shuō)是個(gè)更好的選擇。
比如外賣(mài)、快遞的訂單進(jìn)度，火車(chē)的?？空军c(diǎn)時(shí)間，timeline，到賬時(shí)間等信息，要么需要傳達(dá)變化感，要么費(fèi)時(shí)較長(zhǎng)，因此適合以象征變化的垂直線來(lái)進(jìn)行引導(dǎo)，給予用戶變化感、產(chǎn)生需要等待的心理預(yù)期。
“冷”態(tài)的水平線象征靜止。當(dāng)我們希望用戶能夠沉浸在這個(gè)流程中，感知不到時(shí)間的變化，或者流程時(shí)間極短時(shí)，那就更適合用水平線。
比如airbnb申請(qǐng)成為房東時(shí)，會(huì)有個(gè)需要用戶即時(shí)填寫(xiě)的分頁(yè)表單，為了讓用戶沉浸在填寫(xiě)中，同樣以水平線作為它的進(jìn)度反饋，降低時(shí)間變化感。
比如美團(tuán)買(mǎi)藥后的審方頁(yè)，藥師的審方進(jìn)度是即時(shí)性的，通常只需等待十幾秒即可。水平的靜止感能夠讓用戶產(chǎn)生“當(dāng)前正在發(fā)生”的感覺(jué)，避免讓用戶產(chǎn)生需要等待較長(zhǎng)時(shí)間的心理預(yù)期而離開(kāi)當(dāng)前頁(yè)面。
但是，如果我們將美團(tuán)審方的進(jìn)度條改為縱向（去除文案提示），給用戶帶來(lái)的感覺(jué)也就大不相同。
下文講到的分割性也可以以冷暖態(tài)來(lái)解釋。我們希望用戶能夠專心閱讀信息，因此會(huì)盡量避免容易帶來(lái)變化感的垂直分割線。即便迫于信息的劃分需要不得不用到，也會(huì)盡量降低它的明度和長(zhǎng)度。
另外，界面中往往也存在著一條無(wú)形的線，它同樣也是起著重要的引導(dǎo)作用，只是這類(lèi)線不僅僅作用于某個(gè)特定模塊，它還可以作用于整個(gè)界面。這條線通常被稱作 視覺(jué)動(dòng)線。視覺(jué)動(dòng)線在網(wǎng)格與列表那一節(jié)中簡(jiǎn)單提了下，只是這部分體系太過(guò)龐大，后面有時(shí)間我會(huì)單獨(dú)寫(xiě)一篇。
很多時(shí)候，界面中僅僅以留白進(jìn)行分隔時(shí)，很容易造成信息無(wú)法被明確得劃分。這時(shí)我們往往需要引入額外的形式進(jìn)行輔助。比如分割線。
分割線通常運(yùn)用在模塊內(nèi)部信息的分割，雖簡(jiǎn)單粗暴，但并不能應(yīng)付更高層級(jí)的模塊分割。而模塊之間的分割通常以面性（分割條）來(lái)進(jìn)行。留白、分割線和分割條三者的分割層級(jí)由低到高，通常需要在頁(yè)面中結(jié)合使用。
需要注意的是，線面的分割形式需要盡可能得輕量化，一旦擁有了視覺(jué)重量很容易成為噪音，我們需要盡量避免信噪比過(guò)低對(duì)用戶閱讀體驗(yàn)的破壞。
為了增加頁(yè)面的呼吸感，我們很多時(shí)候會(huì)用留白這種最為輕量的分割方式代替所有的線、面。
這類(lèi)大留白的特點(diǎn)往往與Complexion Reduction風(fēng)格相結(jié)合，視覺(jué)上不僅制造一種舒適的簡(jiǎn)約感和呼吸感，也減少了頁(yè)面中線面分割形成的視覺(jué)噪音。
Complexion Reduction最早源自Airbnb、Instagram、Medium等產(chǎn)品的頁(yè)面改版，而后被UX設(shè)計(jì)師Michael Horton所總結(jié)出的設(shè)計(jì)趨勢(shì)。蘋(píng)果在17年所發(fā)布的ios11同屬于這個(gè)風(fēng)格，這類(lèi)風(fēng)格最突出的三個(gè)特征就是大標(biāo)題、面性圖標(biāo)和克制用色。
但是，這種去形式化的分割方法并非適用于全部頁(yè)面，一般只有在頁(yè)面模塊單一、信息單元字段較少、或者以圖片本身作為分割方式的頁(yè)面才適合使用。
比如ikea和airbnb的首頁(yè)，它們并不像京東、支付寶有龐大的體量和業(yè)務(wù)需求，所以很適合全留白的方式。這讓它們的首頁(yè)看上去非常干凈清爽，富有呼吸感。
不過(guò)，在其他字段信息繁多的界面中，分割線依然是一種高效的分割方式。
我們可以看到，IKEA和airbnb的詳情頁(yè)依舊選擇了分割線的分割方式以應(yīng)對(duì)繁多的字段信息，避免全留白帶來(lái)的層級(jí)混亂。
線本身可以沿任意方向自由延伸，形成一條曲線、折線、螺旋線等等。而當(dāng)線的首尾相連時(shí)，便可以勾畫(huà)出面。
但是，線的閉合性所形成的面僅僅是一具沒(méi)有量感的空殼。但同時(shí)線條本身輕盈的特性讓其更加輕量、通透，因此對(duì)于一些辨識(shí)要求較低、或者需要被弱化的元素來(lái)說(shuō)往往是個(gè)不錯(cuò)的選擇。
界面中最常見(jiàn)的運(yùn)用就是幽靈按鈕和線性圖標(biāo)。
相比于面性按鈕和圖標(biāo)，量感的缺失讓其無(wú)法在辨識(shí)性上勝出，但是在其它地方也各有所長(zhǎng)。
幽靈按鈕常用于一些次按鈕、未選中態(tài)以及tag，線性圖標(biāo)常被用于一些次要功能、未選中態(tài)以及裝飾。
當(dāng)然，線面也可以根據(jù)產(chǎn)品自身需求作類(lèi)別區(qū)分。
比如支付寶和美團(tuán)這些產(chǎn)品，工具型圖標(biāo)全部線性，而業(yè)務(wù)型圖標(biāo)全部面性。并且線性圖標(biāo)得益于背景主色色塊的反白加成讓它們并不會(huì)被過(guò)度弱化。
虛線是點(diǎn)化線的最簡(jiǎn)易的表現(xiàn)。
但是因?yàn)樘摼€本身斷開(kāi)的地方太多了，并不適合用于常規(guī)信息的分割，它通常適用于一些特定的場(chǎng)景。
比如一些產(chǎn)品中的票券、賬單這類(lèi)特殊場(chǎng)景中，通常會(huì)加入虛線進(jìn)行信息的分割，就是為了映射模擬現(xiàn)實(shí)世界中便于撕開(kāi)的撕票線來(lái)增加代入感，減少認(rèn)知負(fù)荷。
虛線另一個(gè)特性是不可見(jiàn)性。
這個(gè)特性最早可追溯至建筑、機(jī)械等行業(yè)的制圖規(guī)范中——以同等點(diǎn)元素所構(gòu)成的虛線代表對(duì)象視覺(jué)盲區(qū)中的棱邊線及輪廓線。
一些漫畫(huà)或動(dòng)畫(huà)作品中當(dāng)一個(gè)東西突然不翼而飛時(shí)，往往會(huì)留下一個(gè)虛線的輪廓。
這種有意思的設(shè)定也被設(shè)計(jì)師引用到了用戶界面中。
比如當(dāng)我們想讓用戶去上傳一個(gè)圖片時(shí)，往往會(huì)采取一個(gè)虛線的矩形結(jié)合按鈕進(jìn)行引導(dǎo)，便是為了告訴用戶：嗨這塊地還是空的，快來(lái)加點(diǎn)料！
比如Pinterest、dribbble以及AntD的圖片類(lèi)upload組件，都采用了這種設(shè)定。
另外，這種形式也適用于空狀態(tài)的表示，比如dropbox。
面可以看作是線的運(yùn)動(dòng)軌跡，可以由一個(gè)閉合的線生成，也可以由點(diǎn)、線強(qiáng)化自身而來(lái)。
康定斯基在書(shū)中曾講到，線的強(qiáng)化加粗，與點(diǎn)不斷增大面臨同樣的問(wèn)題，即與面之間的臨界。
這句話的意思就是，當(dāng)點(diǎn)、線通過(guò)強(qiáng)化自身的面積、寬度后，和面的界限開(kāi)始模糊，從而具備了面本身的性質(zhì)。
比如ios11中讓人印象深刻的大標(biāo)題，便是由通過(guò)增加每個(gè)點(diǎn)的面積（增加每個(gè)字的字號(hào)），以及筆畫(huà)的線寬（增加每個(gè)字的字重）來(lái)趨向于面，以營(yíng)造出飽滿、沖擊的視覺(jué)張力。
面二維的屬性讓它可以向四周無(wú)限得擴(kuò)張自己的領(lǐng)土，這個(gè)優(yōu)勢(shì)讓面可以輕松承載各類(lèi)信息，并且也讓它具備了絕佳的視覺(jué)張力。
在一個(gè)點(diǎn)線面同時(shí)存在的畫(huà)面中，人眼優(yōu)先注意到的必定是擁有絕對(duì)視覺(jué)張力的面元素。這意味著面擁有著遠(yuǎn)勝于前兩者的辨識(shí)性，或者說(shuō)，在一部各類(lèi)元素參演的戲劇里，面更擅長(zhǎng)主角。
比如在一個(gè)放置了文字的界面中，我們希望其中一段比較重要的文字完全和其他文字區(qū)分開(kāi)，也就意味著這段文字需要進(jìn)行對(duì)比。
我們可以對(duì)這段文字加粗、加入顏色等等，這的確能做出一些明顯的變化。但是僅僅是對(duì)字體本身的強(qiáng)化，一旦界面需要?jiǎng)澐謱蛹?jí)，就會(huì)顯得很“平”，造成信息關(guān)系的曖昧。
不過(guò)，當(dāng)加入一層淡淡的色塊充當(dāng)文字背景后，便可以制造出極為明朗的層次關(guān)系。一方面，這段文字神奇得與其他信息迅速孤立開(kāi)來(lái)，另外，有面作為“靠山”讓它變得稍微與眾不同，并且相比其他文字能被更快得注意到。
當(dāng)然，如果你覺(jué)得它很重要，那你可以增強(qiáng)文字與背景的顏色對(duì)比，給面加入各種各樣的顏色。
而當(dāng)顏色對(duì)信息可讀性造成影響時(shí)，為保證信息的順利辨識(shí)，我們不得不對(duì)文字進(jìn)行反色處理，以此作為視覺(jué)落點(diǎn)來(lái)強(qiáng)制用戶迅速注意到它。這就是我們熟知的反白視覺(jué)手段。
面的這種強(qiáng)力屬性被用到了界面的方方面面，比如按鈕和圖標(biāo)。
相比前面所講的線性圖標(biāo)，面的辨識(shí)性讓面性圖標(biāo)可以更快得被識(shí)別。因此，界面中一些重要的業(yè)務(wù)入口通常都以醒目的面性圖標(biāo)存在，并且常以面性圖標(biāo)代表激活、選中時(shí)的狀態(tài)，線性圖標(biāo)代表未激活、未選中時(shí)的狀態(tài)。
不過(guò)線性圖標(biāo)薄弱的辨識(shí)性并非完全適合標(biāo)簽欄狀態(tài)的切換。
用戶在選中到當(dāng)前頁(yè)時(shí)，并不代表其他頁(yè)面徹底弱化了，用戶同樣需要關(guān)注其他未選中的頁(yè)面。
正因如此，ios11中所有未選中的icon全部由線性更改為了面性。同樣的，國(guó)內(nèi)的簡(jiǎn)書(shū)、天貓等產(chǎn)品也進(jìn)行了圖標(biāo)的改版以提升其他頁(yè)面的點(diǎn)擊率。
對(duì)于按鈕，面的辨識(shí)性為它的層級(jí)使用提供了更多可能。
如下圖，按鈕從樣式上來(lái)看大致有六種樣式，深色、淺色、淺灰色、幽靈、文字和圖標(biāo)按鈕，其中面性按鈕就占了一半。相比幽靈、文字和圖標(biāo)按鈕，三種面性按鈕都以面的強(qiáng)辨識(shí)性引導(dǎo)用戶迅速注意到它。因此面性按鈕相對(duì)對(duì)應(yīng)更高的層級(jí)。
當(dāng)頁(yè)面中存在多個(gè)功能按鈕時(shí)，就需要以樣式進(jìn)行主次之分。深色按鈕以強(qiáng)烈的顏色對(duì)比制造吸引力，因此常以深色表達(dá)層級(jí)最高的主按鈕，而次按鈕通常對(duì)應(yīng)層級(jí)較低的淺色、淺灰色等樣式。
當(dāng)頁(yè)面中沒(méi)有主次功能之分時(shí)，按鈕的樣式通常取決于當(dāng)前的用戶場(chǎng)景及業(yè)務(wù)需求。
比如知乎的答案詳情頁(yè)面，答主關(guān)注按鈕是淺灰色樣式，就是為了引導(dǎo)用戶沉浸在內(nèi)容中，避免深色樣式對(duì)閱讀造成干擾。而答主個(gè)人頁(yè)的關(guān)注變?yōu)樯钌?，則是由于用戶點(diǎn)擊答主頭像的行為來(lái)自了解更多的動(dòng)機(jī)，即用戶對(duì)其產(chǎn)生了特定興趣，在此場(chǎng)景下使用深色樣式便是為了引導(dǎo)用戶采取社交行為。
另外按鈕圓角的轉(zhuǎn)化也是為了強(qiáng)化信息的聚焦。關(guān)于圓角的內(nèi)容可以去我的前一篇文章《寫(xiě)給設(shè)計(jì)師看的圓角背后的邏輯》，里面有更詳細(xì)的講解。
app store同理。商品列表頁(yè)的按鈕一致以淺灰色樣式表達(dá)，而詳情頁(yè)使用了深色。
我們?cè)诎粹o樣式的選擇上，務(wù)必需要考慮到當(dāng)前的用戶場(chǎng)景，避免過(guò)低的信噪比而影響信息的傳達(dá)效率。
比如app store列表頁(yè)中，用戶的場(chǎng)景是非特定的瀏覽行為，如果使用深色按鈕將會(huì)讓其成為視覺(jué)焦點(diǎn)，強(qiáng)制用戶不斷注意到它，致使其成為“噪音”，影響用戶對(duì)有效信息的獲取。
面無(wú)限延展的屬性讓它可以承載各類(lèi)信息。包括文字、圖片或視頻元素，異或是元素自由組合所形成的信息單元。
并且我們僅加深界面的背景色，就可以基于面的分割性，通過(guò)控制模塊間距實(shí)現(xiàn)區(qū)域的劃分。（這里的間距即我們熟知的分割條）
但這種文字墻一般平鋪式的布局并不能更好得反映當(dāng)前模塊所在的層次，或者從用戶認(rèn)知上說(shuō)它們傾向于一個(gè)層面上。而且直角矩形的四個(gè)頂角所形成的四個(gè)焦點(diǎn)，也讓用戶的視線傾向于發(fā)散而非聚焦。直到卡片的出現(xiàn)，問(wèn)題得以順利解決。
卡片在我們生活中隨處可見(jiàn)，信件、名片、便利貼、甚至是我們的手機(jī)屏幕，它們從形態(tài)來(lái)說(shuō)都屬于面，并且都充分利用了面的承載性來(lái)充當(dāng)一個(gè)收納信息的容器或載體。
信件收納來(lái)信人的寄語(yǔ)，名片收納對(duì)方的個(gè)人信息、便利貼收納事項(xiàng)清單、屏幕收納用戶界面。而且它們方便攜帶，我們想要知道更多，打開(kāi)它即可。
2012年I/O開(kāi)發(fā)者大會(huì)中，隨安卓4.1系統(tǒng)一同驚艷亮相的Google Now首次將卡片展示在了用戶界面中。
這種后擬物時(shí)代的設(shè)計(jì)不僅一改Google以往混亂的信息展示問(wèn)題，而且熟悉的擬物感收獲了足量用戶的喜愛(ài)。初嘗甜頭之后，Google將卡片應(yīng)用到了所有的產(chǎn)品，并且將其作為基礎(chǔ)元素列入了一門(mén)偉大的設(shè)計(jì)語(yǔ)言中——material design。
你可以在material design中更系統(tǒng)得看到，google通過(guò)為界面添加了z軸（海報(bào)高度），來(lái)擬物映射生活中的一張張卡片。并且通過(guò)陰影的濃淡反應(yīng)卡片所在的高度，通過(guò)不同的高度實(shí)時(shí)反映當(dāng)前元素的層級(jí)關(guān)系。
而在ios11中，改版后的app store也使用了大量的卡片進(jìn)行排列組合，形成格外的清晰的頁(yè)面層次引導(dǎo)用戶的視覺(jué)動(dòng)線。
相比原本平鋪直敘的信息，卡片式設(shè)計(jì)通過(guò)以下優(yōu)點(diǎn)讓其風(fēng)靡設(shè)計(jì)界——
1.更高效得獲取信息
每張卡片都是一個(gè)獨(dú)立的面。從面的辨識(shí)性上說(shuō)，獨(dú)立和聚焦的特點(diǎn)讓卡片與其他內(nèi)容形成天然的斷層，更易形成視覺(jué)焦點(diǎn)。
從面的分割性上說(shuō)，卡片通過(guò)犧牲屏幕空間（四周的塊外距）的方式讓區(qū)域的分割相較分割條更為明確，清晰的層次關(guān)系便于用戶迅速辨識(shí)和獲取信息。
比如改版后的支付寶，通過(guò)引入圓角卡片來(lái)引導(dǎo)用戶更好得留意到下方的各類(lèi)生活服務(wù)，以實(shí)現(xiàn)向生活服務(wù)數(shù)字平臺(tái)的轉(zhuǎn)型。
2.更輕量的入口跳轉(zhuǎn)
每個(gè)卡片除了承載信息外，都可以作為單獨(dú)的入口承載內(nèi)頁(yè)的所有信息，并且卡片的屬性讓內(nèi)頁(yè)的展示變?yōu)榱苏归_(kāi)而非跳轉(zhuǎn)。
比如app store點(diǎn)擊卡片后，便以非線性的展開(kāi)動(dòng)畫(huà)呈現(xiàn)所有內(nèi)頁(yè)信息，返回則只需下滑手勢(shì)即可，輕量而有趣。
3.更多的交互手勢(shì)
卡片獨(dú)立的特點(diǎn)讓它可排列也可堆疊，這為頁(yè)面帶來(lái)了更多的交互方式。
我們可以通過(guò)左右滑動(dòng)（scroll）解鎖橫向更多的空間，也可以左右輕劃（flick）形成類(lèi)似tinder那樣新的產(chǎn)品機(jī)制。
比如知乎的書(shū)架引入滑動(dòng)手勢(shì)展示更多內(nèi)容，輕劃手勢(shì)切換問(wèn)題卡片。
4.更舒適的視覺(jué)觀感
卡片基于自身獨(dú)立的特征讓它成為網(wǎng)格布局的常用載體，富有觀賞性的視覺(jué)張力讓頁(yè)面更加吸引眼球。
當(dāng)然，卡片并不是通用的，原本可以靠留白或分割線分割的信息，如果為了視覺(jué)效果硬是卡片化處理，就會(huì)導(dǎo)致閱讀的低效，而且浪費(fèi)空間。
比如常見(jiàn)的一些feed流，相比卡片，這類(lèi)同類(lèi)的信息流更適合以列表來(lái)幫助用戶迅速得掃視，并節(jié)省頁(yè)面空間。
產(chǎn)品的功能并非完全互相剝離的，很多時(shí)候存在包含和平行的關(guān)系。
這兩類(lèi)關(guān)系分別可以以卡片的嵌套和分割進(jìn)行處理。前者通過(guò)卡片堆砌表達(dá)信息的包含關(guān)系，而后者則通過(guò)視覺(jué)分割所形成的點(diǎn)擊域傳達(dá)信息的平行關(guān)系。
比如天貓點(diǎn)評(píng)頁(yè)中的金香蕉好物推薦，每個(gè)卡片承載了商品信息以及點(diǎn)評(píng)信息，通過(guò)卡片的嵌套表示出兩者的包含關(guān)系。而單條推選理由及入口的引導(dǎo)屬于平行關(guān)系，因此采用了視覺(jué)分割來(lái)進(jìn)行劃分。
并且前者跳轉(zhuǎn)的是點(diǎn)評(píng)詳情，后者跳轉(zhuǎn)的頁(yè)面中包含了所有點(diǎn)評(píng)、商品推薦以及我要點(diǎn)評(píng)，因此在后者所屬的面中加入了淡淡的一層業(yè)務(wù)主色來(lái)強(qiáng)化它的地位。
在支付寶改版后的卡包頁(yè)中同樣進(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)行了有效的視覺(jué)及情緒引導(dǎo)：黑色背景進(jìn)行反白處理將其作為一個(gè)單獨(dú)的視覺(jué)落點(diǎn)，強(qiáng)制用戶注意到這里，并且又傳達(dá)了付費(fèi)用戶所尊享的高級(jí)感。
自從ios7轉(zhuǎn)型扁平后，線元素在蘋(píng)果設(shè)計(jì)語(yǔ)言中一直占有重要地位，線自身的纖細(xì)、輕盈感可以迅速打造apple獨(dú)有的輕量調(diào)性，不僅是按鈕、圖標(biāo)的樣式，字體本身也更加傾向纖細(xì)的字重。
但是，這個(gè)僵局在ios11發(fā)布的那天被徹底打破。
2017年6月6日，蘋(píng)果設(shè)計(jì)師喬納森仿佛和線有了隔夜仇一般，從解鎖頁(yè)面到原生應(yīng)用中，原本ios10中曾經(jīng)被大量使用的線元素基本全部被面元素取代。
比如鎖屏頁(yè)面，所有撥號(hào)按鈕全部由幽靈樣式改為了面性樣式，而數(shù)字字重的變粗也是一種化面的傾向。這使得按鈕及文字更易辨識(shí)，并且降低了線圈所產(chǎn)生的視覺(jué)噪音。
app store中也同樣發(fā)生著形態(tài)的易主。
你可以在下圖中看到，原本的幽靈按鈕全部改為了淺灰色面性按鈕。用于劃分信息的分割線明度也得到了克制。
另外，11代中眾所周知的大標(biāo)題同樣也可以看做化面的傾向（通過(guò)增加自身的面積），強(qiáng)烈的視覺(jué)張力引導(dǎo)用戶迅速得進(jìn)行辨識(shí)。
另外，所有的數(shù)字全部提至文字的前方，基于用戶由左至右的動(dòng)線更突出產(chǎn)品自身，以點(diǎn)化線的形式更好得引導(dǎo)用戶進(jìn)行掃視。
追求極致的蘋(píng)果顯然不能容忍tab中未選中態(tài)下出現(xiàn)的線元素，你可以在ios13中看到，線元素得到了徹底的消除，并且顏色一并得到了克制，再次提升了閱讀內(nèi)容的沉浸感。
ios11中的商品詳情頁(yè)獲取按鈕也同樣使用了面性，深色的強(qiáng)調(diào)樣式更好得契合了頁(yè)面所在的用戶場(chǎng)景，召喚用戶對(duì)其感興趣的商品采取點(diǎn)擊行為。
控制中心頁(yè)面，基于面元素的承載與分割性，所有的信號(hào)類(lèi)功能獨(dú)立收納到了卡片中。
亮度和音量的調(diào)節(jié)則由橫向的線性滑竿控制條改為了縱向的面性控制塊。一方面增強(qiáng)了兩者的辨識(shí)力，另一方面，根據(jù)菲茨交互定律，面積的增大帶來(lái)了更好的點(diǎn)擊體驗(yàn)。這一點(diǎn)在miui11的控件優(yōu)化中也得到了應(yīng)用。
所有的未選中態(tài)圖標(biāo)也進(jìn)行了面性處理，大幅提升了10代中未選中頁(yè)標(biāo)簽的辨識(shí)性。并且每個(gè)圖標(biāo)對(duì)應(yīng)的文字也進(jìn)行了加粗。
縱觀ios11中所有形態(tài)的變化，我們可以發(fā)現(xiàn)這次改版的最終目的是：促進(jìn)內(nèi)容的高效獲取。
順從作為蘋(píng)果歷來(lá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)，它更類(lèi)似一種內(nèi)斂的全局觀，幫助設(shè)計(jì)師拋開(kāi)顏色、質(zhì)感等額外手段，從宏觀的角度以點(diǎn)、線和面的方式將所有的設(shè)計(jì)元素抽象化處理，讓原本雜亂無(wú)序的萬(wàn)象有章可循。
最后，以康定斯基的一句話結(jié)尾——
此篇完。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
一、項(xiàng)目背景
隨著精準(zhǔn)醫(yī)療興起，實(shí)現(xiàn)個(gè)體化診療需大量生物樣本數(shù)據(jù)支撐 。然而現(xiàn)實(shí)中，生物樣本數(shù)據(jù)雖海量，卻無(wú)序且利用不充分，各醫(yī)療機(jī)構(gòu)還面臨計(jì)算資源短缺、存儲(chǔ)共享難和安全風(fēng)險(xiǎn)高等問(wèn)題。臨床生物樣本大數(shù)據(jù)中心網(wǎng)站為不同醫(yī)療機(jī)構(gòu)、科研機(jī)構(gòu)和企業(yè)之間的合作提供了一個(gè)平臺(tái)，促進(jìn)了跨機(jī)構(gòu)的生物樣本數(shù)據(jù)共享和合作研究，打破了數(shù)據(jù)孤島，實(shí)現(xiàn)了資源的優(yōu)化配置和協(xié)同創(chuàng)新。
接到設(shè)計(jì)需求后，藍(lán)藍(lán)團(tuán)隊(duì)專門(mén)去客戶現(xiàn)場(chǎng)面對(duì)面交流，更好地捕捉客戶的細(xì)節(jié)要求。該網(wǎng)站是國(guó)內(nèi)首個(gè)開(kāi)放式生物樣本數(shù)據(jù)中心。在設(shè)計(jì)過(guò)程中參考了很多國(guó)外設(shè)計(jì)，整體風(fēng)格國(guó)際化。首頁(yè)提案設(shè)計(jì)過(guò)程中藍(lán)藍(lán)團(tuán)隊(duì)嘗試了不同的視覺(jué)風(fēng)風(fēng)格以及交互方式，整體以“美觀、簡(jiǎn)潔、易用”為主要設(shè)計(jì)目標(biāo)。
二、項(xiàng)目概述
(一)產(chǎn)品定位
臨床生物樣本大數(shù)據(jù)中心網(wǎng)站是專業(yè)的醫(yī)學(xué)數(shù)據(jù)平臺(tái)。面向醫(yī)學(xué)科研人員、臨床醫(yī)生及生物醫(yī)藥企業(yè)，整合多源臨床生物樣本數(shù)據(jù)，涵蓋豐富疾病類(lèi)型與人群特征。以嚴(yán)格的數(shù)據(jù)質(zhì)量控制確保準(zhǔn)確性與可靠性，提供強(qiáng)大數(shù)據(jù)分析工具。建立共享機(jī)制，促進(jìn)合作交流。專注臨床數(shù)據(jù)領(lǐng)域，保障數(shù)據(jù)安全與良好用戶體驗(yàn)，致力于成為醫(yī)學(xué)研究與臨床應(yīng)用的有力支撐。
(二)目標(biāo)用戶
臨床生物樣本大數(shù)據(jù)中心網(wǎng)站的目標(biāo)用戶主要包括醫(yī)學(xué)科研人員、臨床醫(yī)生和生物醫(yī)藥企業(yè)。醫(yī)學(xué)科研人員可借助豐富的臨床樣本數(shù)據(jù)開(kāi)展各類(lèi)研究項(xiàng)目，提升研究效率與可靠性。臨床醫(yī)生能通過(guò)該網(wǎng)站獲取疾病信息，為診斷和治療決策提供參考，跟蹤最新研究進(jìn)展以提高醫(yī)療水平。
(三)設(shè)計(jì)風(fēng)格
網(wǎng)站主色調(diào)采用藍(lán)色，且與logo保持一致，藍(lán)色通常與專業(yè)、可靠、冷靜等特質(zhì)聯(lián)系在一起。對(duì)于該網(wǎng)站來(lái)說(shuō)，藍(lán)色的界面可以讓用戶（包括醫(yī)療專業(yè)人士、研究人員和患者等）感受到網(wǎng)站的專業(yè)性，仿佛在傳達(dá) “我們是值得信賴的專業(yè)機(jī)構(gòu)，能夠妥善處理和管理重要的生物樣本數(shù)據(jù)”。
三、設(shè)計(jì)前后對(duì)比
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com