01-導航
主要導航模式
跳板式
launchpad，各菜單之間相互獨立，類似于工作臺的門戶/手機系統的桌面。
how：不同等級的內容可以使用不同的尺寸、形式做出區分。
列表菜單式
分別是獨立功能的入口，如系統的設置界面。與跳板式相比，一屏能承載更多的內容。
選項卡式
頂部tab或者底部tab，在不同的菜單視圖中切換。類似于web端郵箱的左右分屏，即可以看到列表，又可以看到單條內容下的詳情。
how：tab的數量不宜過多，上限為5個。
底部的tab更適合手指的操作，頂部tab一般層級比底部tab更低。
對于已選擇的tab，應該在視覺上進行強調提示，讓用戶知道自己選擇了哪一項。
陳列館式
以縮略圖的形式顯示內容項，讓人快速了解每一項是啥意思，一般在相冊中使用。
how：可以對內容進行分組，方便用戶快速定位。
儀表式
展示關鍵的指標數字，點擊后可下鉆查看詳細的分析。先看全局整體狀況，再看每一項細分指標的分析。常見的如支付寶的賬單。
隱喻式
模仿實際的物理對象，適合與游戲、兒童類的APP，產品更具沉浸感、場景感。
超級菜單式
將菜單折疊，點擊后顯示更多。將菜單分層，一開始只顯示主菜單，可以將不重要的次級功能隱藏，讓頁面更加簡潔。
次級導航模式
頁面內的導航；所有主導航都可作為次級導航。
只適合于次級導航的模式：
頁面輪盤式
輪播圖的形式，左右滑動常看上一張/下一張。常見于電商APP的商品詳情查看、安裝升級后的引導頁，不適合太多的數量。
圖片輪盤式
傳送帶的模式，各圖片連在一起，像查看膠卷一樣滑動查看。
滑動過渡的動畫效果，可以增加縱深感、趣味性。
拓展列表式
通過將信息收納起來，點擊后查看更多的方式，讓信息分層組織，頁面更加簡潔。如通話記錄將同一號碼的多個記錄合并到一起。
02-表單
登錄表單
包含用戶名、密碼、忘記密碼等信息，將這些信息在一屏之內顯示。
注冊表單
去掉冗余的信息輸入。一般由于顯示空間的限制，標簽采用頂對齊的形式。
核對表單
核對信息，常見于商品詳情頁。
將提升速度、效率和讓用戶放心作為目標。去掉不必要的輸入域，減少頁面和操作的步驟。
計算表單
根據輸入項、選擇項的數據實時顯示計算結果，機票、酒店等費用的實時計算。
輸入應當方便，盡可能使用選擇。顯示結果最好視覺化呈現，在視覺上應當占據比較重要的比例。
布局上，盡可能在一屏之內顯示計算結果和輸入部分。
搜索表單
用戶輸入多個約束條件，才能找到搜索結果。常見的視頻應用、訂票軟件的條件過濾。
只提供必要的輸入項并提供合理的默認值。
不要讓太多的搜索選項嚇到用戶，采用通過手指方便且快速的操作方式。
多步驟表單
由于顯示空間有限，一般無法放步驟條。一般通過數字來標記當前的位置和進度信息，通過上一步、下一步來切換。常見的如學習強國的答題模式。
告知用戶當前所在的位置和將要去的地方。
最小化頁面和操作步驟的數量（刪除原則）
長表單
長頁面的形式來組織多個輸入項，利用縱向空間。
按鈕的位置有頁面內容底部、常駐底部、頁面右上角幾種形式，根據填寫的場景來選擇。
頁面內容底部，內容較多時鍵盤會擋住按鈕，一般適用于非文字的輸入或者將內容分頁，一頁不放太多內容；
常駐底部的可以隨著鍵盤聯動，類似于微信的輸入框旁邊的按鈕，但是表單顯示空間會受限；
頁面右上角的，用戶視線會從底部再次移到右上角，對頁面的內容會有一個大致的檢查，且一般沒有取消按鈕，只能返回上一級來退出。
當確認、取消按鈕并列放置時。移動端的確認按鈕一般在右側。
用3個案例，讓你學會移動端的長表單設計 - 優設網 - UISDC
03-表格和列表
基本表格
類Excel的表格，包含表頭和內容部分。
減少分割線的干擾，增加數據墨水比。
文字左對齊，數字右對齊（方便比對），且表格的內容不宜過多。
無表頭表格
列表項的模式，沒有每一列的共同標簽，每一項都顯示標簽名與屬性值。適合于內容行較多的場景。常見的如58同城、京東的列表展示模式。
區分信息的層級，不重要的信息使用淺色、小字號（750標準下移動端一般字號最小使用20px）。
固定列表格的表格
固定首行、首列、末列等。如股票類應用的行情顯示。
一般固定的列作為其他內容的參考。需要提示用戶可以滑動。
帶有內容總覽和數據的表格
將整體的統計數據放置在固定位置（一般為頁面的頂部、表格的上方），方便隨時查看。如記賬類、銀行類APP的報表頁面。
行分組表格
多行劃分為一個小組，每個部分像是一個小標題，對內容進行組織。如招行APP的收支明細。
劃分的部分和標題部分在視覺上需要做出區分（色彩、字號、字重、間距、符號、對齊、鎖緊等方式）
級聯式表格
表格的信息結構為樹形，點擊后展開下一層。iOS中的表格視圖（table view），常見的如百度云盤的文件夾查看。
層級結構會比較深，通過向前/向后來跳轉，類似于金字塔模式（每個頁面都可以從主頁進入，然后回到主頁。各個頁面之間可以通過翻頁來橫向跳轉）。
帶有視覺指示器的表格
增加圖標、曲線等來反映走勢、變化等關鍵趨勢信息。如股票應用的火花譜線圖。
可編輯表格
一般移動端表格只用來做展示，將輸入轉移到web端，盡量減少移動端的輸入。
實在需要編輯，應清晰的反映選中的單元格/行，提供方便的編輯控件，在執行保存操作時顯示和反饋錯誤信息。常見的如手機端的wps 表格。
04-搜索、分類和過濾
搜索
顯性搜索
搜索框的形式，讓用戶執行搜索操作。
在搜索框周圍提供明顯的操作按鈕，并提供撤銷搜索的選項。通過反饋告知用戶搜索已經執行。
提供歷史記錄、熱門推薦等，減少用戶輸入。
自動補全搜索
在輸入過程中不斷更新可能匹配的關鍵詞，智能匹配+推薦，點擊后開始使用選中的條目作為關鍵詞搜索。典型的如百度、谷歌的搜索推薦。
動態搜索
輸入關鍵詞的過程中動態顯示匹配的結果，點擊后選擇該結果。如常見的下拉搜索框。
適合有限的數據量，如聯系人等。數據量大時應采用自動補全搜索推薦關鍵詞。
范圍搜索
選擇某種類型、某種限定范圍后再搜索，結果更精準。或者在搜索結果出來后，增加類型篩選。
篩選的范圍不宜過多。
保存搜索記錄并顯示最近的搜索內容
從當前的記錄中選擇，減少輸入操作。
一般可清空、數量上有一定限制。
搜索表單
填寫多個條件來搜索，常見的如訂酒店、訂機票等操作。
盡量減少輸入操作，選擇合適的控件。參考阿里Ant Design 移動組件：Ant Design Mobile | A Mobile Design Specification
搜索結果/瀏覽結果
在搜索框的同一屏或者專用的屏幕內顯示搜索結果。或者讓用戶選擇不同的視圖（縮略圖、列表等）。
對于結果較多的情況，使用延遲加載模式，讓用戶點擊或者滑動后顯示更多。
數量有限的情況下，標明已找到的搜索結果的總條數。
分類
屏內分類
tab標簽欄模式，用戶只需一次點擊即可完成切換。根據頁面內其它元素的布局，把分類選項放在屏幕的底部或者頂部。
分類排序選擇器
選擇不同的排序方式，如購物類APP的價格排序、銷量排序等。
分類表單
高級篩選模式，如購物類的篩選功能。功能比較深、重，使用此模式之前，應該首先考慮使用其他更為有效的分類選項觸發器或分類排序選擇器，讓用戶在大部分場景下可以快速操作。
過濾
屏內過濾
選項卡模式或者調用多選項的選擇（側邊滑出），如豆瓣的找電影分類。
過濾容器
點擊后展開選項，如地圖APP的選擇、豆瓣選電影點擊更多按鈕，可以承載更多選項。
過濾對話框
使用模態彈窗的形式來承載過濾選項。使用簡短的過濾選項，避免滾屏。如果列表較長或者有多個過濾選項，考慮使用過濾表單。
過濾表單
高級篩選，可以參考定機票等的應用。后面的條件隨前面的選擇動態變化。
05-工具
工具欄
操作欄，iOS規范中的Action Sheets、Toolbars。包含實現屏幕級操作的工具。
工具欄通常顯示在屏幕底部，包含屏幕級的操作。工具欄的圖標應該是用戶熟悉的、易于識別的，或者采用標簽+圖標的形式。
選項菜單
點擊某個入口再打開菜單，如snapseed中的操作工具，可以承載較多的功能。類似iOS規范中的Activity Views。
如果可能，采取直接交互式的設計方案。不要把導航隱藏在選項菜單中，常用的操作外顯，不常用的收納、隱藏。
如果一屏只有一個選項，考慮使用調用動作按鈕。
調用動作按鈕
行為召喚按鈕（CTA，call to action按鈕）。頁面內只有一個主要操作。
馮·雷斯托夫效應：在多個相似的對象中，與眾不同的那個比其他的更能讓人記住。所以CTA按鈕應該設計出不同于其它按鈕的視覺效果。
良好的視覺效果+語義明確的標簽+告訴人們可交互。
情境工具
作用于屏幕內特定的操作對象，安卓長按、iOS左滑后的選項菜單。iOS規范中的Context Menus、Edit Menus。
將操作命令放在對象旁邊，強化二者的關聯關系。
使用用戶熟悉或者帶有文字標簽的圖標。
內聯操作
列表項中的按鈕，每一項都有一個，針對該項的動作。如小米應用商店的“安裝”按鈕。
于每個條目的對應關系應該清晰明了；每個對象應該只有1-2中內聯操作。
多狀態按鈕
點擊后按鈕內容變化。位置不變，動作命令發生改變。如小米應用商店點擊“安裝”后，按鈕改為“取消”。
適合一系列聯系緊密，在有限的空間內可能需要連續執行的操作。
批量操作
多選/全選、添加/刪除、重新排序、相冊的多選、短信的多選。
諸如刪除和重新排序之類的批量操作最好在編輯模式下進行。提供最明顯的選項，讓用戶可以退出編輯模式、撤銷操作。
06-圖表
帶過濾器的圖表
基本的圖表形式+時間控制器或者其它過濾功能，以提升其數據表現能力。如記賬類APP的報表。
可以展現更多層次、更多維度的數據。
帶預覽窗口的圖表
預覽圖查看整體的趨勢，拖動范圍來在主區域顯示局部的詳情。
總覽加數據式圖表
用圖表總結最重要的信息，下方用表格顯示詳細數據。如支付寶花唄的賬單。
數據點細節圖
點擊某一數據點，展示該點的詳細數值。web一般通過指針懸浮實現。移動端可以考慮長按的形式來觸發。
詳細信息圖
點擊圖表，在新頁面或者當前圖表翻轉的形式來查看點擊部分的詳細信息。如運動APP的統計數據。
要能返回、層級結構要清晰。
縮放圖表
旋轉屏幕，可以全屏查看圖標。全屏模式隱藏標題和導航元素，能為圖表騰出更多的空間。如股票類應用的走勢圖。
需要暗示用戶可以旋轉。
數據透視表
通過選擇器，在同一圖表上切換不同的維度。
火花譜線圖
微圖表，只展示大概趨勢，不展示具體數值。如股票類應用的行情。
07-視覺吸引
對話框
iOS規范中的Alerts。模態對話框讓人注意力聚焦，必須操作之后才能進行下一步操作。一般作為重要操作的強提醒。
提示
tooltips提示，一般主動顯示，作為使用說明、功能說明，與功能的位置接近，保持內容簡潔，用戶觸摸屏幕時消失。
使用向導
功能引導頁，一般是版本升級、第一次使用時的特性介紹。iOS規范中的Onboarding。
文字簡潔、數量精簡，用戶可以隨時跳過、退出。
視頻演示
通過視頻來做介紹，更加直觀生動。
注意加載的時間不能太長。用戶可以控制進度、可以隨時退出。
幻燈片
蒙版+圖解的形式，指向界面中需要說明的部分，在用戶打開時主動顯示，在用戶觸摸屏幕時消失。
首次使用向導
內容為空時，進行引導，而不是僅僅展示空狀態。一般適用于需要用戶創造內容的應用。
利用圖像或其它視覺線索明確地將首次使用引導和其它內容區分開來。
持續視覺吸引
一直出現在屏幕上，作為功能的引導。如股票類APP的放大圖標、安卓的懸浮按鈕。
保持元素的簡潔，不能吸引過多的注意力而讓主要內容的層次變低。
可發現的視覺吸引
用戶在執行操作時能看到該提示，如下拉刷新時出現的下拉刷新提示文字。
08-反饋與功能可見性
反饋
出錯信息
告訴用戶哪里出錯、為什么出錯、如何解決。
使用語義清晰、用戶能夠理解的文字描述；最好在出錯位置即可解決錯誤。
讓錯誤信息清晰可見，在屏幕內顯示，不要使用模態彈窗。
確認
通過按鈕狀態變化、過渡動畫等實時反饋來告知用戶當前操作的結果，在不打斷流程的情況下提供反饋。如電商APP加入購物車的動畫、數字徽標提示。
系統狀態
程序加載中的進度反饋，告知系統狀態，避免用戶認為程序出現故障。
為可能持續較長的操作提供“取消”按鈕。
功能可見性
Affordance，能供性。告知用戶可以執行操作、該如何操作。如按鈕、輸入框告知用戶可以點擊。
將可點擊與不可點擊元素在視覺上做出區分。
功能提示方式：按鈕形態、圖標提示、動態提醒、顏色區分。
觸摸
按鈕、圖標、文字顏色等提示用戶可點擊。
滑動
通過輪播圖的小點、露出部分內容告訴用戶可以滑動查看更多。如網易云音樂的推薦歌單，露出歌單的一部分，告知用戶內容不止當前這幾個。
拖曳
拖動的圖標、滑塊的形式告知用戶，可以拖動。如錘子便簽的排序。
09-幫助
使用說明
一頁紙的形式告知用戶如何使用。
綜合使用截屏、插圖、文本等多種形式結合，讓表達更加生動、高效。
界面元素說明
以少量的信息介紹界面上的元素，一般為初次使用時的提示。如百度輸入法在初次使用時提示上滑可以輸入數字。
使用向導
首次使用/升級后首次打開時出現的多屏介紹內容。
簡短、有吸引力，數量精簡且可以隨時退出。
10-反模式
需要力求避免的模式。
標新立異
雅各布定律：用戶將大部分時間花在其它的應用/站點上，而非你的。意味著他們希望你的應用和其它當他們已知的應用/站點的使用方式保持一致。
與主流的習慣保持一致，這樣可以與用戶已形成的心智模型保持一致，讓用戶無縫上手。
在設計新的形式前，應該進行可用性測試。
隱喻錯位
控制錯位
選用合適的控件，提高輸入的效率。
不可交互元素和可交互元素應當在視覺上做出明顯區分。
圖標錯位
通用圖標使用“約定俗成”的意象表示，非通用的應當含義明確，無法直觀反映時需加上文字標簽。
心理模型錯位
與用戶的心理模型保持一致，概念模型要簡單可理解、具有明確的意義。
愚蠢的對話框
非破壞性操作的反饋行為，不應該打斷用戶的操作流程，不要使用模態彈窗，使用動畫、圖標變化、顏色變化等形式進行暗示。
圖表垃圾
增加數據墨水比，減少圖表中多余的、用戶無法理解的、干擾用戶視線的裝飾元素。突出主要的數據。
按鈕海
多按鈕情況下應該區分層次，進行分組。
對于多個列表項的重復按鈕，可以考慮使用情境工具，將按鈕隱藏。但是操作頻繁的功能不適合，功能可發現性較弱。
分離頁面層級的操作與導航元素（主頁、返回等）。
文章結構
