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