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