作為 UI 設計師來說，掌握產(chǎn)品設計中的每個組成要素是非常必要的，所謂精細化的設計就是把控好每一個細節(jié)的深入。隨著大屏手機的普及，在人機交互的探索上面設計師追求著更多提高用戶體驗的設計方式，不過萬變不離其宗，用戶體驗沉淀下來的行為習慣依然影響著我們的設計。
就拿導航設計來深入探索，隨著產(chǎn)品設計的不斷推進，很多新穎的設計呈現(xiàn)帶給用戶更多的操作體驗。本文就以移動端底部標簽欄導航為案例分析，和大家一起探索一下底部標簽欄導航設計的千奇百態(tài)。
分享目錄
一、關于底部標簽導航
二、UI 設計注意事項
三、UI 表現(xiàn)層類別分析
四、移動端線上案例分析
五、總結
一、關于底部標簽導航
移動端導航欄設計相當于自身的骨架，是支撐產(chǎn)品中功能交互和內容傳播的血肉。導航系統(tǒng)指引著用戶的操作軌跡，引導用戶抵達目的地和進行相關的操作，將零散的內容和功能進行組織形成結構化的可視軌跡。導航的存在因此顯得格外重要，也是梳理功能結構需要重點確定的內容，以此來形成整個產(chǎn)品的脈絡。
移動端導航欄比較常見的有：底部標簽欄導航、舵式導航、頂部標簽(Tab)導航、宮格式導航、輪播（平鋪）式導航、懸浮 icon 導航、列表式導航欄、抽屜式導航、下拉導航/菜單導航等等。我們比較常見的產(chǎn)品中采用底部標簽欄導航的居多，便于用戶進行頻繁的操作，這也是本文接下來重點和大家探索的話題方向。
在移動端產(chǎn)品中底部標簽欄導航是最常用的導航模式，常作為一級目錄的導航，位于產(chǎn)品界面底部。根據(jù)用戶對于界面的操作熱區(qū)來看，底部是用戶可以輕松點擊的區(qū)域，無論用戶單手還是雙手操作都十分便利。
在底部標簽欄導航的基礎上進行拓展欄設計也是比較常見的形式，也就是舵式導航。突出中間的功能強化用戶的關注度，引導用戶使用更多延展功能。底部標簽欄導航和底部（舵式）拓展欄都屬于底部導航的范圍，本文將會重點以此類型為主進行梳理。
二、UI 設計注意事項
底部標簽欄導航非常直觀的告訴用戶當前的位置，也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性，不會與其他功能模塊形成干擾，也能與多種導航模式進行組合使用。
底部標簽欄導航在模塊的選擇上面通常是 3-5 個，比較常見的為 5 個，3 個模塊相對比較松散，運用案例不是很多，除非業(yè)務功能較少。在設計表現(xiàn)形式上面有：icon + 文字、純 icon、純文字形式，比較主流的還是 icon + 文字的形式，可以降低用戶的理解成本和記憶負擔，提高用戶的操作體驗。
底部（舵式）拓展欄是為了突出中間功能設計，吸引用戶關注度，提高更多隱藏功能的使用概率。這種導航模式較為常見，比如轉轉、抖音、馬蜂窩旅游、閑魚等等均有使用?？梢蕴岣邔Ш綑谠O計的趣味性和特征性，引導用戶操作更多功能和貢獻更多內容。不過這樣的設計由于關注度被吸引，進而影響其它一級模塊的關注度，由于隱藏的功能增加了用戶的記憶負擔和操作負擔，利弊權衡需要產(chǎn)品設計師進行評估。
在進行設計的過程中，功能模塊的確定需要起到牽引的重要作用，鏈接起整個產(chǎn)品的功能脈絡；設計表現(xiàn)上面需要區(qū)分默認和點擊狀態(tài)，可以跳出規(guī)范的束縛，但是需要在不影響其它業(yè)務模塊的前提下進行。
三、UI 表現(xiàn)層類別分析
底部標簽欄導航在 UI 表現(xiàn)層方面也是千奇百態(tài)，除了常規(guī)的置底形式，設計師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛，不被固有化思維所限制，才能不斷的進行設計創(chuàng)新。
3.1 最穩(wěn)定的常規(guī)設計形式
底部標簽欄導航最常見的設計形式依然是置于底部的常規(guī)形式，通常是 3-5 個功能模塊為主，其中 5 個功能模塊是較為常見的。形成差異化的是在圖標設計上面進行發(fā)揮，難度較大的設計是結合品牌基因或者特征性元素表達，也有一些是純文字的設計形式。
除了圖標上面進行發(fā)揮以外，也有一些會在背景上面進行裝飾，體現(xiàn)產(chǎn)品差異化。不過最常見的依然還是單色為主，或者根據(jù)模塊的需求在切換的過程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導航模式，但是設計師依然可以在布局形式、圖標風格、配色關系、背景裝飾等方面進行發(fā)揮。
3.2 動靜結合的微動效表現(xiàn)
微動效在產(chǎn)品設計中的運用逐漸變得頻繁，相較于靜態(tài)的表現(xiàn)更能引起用戶的關注度，也能帶來趣味性和互動性。在底部標簽欄導航中的圖標設計上面，默認的采用靜態(tài)展示，而點擊狀態(tài)以動效的形式進行演變過度也是非常常見的設計處理。
在進行動效設計的時候，可以采用整個圖標位移形成動效，這是最簡單的動效表現(xiàn)，通常是上下彈跳位移。比較復雜的是圖標本身的結構動效，這也是圖標動效轉換比較連貫的形式。
3.3 突出規(guī)范框架的束縛表現(xiàn)
雖然大部分產(chǎn)品設計都會優(yōu)先采用官方的設計規(guī)范，但是為了突出設計的差異化，也會進行一些突出規(guī)范框架的設計。在保持原有不變的導航設計中，我們可以針對局部功能模塊進行突出表現(xiàn)（比如舵式導航），也可以將點擊狀態(tài)進行突出表現(xiàn)。
3.4 懸浮層增強空間感
一些產(chǎn)品為了增強界面結構的空間感，針對底部標簽欄導航設計采用懸浮層的設計來進行表現(xiàn)，使得界面的通透性和呼吸感更強。這種設計形式依然保留了原本的結構，只是預留了左右和底部的間距，也有一些產(chǎn)品結合交互動效的形式表達，滑動過程中采用隱藏部分功能，增加瀏覽過程的內容輸出面積。
3.5 底部拓展/隱藏式設計
隨著一些工具型產(chǎn)品的使用，功能模塊變得復雜而繁多，也有將更多功能隱藏在底部標簽欄里面，上拉交互時顯示。這種設計形式將底部標簽欄進行了深度的開發(fā)利用，但是功能隱藏比較深，曝光度受到了一定的影響，不適合較為重要的功能模塊設計。
3.6 小結
底部標簽欄導航在 UI 表現(xiàn)層方面還有更多可以給予設計師發(fā)揮的空間，設計沒有固定不變的形式，在于不斷的發(fā)現(xiàn)、總結和創(chuàng)新。期待大家發(fā)現(xiàn)更多設計解決方案和進行更多設計創(chuàng)新，下面將會為大家梳理線上的優(yōu)秀案例，讓我們可以站在巨人的肩膀上不斷超越。
四、移動端線上案例分析
移動端底部標簽欄導航設計在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例，對于線上案例的分析將有助于我們進行落地性的思考，新穎的設計不再是飛機稿，而是可以實現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結、分析和改變，希望這些案例可以帶給你點滴靈感。
4.1 背景結合特定節(jié)日增強氛圍
在大部分情況下底部標簽欄導航的背景為單色的居多，不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節(jié)日結合氛圍營造對背景進行簡單的裝飾，可以在節(jié)假日或者特殊時期引起用戶的共勉，增強產(chǎn)品的情感化設計。
比如寶寶巴士兒歌 APP 的底部標簽欄導航設計，在之前的一些版本迭代過程中，結合特定氛圍營造進行背景設計，也是一種非常不錯的設計表達形式。由于屬于兒童類產(chǎn)品，點擊功能模塊切換的過程中還伴隨著音樂，視聽體驗的結合使得操作體驗備受關注。
4.2 強化消息提示的關注度
系統(tǒng)通知或者消息提示往往都會被用戶所忽略，盡管很多產(chǎn)品都會將消息作為單獨的功能模塊來設計，但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結合在個人中心的設計中，以氣泡彈出的形式展示在圖標紅點提示上方。以此來吸引用戶的關注度，增加消息閱讀率。
4.3 特異設計引導功能模塊關注度
在底部標簽欄導航的多個功能模塊中，為了突出或者引導使用某個功能時，會采用特異構成的設計做法，在原本的設計規(guī)范上面突出表現(xiàn)個例，以此來引起用戶的關注度。比如騰訊動漫在第一次進入 APP 時，圈子的圖標設計會特意突出，點擊之后恢復原樣，以此吸引用戶對該欄目的關注，增強功能模塊的使用率。
4.4 圖標設計的年輕化趨勢
隨著 95 后成為互聯(lián)網(wǎng)原住民，產(chǎn)品設計逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級后設計風格更年輕化，底部標簽欄圖標設計采用低純度、高明度的多色漸變，結合微動效使得風格更加青春活潑，符合年輕一代的審美需求。年輕化的設計不僅提高感官體驗，也拉近了產(chǎn)品與用戶之間的親和力。
4.5 趣味性的情感化設計融入
情感化的設計能夠拉近產(chǎn)品與用戶之間的親和力，這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言，如何更加符合年輕化的設計需求，在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情，在拖拽的時候會切換不同的表情，帶給用戶更加趣味性的體驗，讓人會心一笑。
4.6 首頁圖標強化品牌曝光
為了強化產(chǎn)品品牌的曝光度，在進行底部標簽欄圖標設計的時候，會將首頁圖標的點擊狀態(tài)切換為品牌 LOGO 的形式，以此來增加品牌的曝光度。設計上面的選擇有 LOGO 圖形、吉祥物、應用圖標、品牌局部圖形等，會根據(jù)品牌 LOGO 的造型靈活選擇。
4.7 舵式導航轉一轉增強關注度
底部（舵式）拓展欄導航是突出中間功能模塊設計來強化關注度，除了靜態(tài)的表達以外，結合微動效更能起到強化突出的作用。轉轉結合吉祥物和微動效運用在舵式導航的設計中，不僅提高用戶的關注度，情感化的設計還能增強產(chǎn)品的親和力。
4.8 結合營銷內容多層共用
產(chǎn)品中的營銷結合是最為常見的，產(chǎn)品設計師也在不斷地思考更多可結合的功能模塊，舵式導航的區(qū)域被充分利用是最為便利的。芒果 TV 將營銷內容與會員模塊圖標進行結合，在保持原有功能操作的基礎上強化營銷活動的曝光度，鼓勵更多用戶參與活動。
4.9 微動效結合多層功能運用
微動效運用到底部標簽欄導航圖標動效中較為常見，可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設計的產(chǎn)品，也會在用戶上滑瀏覽內容到一定量的時候將首頁變化為“置頂”的操作，方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標的設計中，結合微動效的變化帶給用戶趣味性和強化品牌記憶，在首頁圖標和置頂圖標切換的過程中也采用了微動效的形式，過度更加自然流暢，也能更加醒目的提示用戶。
4.10 微動效結合突出框架的束縛
一些尋求突破的產(chǎn)品，在設計的時候也嘗試了突出規(guī)范框架的束縛表現(xiàn)，點擊狀態(tài)會突出局部來強化。結合動效的變化形成自然過度，突出的設計更能引起用戶的關注度，明確自己當前所處的位置。這樣的表現(xiàn)形式不僅可以形成設計差異化，也能讓用戶操作路徑更加明顯，比如愛奇藝早期版本、美團外賣等產(chǎn)品。
4.11 懸浮層設計突破底部標簽欄常規(guī)表現(xiàn)
設計師都在不斷的探索設計的差異化，敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標簽欄的設計采用懸浮層的形式表現(xiàn)，使得界面內容呈現(xiàn)的呼吸感更強，也增加了界面結構的空間感。在保持基本設計規(guī)范的前提下進行小小的變化，就能帶來設計的差異表現(xiàn)，也能帶給用戶較為新穎的感官體驗。
4.12 懸浮層設計結合交互動效的雙向運用
交互動效是 UI 設計師在靜態(tài)設計稿中要逐步突破的一種技能，交互動效可以讓我們的設計表達更加直觀，提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游在進行底部標簽欄突破的過程中，除了采用新穎的懸浮層設計以外，在上滑瀏覽內容時采用隱藏局部功能的處理方式，讓內容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航，探知用戶行為習慣并給出不同的交互反饋，帶給用戶更高的操作體驗和互動趣味性。
4.13 底部拓展設計承載更多功能模塊
對于一些功能模塊較多的產(chǎn)品，產(chǎn)品設計師會盡可能的開發(fā)每一個常規(guī)的功能，拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候，就將更多功能模塊隱藏在上拉展開欄中，方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘，利用手勢的變化實現(xiàn)更多功能模塊的切換，提高了用戶的操作體驗。
關于移動端底部標簽欄導航設計還有很多非常不錯的線上案例，這里就不一一列舉啦！優(yōu)秀的案例總結能夠帶給我們更多的靈感參考，基于優(yōu)秀之上我們才能設計出更新穎的作品，希望以此拋磚引玉，期待大家發(fā)現(xiàn)更多好玩的設計。
五、總結
對于 UI 設計師來說，產(chǎn)品體驗是一種習慣的養(yǎng)成，結合體驗的日記化摘錄形成設計思路的總結?？偨Y是為了形成最終可供靈感借鑒的經(jīng)驗，基于優(yōu)秀的案例分析才能形成更多的設計解決方案。
本文以移動端底部標簽欄導航設計的經(jīng)驗分析為大家進行梳理，任何的設計表達都不是不變的規(guī)律，掌握的是這種設計分析和總結的思路，以此反推出更多的設計總結。希望本文的思路作為拋磚引玉，帶給你更多的思路。
本文將從對當下常見banner的設計規(guī)則等進行剖析，并融入自己的思考和總結，著重從用戶的角度去思考一張banner廣告的設計規(guī)律。
你一定也發(fā)現(xiàn)了，在這個時代下只要處在同一賽道的產(chǎn)品，大多數(shù)免不了日趨同質化，不論是功能還是形式、內容還是算法。就拿內容型產(chǎn)品來舉例：去掉顏色，以下四個產(chǎn)品的首頁，你能分得清誰是誰嗎？
雖然可以做品牌差異化，但很多產(chǎn)品在招牌打響前，也會經(jīng)歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候，通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。
之前在團隊有幸負責過一次產(chǎn)品趣味性的探索，雖未全部落地，但沉淀了不少經(jīng)驗。今天，我將這些經(jīng)驗以文章的方式分享給你，希望對你有所啟發(fā)。
為什么產(chǎn)品需要趣味性
1.符合本能需求
馬斯洛的“需求層次理論”（Hierarchy of Needs）你一定聽過。這個理論提出人類的需求狀態(tài)是持續(xù)不斷的，一段時間內，個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看，人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后，自然會需要情感的滿足。
尤其現(xiàn)在這個相對嚴峻、內卷成風的時代下，大家都渴望在上了一天班之后，自己用的產(chǎn)品可以給自己解壓，而不只是個單純的冷血工具。
2.影響用戶行為
產(chǎn)品傳達趣味性的信息，那么這些信息便更容易被用戶接受、甚至激發(fā)興趣。正如用戶關系和精準化運營的先驅——史蒂文·貝萊格姆的那句話：“趣味是設計產(chǎn)品中最人類化,最直接,最能引起人們興趣的因素。”
根據(jù)艾達模型這個經(jīng)典理論，一旦用戶對某件事產(chǎn)生興趣后，則更容易促成他的決策、乃至最后行為的發(fā)生。畢竟我們絕大多數(shù)的決策并非源自理性。
另外，《瘋傳》這本書提及過一個重要的概念：情緒喚醒。當情緒喚醒度較高時，往往會更容易激發(fā)用戶的分享行為（比如愉悅、驚喜這樣的正面情緒，當然也會包括憤怒、恐懼這樣的負面情緒）。而產(chǎn)品所呈現(xiàn)的趣味性，很大程度上更容易引發(fā)用戶的高喚醒情緒，從而主動采取一些產(chǎn)品希望他實施的行為。
3.緩解負面情緒
使用一款產(chǎn)品的過程中，必然會出現(xiàn)不夠正向的反饋，比如404、斷網(wǎng)、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力，很容易造成行為中斷甚至流失。
但此時如果通過一種趣味性的方式呈現(xiàn)，很大程度上可以緩解用戶的負面情緒。
比如readme的登錄頁面，當你輸入密碼時，貓頭鷹捂住雙眼，很好得緩解了用戶的不安全感。再比如餓了么，惡劣天氣下會實時記錄當前的天氣狀態(tài)，通過同理心的觸發(fā)也可以緩解用戶等待時產(chǎn)生的焦慮。
4.實現(xiàn)情感鏈接
對應諾曼在《情感化設計》中的「反思層」，通過品牌差異、獨有內涵等方式來喚起用戶深層的記憶和情感，產(chǎn)生情感共鳴，從而形成認知，建立起深厚的情感鏈接，以讓用戶越來越忠實于產(chǎn)品。此時產(chǎn)品作用更多的是作為一個承擔情感的載體。
我們旅游時經(jīng)常會購買一些貌似沒什么實用性的紀念品，明信片、木雕、徽章等等，可能最多只能放在房間當裝飾。但是紀念品的關鍵意義，在于承載著旅游時的記憶。類似的還有單機游戲發(fā)售時，除了標準版外，往往會同步發(fā)售包含手辦、美術設定集等物品的豪華版，同樣用來承載玩家的情懷。
最典型的例子，就是Google的Doodle設計，在不同的節(jié)日、紀念日、或者緬懷一些先驅、藝術家時，會投入很高的成本起設計各種趣味性的插畫logo，豐富有趣，而且很多時候可以支持互動游戲。比如18年的萬圣節(jié)，就做了一個有趣的多人對戰(zhàn)的小游戲。
Doodle不僅是Google文化、價值觀的象征，也通過這種趣味性的創(chuàng)意讓用戶實現(xiàn)更深層次的情感交流，建立情感紐帶并增加粘性，不會輕易得流失到其他替代品中。
趣味性是什么
關于這個概念，有三條相對客觀專業(yè)的說法。
德國古典哲學創(chuàng)始人康德《實用人類學》中，指出趣味性是人類由于受到外部環(huán)境的影響而對客觀事物產(chǎn)生的直接的感性反應，不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思，從而心理產(chǎn)生愉悅的變化。
另外，康德在《判斷力批判》也指出，趣味是指主體以積極主動的姿態(tài)，在超功利的層次上對某一對象表現(xiàn)出喜愛和愉悅的情緒狀態(tài)。
《漢語詞典》將趣味釋義為：使人感到愉快，能引起興趣的特性。
看似各不相同，但根據(jù)這三個概念提煉下，可以發(fā)現(xiàn)他們都是在融入一種正向的情緒加以解釋。
那么，趣味性背后的情緒到底是什么？
趣味性背后的情緒
情緒這東西千變萬化，為了避免主觀臆斷的不準確，我搜羅了關于情緒的研究資料，目前相對權威的有三個：plutchik情緒輪、日本感性工學、諾曼的三層理論。
后兩者未對情緒進行指標的定義，所以這里只聚焦在情緒輪上。
情緒輪由羅伯特·普洛特契克開創(chuàng)，這個理論指出人類的基本情緒一共由8種，生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒，能夠符合趣味性帶來的情緒基本就三種：愉悅、期待和意外。
為了為產(chǎn)品所用，就需要提煉出更具象的特征。下面，我通過腦暴的方式對每類情緒進行發(fā)散聯(lián)想。
聯(lián)想了大量可以引發(fā)愉悅情緒的事物，比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。
我發(fā)現(xiàn)這些事物，一般具備了以下特征：
1.會給予我們即時反饋；
2.擬人化，比如帶有人類才有的表情，或者是人類的動作語言；
3.柔軟的、毛茸茸的、圓潤的、有溫度的；
4.會動的、解壓的
聯(lián)想了大量可以引發(fā)期待情緒的事物，比如被買爆的泡泡瑪特盲盒，商家售賣的福袋，各種諸如擲骰子、老虎機的隨機性游戲，各類抽獎活動，一些游戲開局roll屬性點的環(huán)節(jié)（比如金2、河洛等游戲，當年玩的時候我驚訝得發(fā)現(xiàn)我居然能roll上一整天）
這些事物大致會帶有這些特征：
1.未知的、神秘的；
2.滿足人類的好奇心的；
3.對結果能滿懷希望的；
4.隨機的正向獎賞；
5.只需要一步簡單到發(fā)指的操作（打開容器、拉動拉桿、點擊按鈕等等），不需要任何的行動門檻，也沒有等待時間
比如《設計中的設計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節(jié)、電影或者游戲中突然出現(xiàn)的彩蛋、iPhone第一代的發(fā)布現(xiàn)場、突然發(fā)現(xiàn)的世外桃源、突襲的生日驚喜等等。
這些事物大致會帶有這些特征：
1.超出原有預期的；
2.未提前告知的；
3.正向結果的；
4.產(chǎn)生共鳴的
那么，這些特征又該如何更具象得落地成策略，產(chǎn)品中又是如何利用這些策略，引導用戶產(chǎn)生這些情緒的呢？
下面，我將基于這三類維度，并結合大量的大廠案例來為一步步你抽絲剝繭。
如何制造愉悅感
基于上面的挖掘，我發(fā)現(xiàn)能引發(fā)愉悅感的一個明顯特征，就是擬人化，這個非常有意思。
克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點：人們對待電腦的方式，與我們在與他人交流時使用的社會規(guī)范是一致的。我們對電腦的反應，就好像它們是人類一樣。
也正因此，很多原本沒有生命體征的物體，一旦被賦予了擬人形象，就容易被大家所接納、引發(fā)愉悅。
做一下細分的話，擬人化基本涵蓋了三個方面：語言、形象和表情。
1.1擬人化的語言
人對于具體的擬人形象更容易產(chǎn)生情感，其中便包含擬人化的口吻。使用這種口吻與用戶交流，而非冷冰冰的設備語言，就可以提升產(chǎn)品溫度，引導用戶對產(chǎn)品產(chǎn)生正向情感，關于這塊我總結了兩方面。
一方面，文案盡量得接地氣、輕松。
拿京東這款產(chǎn)品舉例，文案從口吻上都會采用一種很輕松、接地氣的擬人語氣，來拉近和用戶間的距離。比如在引導詞后加入“哦~”“~”這種輕松的語氣詞。
另外，「京東問答」版塊的引導詞：傳統(tǒng)產(chǎn)品是“添加問答”，是不是平平無奇。但京東使用了“我來助你一臂之力~”
QQ瀏覽器的評論暗提示，也不是傳統(tǒng)的“寫評論”“輸入評論”，而是像日常聊天那樣“我來說兩句”，非常接地氣、生活化。知乎直接套用了流行語，詼諧的同時引導用戶注意言論。
另一方面，人類富有情緒變化，所以一旦用戶觸發(fā)了某個正面/負面行為，就可以給與情緒反饋。
在用戶完成商品評價后，京東不僅僅是很傳統(tǒng)得反饋“評價成功”，而是又加入了“感謝您！”的感謝詞?？此萍恿巳齻€字，但行動過后的正向感激反饋，和我們日常生活中受到正向反饋一樣，被喚起正向的愉悅情緒。并愿意繼續(xù)這個行為。
知乎的圈子業(yè)務，在用戶完成簽到后，反饋完成的基礎上，使用了正向的情感反饋“ 我就知道你會再來看我”，仿佛是一位關系不錯的老朋友，來喚起用戶正向情緒。
另外，知乎在改版后，回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言，而是“已收到你的喜歡，謝謝！”并且配以作者頭像，非常形象得傳出對對方對我們的感謝反饋。這種正向反饋，相比”點贊成功“更有效得喚起正向情緒，形成正向激勵。
當然，用戶的消極行為也可以產(chǎn)生情緒反饋。
比如現(xiàn)在很多產(chǎn)品的取關反饋，不是傳統(tǒng)的“確認”“取消”，而是用“殘忍取關”和“給個機會”這種融入情感的文案來做挽留，就好像真的有個活生生的人，在被你否定后反饋給你的情緒，請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。（雖然這種做法過于業(yè)務導向，且有綁架用戶的嫌疑）
人對于具體的擬人形象更容易產(chǎn)生情感。因此，樹立一個擬人化的品牌形象（也就是我們常說的IP），可以使用戶對產(chǎn)品快速建立情感聯(lián)系，也可以強化品牌感知。比如優(yōu)酷的猴子、高德地圖的老鷹、釘釘?shù)难嘧?、linefriends等等。
世界杯的吉祥物也是同理，每一屆的吉祥物必定會融入擬人化的特征，憑著親切、可愛的形象和全世界的觀眾一起熱情互動。
說到產(chǎn)品，以京東的這只狗子為例，兜底頁、缺省頁、啟動頁，都做了狗這個擬人形象的貫穿。
如果你記得沒錯的話，形象改版之前這只狗還是四腳坐地上的，但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」，以此提升愉悅感，拉近距離。
再比如夸克，它甚至單獨新增了底tab入口，通過3d品牌形象，實現(xiàn)與用戶的智能交流。另外，卡片和語音搜索都做了形象貫穿，后者還使用了形象的眼睛，來通過眼睛的變化進行情感交流。
一段文字在加入了表情后，我們就能迅速了解到對方的情緒（比如我們日常的聊天）。因此表情這一招，也可以用以加深用戶與產(chǎn)品的情感交流。
它可以和語音、形象靈活結合使用。通過全面的擬人化，來大幅提升用戶對產(chǎn)品的形象感知，促進用戶情感的產(chǎn)生、加深用戶和產(chǎn)品的情感鏈接。
比如用語言輸入，當系統(tǒng)未識別清楚時，傳統(tǒng)的方案可能是一個錯誤圖標加上「未識別聲音，請再試一遍」的文案，但夸克中則使用了品牌形象的雙眼來傳達失落的表情，并結合了擬人化的語言。
同樣做法的還有百度的未開麥提示、段子頭圖，快速傳達產(chǎn)品的情緒，和用戶情感交流。
另外，閑魚設置昵稱時，正在輸入時、以及超出了限定字數(shù)，右側的形象表情也會發(fā)生變化。
除了擬人化能引發(fā)愉悅外，還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。
提起動畫的作用，我們更多人首先想到的可能是強引導、注意力吸引，但動畫同樣能觸發(fā)用戶愉悅。比如當動畫更加貼近現(xiàn)實，或者結合擬人化的特征時。
最典型的例子，就是蘋果appstore從卡片到詳情頁的轉場過渡，點按的預備動作、卡片的放大展開、緩出的曲線、轉場完成的慣性等等，都很貼近現(xiàn)實物理世界的運動規(guī)律。而這種自然的絲滑也更能引發(fā)用戶的愉悅。
比如知乎的加載動畫，結合了擬人化的特征，讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產(chǎn)品的定位。
如何制造期待感
根據(jù)我們對期待感的腦暴，發(fā)現(xiàn)能觸發(fā)這種情緒最典型的特征，就是隨機性。
在產(chǎn)品中，則可以通過隨機給予用戶有價值的內容來引發(fā)用戶的關注。結果的不確定使過程充滿神秘，這種狀態(tài)讓用戶興奮和滿懷期待，不會輕易離開。
比如網(wǎng)易新聞在進行新聞加載的操作時，會在加載動畫上加入一個隨機的小貼士。內容大致有三類：黃歷、名言和一句話新聞。而且這些內容完全是隨機出現(xiàn)，這種刷新過程好像在開盲盒，你無法預知會給你什么內容，非常有趣。而且它們入口深，不干擾；內容對用戶也具有價值。
同樣的還有丁香醫(yī)生。在首頁每次下來刷新后，都會出現(xiàn)不一樣的健康類的小貼士。隨機性很強，富有趣味。而且可以很好得滿足求知欲。
雪球的個人頁上，上劃時也會隨機給一條關于投資、市場的名言和網(wǎng)友的熱門觀點。
把現(xiàn)實生活中的游戲搬到了手機，同樣能激發(fā)用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。
如何制造驚喜感
格雷戈里·伯恩斯曾做個關于腦部區(qū)域的研究，發(fā)現(xiàn)大腦不僅探尋未知，而且實際上還渴望未知。相比那些已知的日常慣例，新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動，不但能引起注意力，而且也會帶來驚喜感。
產(chǎn)品中的驚喜感設計，可以說是使用瞬間能夠觸達我們內心的一種短暫性愉悅，一個體驗的峰值。
根據(jù)對驚喜感的挖掘，一個典型的特征就是超出預期，并且未提前預料。
比如Figma使用過程中，團隊成員和你同時長按鼠標，并且靠在一起后，就可與觸發(fā)擊掌的動畫彩蛋，非常有意思。
比如京東在五星好評后，會放煙花慶祝。
比如很多內容型產(chǎn)品，在詳情頁長按點贊按鈕后，會觸發(fā)全屏的「爆贊」動畫。
再比如用戶生日當天，通過啟動頁、彈窗等場景送上生日祝福等等。
這些能夠超出用戶預期的細節(jié)，即便多么細枝末節(jié)、出現(xiàn)頻率多低，但只要能夠被觸發(fā)，都可能因為驚喜感而生成情緒峰值，加深用戶和產(chǎn)品的情感鏈接。
最后
以上，便是趣味性背后的情緒挖掘和案例講解。
作為設計師，我們在工作中總是強調以用戶為中心，通過不斷的調研、跟訪、可用性測試來了解、分類用戶，但更多的結果可能只是讓產(chǎn)品不斷得貼合用戶的心智、符合預期。但如何增加粘度、建立深層鏈接，就需要通過趣味性這種情感化表達方式，來為用戶制造愉悅、期待甚至驚喜。
正像諾曼在「情感與設計」中說的那樣，每個產(chǎn)品都需要令人更放松、更愉悅的設計，以此來增強產(chǎn)品的適用性。
希望這篇文章能對你有所啟發(fā)。
本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經(jīng)驗。
// 寫在前面
端到端導流是指在產(chǎn)品矩陣體系內引導優(yōu)質產(chǎn)品的用戶使用另外一款產(chǎn)品，帶來使用量的提升，從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣，依托各端流量實現(xiàn)矩陣產(chǎn)品間的導流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導流體驗升級的項目為例，分享導流增長探索的設計思路與實踐經(jīng)驗。
// 為什么要做導流
導流的目的
對于業(yè)務本身而言，隨著移動互聯(lián)網(wǎng)流量紅利期的結束，獲取新用戶的成本越來越高，不管是新產(chǎn)品還是成熟型產(chǎn)品，都需要通過導流的手段來持續(xù)擴充新用戶。其次，對于有駕產(chǎn)品生態(tài)而言，需要各端產(chǎn)品間的相互聯(lián)動，協(xié)同發(fā)揮優(yōu)勢，實現(xiàn)流量價值最大化。
導流的優(yōu)勢
成本低，相較于投放、活動等渠道流量獲取方式，矩陣導流成本低；
高意向，用戶購車意向明確更容易實現(xiàn)商業(yè)轉化；
可共享，用戶數(shù)據(jù)及行為關聯(lián)互通。
// 如何做好導流設計
1.問題分析
通過梳理核心場景的4種導流條，發(fā)現(xiàn)各個場景導流形式各異，用戶缺乏統(tǒng)一認知，導流引導語單一內容吸引力弱。在用戶在瀏覽頁面時，點擊功能入口或想要繼續(xù)查看更多內容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：
缺乏統(tǒng)一認知：視覺表達形式不成體系，用戶感知不夠；
內容吸引力弱：內容單一缺乏吸引力，用戶沒有點擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗。
從導流鏈路的用戶行為來看，整個流程下載路徑過長，發(fā)現(xiàn)用戶流失較大的轉化點：
從小程序落地頁到下載頁：在進入小程序瀏覽頁面時，用戶沒有注意到導流條就滑走了；
點擊導流條進入下載頁：點擊導流條會先調起導流彈窗，點擊確認后再進入到下載頁，用戶未選擇下載就退出了。
2.明確設計方向
針對導流現(xiàn)狀缺乏統(tǒng)一認知，內容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個完整的導流鏈路圖，根據(jù)用戶增長模型，把用戶生命周期各節(jié)點的用戶行為與產(chǎn)品觸點一一羅列出來，找到增長路徑的設計機會點。
通過以上的問題分析，如何建立用戶和產(chǎn)品的鏈接，保障友好的體驗，是本次導流升級要解決的問題。根據(jù)用戶關鍵行為，我們可以將整個導流鏈路拆分為3個階段來挖掘主要機會點：
下載前：興趣激發(fā)導流吸引，建立用戶穩(wěn)定認知；
下載中：強化用戶轉化動機，刺激用戶完成下載；
下載后：保障還原體驗暢通，提升首次使用體驗。
下面將分別介紹導流下載前階段的設計落地實踐，以及下載中、下載后階段的延伸設計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意，是轉化開始的第一步，統(tǒng)一的視覺風格和滿足用戶訴求的內容，有利于增強導流條的吸引力。
1）收斂導流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉預期的體驗問題，下線了阻斷式和截斷式兩種體驗不友好的導流類型，將原來4種導流類型收斂為2種，僅保留通用導流條和功能延展導流條，基于這2種導流形態(tài)進行深入的設計探索。
2）建立通用視覺標準
針對【缺乏統(tǒng)一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題，建立了通用導流條標準化規(guī)范。統(tǒng)一視覺形態(tài)，優(yōu)化為頁面內通欄嵌入式，同時融入品牌色強化用戶感知，根據(jù)頁面布局制定了不同的展示規(guī)則。
上線后，內嵌導流條在展現(xiàn)受限的情況下，導流轉化數(shù)據(jù)與改版前基本持平，為了進一步提升導流的點擊效果，開始探索場景化定制提轉的設計方向。
3）定制場景化內容
針對【內容吸引力弱】內容單一缺乏吸引力、用戶沒有點擊欲望的內容問題，在通用標準化形態(tài)的基礎上，根據(jù)不同場景用戶訴求點，豐富導流內容。分別從內容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉化的影響。
內容定制：豐富導流利益點、場景化內容更能激發(fā)用戶興趣，促進轉化達成；
按鈕文案：轉化按鈕文案導向性明確、內容與導流利益點匹配，可以助力按鈕轉化提升；
氛圍強化：導流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導流條點擊。
2.拓展場景擴量
復利通用標準導流條的成功經(jīng)驗，應用到功能延展類導流條中繼續(xù)驗證有效性，從產(chǎn)品價值點出發(fā)，挖掘高流量場景的機會點從而帶來轉化增量。
1）價值傳遞
根據(jù)小程序和APP兩端各自的不同點，分別從功能差異及體驗差異兩個方向進行優(yōu)化。
APP特有功能：APP完善的功能體驗可以更好滿足用戶訴求，例如參配瀏覽場景下，引導用戶體驗搜索及橫屏查看的高頻功能，對于導流轉化有正向幫助；
各端體驗差異：小程序和APP兩端體驗存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗，能夠刺激用戶轉化。
2）價值延續(xù)
當用戶完成核心內容消費后，是否可以引導用戶去APP繼續(xù)瀏覽更多相關內容，進而引導用戶下載呢？
服務透傳：平臺服務內容傳遞，例如在內容落地頁文末增加品牌廣告導流條，幫助用戶建立品牌認知；
相關推薦：引導相關內容消費，例如在文章或視頻頁增加相關推薦導流條，引導用戶瀏覽更多相似內容。
// 下載中
當用戶通過導流條進入到下載流程時，還有哪些手段可以刺激用戶激活減少流失呢？
強化下載動機：下載頁前置APP落地頁內容，例如將通用下載頁優(yōu)化為場景化下載頁，給用戶超前產(chǎn)品體驗吸引轉化；
減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應用下載，同時退出下載頁時增加挽留。
// 下載后
當用戶在應用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗呢？
還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導新用戶探索功能，根據(jù)用戶興趣推薦適合的內容。
以上內容是下載中和下載后階段導流優(yōu)化方向的一些延伸設計思考，為大家提供可以繼續(xù)探索的方向。
// 寫在最后
總結一下本篇文章關于導流的體驗設計要點：
全鏈路洞察，對導流鏈路進行拆解，通過盤點導流鏈路的用戶行為，明確每個節(jié)點的設計方向；
降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導，讓用戶專注于產(chǎn)品本身傳遞的價值，引領用戶完成對產(chǎn)品的探索從而完成下載激活。
希望以上的設計思考，可以帶給大家一些啟發(fā)。
蘭亭妙微(363858.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
UI設計的核心是‘美學’，以前兩篇向大家介紹了如何提升審美能力和界面排版，本文將結合自己的工作經(jīng)驗，向大家分享一些UI界面排版設計的技巧，希望能給想要提升排版能力的設計師帶來一些幫助與啟發(fā)。
排版是每一個設計師都必須具備的能力，也是UI界面設計中最難的一部分。它以各種形式存在界面中，如：純文本排版、圖文排版等等。是設計師在做設計時接觸多的地方，卻也是初中級設計師忽視細節(jié)最多的地方。好的排版，能快速有效的將界面中的重要信息傳遞給用戶。因此希望能通過本文，能讓大家對排版有一個新的認識。
關于排版設計，我總結歸納了6個設計技巧（還有許多技巧），當然這些方法不是絕對，但是如果能融合貫通的將這些技巧運用到排版設計中，對界面設計感將有很大的提升。
分別是：
選擇合適的字體
對齊原則
親密性原則
具備呼吸感的力量
合理運用留白
對比的力量
選擇合適的字體
同的字體有不同的性格屬性，字體選擇對界面排版設計具有非常重要的作用。所以我們在做設計時間時，首先需要考慮產(chǎn)品的的屬性，目標用戶，不同的產(chǎn)品與人群適用于不同的字體。如黑體粗體字醒目突出，適用于畫面感強烈，突出強調信息的用途、細體字精致簡潔，適用于女性行業(yè)、時尚、科技、餐飲等類型內容；宋體、粗體字醒目突出，適用于畫面感強烈，突出強調信息的用途等。如下圖不同的產(chǎn)品屬性使用不同的字體。
最后提醒一下大家，在同一款APP中，最好不要超過兩種字體。
對齊原則
在做界面設計時，需要保持界面上的所有元素都存在一種視覺聯(lián)系，而不是將元素隨意擺放在界面上。對齊會讓界面排版井然有序，閱讀起來會非常流暢。常用的對齊方式有：左對齊、居中對齊、右對齊。
我們做界面設計時，需要根據(jù)實際業(yè)務場景去選擇合適的對齊方式，形成統(tǒng)一的視覺流。
親密性原則
親密性就是在設計時將相關的項組織在一起，這些相關的項可被看作成一體的，一組的。從而吸引讀者的目光，能夠順暢的理解我們所表達的意思。這樣的設計可使使頁面變得有條理、閱讀邏輯清晰、頁面留白變得有組織感。
在做設計時，我們只要充分理解界面中各元素之間的關系，就會合理性的去運用它，掌握它。
具備呼吸感
字體行間距、行間距、行長是我們進行排版設計時，調節(jié)最頻繁的屬性。間距過短，會讓用戶難以閱，間距過長、會讓用戶閱讀起來比較稀疏，只有創(chuàng)造具備呼吸感的文字排版、才會用戶閱讀起來保持愉悅的心情。
行間距：行間距本身沒有一個標準的數(shù)值，在設計時我們通常會根據(jù)字體的屬性與運用場景去設置（一般而言，很多時候我們在設計時，通常將行間距設置為字體的1.5倍），增加文字的呼吸感。
字間距：字間距指的是文本在橫向上的間距。雖然很少有設計師在字間距花費較多的時間，但在文本的閱讀上起到非常大的作用。如字間距過于擁擠時，將會降低文本的可讀性。
行長：行長是指文本每行的長度，在不同的平臺，需要保持不同的文本長度。單行文字如果包含的字數(shù)太多，將會導致用戶閱讀起來感到疲憊。合理的行長會使用戶在閱讀時很順暢，反之則會使閱讀成為一種負擔。
合理運用留白
留白是設計師老生常談的事情，存在頁面布局中的各個元素之間。留白能夠突出頁面中的主要元素，制造頁面的視覺焦點，吸引用戶的注意，提升頁面的體驗感。
留白能夠使得元素之間的關系更為清晰，更容易被感知，增加頁面的呼吸感，顯得更為和諧。
對比的力量
對比的目的是營造視覺感官上的變化，避免頁面排版單調，增強視覺效果。合理運用對比原則，能在很大程度上提升頁面中文字排版的層次感與設計感，還可以組織信息、清晰層級、在頁面上指引讀者，并且制造視覺焦點。
大小對比：視覺元素體量之間的差異，能夠制作視覺沖突的效果，使頁面的視覺層次更為清晰，體量越大則層級越大，也就越突出。
顏色對比：顏色在排版設計中起著很大的作用，能起到點睛之筆。合理運用色彩對比可以有效地突出重點、區(qū)分信息，還可以起到裝飾畫面的作用。
此外常見的對比有：材質對比、形態(tài)對比、空間對比等等。
排版是數(shù)字時代每個設計師都需要學習和掌握的重要技能，無論你的設計項目是什么樣的，這些基本的規(guī)則總能給你的設計帶來更好的效果。不過這些排版技巧都還只是非?；A的部分，在實際的設計當中，還會涉及到很多更加復雜的排版布局——但是這些基礎，始終是最重要的事情。
簡單的細節(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é)的設計師。
對于按鈕控件，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》來教大家如何揣摩用戶思想的書了。
我盡量從我能考慮得到的方面，聊了關于按鈕交互的設計點，可能不太全面，也歡迎補充與校正。至于按鈕的視覺設計，因為過于個性化，且篇幅原因，我就不再展開討論了。
希望這篇文章能夠幫助到你對按鈕有新的認識。我是耍家，我們下期再見。
藍藍設計的小編 http://363858.cn
<thead id="warek"><td id="warek"></td></thead>