合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。
這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析，一起來系統性地掌握這些知識～
簡單來說，導航是用戶從 A 點到 B 點的方式，是他們發現設計點并與產品交互的過程。
可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從 A 到 B”，但時間短只屬于操作結果，這個結果需要依靠合理且簡單的設計才能實現。
△ 一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產品助力。
1. 漢堡菜單
圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發揮大的作用。
來看一下漢堡菜單具備的優勢：
△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產品的不同而改變點餐流程。
2. 底部導航
底部導航欄通常包含產品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。
△ 幾乎每款產品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產品頁面，提高可用性。
3. 頂部導航
關于頂部導航，可以看之前分享的文章，里面詳細介紹了頂部導航的設計方法。
△ 頂部導航通常包含頁面中最重要的信息，與其他輔助導航結合使用。
4. 卡片式導航
卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。
隨著網絡上的內容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。
△ 為了改進體驗，卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。
5. 標簽
標簽往往是在一個大主題下同時支持多個選項，每個選項都轉到不同的界面。
△ 標簽通常用于在同一頁面中的幾個視圖之間切換，展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。
6. 基于手勢的導航
基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。
這種樣式的優點在于，即使最沒有經驗的用戶也很容易掌握，因為手勢通常是直觀的。
△ 國外大火的約會產品Tinder以及國內的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。
△ 基于手勢的導航并不是Tinder發明的，但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。
7. 全屏導航
全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產品的功能。
△ 點擊圖片可以跳轉到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態。
8. 3D touch
最初是由蘋果公司提供給用戶的，這是一種創建導航快捷方式的方法，可以顯示選定的 APP 的一些關鍵操作。
△ 蘋果為手機創造了一種全新的快捷方式，同時提供了強大的可用性。
△ 3D touch另一個用途是內容預覽，在處理內容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。
1. 導航需要直觀明顯
對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產品產生很大的影響。
△ 從可用性角度來看，直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。
2. 考慮手指的位置
這點對于移動應用來說至關重要，沒有用戶想反復點擊圖標卻沒有反應。
△ 鏈接和按鈕的尺寸需要足夠大，以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。
3. 建立視覺層級避免混亂
小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。
△ 極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。
1. Facebook
Facebook 的導航構成比較復雜，融合了多種不同樣式的導航。
△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內容與次要內容分隔開。
2. Spotify
Spotif 作為音樂流媒體業務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。
△ 以高度視覺化的形式突出每張卡片背后的關鍵內容，另外底部導航也可以完成繁重的任務指引。
3. App Store
App Store 是使用標簽進行導航的好例證，每個標簽代表了同一內容的不同方面。
△ 在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。
4. Telegram
Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關鍵導航選項。
△ 每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且幾乎不占用界面中的寶貴空間。
5. Yelp
yelp 在創建全屏導航體驗時采用了一種稍微不同的方法。
△ Yelp將屏幕劃分為兩個不同的區域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。
6. Trello
頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。
△ 卡片系統很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。
7. Twitter
同樣使用了多種導航混合的設計樣式。
△ Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。
沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款 APP 的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對于任何手機應用程序，如果沒有來自用戶的一些初始和正在進行的輸入，就不會發生任何事情。因此，手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。
雖然手機應用程序以及使用它們的用戶通常是獨一無二的，但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。
用戶輸入設計的6個目標
在我們深入研究模式之前，了解用戶輸入設計的六個主要目標是很重要的：
選擇合適的輸入和資料登錄方法
減少輸入量
設計有吸引力的數據輸入屏幕
使用驗證檢查來減少輸入錯誤
設計所需的輸入文檔
制定有效的輸入控制
模式的概述
在記住以上設計目標的前提下，下面是我們在將本文中詳細介紹的設計模式的概述，在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:
1.智能鍵盤
2.默認值&自動完成
3.立即沉浸(或“惰性注冊”)
4.操作欄
5.社交賬號登錄
6.巨大按鈕
7.滑動操作
8.通知
9.顯性控件
10.可擴展輸入
11.撤銷
1.智能鍵盤
Facebook記事本，Android聯系人
問題
用戶希望快速輸入信息。
解決方案
當用戶點擊應用程序中允許輸入信息的部分時，給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕，或者多走一步來訪問鍵盤。這不僅方便了用戶，而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段，這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。
例如，在地址簿或撥號器中輸入電話號碼時，用戶不需要完整的鍵盤。當他們點擊這些字段時，數字小鍵盤就會彈出，而不是整個鍵盤，這樣就減少了不必要的按鈕，簡化了操作過程。類似地，點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤，其中“/”和“。com”按鈕顯示在空格鍵旁邊，而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型，你的UI可以根據用戶當前嘗試的操作進行調整。
2.默認值&自動完成
Skype, Flightboard
問題
用戶希望快速完成操作。
解決方案
通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示，預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配，比如在谷歌Play Store搜索中，通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如，Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看，這是有意義的，因為他們不習慣定期輸入這些信息，但在這種情況下，這種匹配很重要，因為Skype是一個國際電話應用程序。
另一種實現方法是保存用戶輸入的最后一項，并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如，Flightboard在搜索框下面列出了以前使用過的位置，以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式，在搜索方向時自動輸入用戶當前位置，為用戶節省幾次點擊，因為這是最常見的情況。
3.立即沉浸（或“惰性注冊”）
Wunderlist
問題
用戶希望在注冊之前先嘗試一下。
解決方案
越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。
記住，他們一次只能做一件事，而且測試每個新產品的時間有限。隨著應用程序的日益專業化，在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情，而且會降低甚至是適合的訪問者的注冊率。在積極的方面，通過讓他們立即體驗你的產品，他們更有可能被吸引，因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好，因為它向用戶展示而非告訴他們應用程序如何工作。
對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說，允許延遲注冊是沒有意義的，但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下，注冊會帶來一些額外的好處，比如在Wunderlist中進行跨設備同步，或者在Houzz中創建一本想法書，這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意，但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。
4.操作欄
Facebook Paper, Behance
問題
用戶希望快速訪問常用的操作。
解決方案
從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用，如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航，產生了更簡單的應用程序視圖，用戶可以專注于一級和二級操作，而不是二級導航。常見的操作有：在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI，還可以通過專注于與用戶相關的重要操作清除一些混亂。
5.社交賬號登錄
Beats Music, Flipboard
問題
用戶需要一種更簡單的注冊和登錄方式。
解決方案
整合社交賬號登錄方法，允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合，同時，你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商，根據平臺和目標受眾的不同，你可以在你的應用程序中提供所有這些或其中之一，而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時，會自動填充數據), 同時，通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息，讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX，因此這種模式正在成為一種期望。
6.巨大按鈕
Tinder, Shazam
問題
用戶希望立即知道他們可以采取哪些操作。
解決方案
理想的觸屏點擊目標大小可能是72 px,但是一些應用程序，像Tinder，也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置，無論你在做什么，你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值，因為在這些應用程序中，用戶需要執行的操作非常有限，因此更有理由讓他們在各種情境中更容易地執行這些操作。例如，Shazam是用來看電視或聽音樂的，它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說，巨大的按鈕是一個巨大的改進。
7.滑動操作
Carousel
問題
用戶希望關注特定的內容。
解決方案
允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如，谷歌中的“卡片”現在可以在你不需要的時候被滑走，以清理雜物;類似地，Tinder中的配置文件可以向左或向右滑動，以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里，滑動手勢被用于一項操作，而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式，比如Carousel，它可以讓你通過將照片滑動到一邊來瀏覽多張照片，也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作，允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。
8.通知
LinkedIn, Facebook
問題
用戶希望了解他們應該瀏覽的新活動或操作。
解決方案
通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如，在標簽上放置一個計數徽章是由iOS推廣開來的，但現在這也可以在許多其他應用程序中看到，如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做，但它在時間軸圖標的頂部還有一個小點，以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點，當新聞推送中出現新條目時，它會彈出一個小窗口。
9.顯性控件
Secret
問題
用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。
解決方案
清理雜物，讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外，從而節省一些寶貴的空間。例如，Secret使用手勢而不是可視控件。向右滑動，就會出現一個動作菜單，這是我們前面介紹過的折疊模式的簡化版。在創建內容時，用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案，或者在使用圖片時，可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰，你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像，就會出現一個按鈕，用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。
Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換，只要你選擇了你想要的乘車類型，就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式，每當我在做五件事的同時還想搭個便車，同時還要確保Uber不會用峰時價格來騙我的時候，它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。
10.可擴展輸入
YouTube
問題
用戶希望關注內容，而不是犧牲屏幕空間給控件。
解決方案
設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如，YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間，當用戶點擊這個圖標時，它就會展開成一個搜索欄。
11.撤銷
Gmail, Chrome
問題
用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作，但是可以選擇恢復意外操作。
解決方案
為用戶提供一個簡單的方法來撤銷他們的操作，而不只是要求他們事先確認。在某些情況下，某個操作可能會導致不方便或數據丟失，例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說，撤銷功能也很強大，他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作，就能更好地控制局面。在解釋將要發生的事情時，確認彈出窗口可能很有用，但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下，最好是讓開，同時提供一個安全網絡，以防出現錯誤。
獲取用戶的輸入
時刻記錄你應該從用戶那里獲得輸入的位置，他們是否曾經查看過這些輸入區域，他們使用這些輸入控件的頻率，他們從哪里來，又從哪里進入應用程序(即用戶流)，等等。不斷地重新安排、重新排序、調整大小和調整這些控件，直到你獲得更多所需的操作。當然，當用戶能夠提供輸入時，要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。
文章來源：站酷 作者：馬克筆設計留學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么那么多人覺得應該先學UI設計再學交互設計，因為UI門檻低所以入手快。其實交互比UI更早出現，從需求理論可以看出人們在追逐主觀體驗的感受，在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知，如果底層的交互和產品的可用性未被滿足，那么UI做的再好也是徒勞。
市面上大量出現同質化產品、設計，就是因為大家都在按照現有的，常用的模版在設計，現在其實比早兩年會好很多，很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。
例如下面的案例，這是一個電瓶車電池租賃的一個產品。
從美觀角度，左側的界面更加簡潔信息也有規律，有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時，大家在第一反應中，有多少人可以重啟自己的視角，還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢？
如果讓你盯著第一個界面進行改版，我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的，即便將錯誤路徑3改成了路徑2，你以然還是在錯誤的路徑上，本質沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產品好用的，也要讓產品走對方向。
另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學的快，用的會，交互體現在人們日常所接觸到的大部分媒介，并且與之產生聯系。例如一把水壺，水壺的設計形式首先通過視覺讓你感知這是一個水壺，如果把水壺的外形做成一個馬桶，你覺得它還是一個水壺嗎，這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作，例如裝水、倒水。而用的會就是這個水壺更多的附加功能，例如燒水、定時、調溫等等。
交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現代人的習慣是從左右的？古代受限于工具、媒介，竹簡是主流的記錄文字信息的媒介， 有人會說竹簡可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進行閱讀的，如果是橫著閱讀但是打開是上下展開就會非常不自然了。
所以在當時人們為了適應非常有限的工具資源，改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮，那基本也就涼涼了。
從2g到5g時代的發展，除了生活方式發生翻天覆地的變化外，我們所接觸到的媒介也發生了變化，從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步，讓人們對信息的獲取更加方便快捷。除了內容，外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化，從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機，改變了我們的認知也改變了我們的生活方式。
平臺遷移的交互成本，很多同學可能都玩過moba類游戲-dota，這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標，這是端游中基本的交互行為與操作。
在現在非?；馃岵⑶夷Ｊ胶蚫ota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準的，并且可以指向性釋放在某一個角色中，但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能，但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上，所以手游中只能進行非指向性的預判技能釋放。
同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動，鼠標控制射擊與視角，但是在手游中控制射擊與視角就需要2個手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備，專門用來給多余的手指進行射擊操作。
另外，大家如果做b端的同學應該也深有感觸，平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事，因為在網頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯動的左側標簽導航和頂部聯動的標簽導航，在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航，但是頁面顯示實在有限，很多的信息完全無法在一個界面中呈現，所以要么將頁面進行左右滑動，要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。
web端的工具和網頁通常都會有撤銷操作，按CMD（ctrl）+Z大部分都可進行撤銷上一步操作，但是在移動端我們無法通過特定、或者統一的手勢進行撤銷，所以很多時候在表單輸入的時候會有一鍵刪除圖標，卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變為撤銷按鈕，有待考量。
到底什么是交互設計，這個問題其實是比較復雜的，也是我一直在思考的問題。所以也翻閱了很多文獻，嘗試做更多的案例來解釋。交互設計的概念真的挺多的，光網上能夠找到的定義就不下5種，這些對交互設計的定義中，比較頻繁出現的是行為、場景、用戶等詞匯，交互設計到底設計的是用戶的行為，還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設計的本質。
中國歷史文字的演變，它并不是一個模仿的過程，而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿，更多的是擔心用戶成本過高而妥協為滿足用戶預期。
事實上，為什么我們講不清楚什么是交互設計，其實UI設計也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語
例如“你可以意思一下”，單就這句話，我們大概知道最關鍵的是“意思”二字，包含了特別多的含義，含義需要通過語境、使用場景來區分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點禮還是？應付一下？
當然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個字讓我們整一句話都活了起來，說者與聽者如果不在一個境中，聽著就壓根不知道說者的具體表達含義。
同樣的，在設計領域，很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個詞聽起來比較抽象，讓聽者都有點不太好意思追問什么是呼吸感，其實你問了，說者也不知道怎么描述?？赡苷f者覺得現在信息太密集讓人無法呼吸，但設計者覺得現在剛好，所以本身就沒有一個標準，更多的就是主觀的感受，讓你不得不接受這個建議的原因是因為兩者的身份。
我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設計師和開發還原只會說往左移動10px，而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識，設計師通常喜歡描述從左到右或者從上到下，但是在開發的語音認知理，他需要知道的是空間坐標，并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識，開發也盡可能的去補充設計背景。
在這里，交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通，所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。
再舉個例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時候是不是覺得收集到的信息無效、無用，其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項有：從不、偶爾、經常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個月喝一次算偶爾，再比如訪談的時候問用戶這個問題：您覺得您喜歡下面哪個頁面的風格？用戶：“什么是風格？”
所以交互設計師有一個能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。
我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言，不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等，例如在模型手辦中有分線、滲線、勾線、補土等，這也都是在特頂專業領域中的一些術語，但這些并不是語言，只是在某個領域中大家總結出來便于溝通的文字符號。
所以我們再回到上方看一下定義，首先語言是由詞匯所組成，詞匯是由符號做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規范，而并不是語言。語言擁有更強的普適性和通用性。
那么我所認為的語言他首先包含了能夠組成詞匯的符號，這些符號大概就是指：點、線、面、體、色彩由這些點線面體可以組成的詞匯有：按鈕、文字、圖標、圖片等。但是光有詞匯不行，在漢語中有12種詞類：名詞、動詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補...這里不過多敘述。
語言很重要的一點它具有語境，語言的運用包含了看聽讀寫4個方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設計語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標題、箭頭、色塊組成的一個itme，是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。
這里的控件雖然有兩個屬性，但是還需要語境來幫助我們理解，一個是它本身所能夠輸出的默認狀態的，比如點擊之后的跳轉頁面，另外他也可以具備產品賦予的自定義屬性，例如底部滑出picker。
還有，在漢語中“去買兩個桃子吧”，這里的“兩”肯能是虛數也可能是實數，但是在交互設計中，我們如何表示點擊1下和兩下或者是多次呢，一般單擊的屬性通常可以有一些特性的符號屬性所表示出來，例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當然不可以，雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。
那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思，并且有用的。這會讓更多信息不對稱的情況消失，不僅僅是設計師，在產品團隊中大家都能夠有一套共性的交互語言系統，無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中，大多都是多種元素的拼合，給出常用的、可復用的控件、組件，但是大家依然還是無法從語言角度去創新，這就導致了很難會有新的、有用的交互形式的出現，比如很多搜索控件都是承載在頂部導航欄中，那么在做規范的時候也只能在這個組件上去微調，殊不知搜索這個控件的“語境”并不單單只能在頁面頂部，例如高德地圖做的就很好。這樣一來，這個組件的常規規范形式就能和很多產品區分開來了，當然要視產品形態不同。
市面上有許多的新零售電商產品，頁面中的信息流也是大同小異，但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示，但是3000個就不行了，很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。
所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中，首屏基本上都是呈現這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局，從基本上能夠滿足一個大量sku電商產品的所有需求，但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢？
從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準、限時，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具，以及時間軸的商品推薦，讓有限的資源呈現更多的形式變化以及讓用戶有時間概念，每天固定時間來進行活躍。
通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性，并且在后臺工具中靈活控制，同時除了日常的營銷目的之外，在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。
最后總結一下，我認為交互設計也包含了視覺，所以我們在決定用什么樣的設計形式之前需要考慮更多，入業務、用戶價值等等，從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。
不管是做UI設計還是畫插畫，有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但其實都是有講究的。本文不會給大家重復講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩，并且在產品設計中使用的。
大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內存在兩種感光細胞：視錐細胞和視桿細胞，視桿細胞能夠感知光線強弱但無法感知顏色，而視錐細胞卻相反，視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞，而視桿細胞卻用的少，更多的是在黑暗的環境中使用的多。
視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞，分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。
大家在平時生活中都能看到，在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識，因為這些非常醒目。更容易被紅視錐細胞感知到，但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。
我們來做個實驗，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學看上去都會覺得是個漸變色，但其實它就是一個純色，不信的同學可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后，不在這個環境中直接進行邊緣對比，那就不會出現漸變的情況了。那光說原理，我們也來看一下在產品設計中需要注意的地方，因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。
還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊，但依然還是不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。
一般來說，產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫姟⒂腥?、好玩的特性，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風格對比起來太強烈，引起不適。
而且線上覺得還OK的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。
我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品，使用了高亮色來引導用戶視覺。
當然色彩的運用也會講整個頁面的層級凸顯出來，而不單純的用中性色來區分層級。
同樣是上兩張圖，大家可以清晰的看到，美團中的附近熱賣好點、滿減標簽、價格，其實都只具備信息的呈現，但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣，“展開”使用了輔助藍色，這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上，當然也會有其他的色彩來表示可點擊。
所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y
另外，UI設計中主色除了引導用戶的作用外，也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面，當前板塊標簽和正在播放劇集的激活狀態。
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標，或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造
在色彩的心理學上，大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面，可以看下方多種色彩的描述。
然而其實很多的產品使用的色彩和我們所認知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規人之中，咖啡應該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色
在瑞幸剛出來的時候，很多人其實不太習慣把這個藍色和咖啡結合起來，但是為了塑造品牌差異化，瑞幸一直將“藍色”作為品牌的主基調，“小藍杯”這一稱呼不但讓消費者感到親切，也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中，主基調同樣是使用藍色，不但符合了當下消費者的視覺偏好，也在為用戶留下記憶點之后，也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
會讓人產生“幻覺”！讓人產生視覺疲勞，例如我將餓了么這個界面的色調調整一下大家看一下，不亮瞎算我輸。
為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側重點，所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對不可以使用在UI界面中，尤其是主色。會讓你瞬間失明！
在很多dribbble的飛機稿中，經常能看到這樣的配色和練習。無論是在練習中還是實際項目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點且輕飄飄的感覺。
說真的，這樣的風格確實耳目一新，但個人覺得可能不會成為主流。因為它就和第五種一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調，這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點自相矛盾的感覺。
為了營造這樣的“新擬物”的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設計：“設計是需要被簡化的，但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。
例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼
首先我們必須要說，色彩肯定是需要結合產品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑，并且對市面上的app進行總結，我們發現大部分的產品色，簡單來講在我們HSB模式中去色都在一個固定的范圍，就像這樣。
在上文中也說到用色比例的631法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給2-3種層級即可，至少2種，至多3種。在選擇3個層次的中性色文字是，給大家一個建議：標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你是否有在聽別人說某某原理法則時一臉懵B的時候？明明知道這個原理卻說不出它的名字？不要緊，本文就來介紹與人機交互設計相關的15個常見的設計心理學原理，約13000字，幫助你了解產品的定位，需求目的和交互邏輯，洞悉用戶的各種行為，也為自己的設計予以理論支撐。
1956年美國科學家米勒對人類短時間記憶能力進行了研究，他注意到年輕人的記憶廣度為5-9個單位，就是7±2法則。與席克定律類似，神奇數字 7±2 法則也經常被應用在移動應用交互設計上。
因為人腦處理信息的能力有限，所以它通過把信息分成塊和單元來處理復雜問題。7±2法則應用很廣泛，例如iPhone通訊錄中的手機號碼被分割成”xxx-xxxx-xxxx“的形式，還有銀行卡號、身份證號，我們總是喜歡把一長串數字拆分開來讀寫，目的就是降低記憶成本，提高信息的易讀性，從而達到視覺防錯的作用。
Web導航欄選項卡數量不超過9個
在設計網頁導航時，如果希望用戶記住導航區域的內容或者一個路徑的順序，那么數量應該控制在7個左右（不超過9個），如蘋果、Dribbble、behance等網站的導航分類。
Web導航欄選項卡數量過多時
如果導航或選項卡內容很多，可以用一個樹狀層級結構來展示各級別關系，但要注意其廣度和深度的平衡。例如人人都是產品經理和Dribbble，把更多子類別收在二級目錄里。
移動端選項卡導航
在移動端應用設計中，常見的電商app例如奈雪和樂凱撒分類模塊，兩個產品的商品分類布局形式很相似，都是用了選項卡的方式來分類商品，層級明確，相應的提升了用戶找尋單品的效率。
Tabbar區標簽最多不超過5個
在移動應用設計中，底部Tabbar最少3個，最多為5個（幾乎沒幾個超過5個），這樣做除了減輕用戶記憶負擔，超過5個會降低視覺和操作上的體驗。事實上就算只有4個，我們也經常想不起微信底部的4個Tab分別是啥。
頂部導航欄頁簽
我們看到的大部分app頂部導航欄的頁簽數量都嚴格遵循了7±2法則，雖然在橫軸可無限滑動，
但在顯示區域只保持7±2法則的顯示數量，例如馬蜂窩、飛豬旅行等。
金剛區圖標不超過8個
我們常說的“八大金剛”就是一屏顯示8個圖標，超過的則放在第二屏。如果兩行10個，往往第十個是“更多”入口，總的來說也沒超過9個。
banner文案不超過9個字
產品運營banner主文案字數通?？刂圃?個字以內，在設計時也通常把長標題一分為二排兩行，便于用戶快速閱讀，提升點擊率。
在交互設計中，7±2法則是減少用戶認知負荷，提升用戶體驗的重要環節。同時還強調了在設計過程中對產品的預見性，避免在不斷為產品添加功能時，破壞原有的視覺基礎。
0無需說明書
喬布斯曾說過：“蘋果應該創造所有人都可以使用的產品，即使沒有用戶指南”。
1 一看就會
簡單易懂，看一眼就明白你想說什么，不用教學就知道怎么用。
2秒法則
所謂“2秒法則”，是指用戶在使用某類系統時的等待時長不超過2秒。在極短的時間內展示重要信息，給用戶留下深刻的第一印象。這里的2秒只是一個象征意義上的表達，也許有一點隨意，但是這卻是一個合理的數量級。我們熟知的“F”瀏覽模式其實就是間接縮短用戶看到重要信息的時長，達到快速瀏覽的目的。
進入App的首頁加載時間如果過長就會導致用戶產生厭煩情緒，很容易退出甚至卸載App的行為。因此我們看到許多應用將首頁加載時的空白頁進行占位圖設計。
下拉刷新也是一個設計點，為避免刷新時間過長，設計師通常會在加載動畫上做文章。充滿趣味性的動效能安撫用戶焦躁不安的心情，無形中降低了用戶對等待時間的感知。
APP里面的banner設計要有視覺沖擊力，如果兩秒之內沒有抓住用戶的眼球，可能就被用戶忽略了。
因此，在設計互聯網產品的頁面時，用戶等待的時間越短，用戶體驗越佳。反之，就會讓用戶產生焦慮的情緒。
3次點擊法則
用戶在3次點擊之內如果還沒有找到他們想要的信息或了解網站特色，他們就會離開該網站。這條原則突出了清晰的導航，符合邏輯的結構和易于理解的網站層級的重要性。(來自《眾妙之門》P133)
其實在交互體驗中，點擊的次數往往是無關緊要的。只要每次點擊都是無需思考的，毫不費力地順勢進行，那么用戶的挫敗感就會大大降低。如果你的網站能夠讓用戶知道他在哪里，從哪里來，要到哪里去，并且能夠讓用戶了解如何完成目標，這樣的點擊即使有10次也是沒有問題的。例如，在京東購買一件商品需要經過“立即購買>確定>提交訂單>選擇支付方式”4次點擊才能到訂單支付頁面完成購買，這過程中可能還穿插其他的點擊行為（比如選擇地址、優惠券），用戶并沒有感受到不方便，使用過程流暢而自然。
在可用性測試領域，“三次點擊”定律一直是一個很具爭議內容。體現在以下幾點：
·研究表明，用戶在超過3次點擊還沒到達想去的頁面時，往往并沒有退出網站，而是會繼續多點幾次；
·當把一個3次點擊就能到達的流程改為4次點擊的時候，用戶發現目標頁面的能力反而提升了600%；
·合理的導航系統比點擊次數更重要；
·比起“3次點擊”，有人提出了“1次點擊”定律，即用戶的每一次點擊都應該讓他們更接近目標，同時盡量減少能干擾實現這一目標的因素；
·用戶抱怨要花很長時間才能找到某個產品，實際上他們是在抱怨無法找到想要的東西，如果用戶找到了想要的東西，他們就不會抱怨點擊的次數了；
英國心理學家William Edmund Hick認為，在簡單的判斷場景中：一個人所面臨的選擇越多，做出決定所花的時間就越長。有時候在選擇中花費太長時間從而導致決策失敗。
生活中我們也經常會面臨選擇困難癥，比如早上起床就糾結今天穿什么？中午去食堂就會糾結吃什么？造成我們如此糾結的原因就是因為選擇太多了（遠古人就沒這些煩惱，尋找食物時逮著什么就吃什么）。
在設計中的應用
應用到界面設計中也是如此，選項越多，意味著用戶做出決策的時間越長。
例如APP Store首頁，改版前的首頁把眾多app平鋪出來，對目的不明確的用戶來說選擇有點多。改版后的首頁大幅減少了App的數量，卡片的設計方式簡潔且目標清晰。
不得不面對較多選項時， 對主要和次要的選項做視覺權重區分，做好設計上的歸類，提升用戶做決定的效率。例如美團外賣金剛區第一行5個入口的圖標在尺寸和表現手法上都比下面的入口圖標要大更醒目?！拔业摹表撁姘岩恍┑皖l率功能或不太重要的功能收納到“設置”里，此外還可以通過置灰、鎖定等方法間接減少選項，降低干擾。
對于多流程的任務進行分步操作，讓用戶專注眼前任務。 例如Clubhouse注冊時，把需要用戶選擇的選項分步引導完成，讓用戶能專注當前行為。
對于多種類別的選項應當做二次分類的區分，我們都知道電商平臺的品類繁多，僅通過單一分類是不夠的，比如數碼頻道下面還分相機、影音娛樂、數碼配件、智能設備、電子教育等大的分類。商品詳情頁的篩選功能也是貼合使用場景來設計的，所以分類不怕多，就怕混亂。
適用邊界
雖然選擇越少，用戶做決策的時間越短，但這并不是提高用戶體驗的唯一標準，過度的減少選項，可能導致負面效果。
如上圖右，如果在刪除App的彈窗中只有一個“刪除”選項，沒有明顯的取消之類的途徑，那么用戶會覺得特別難受，感覺被強迫去刪除。如果當下有急需使用手機處理一些事情，那么這樣會把這種負面情緒給無限放大，讓用戶抓狂。
希克定律主要受影響于選項的多少，但是它不適用于需要高難度閱讀的任務。例如考試試題每道題只給你A、B兩個選項（學渣竊喜），那也太容易蒙了，這就是?？硕稍诖鸢冈囶}中的局限性。
?？硕墒且粋€可以適用于設計的指南，記住要盡量減少用戶在一次決策中要做的選項，因為決策效率是一個產品導致用戶流失的重要原因之一。引導用戶在明確的選項之間進行選擇，以便快速將他們送到某個地方（例如賬單支付），這將大大提升用戶體驗并達到你的目標。
費茨定律由心理學家Paul Fitts提出，用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。舉例來說，你伸手去拿桌子上的咖啡杯，開始你的手臂迅速地往杯子位置移動，接著你會放慢速度直至找到杯子把手，這個杯子把手的大小與你“抓住”它有著一定的關系。
如上圖所示，如果光標現在在任易地點想要去點擊目標target，最短路徑一定是D，最短路徑上容錯的最長路徑是D+W，只要水平上移動超過了D+W你就點不到了，而這個點擊動作所耗的時間是一個常數加上一個以D為正比W為反比的函數的和。
詳細解釋如下，圖中紅色方塊代表點擊目標，虛線代表移動路徑，此時因為紅色方塊目標較大，所以用戶從任何一處點擊都很容易（可以用鼠標在屏幕任意點移至紅色方塊試試）。
相反，紅色方塊目標變小，快速點擊就會困難很多，很難一次到位。
但如果紅色方塊目標很小距離很近的話，因為移動范圍小，也能準確的點擊到。
按鈕越大越容易點擊
在頁面中，大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的觸達目標。比如頁面中的大按鈕。
將按鈕放置在離開始點較近的地方
夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域，相比常見頂部搜索欄更方便操作，效率更高。
相關按鈕之間距離近點更易于點擊
注冊登錄界面，通常將「注冊」和「登錄」放到一起，不僅可以在視覺上增強用戶對他們相關性的認知，還可以減少在他們之間的距離 。
適用邊界
費茨定律鼓勵減少距離，增加目標大小以提升用戶效率，但反過來亦適用。比如iPhone關機按鈕，沒有使用點擊關閉，而采用滑動操作，還把按鈕放在屏幕頂部，這樣明顯增加了操作難度，進而避免了用戶誤操作。
App彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方，希望用戶先完成彈窗提示的任務。還有啟動頁廣告，喜歡把“跳過”按鈕放在難以點擊的右上角（恰飯重要），以提高用戶的誤觸機率提高轉化。
思考小結
按鈕越大越容易點擊，因此在程序開發中，會增加按鈕點擊的熱區范圍，減輕用戶精準點擊的壓力。但也不能過分的大，容易引起誤觸；
讓相關聯的內容更靠近彼此，用視覺手法增強用戶對它們相關性的認知。距離產生美，注意不要靠的太近，會出事；
將按鈕放置在離出發點較近的地方，比如頁面主按鈕一般會放在屏幕底部易操作區域；
屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素，因為在屏幕邊緣和角落位置有“無限可選中”的屬性，可以大膽操作而無需“微調”，參見macOS底部dock欄；
定律的反向使用可以適用一些特殊場景，比如想達到某種目的而降低按鈕被點擊的可能；
“任何事物都具有其固有的復雜性，無法簡化”。
泰斯勒定律（Tesler’s Law）由Larry Tesler于1984年提出，也稱「復雜度守恒定律」。
該定律認為：每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
生活中很多我們習以為常，感覺便捷方便的生活方式，是無數卓越的數學家、工程師、設計師等無數的時間投入，才實現的某個小功能，是他們把這些復雜性轉移到自己身上替我們簡化了。
說回移動端，每個應用中都有其無法簡化的復雜度，也不能按照我們個人意愿去除這些功能。這就是為什么飛機稿都簡潔好看，而一搬到線上就面目全非。常見的復雜性轉移有：“查看更多”、“查看全部”、“查看詳情”、“展開和收起”之類的文字做轉移跳轉，比如：頂部導航欄的更多圖標，就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中，把用戶的操作范圍轉移到另一個地方。
除此之外，還有一些降低操作復雜度的方法：
刪除、組織、隱藏
視覺層面的“降噪”方法，刪除會干擾用戶操作的選項；功能分類明確，圍繞用戶行為組織信息內容；隱藏那些不常用而又不能少的功能，延遲及階段性展示。總的來說就是將復雜的信息收起來，展示重要且簡潔的界面。
簡化交互設計
可以用代碼節省用戶操作時間的地方，是互聯網人一致的追求。例如，B站的一鍵三連，用戶長按點贊按鈕，會同時觸發點贊、投幣和收藏，省時省力。
算法解放“生產力”
個性化算法就是通過技術手段，將用戶復雜度降低，而轉移到開發者身上。抖音為什么會讓人上癮？是算法知道了你的喜好，專推給你喜歡的內容而不用自己去找，誰都喜歡私人定制。這對用戶來說是一件好事，但就像魯迅說的：“你覺得好，一定是有人在負重前行”，這里的簡化復雜的難度就轉移到設計和開發身上了，還逼得機器去學習。例如抖音、淘寶、知乎首頁推薦的內容都是基于你的喜好定制化推薦給你的。
我們常說以用戶為中心去設計，就需要從用戶角度出發，在交互設計中盡量簡化操作的復雜度，降低學習成本。但如“復制粘貼之父” Larry Tesler (1945-2020) 所說：“任何事物都具有其固有的復雜性，無法簡化”。因此，如何取得復雜度的“平衡點”就是重要的部分，是讓工程師及設計師花費大量時間去降低產品的使用難度，還是在設計中保留一定的復雜度是我們需要思考的事。
該原理是由麥肯錫國際管理咨詢公司顧問Barbara Minto提出的理論，她強調結論先行，論點自上而下。
你是否遇到過這樣的場景，部門開會時有人口若懸河的講了半天，到最后你都不知道他想說什么。所以如果開會時你會走神，這不怪你，只怪講演者說話沒有邏輯，沒有重點。
金字塔原理指示結構化表達遵循結論先行的原則，即任何問題都能歸納出一個中心點，讓受眾能夠第一時間清楚你想談論的主題。然后由數個論據作支撐，而這些一級論據可以繼續由數個二級論據支撐，如此延伸，狀如金字塔。自上而下，上層影響下層。
應用到交互設計上，即將信息展示的重點與交互行為的主任務優先展示，再根據用戶在這個界面上所愿意停留時間逐級給予更多細節補充。以京東的商品詳情頁為例，首先金字塔的最上層是用戶目標明確直接進行“立即購買”的底部全局按鈕，其次是商品的頭圖和用戶評價這些，讓用戶了解更多信息，進一步促成購買，最后一層是提供商品相關的全部信息、參數、評分等，確保交易的最終完成。在這個過程中，用戶在每一層花的時間也在逐級增加，呈金字塔狀。
映射到設計師身上也是如此，從設計新人到設計總監，中間差的就是一個完整的設計技能金字塔。就像升級打怪，每完成一項任務獲得相應的經驗值，累積的經驗值幫助我們更快的升到下一級。當把工作中的需要攻克的難題一一解決之后，你的設計水平會在不知不覺中更加精進，形成一套自己的設計風格，成為一名優秀的設計師。
有趣的是，把金字塔模型倒過來就成了“用戶漏斗模型”。自上而下，激勵用戶成長。它告訴我們：
用戶的需求是永遠滿足不完的，所以什么值得做，什么是可分階段去實現的是決策人需要明白的。如喬布斯所說：“消費者并不知道自己需要什么，直到我們拿出自己的產品，他們就發現，這是我要的東西”；
不斷完善主要功能，以滿足金字塔頂的核心用戶群。決策者常常添加一些自己想要的而不是用戶想要的需求，比如在信息流中添加一個廣告位；
如何優化完善產品架構，檢驗產品策略的合理性和完整性；
防錯原則由世界著名的品質管理專家新鄉重夫提出，即在過程失誤發生之前加以防止，是一種在作業過程中采用自動作用、報警、標識等手段。使操作人員不用特別注意也不會失誤的方法。
防錯原則認為大部分的意外都是由于設計的疏忽，而不是人為操作失誤，可以通過優化設計把過失降到最低。該原則最初用于工業管理，后來應用于界面交互設計中，當使用條件沒有滿足時，常常通過功能失效來表示。
自動檢測提示
bilibili在登錄時輸入框沒有內容或沒有輸密碼時，登錄按鈕處于禁用的置灰狀態，只有兩者都滿足了才可以正常點擊。此外登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、郵箱錯誤等不同的錯誤。通常必須賬號和密碼同時滿足且匹配才能成功。
Twitter發帖時只允許用戶輸入140個字，為了提醒用戶，其解決辦法是在鍵盤上方的工具欄上顯示還能輸入幾個字符，超過會以負數警示。知乎發布文章標題過長時也會提示錯誤預警。
消除可能的失誤
防錯法則認為大部分的出錯都是產品設計的不夠優秀，而不該責怪用戶操作疏忽，通過設計手法可以把出錯率降到最低。防錯法則的核心觀點是，如何有效的在用戶出錯之前就盡量避免錯誤的發生。比如，美團外賣在接受短信驗證碼時，系統會自動提取驗證碼在鍵盤上方顯示，用戶點一下就可以自動填寫，省去了跳出應用——打開短信——記住驗證碼——再輸入的繁瑣過程，有效預防了出錯的機率。還有微信在綁定銀行卡時也是通過掃描銀行卡自動提取賬號，避免手動輸入的出錯率。
將失誤降至最低
二次確認，在一些比較重要的場景讓用戶二次確認，通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結果，進一步降低出錯率。例如，最近大家都在用的報稅App，會在提交信息前再次確認。
視覺暗示
可在視覺（置灰或隱藏）上屏蔽那些不能選的選項，避免用戶點擊后才報錯或點擊沒反應。
其次，一些不可恢復的操作，視覺上通常會給強標識。例如，刪除短信時的文字顏色“變紅”。
為用戶犯的錯買單
當用戶輸入錯誤信息時，比如打錯字，系統應該給予用戶想要的信息，而不是無動于衷，冷漠視之。
范圍限制
其實限制用戶的選擇并不是一個好主意，但是如果有明確的規則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。例如，Airbnb訂房可選日期和設置鬧鐘時的時間范圍。
研究得出，使用產品時有77.7%的錯誤都是人為的，防錯法則可以幫助設計師站在用戶體驗的角度考慮設計方案，做到操作前、中、后都有及時的反饋，預測到他們有可能發生的誤操作狀態，讓用戶更快完成目標，幫助用戶減少出錯率。
每次拿起U盤插入電腦時，我就呆住了，到底朝那個方向才是對的？
防呆（Fool-proofing）是一種預防矯正的行為約束手段，運用避免產生錯誤的限制方法，使出錯的機會降至最低，進而達到“第一次就把工作做對”之境界。
設計師應謹記：不要認為用戶是專家。比如，我們都知道“漢堡”圖標就是菜單，點擊這個按鈕就會調出某些功能。但是設計師忘記了普通用戶可能并不理解什么是漢堡包圖標、什么是面包屑、什么是抽屜式導航、什么是3Dtouch、怎樣雙指滑動。更何況普通用戶并不會研究App，在他們眼中產品只是眾多工具中的一個。因此，一定要把交互和設計做的簡單，通用的圖標、功能和交互方式最好保持用戶熟悉的樣子，減輕用戶重復學習的負擔。每個頁面應強調一個重要的功能而不應該讓用戶做選擇題，這些都是有效防呆的好方法。
△頁面的中主按鈕更突出
防呆設計是預防錯誤發生的方法，讓非專業、無經驗的用戶可以高效完成正確操作，不要讓用戶去思考，而是我們時時為用戶思考。
又被稱作“簡單有效原理”：“如無必要，勿增實體?！?
通俗點去理解“如無必要，勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下，要求得越少的那個就越好，越有價值”。
應用到設計學領域，該法則認為做產品時功能上不可過于繁瑣，應該保證簡潔和工具化。例如，產品中為用戶提供了收藏功能是否就不再需要喜歡？提供了喜歡是不是不再需要收藏？一定要保證功能上的克制。不必要的設計元素會導致使用效率降低，還會增加不可預知的后果。建議在不損及功能的前提下，干掉多余的元素，當兩個設計方案都能達到設計目的時，選擇較為簡單的那一個有利于更好地傳達內容更好地用戶體驗。
總的來說，我們可以結合《簡約至上》一書中提到的刪除、組織、隱藏、轉移四個策略來將復雜的設計和體驗變得更加簡單。
刪除：關注核心，讓用戶注意力集中在自己要完成的目標上，刪除不必要的功能、流程和造成視覺混亂的元素等；
組織：繁瑣的功能通過分塊，被組織成清晰的層次結構。還記得我們前面說到的“7±2法則”嗎，把項組織到7加減2個塊中；分塊越少，選擇越少，用戶負擔約輕；
隱藏：隱藏那些主流用戶很少使用，但自身更新需要但功能。通過漸進展示和適時出現的方法減少干擾；
轉移：把合適的功能轉移到合適的設備上去。讓用戶感覺簡單的一個重要前提，就是先搞清楚把什么工作交給計算機，把什么工作留給用戶。
小測試，下列飲料中哪一種給你印象最深刻呢？文末揭曉。
可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達
雷斯托夫效應又稱隔離效應（isolation effect），以及新奇效應（novelty effect），前蘇聯心理學家馮·雷斯托夫認為，某個元素越是違反常理，就越引人注意，收到更多的關注。
一樣東西與以往經歷明顯不同就產生了經歷差異。比如人生中的很多第一次，第一次高考、大學的第一天、初戀、第一份工作等等。該差異也會出現在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。
該理論以多種不同的方式應用到設計中，最明顯的就是如果想要突出某個重點內容，就要使它特殊化，通過色彩、尺寸、留白、字體粗細等設計手段。利用對比來凸顯想要表達的重要信息。例如金剛區、tab欄的運營活動廣告，特殊化的設計讓它們在背景中脫穎而出。
個人中心的會員卡為了吸引用戶注意，增加開通率，都成了重點設計對象。
與以往不同的界面設計可以更加的吸引用戶，加深用戶的記憶，同時擴大了活動對用戶的影響力。例如每年淘寶的雙11首頁設計都與往常不同。
Google doodle 會在一些比較特殊的日子改變 logo 的設計，把logo設計成與這個日子相關的插畫或涂鴉，與平時的 logo 形成差異化，幫助人們更好地記住這個日子。
因此我們在界面設計中，若想讓用戶對哪個模塊或者是元素引起注意或點擊，就可以打破常規對該元素進行強調設計，使他在背景中脫穎而出。但是不要任何元素都強調，因為什么都強調就等于什么都沒強調，就沒有重點，所以要謹慎使用這個方法。
回到開篇的題目，答案是「嶗山可樂」。相比其他飲料，嶗山可樂遇到的少，反而成了最特別的一個了。你的答案是什么？歡迎在下方留言探討。
食之無味，棄之可惜
損失厭惡是指人們面對同樣數量的收益和損失時，認為損失更加令他們難以忍受。 同量的損失帶來的負效用為同量收益的正效用的2.5倍。比如，丟100塊錢的痛苦感要遠高于你撿到100塊錢帶來的幸福感，也就是說要至少撿到300塊才能平復之前的心情。
生活中類似的栗子還有很多，比如旅游時，雖然這個景點很爛，人們依然覺得來都來了，還是要看完再走才“不虧”；吃自助餐時，明明吃不下那么多，可想到花了那么多錢，就要盡可能的多吃才算“回本”，真是應了那句話：“食之無味，棄之可惜”；花了50塊買了張電影票，過了10分鐘發現是部爛片，就算在電影院睡覺也不愿提前走，覺得這50塊錢不能白花...
那么，該如何將“損失厭惡”賦能給產品設計呢？
最典型的莫過于電商App中的各類券滿天飛，比如：買二送一、3件7折、倒計時xx小時后恢復原價等等。商家就是為了營造現在不買就會錯過的套路，用戶也會覺得失之可惜。一年一度的天貓雙11，京東618，還有情人節、中秋節等各種有的沒的節日都是商家利用“損失厭惡”心理為基礎刺激消費。
我們App的用戶粘性不太理想，增加一個“簽到”功能吧，產品經理如是說。如是我們看到各種簽到得禮品，贏紅包等活動。中間還不能中斷，要連續簽到多少天才能得到獎勵，用戶也擔心中斷的損失。
某網盤下載文件時，會給你一個10秒VIP高速下載的體驗，計時過后又恢復到龜速，讓你恨的牙癢癢。雖然這招有點損，但用戶體驗到了VIP的快感，很多人還是會乖乖成為付費會員。
產品運營中會經常發一些優惠券，雖然知道自己不會用，也要先領了再說。這些券也都有時間限制，快過期的提醒也會加快用戶決策。還有0元開通會員，套路是第一個月免費，次月開始按正常價自動續費，典型的“騙”進來養肥了再“殺”。
人天生會對危險的，不好的東西避而遠之。如是我們就看到保險行業，他們會用一些負面信息（空難、車禍）刺激你，用戶就會產生焦慮，自然就想規避掉這些概率小的風險。例如購買機票時的意外險，QQ退出登錄時的提示。
還有就是有用戶自己的內容的東西，一般不會輕易舍去。拿我個人來說，飛書一直是我的寫作工具，后來看到幾個更好用的軟件，但要想到把原來的這么多東西全部轉移過去也是件很心累的事，太麻煩，還是繼續用飛書好了。QQ這個“古老”的軟件，估計很多人好久都沒打開過了吧，但是讓你刪了它，你還是不愿意的，因為那上面有很多青春的回憶。
用戶會將大部分時間花在其它網站上，因此他們會希望你的網站也能像他們已經掌握的其它網站一樣，擁有相同的使用模式和習慣。
Jakob定律是由Jakob Nielsen提出的，他認為用戶在其他網站所積累的經驗教會了他們如何使用網站，所以他們會希望你的網站可以與那些熟悉的網站一樣，相似的使用方式，在使用你的產品、服務、內容和信息的時候，他們不會感到恐慌，而是輕車熟路。該原則鼓勵設計師遵循常見的設計模式，以避免混淆用戶或導致更高的認知成本。
例如YouTube2017年改版前后的對比，在新版中，網站框架和功能上幾乎沒動，只是在UI上做了順應新的設計準則，比如調整字體大小、顏色、欄目間距等。整體上和舊版沒太大區別，而且還給用戶提供了舊版的選擇。
在移動端App中也應如此，在具有相同功能的頁面，盡量保持一致。大到頁面底層框架（比如電商應用中的購物流程），小到UI設計中的一個按鈕，一個圖標，甚至一句微文案。
在設計產品時，要先延續大眾早已習慣的概念模型。然后再從自己的產品出發，對其進行改善。而不是從零開始制定自以為是的流程。
日常使用的各類修圖軟件，版式都高度相似，中間是圖片，各種濾鏡、貼紙、調整等功能都放在底部操作區域，很多相同功能的名稱都一樣。這是用戶最熟悉的布局，可降低用戶在同類軟件使用的學習成本提升使用效率。
也許你會質疑當所有產品都遵循相同都設計模式，會讓產品同質化嚴重，答案是必然的。此時需要深入了解用戶的目標和心智模型（用戶訪談、用戶畫像、用戶體驗地圖等），并將其應用到我們的產品設計中去，縮小我們與用戶心智模型之間的差距，從而獲得良好的用戶體驗。上文YouTube例子中，就是通過簡單的用戶授權（新舊版本選擇），避免了心智模型的不一致會帶來的問題，當用戶準備好隨時可以切換到新的版本。相反的案例Snapchat在18年設計改版時，因為新的布局未能確保改版前后用戶心智模型的一致性，導致大量用戶流向競爭對手Instagram那里了。
但是也要注意設備之間的差異，比如在移動端“漢堡包”式菜單是個不錯的方案，可是放到桌面端可能并不太友好，因為大屏幕可視范圍更大，小小的漢堡包圖標很容易被忽略，這時候平鋪出來可能會更好。
思考總結
1、用戶會把在其他產品使用中已熟悉的操作習慣轉移到另一個看起來相似的產品上；
2、利用現有的思維模型，使用戶可以專注于自己的目標上，而不是學習新的操作方式；
3、在進行必要的改版時，請給用戶過渡到新版本的機會，即可以選擇短時間內繼續使用舊版本；
看名稱挺拗口，另一種翻譯叫做“對角線平衡的和諧狀態”。它告訴我們瀏覽頁面是由左上至右下的視線流，左上角是視覺第一落點區，右下角是視覺最終落點區，因此右上角和左下角都是一個強烈的視覺盲點區，大多數時容易被忽略。
在進行信息排布時，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個視覺落點可以展示重要操作。運用視覺元素來創建一條虛擬的“線”，讓用戶的視線跟隨左上到右下這條對角線移動，符合用戶習慣性的眼動規律。
古騰堡圖表應用最典型的例子就是商品詳情頁，在界面的頂部展示商品圖片、名稱、價格、快遞和優惠等用戶主要關心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購買按鈕。
我們都知道一般頁面按鈕都在界面底部是因為離手近，方便操作，但不僅僅如此。還因為瀏覽是用戶的第一行為，他們的視線會根據頁面元素進行移動，最終停留在底部結尾的地方。
看各種社交產品評論、點贊的位置，就知道產品希望用戶先干什么的想法。
彈窗的按鈕擺放一般都是左「取消」右「確認」，目的是讓用戶最快地看到主要操作內容。
余額寶的「轉出」在左，「轉入」在右，畢竟誰也不想財往外流是吧。
既然如此，為什么“發布”頁面的按鈕都在右上角呢？因為發布頁是屬于“編輯頁面”，需要用戶謹慎操作，這里關注的核心應該是可編輯內容區域，而不是按鈕本身。
類似的例子還有很多，設計中與此視覺流與節奏規律相似的還有F型布局和Z型布局，合理運用這些節奏模式，使用者會跟隨你“設計”的視覺流和運動規律來瀏覽頁面，有效提高用戶閱讀的節奏和理解能力。
美國心理學家亞伯拉罕·馬斯洛（Maslow.A.H.）從人類動機的角度提出需求層次理論，該理論強調人的動機是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求，依此由低層次到高層次的過程。馬斯洛需求層次理論最大意義就在于，它告訴了我們，人在滿足了基本的需求之后，就要去實現更高的需求和目標。
馬斯洛需求層次理論有兩個基本出發點，一是人人都有需求，某層需求滿足后，另一層需求才出現；二是在上層需求未獲滿足前，首先滿足迫切需求，該需求滿足后，后面的需要才顯示出其激勵作用。例如，在能感受到愛之前，他們的生理和安全需求一定要得到滿足。
回歸到產品，一款產品，最核心的是解決用戶的需求。馬斯洛需求層次理論，為產品的需求分析指明了方向。
生理需求：滿足人的最基本需求，如衣、食、住、行、生理方面的需求。諸如美團外賣、淘寶、馬蜂窩等為日常生活提供方便的應用；
安全需求：人生安全、財產保險，也是強需求。如是各類投資理財軟件層出不窮。
社交需求：包括友情、親情、愛情多個層次，滿足人類社會關系，讓每個人不再是孤單的個體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛；
尊重需求：每個人都有被尊重的需求，都希望展現自己，獲得人們認可。此需求可以深度結合在社交需求中。
自我實現：最高層級的需求，完成與自己的能力相稱的一切事情，實現自己理想的需要。結合到產品可以理解為能滿足自己外在展示（炫耀）的需求，如各類美顏軟件，美化后的照片曬到朋友圈，給人看到最好的一面。
由此規律可以看出，越靠近底層需求越是剛需，越往上，就變得越來越不必要，如自我實現，變得可有可無，不再是所有人的剛需。一個優秀的產品，深諳人性滿足用戶核心需求，才能形成持續穩定高用戶粘性的產品。
序列效應法則又叫系列位置效應，是指一種記憶現象： 在列舉項目時,排在最前面與最后面的元素，要比排在中間的更容易讓人記住。
因為人們對排在頭、尾的項目，要比排在中間的更容易記起來。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗，卻很少人知道第二位奧爾德林；班級里我們一般都知道成績最好的第一名和倒數第一名，至于排在中間的很難記住。因此對排在開頭的項目產生加強的回想效果，稱為“首位效應”( primacy effect)。對排在結尾的項目產生加強的回想效果，稱為“近因效應”( recency effect )。
分類頁簽中，我們通常都會記得“精選”、“熱門”這類標簽，是希望給用戶進入App后看到的主要內容。這就是“首位效應”，把重要性高的內容放在首要位置。
我們都知道界面中“返回”按鈕放在左上角，除了操作習慣和防誤觸外，還因為它出現在頁面左上角最開始的地方，更長久地儲存在長期記憶之中，需要“返回”時能夠快速回憶出來。
tabbar數量不管是3個還是5個，用戶通常都會記得第一個“首頁”和最后一個“我的”，對排在中間的都會選擇性的忽略掉。
有時候新上一個功能，產品想提高它的位置引起用戶注意，會和“我的”互換位置。例如網易云音樂，新版本中把“我的”放在第三個tab，為了提升“云村”重要性，把它放置最后一個tab，正是利用了“近因效應”。
近因效應常用于及時進行反饋的設計界面中，比如點贊、評論、分享等功能置于底部不僅可加深印象，同時用戶在看到有趣的內容，想要評論或分享時，不用等到文章看完即可操作。從而增強內容粘性，提高互動率。
用戶的記憶具有系列位置效應，而且人的短期記憶非常有限，通過序列效應法則的應用，我們可以幫助用戶減輕記憶負擔。在排列項目時，把重要的放在首位或末尾，以達到最好的記憶效果。
文章來源：站酷 作者：Fyin印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
定義：
1.同一頁面內不同模塊描述
文章來源：站酷 作者：體驗為王UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力（無論是精神上還是物理上）。
理想情況下，我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本，并且是檢驗可用性的里程碑。
不幸的是，由于大多數站點和應用程序都提供了用戶可能想要做的許多事情，因此很少能達到零交互成本。大多數時候，用戶必須四處瀏覽，閱讀，可能滾動，找到有希望的鏈接，單擊它，等待頁面加載，然后重新進行整個過程。有時，一個新窗口可能會在現有窗口的頂部彈出，在這種情況下，用戶必須將注意力轉移到新窗口上，也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下，用戶可能需要記住一頁上的信息，然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。
可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說，它們最小化：
閱讀
滾動
環顧四周以查找相關信息
理解提供的信息
單擊或觸摸（不會出錯）
打字
頁面加載和等待時間
注意開關
內存負載-用戶必須記住的信息才能完成其任務
這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如，閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難，而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道，但是如果蜂窩網絡覆蓋較慢，則移動設備上的頁面加載可能會花費很長時間。
許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如，網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。
讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本，并且在啟動Dictionary應用程序后立即開始分析。
啟動應用程序后出現的第一件事是啟動屏幕。
在這一點上，交互成本包括等待幾秒鐘，以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間：
在此頁面上，互動成本來自定位搜索框。幸運的是，搜索框非常顯眼地位于頁面頂部，因此我們可以放心地認為，用戶只需很少的精力就可以找到它。找到后，用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標，因此交互成本也可能會降至最低。
接下來，用戶必須編輯搜索查詢。
當輸入焦點在搜索字段中移動時，自動建議的詞將自動顯示。
用戶必須查看自動建議并確定它們不相關，然后清除當前查詢。他們可以通過按右側的灰色x按鈕（如果他們熟悉iOS規則）來執行此操作，也可以通過按觸摸屏上的Delete鍵來逐個清除字符。
刪除后，用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時，關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。
選擇（或鍵入）單詞“ ceremony”后，用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面：
用戶必須推斷Origin可能包含有關單詞來源的信息。（對于大多數用戶而言，這是一個簡單的推論，因此認知成本很低；但是，如果改用“詞源”一詞，則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩；因此，“來源”是更好的選擇，因為它降低了交互成本。）
讓我們總結一下交互成本的各個組成部分，以找到“儀式”一詞的由來：
等待啟動頁面
搜索
輸入幾個字符
掃描自動提示列表，以查看所需單詞是否在其中
如果否，請輸入更多字符并在上一步中重復
如果是，請通過點擊選擇所需的單詞
找到搜索框，然后點擊將輸入焦點移至該搜索框
閱讀搜索框中顯示的查詢和自動建議
決定查詢不相關
刪除搜索框中顯示的查詢
鍵入或選擇自動建議
點擊搜索
等待結果頁面
在結果頁面上找到相關的詞源信息
向下滾動頁面并掃描內容以查找詞源信息
找到標簽并閱讀
請注意，右側還有更多隱藏的標簽
推斷詞源可能是隱藏的標簽之一
注意到滑動會向右暴露內容
向右滑動
閱讀Origin并將該單詞與目標聯系起來，以找到單詞的來源
點擊詞源
了解“儀式”一詞的來源
如您所見，一個相當簡單而輕松的過程需要很多步驟和子步驟；他們每個人都會產生互動費用。對于某些人而言，交互成本微不足道-例如，記住人們向右滑動即可顯示更多內容，因此交互成本非常低，因為人們在移動設備或Web上已經多次遇到水平滾動。可以優化其他步驟以最小化交互成本；因此，在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣，將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。（當然，選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。）
請注意，對于前面各節中的某些步驟，用戶可以有多種選擇。例如，他們可以按灰色的x按鈕刪除當前字符串，也可以多次使用Delete鍵?；蛘?，他們可以從自動建議列表中選擇建議，也可以在最后輸入字符串。
人們如何決定采取哪種行動？答案在于預期效用的概念：
預期效用=預期收益–預期交互成本
用戶嘗試最大化一項操作的預期效用：換句話說，他們權衡了每個操作的收益和成本，然后選擇收益與成本之間最佳平衡的方案。
當有幾種方法可以實現具有相似利益的相同目標時，用戶通常傾向于選擇使估計的交互成本最小的操作。
例如，許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞，而是可能會再鍵入一個（或幾個）字符，直到可見“儀式”一詞為止，因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。
這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標，則除非與初始站點進行交互的收益確實很高，否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子，如果用戶真的想購買Apple電腦，他們可能會堅持使用Apple的網站，因為他們不太可能在其他地方購買。在這種情況下，用戶的動機確實很高，因此他們可能愿意忍受很高的交互成本。但是，如果用戶要購買燒烤架，則可能不在乎是否從Home Depot或Lowe's或其他站點購買，并且會離開互動成本高的站點。
營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益；可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。
交互成本是可用性的直接度量。實際上，該概念早在人機交互時就被引入，以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。
從長遠來看，快速評估設計的交互成本可以節省大量資金，因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間的比較工具：通常，將交互成本最小化的方案具有更大的成功機會。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“今天吃什么啊？”
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，面對的選擇越多卻越不知道如何做決定，或者當下做了決定覺會一直思考做的這個決定是不是最好的，選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？排行榜僅僅是用來降低用戶的選擇成本，為什么商家對排行榜也趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道，我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，某一相關的同類事物之間通過比較，反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應降低用戶自己的選擇成本，準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么？
一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費，前期需要花費大量的人力、物力，搜集相關的信息進行整理集合后，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助降低選擇成本的同時，也會影響這用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人，收集信息建立備選集，但由于京東在電子設備方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東完成了前期的信息搜集及備選集建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感，滿足自己的社交需求。
過年期間各家app紛紛推出自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要了解自身在大數據下的自我確認，通過各種各樣的榜單，判斷自身的能力、情緒、價值等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下。
從我們記事起，我們對世界的認識來自自己的父母或老師，而這些教導我們什么是對、錯，對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家，比如：醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
平臺權威性意味著說服力和影響力，在減輕用戶的決策壓力的同時，影響用戶做出平臺所需的決策方向；
每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性開始利用排行榜進行商業變現時，比如百度、58的競價排名，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
文章來源：站酷 作者：9號自習室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
國內互聯網近幾年發展迅速，在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈，很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示，2020年Q1全球移動互聯網應用下載量達336億次，同比增長了20.3%。
產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品，只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中，我們需要考慮兩個方面：國際化與本土化。
國際化+本地化的策略，也就是“glocal—global+local”，指的是結合國際統一和地區差異。這種策略在統一的前提下，通過靈活配置保障地區的個性化體驗，既能滿足統一維護提升產品效率，也能保障當地用戶的特殊訴求，是一種性價比很高的設計方案。
產品設計的國際化
產品的國際化，即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。
Chrome的不同地區首頁功能與樣式基本一致
一套通用的設計系統和設計規范，既可以幫助我們在產品的國際化設計中 樹立產品調性，又可以保證操作的 一致性，同時提升設計的 高效性。阿里旗下面向東南亞市場的購物平臺Lazada在開發之初，通過使用Fusion Design的設計系統，大大節省了設計的時間。在如此復雜的電商業務場景之下，整套產品的設計最終僅3靠個設計師就完成了。
設計系統對產品研發成本的影響
除此之外，一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象，增強 品牌的識別度與知名度。
產品設計的本土化
想要讓產品在某一個市場上站穩腳跟，對于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據地區差異相應調整產品策略。
UC瀏覽器在不同地區的首頁布局
為什么說本土化對于產品的出海非常重要？其原因并不難理解。Charles Eames說過，“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。
針對海外設計研究的思維框架
在考慮產品的本土化時，我們需要關注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐，總結出了一套“環境-人-需求“的研究框架，列出了可以去調研的多個方面。
螞蟻金服-“環境-人-需求”出海產品設計研究框架（做了小部分修改）
需求（價值）
首先，我們要做的第一步判斷就是原來的 用戶需求是否成立。產品在原市場想要解決的問題，是否在新的市場仍然存在，即我們的產品是否 有用？這個問題的答案決定了原先的產品是否對于該市場的用戶是有 價值的。如果有價值，那么就可以深入探索如何讓用戶用起來；如果沒有價值，那么就需要進一步判斷是否要繼續開拓這個市場，以及如果繼續開拓這個市場，在原有的產品形態上，我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的 新價值？達到了“有用”的標準，我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件，產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中，我們可以關注以下幾個層面的影響因素：
生活形態、價值觀
生活環境與社會環境會塑造當地用戶的生活形態與習慣。下圖分別是日本和北美地區的新聞資訊類App。同樣是推送新聞資訊，兩者在表現形式上卻大相徑庭?？梢钥闯鋈毡镜男侣凙pp布局緊湊、信息量大、頁面坪效很高；而北美的新聞App則更注重突出重點內容，信息密度相對來說并不高。
日本-新聞資訊類App
北美-新聞資訊類App
這種差異的背后，其實是兩地上班族生活形態的差異。日本城市小、人口密度大，上班族通勤大多會選擇地鐵。而北美地區面積大，大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤，同時開車也需要持續注意路況，只能在間隙中查看新聞內容；而乘坐地鐵的人雙手更加自由，也有較長的通勤時間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。
北美（左）和日本（右）各自的生活形態
有時候，某個地區的用戶長期習慣的操作模式，會與主流的操作模式有所差異。設計師junu在個人博客中講述了他為Melon（一個韓國主流音樂播放器）進行體驗優化的一段經歷。他發現Melon當時的播放操作邏輯比較冗長，用戶需要先點選列表中的多首樂曲，再點擊底下的播放鍵，此時Melon會將用戶所選歌曲自動生成一個列表并進行播放。這和當時Spotify等音樂播放器“點擊即播放”的主流交互邏輯相比，要更復雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此，junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪?；谟脩舴答?，最終，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
Melon播放器的點選操作邏輯
設備環境
10年前，高端大屏幕手機在東南亞和非洲市場普及率并不高，因此產品出海時需要考慮當地常見的設備是什么，并作出相應的適配。近幾年，隨著市場經濟的發展以及中國手機的成功出海，即使是東南亞和非州的發展中國家，高端移動設備的普及率也已經很高，這為設計師在考慮通用性的過程中減輕了不少負擔。不過，在為每個地區的用戶做產品設計時，仍然需要調研清楚當地設備的使用情況，比如什么樣設備更流行、普及率更高；如果某一地區的設備不夠發達，那么設計的操作也需要考慮到設備不同所造成的差異。
業態/監管
在不同的國家或者地區，各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中，在北美和英國占據了重要市場份額的Quickbooks、Xero等公司，卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下，歐洲本土的企業顯然會對當地的政策和制度更加熟悉，也更容易設計出符合當地企業與會計需求的財會產品。
2015年，Airbnb進入中國市場。在最初的市場調研和用戶調研之后，針對本土化，他們所邁出的第一步就是根據中國的業態環境對產品的前10%和后10%做了改造。其中，產品的前10%指的是登錄這一類用戶開始使用產品所需要進行的步驟，而后10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時，其功能流程基本相通（搜索地點、挑選房間、瀏覽信息等），不需要做過多的改變；但產品的前10%和后10%則決定了用戶能不能把產品用起來并不遇到障礙。因此，針對登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國本土用戶進入產品和完成訂單的壁壘。
Airbnb產品中國本土化的“前10%與后10%”策略
社會經濟
社會經濟環境的不同代表著社會階層狀況的不同，它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現，當地擁有銀行賬戶的人口僅占了總人口的34%，同期中國擁有銀行賬戶的人口則占了總人口的85%。而這34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪，繼而影響了產品各個層面的設計。
文化/宗教
在各個文化/宗教里存在著不同的意象，也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外，在不同的文化/宗教語境下，人們會有不同的行為模式與價值取向，這里我們會引入一個模型——霍夫斯泰德文化維度模式，來對這一問題進行更詳細的解讀。
霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度：
使用他們官方網站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個國家的文化維度指數，也可以選擇不同的國家進行對比。
在為特定地區的用戶設計產品時，我們可以以從這些維度去解讀他們的行為傾向，并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時，根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。
墨西哥地區的文化特征指數
滴滴墨西哥的本土化設計策略
這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上，“按照銷量排序”是一個被高頻使用的功能，消費者們認為什么產品買的人多，什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上，我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇，他們不認為他人推薦的就一定是好的。
國內外電商平臺對比
在企業即時通訊工具行業，國內的主流產品，如企業微信、釘釘等，都選擇了藍色這一比較沉穩的顏色作為主色調，在產品功能的形態上也偏向于嚴肅。而海外的辦公產品Slack，視覺色彩更加豐富；整體的產品定位也更加活潑歡樂，常常會有“不嚴肅”的表達，比如在界面多處都使用了emoji。這樣的產品形態差異，其背后是兩種文化在放縱（享樂）/克制（嚴肅）這一維度上的差異。
企業微信與slack的產品風格對比
內容本土化
除了功能框架上的設計需要考慮本土化外，產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對于內容本地化的一些經驗和思考。同樣，內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時，完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經翻譯，就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時，僅僅翻譯是不夠的。在看到這張圖片的時候，其他人種比如亞洲人可能就不會產生很強的代入感，也會缺少對產品的一種歸屬感（這個產品并不是為”我“設計的）。
Spotify "Songs to sing in the shower" 歌單
下圖展示的是Spotify另一個歌單—— “快樂時光（ Happy Hits)" 的封面在不同國家的呈現形式?？梢钥吹?，面對文化差異更大的群體時，Spotify在保持了統一的樣式風格的基礎上，針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶，也能夠讓用戶產生更強的連結感與共感。
Spotify "Happy Hits" 歌單
結語
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：UI中國 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在介紹重新定義的交互設計定律之前，我們先來回顧一下經典的《交互設計 7 大定律》
費茨定律告訴我們要節省操作時間應該怎么做：放大目標對象，減小目標距離。
席克定律告訴我們要節省決策時間應該怎么做：盡可能的減少選項的數量。
米勒定律告訴我們人類記憶的上限，所以要將信息數量控制在 4±1 內。
接近法則告訴我們相鄰≈相關，所以要根據信息親密性組織其位置關系。
泰思勒定律告訴我們復雜性是守恒的，我們要平衡復雜性的天平向誰傾斜，以實現整體效益最大化。
防錯原則告訴我們用戶出錯是不可避免的，我們只能減少并降低其犯錯的可能性。
奧卡姆剃刀原理告訴我們如無必要，勿增實體，設計要盡量的簡約。
不知道你看完以上 7 個定律有什么感受，我的感受是，他們彼此之間有些重合（奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡），但用其概括交互設計的精髓，又覺得不夠完整（做到這幾點就夠了嗎？），整體交互設計的精髓要義并沒有表達地很清楚（如何用一句話來概括交互設計的目標？）
帶著這幾點疑問，我重新去思考到底什么是交互設計的底層設計目標？到底哪些交互設計定律能更好的體現其本質？以下是我思考的結果：
交互設計的終極目標是改變和影響用戶的行為，達到期望的業務結果，比如下單率、搜索率等結果指標，結果指標因產品而異，不具有普適性，不可一言以概之。而在交互設計的過程中，以交互設計定律為指導的過程指標是通用的，幾乎可以說放之四海而皆準，我把這四個過程指標概括為四字箴言：少快好省。怎么理解呢？
基于這樣的過程指標，我挑選了 5 個設計定律來進行設計指導，下面我們逐一來看。
奧卡姆剃刀原理告訴我們：如無必要，勿增實體，即“簡單有效原理”。對于工業產品適用，對于軟件類產品也是如此。因為任何增加的非必要信息和功能，都會帶來生產/維護成本的增加，以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代，復雜會讓人望而卻步，也容易使人迷失，而精簡的產品更利于人們的理解和操作。
典型案例：
小米的電視遙控器設計和傳統遙控器設計相比，對奧卡姆剃刀原理的運用非常極致，相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。
我們再來看一個互聯網產品設計的案例：
19 年初，外銷瀏覽器做了一次視覺煥新大改版，從交互結構到視覺界面變化都比較大，所以我們就增加了新版本的滑屏引導，告訴用戶有哪些界面及功能的變化，結果新版灰度期間，信息流滲透率下降了 33%，搜索下降了 18%，經過仔細的數據排查，發現都是滑屏引導惹的禍，當把滑屏引導去掉后，搜索和信息流的數據都恢復正向了。
19 年底，我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火，我們就做了一個錦鯉大作戰的小活動，畫面精致，獎勵也比較誘人，但是發現活動上線后轉化率效果卻不及預期，我們再次把矛頭對準了蒙層引導，通過去掉蒙層引導，CTA 按鈕場景化，并增加微動效，轉化效果立刻得到了提升。去掉不必要的引導，讓界面自己會說話，這也是奧卡姆剃刀原理的一個體現。
米勒定律告訴我們：人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時，首先要運用奧卡姆剃刀原理，盡可能的去做減法，盡量將數量控制在 4±1 的范圍內。如果選項較多，且減無可減時，就需要對信息/選項進行分類和分組，保證類別的數量在 4±1 的范圍內。
典型案例：
對于像手機號、銀行卡號、身份證號這種類型的信息，因為其固有的信息長度無法做精簡，所以在信息組織時就會采取分組的方式，保證分組的數量控制在 4±1 的范圍內。
另一個案例也是關于我們的外銷瀏覽器：
左一是改版前的頁面，功能有 12 項之多，且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析，將功能劃分為了三大類：重要功能，常用功能，必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現，界面復雜度迅速降低，功能清晰度和操作便捷度顯著提升。
多爾蒂門檻告訴我們：系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。
先來看一組模擬的響應效果：
△ 圖片來自作者「超人的電話亭」
從這組圖片可以感受到，當圖片在 400ms 內時，是勉強可以接受的，但當時間延長到 600ms 及以上時，人們就會感受到明顯的延遲、等待和卡頓感。
多爾蒂門檻對響應時間的上限給出了參考，而后續的研究則給出了更細致的響應標準，比如元素的點擊反饋應控制在 0.1s 左右，盡量不要超過 0.14s，單個元素入場退場時間應控制在 0.2s 左右（入場一般比退場稍慢），而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準，才不會讓用戶對產品的流暢性有所懷疑。
用戶將大部分時間花在別人家的網站（產品）上，而不是你的。這意味著他們希望你的網站（產品）跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們：作為設計師，我們必須要多研究把玩各種 App，這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。
對于新入行的設計師，我會建議大家好好研究一下 ios 和 android 的 OS 規范，了解平臺的特性，同時再翻翻下面這些書籍，了解各種常見的設計模式，豐富自己的設計組件庫。
此外，在做某種特定類型的產品設計時，也非常有必要做行業及競品分析，這樣才能確保我們在做產品設計時，可以延續用戶的主要視覺及行為習慣，減少用戶的學習及使用成本。
以視頻 App 為例，行業內的頭部產品在產品框架及元素布局上都具有高度的一致性，這也是雅各布定律的一個體現。
操作前有預期，操作時有反饋，操作后可撤銷。這是十年前我入行時接觸到的一句話，我不知道是誰提出來的，但卻是這些年我做交互設計最重要的一條參考原則，我將其簡單命名為可感知性原則。
操作前有預期，指的是要符合視覺認知原理，符合行業設計習慣，讓用戶一看就懂。
操作時有反饋，指的是操作時要即時反饋，就近反饋，并且反饋合理。
操作后可撤銷，指的是任何操作都盡量讓其可撤銷，讓用戶無后顧之憂，安心探索。只要存在用戶行為的交互，這個準則都是可以用來檢驗的，以下圖為例。
當我們想要刪除某張照片時：
操作前有預期：工具欄位于默認的底部位置，有刪除圖標+文字明確示意的功能按鈕，讓用戶一看就知道應該選擇哪一項操作。
操作時有反饋：點擊刪除按鈕時，刪除按鈕有一個灰色的點擊態，隨后馬上出現一個確認彈窗，而且是就近位置出現，確認彈窗上提示簡單，按鈕用的是 CTA 的形式，操作交互一目了然。
操作后可撤銷：當用戶確認刪除后，照片消失，但是還可以去最近刪除的文件夾中，恢復照片。
到這里，交互設計 5 大定律就全部介紹完成了，圍繞交互設計的過程指標，少、快、好、省依次展開，給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。
也是為了滿足米勒定律的 4±1 原則，我將交互設計定律濃縮成了 5 條，如果在此基礎上加一條的話，我會在「好」的指標下，增加一條「格式塔原理」，它包含的 7 大設計原則。格式塔原理是做設計排版的基石，絕對值得所有設計師反復學習、研究和運用。
文章來源：優設 作者：VMIC UED.Joyce
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互設計就是通過設計出完整的界面和用戶操作流程，保證其符合用戶的認知模型，避免用戶在使用過程中任務失敗。
交互設計師是承接上游（產品經理）和下游（視覺設計師）的角色。
交互設計師的基礎價值來源于兩方面：
交互設計師的核心價值是將產品業務通過更好的設計，將其更大價值化并落地。
本文大綱如下：
將自己作為各種角色的用戶，去使用體驗，感受整個產品的流程。從而找到可優化的地方。
針對于 B 端產品，產品中會涉及到超級管理員、管理員、普通員工至少三種大類角色，其中普通員工里面可能會細分多類角色。交互設計師要在各個角色中，使用體驗產品，梳理清晰的產品業務邏輯。使用使用中，弄清各個角色的權限管理和流程邏輯。
針對于 C 端產品。對產品的分層用戶主流程和分支流程進行體驗走查，找到使用中不好的地方并加以優化。并對行業競品進行重度使用體驗，了解整個行業產品的特點。
我以前寫過好多設計師的專業技能方面的文章，我之前一直認為設計師最重要的素質是專業技能。
但是設計師最重要的素質并不是專業技能，因為專業技能可以慢慢培養，任何人都可以學會。
設計師最重要的能力是推動能力。因為推動能力和責任感、性格及天賦有關，而這恰恰會成為設計師進階的障礙。
想要推動業務之前，先要將自己的職責做好，負責的工作做好，讓大家信任，這個時候才能贏得大家的信任，讓大家更加相信你。
1. 為什么推動能力最重要？
在實際工作中設計師最基礎的能力是解決問題的能力，團隊需要能解決工作問題的設計師，這樣才不會團隊造成負擔或者拖團隊后腿。
設計師在工作中會遇到形形色色不同性格的對接人。那么肯定會遇到對接難度大的 PM、視覺設計師、交互設計師或者開發，這時候就需要有較強的推動能力，不然很容易使得工作進度受阻，導致設計方案無法快速落地。
擁有較強的推動能力對個人而言有以下好處：
2. 怎么做推動？
推動分兩方面，一方面是產品上的推動，另一方面是團隊里的推動。
針對產品上的推動，設計師需要做一些前期工作和設計方案，然后和團隊領導溝通，獲得他們的支持，最后和產品經理溝通，讓產品經理看到，我們做這個設計方案可以帶來哪些價值。
得到了產品的支持后再進行推動設計，推動的事情可以做例如首頁改版，設計規范優化，核心流程上提升數據指標，可用性測試等等。
針對團隊中的推動，先發現團隊缺少哪些東西？針對團隊缺失的東西，做一些推動的事情。在此之前需要做大量的準備工作，并得到團隊領導的肯定和支持。
例如團隊沒有做組件化，那么你可以牽頭做組件庫和設計規范。團隊缺少數據分析思維，那么你可以現在團隊培訓數據分析知識，然后做一系列的數據設計模板，將數據融入到設計師的工作流程中。
團隊協同不太順利，那么你可以和領導商量，做一些團隊協同上的工作，例如團隊新軟件的引入，團隊項目協同文檔規則制定等。
3. 如何順利推動？
如果剛進一家公司，那么先要熟悉團隊運行模式，每個設計師負責的產品業務和他們的處事風格。
當熟悉產品業務和團隊，那么接下來先將自己負責的產品需求做好，后續就可以進行一系列前期推進準備工作。做推動之前，需要先和領導確認，得到領導的肯定后再慢慢在團隊推動。
當在團隊取得一定的進展，則后續可以嘗試產品上的推動。在推動的過程中，要記住不斷地迭代優化自己的推動方案，讓自己的推動過程中做得萬無一失。
先熟悉業務運行邏輯，掌握業務后，分析業務流程。
1. 找到業務核心并優化
找到產品中核心是什么？例如資訊類產品，產品的核心是用戶通過推薦列表，到達新聞詳情頁閱讀的過程。在這個主流程的過程中，交互設計師可以做的事情就是如何提升推薦列表的點擊效率、展示效率和詳情頁正文展示效果。通過優化結構樣式，提升設計價值。
例如電商產品，核心就是如何讓用戶快速找到想要的商品，并順利的完成購買。在這一過程中，交互設計師可以做的事情，如何提升用戶快速找到商品這一場景和購買支付的流暢度。
文章來源：優設 作者：Echo的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn