01-導航
主要導航模式
跳板式
launchpad，各菜單之間相互獨立品抽，類似于工作臺的門戶/手機系統(tǒng)的桌面。
how：不同等級的內(nèi)容可以使用不同的尺寸甜熔、形式做出區(qū)分圆恤。
列表菜單式
分別是獨立功能的入口，如系統(tǒng)的設置界面腔稀。與跳板式相比盆昙，一屏能承載更多的內(nèi)容。
選項卡式
頂部tab或者底部tab焊虏，在不同的菜單視圖中切換淡喜。類似于web端郵箱的左右分屏，即可以看到列表诵闭，又可以看到單條內(nèi)容下的詳情炼团。
how：tab的數(shù)量不宜過多，上限為5個疏尿。
底部的tab更適合手指的操作瘟芝，頂部tab一般層級比底部tab更低。
對于已選擇的tab褥琐，應該在視覺上進行強調(diào)提示锌俱，讓用戶知道自己選擇了哪一項。
陳列館式
以縮略圖的形式顯示內(nèi)容項敌呈，讓人快速了解每一項是啥意思贸宏，一般在相冊中使用。
how：可以對內(nèi)容進行分組磕洪，方便用戶快速定位吭练。
儀表式
展示關鍵的指標數(shù)字，點擊后可下鉆查看詳細的分析褐鸥。先看全局整體狀況线脚，再看每一項細分指標的分析。常見的如支付寶的賬單叫榕。
隱喻式
模仿實際的物理對象浑侥，適合與游戲、兒童類的APP晰绎，產(chǎn)品更具沉浸感寓落、場景感。
超級菜單式
將菜單折疊荞下，點擊后顯示更多伶选。將菜單分層史飞，一開始只顯示主菜單，可以將不重要的次級功能隱藏仰税，讓頁面更加簡潔构资。
次級導航模式
頁面內(nèi)的導航；所有主導航都可作為次級導航陨簇。
只適合于次級導航的模式：
頁面輪盤式
輪播圖的形式吐绵，左右滑動常看上一張/下一張河绽。常見于電商APP的商品詳情查看己单、安裝升級后的引導頁，不適合太多的數(shù)量耙饰。
圖片輪盤式
傳送帶的模式纹笼，各圖片連在一起，像查看膠卷一樣滑動查看苟跪。
滑動過渡的動畫效果廷痘，可以增加縱深感、趣味性削咆。
拓展列表式
通過將信息收納起來牍疏，點擊后查看更多的方式蠢笋，讓信息分層組織拨齐，頁面更加簡潔。如通話記錄將同一號碼的多個記錄合并到一起昨寞。
02-表單
登錄表單
包含用戶名瞻惋、密碼、忘記密碼等信息援岩，將這些信息在一屏之內(nèi)顯示歼狼。
注冊表單
去掉冗余的信息輸入。一般由于顯示空間的限制享怀，標簽采用頂對齊的形式羽峰。
核對表單
核對信息，常見于商品詳情頁添瓷。
將提升速度梅屉、效率和讓用戶放心作為目標。去掉不必要的輸入域鳞贷，減少頁面和操作的步驟坯汤。
計算表單
根據(jù)輸入項、選擇項的數(shù)據(jù)實時顯示計算結(jié)果搀愧，機票惰聂、酒店等費用的實時計算疆偿。
輸入應當方便，盡可能使用選擇搓幌。顯示結(jié)果最好視覺化呈現(xiàn)杆故，在視覺上應當占據(jù)比較重要的比例。
布局上溉愁，盡可能在一屏之內(nèi)顯示計算結(jié)果和輸入部分反番。
搜索表單
用戶輸入多個約束條件，才能找到搜索結(jié)果叉钥。常見的視頻應用罢缸、訂票軟件的條件過濾。
只提供必要的輸入項并提供合理的默認值投队。
不要讓太多的搜索選項嚇到用戶枫疆，采用通過手指方便且快速的操作方式。
多步驟表單
由于顯示空間有限敷鸦，一般無法放步驟條息楔。一般通過數(shù)字來標記當前的位置和進度信息，通過上一步扒披、下一步來切換值依。常見的如學習強國的答題模式。
告知用戶當前所在的位置和將要去的地方碟案。
最小化頁面和操作步驟的數(shù)量（刪除原則）
長表單
長頁面的形式來組織多個輸入項愿险，利用縱向空間。
按鈕的位置有頁面內(nèi)容底部价说、常駐底部辆亏、頁面右上角幾種形式，根據(jù)填寫的場景來選擇鳖目。
頁面內(nèi)容底部扮叨，內(nèi)容較多時鍵盤會擋住按鈕，一般適用于非文字的輸入或者將內(nèi)容分頁领迈，一頁不放太多內(nèi)容彻磁；
常駐底部的可以隨著鍵盤聯(lián)動，類似于微信的輸入框旁邊的按鈕狸捅，但是表單顯示空間會受限衷蜓；
頁面右上角的，用戶視線會從底部再次移到右上角薪贫，對頁面的內(nèi)容會有一個大致的檢查恍箭，且一般沒有取消按鈕，只能返回上一級來退出瞧省。
當確認扯夭、取消按鈕并列放置時鳍贾。移動端的確認按鈕一般在右側(cè)。
用3個案例交洗，讓你學會移動端的長表單設計 - 優(yōu)設網(wǎng) - UISDC
03-表格和列表
基本表格
類Excel的表格骑科，包含表頭和內(nèi)容部分。
減少分割線的干擾构拳，增加數(shù)據(jù)墨水比咆爽。
文字左對齊怠缸，數(shù)字右對齊（方便比對）蔚鸥，且表格的內(nèi)容不宜過多。
無表頭表格
列表項的模式叠洗，沒有每一列的共同標簽凫海，每一項都顯示標簽名與屬性值呛凶。適合于內(nèi)容行較多的場景。常見的如58同城行贪、京東的列表展示模式漾稀。
區(qū)分信息的層級，不重要的信息使用淺色建瘫、小字號（750標準下移動端一般字號最小使用20px）崭捍。
固定列表格的表格
固定首行、首列啰脚、末列等殷蛇。如股票類應用的行情顯示。
一般固定的列作為其他內(nèi)容的參考拣播。需要提示用戶可以滑動晾咪。
帶有內(nèi)容總覽和數(shù)據(jù)的表格
將整體的統(tǒng)計數(shù)據(jù)放置在固定位置（一般為頁面的頂部收擦、表格的上方）贮配，方便隨時查看。如記賬類塞赂、銀行類APP的報表頁面泪勒。
行分組表格
多行劃分為一個小組，每個部分像是一個小標題宴猾，對內(nèi)容進行組織圆存。如招行APP的收支明細。
劃分的部分和標題部分在視覺上需要做出區(qū)分（色彩仇哆、字號沦辙、字重、間距讹剔、符號油讯、對齊详民、鎖緊等方式）
級聯(lián)式表格
表格的信息結(jié)構(gòu)為樹形，點擊后展開下一層陌兑。iOS中的表格視圖（table view）沈跨，常見的如百度云盤的文件夾查看。
層級結(jié)構(gòu)會比較深兔综，通過向前/向后來跳轉(zhuǎn)饿凛，類似于金字塔模式（每個頁面都可以從主頁進入，然后回到主頁软驰。各個頁面之間可以通過翻頁來橫向跳轉(zhuǎn)）涧窒。
帶有視覺指示器的表格
增加圖標、曲線等來反映走勢锭亏、變化等關鍵趨勢信息杀狡。如股票應用的火花譜線圖。
可編輯表格
一般移動端表格只用來做展示贰镣，將輸入轉(zhuǎn)移到web端呜象，盡量減少移動端的輸入。
實在需要編輯碑隆，應清晰的反映選中的單元格/行恭陡，提供方便的編輯控件，在執(zhí)行保存操作時顯示和反饋錯誤信息上煤。常見的如手機端的wps 表格休玩。
04-搜索、分類和過濾
搜索
顯性搜索
搜索框的形式劫狠，讓用戶執(zhí)行搜索操作拴疤。
在搜索框周圍提供明顯的操作按鈕，并提供撤銷搜索的選項独泞。通過反饋告知用戶搜索已經(jīng)執(zhí)行呐矾。
提供歷史記錄、熱門推薦等懦砂，減少用戶輸入蜒犯。
自動補全搜索
在輸入過程中不斷更新可能匹配的關鍵詞，智能匹配+推薦荞膘，點擊后開始使用選中的條目作為關鍵詞搜索罚随。典型的如百度、谷歌的搜索推薦羽资。
動態(tài)搜索
輸入關鍵詞的過程中動態(tài)顯示匹配的結(jié)果淘菩，點擊后選擇該結(jié)果。如常見的下拉搜索框屠升。
適合有限的數(shù)據(jù)量潮改，如聯(lián)系人等费奸。數(shù)據(jù)量大時應采用自動補全搜索推薦關鍵詞。
范圍搜索
選擇某種類型进陡、某種限定范圍后再搜索愿阐，結(jié)果更精準≈壕危或者在搜索結(jié)果出來后缨历，增加類型篩選。
篩選的范圍不宜過多糙麦。
保存搜索記錄并顯示最近的搜索內(nèi)容
從當前的記錄中選擇辛孵，減少輸入操作。
一般可清空赡磅、數(shù)量上有一定限制魄缚。
搜索表單
填寫多個條件來搜索，常見的如訂酒店焚廊、訂機票等操作冶匹。
盡量減少輸入操作，選擇合適的控件咆瘟。參考阿里Ant Design 移動組件：Ant Design Mobile | A Mobile Design Specification
搜索結(jié)果/瀏覽結(jié)果
在搜索框的同一屏或者專用的屏幕內(nèi)顯示搜索結(jié)果嚼隘。或者讓用戶選擇不同的視圖（縮略圖袒餐、列表等）飞蛹。
對于結(jié)果較多的情況，使用延遲加載模式灸眼，讓用戶點擊或者滑動后顯示更多卧檐。
數(shù)量有限的情況下，標明已找到的搜索結(jié)果的總條數(shù)焰宣。
分類
屏內(nèi)分類
tab標簽欄模式霉囚，用戶只需一次點擊即可完成切換。根據(jù)頁面內(nèi)其它元素的布局宛徊，把分類選項放在屏幕的底部或者頂部佛嬉。
分類排序選擇器
選擇不同的排序方式，如購物類APP的價格排序闸天、銷量排序等。
分類表單
高級篩選模式斜做，如購物類的篩選功能苞氮。功能比較深、重瓤逼，使用此模式之前笼吟，應該首先考慮使用其他更為有效的分類選項觸發(fā)器或分類排序選擇器库物，讓用戶在大部分場景下可以快速操作。
過濾
屏內(nèi)過濾
選項卡模式或者調(diào)用多選項的選擇（側(cè)邊滑出）贷帮，如豆瓣的找電影分類戚揭。
過濾容器
點擊后展開選項，如地圖APP的選擇撵枢、豆瓣選電影點擊更多按鈕民晒，可以承載更多選項。
過濾對話框
使用模態(tài)彈窗的形式來承載過濾選項锄禽。使用簡短的過濾選項潜必，避免滾屏。如果列表較長或者有多個過濾選項沃但，考慮使用過濾表單磁滚。
過濾表單
高級篩選，可以參考定機票等的應用宵晚。后面的條件隨前面的選擇動態(tài)變化垂攘。
05-工具
工具欄
操作欄，iOS規(guī)范中的Action Sheets淤刃、Toolbars搜贤。包含實現(xiàn)屏幕級操作的工具。
工具欄通常顯示在屏幕底部钝凶，包含屏幕級的操作仪芒。工具欄的圖標應該是用戶熟悉的、易于識別的耕陷，或者采用標簽+圖標的形式掂名。
選項菜單
點擊某個入口再打開菜單，如snapseed中的操作工具哟沫，可以承載較多的功能饺蔑。類似iOS規(guī)范中的Activity Views。
如果可能嗜诀，采取直接交互式的設計方案猾警。不要把導航隱藏在選項菜單中，常用的操作外顯隆敢，不常用的收納发皿、隱藏。
如果一屏只有一個選項拂蝎，考慮使用調(diào)用動作按鈕穴墅。
調(diào)用動作按鈕
行為召喚按鈕（CTA，call to action按鈕）。頁面內(nèi)只有一個主要操作玄货。
馮·雷斯托夫效應：在多個相似的對象中皇钞，與眾不同的那個比其他的更能讓人記住。所以CTA按鈕應該設計出不同于其它按鈕的視覺效果松捉。
良好的視覺效果+語義明確的標簽+告訴人們可交互夹界。
情境工具
作用于屏幕內(nèi)特定的操作對象，安卓長按隘世、iOS左滑后的選項菜單可柿。iOS規(guī)范中的Context Menus、Edit Menus以舒。
將操作命令放在對象旁邊趾痘，強化二者的關聯(lián)關系。
使用用戶熟悉或者帶有文字標簽的圖標蔓钟。
內(nèi)聯(lián)操作
列表項中的按鈕永票，每一項都有一個，針對該項的動作滥沫。如小米應用商店的“安裝”按鈕侣集。
于每個條目的對應關系應該清晰明了；每個對象應該只有1-2中內(nèi)聯(lián)操作兰绣。
多狀態(tài)按鈕
點擊后按鈕內(nèi)容變化世分。位置不變，動作命令發(fā)生改變缀辩。如小米應用商店點擊“安裝”后臭埋，按鈕改為“取消”。
適合一系列聯(lián)系緊密臀玄，在有限的空間內(nèi)可能需要連續(xù)執(zhí)行的操作瓢阴。
批量操作
多選/全選、添加/刪除健无、重新排序荣恐、相冊的多選、短信的多選累贤。
諸如刪除和重新排序之類的批量操作最好在編輯模式下進行叠穆。提供最明顯的選項，讓用戶可以退出編輯模式臼膏、撤銷操作硼被。
06-圖表
帶過濾器的圖表
基本的圖表形式+時間控制器或者其它過濾功能，以提升其數(shù)據(jù)表現(xiàn)能力讶请。如記賬類APP的報表祷嘶。
可以展現(xiàn)更多層次屎媳、更多維度的數(shù)據(jù)夺溢。
帶預覽窗口的圖表
預覽圖查看整體的趨勢论巍，拖動范圍來在主區(qū)域顯示局部的詳情。
總覽加數(shù)據(jù)式圖表
用圖表總結(jié)最重要的信息风响，下方用表格顯示詳細數(shù)據(jù)嘉汰。如支付寶花唄的賬單。
數(shù)據(jù)點細節(jié)圖
點擊某一數(shù)據(jù)點状勤，展示該點的詳細數(shù)值鞋怀。web一般通過指針懸浮實現(xiàn)。移動端可以考慮長按的形式來觸發(fā)持搜。
詳細信息圖
點擊圖表密似，在新頁面或者當前圖表翻轉(zhuǎn)的形式來查看點擊部分的詳細信息。如運動APP的統(tǒng)計數(shù)據(jù)葫盼。
要能返回残腌、層級結(jié)構(gòu)要清晰。
縮放圖表
旋轉(zhuǎn)屏幕贫导，可以全屏查看圖標抛猫。全屏模式隱藏標題和導航元素，能為圖表騰出更多的空間孩灯。如股票類應用的走勢圖闺金。
需要暗示用戶可以旋轉(zhuǎn)。
數(shù)據(jù)透視表
通過選擇器峰档，在同一圖表上切換不同的維度败匹。
火花譜線圖
微圖表，只展示大概趨勢讥巡，不展示具體數(shù)值掀亩。如股票類應用的行情。
07-視覺吸引
對話框
iOS規(guī)范中的Alerts尚卫。模態(tài)對話框讓人注意力聚焦归榕，必須操作之后才能進行下一步操作。一般作為重要操作的強提醒吱涉。
提示
tooltips提示刹泄，一般主動顯示，作為使用說明怎爵、功能說明特石，與功能的位置接近，保持內(nèi)容簡潔鳖链，用戶觸摸屏幕時消失姆蘸。
使用向?qū)?/b>
功能引導頁墩莫，一般是版本升級、第一次使用時的特性介紹逞敷。iOS規(guī)范中的Onboarding狂秦。
文字簡潔、數(shù)量精簡推捐，用戶可以隨時跳過裂问、退出。
視頻演示
通過視頻來做介紹牛柒，更加直觀生動堪簿。
注意加載的時間不能太長。用戶可以控制進度皮壁、可以隨時退出椭更。
幻燈片
蒙版+圖解的形式，指向界面中需要說明的部分蛾魄，在用戶打開時主動顯示虑瀑，在用戶觸摸屏幕時消失。
首次使用向?qū)?/b>
內(nèi)容為空時畏腕，進行引導缴川，而不是僅僅展示空狀態(tài)。一般適用于需要用戶創(chuàng)造內(nèi)容的應用描馅。
利用圖像或其它視覺線索明確地將首次使用引導和其它內(nèi)容區(qū)分開來把夸。
持續(xù)視覺吸引
一直出現(xiàn)在屏幕上，作為功能的引導铭污。如股票類APP的放大圖標恋日、安卓的懸浮按鈕。
保持元素的簡潔嘹狞，不能吸引過多的注意力而讓主要內(nèi)容的層次變低岂膳。
可發(fā)現(xiàn)的視覺吸引
用戶在執(zhí)行操作時能看到該提示，如下拉刷新時出現(xiàn)的下拉刷新提示文字磅网。
08-反饋與功能可見性
反饋
出錯信息
告訴用戶哪里出錯谈截、為什么出錯、如何解決涧偷。
使用語義清晰簸喂、用戶能夠理解的文字描述；最好在出錯位置即可解決錯誤燎潮。
讓錯誤信息清晰可見喻鳄，在屏幕內(nèi)顯示，不要使用模態(tài)彈窗确封。
確認
通過按鈕狀態(tài)變化除呵、過渡動畫等實時反饋來告知用戶當前操作的結(jié)果再菊，在不打斷流程的情況下提供反饋。如電商APP加入購物車的動畫颜曾、數(shù)字徽標提示纠拔。
系統(tǒng)狀態(tài)
程序加載中的進度反饋，告知系統(tǒng)狀態(tài)泛啸，避免用戶認為程序出現(xiàn)故障绿语。
為可能持續(xù)較長的操作提供“取消”按鈕秃症。
功能可見性
Affordance候址，能供性。告知用戶可以執(zhí)行操作种柑、該如何操作岗仑。如按鈕、輸入框告知用戶可以點擊聚请。
將可點擊與不可點擊元素在視覺上做出區(qū)分荠雕。
功能提示方式：按鈕形態(tài)、圖標提示驶赏、動態(tài)提醒炸卑、顏色區(qū)分。
觸摸
按鈕煤傍、圖標盖文、文字顏色等提示用戶可點擊。
滑動
通過輪播圖的小點蚯姆、露出部分內(nèi)容告訴用戶可以滑動查看更多五续。如網(wǎng)易云音樂的推薦歌單，露出歌單的一部分龄恋，告知用戶內(nèi)容不止當前這幾個疙驾。
拖曳
拖動的圖標、滑塊的形式告知用戶郭毕，可以拖動它碎。如錘子便簽的排序。
09-幫助
使用說明
一頁紙的形式告知用戶如何使用显押。
綜合使用截屏扳肛、插圖、文本等多種形式結(jié)合煮落，讓表達更加生動敞峭、高效。
界面元素說明
以少量的信息介紹界面上的元素蝉仇，一般為初次使用時的提示旋讹。如百度輸入法在初次使用時提示上滑可以輸入數(shù)字殖蚕。
使用向?qū)?/b>
首次使用/升級后首次打開時出現(xiàn)的多屏介紹內(nèi)容。
簡短沉迹、有吸引力睦疫，數(shù)量精簡且可以隨時退出。
10-反模式
需要力求避免的模式鞭呕。
標新立異
雅各布定律：用戶將大部分時間花在其它的應用/站點上蛤育，而非你的。意味著他們希望你的應用和其它當他們已知的應用/站點的使用方式保持一致葫松。
與主流的習慣保持一致瓦糕，這樣可以與用戶已形成的心智模型保持一致，讓用戶無縫上手腋么。
在設計新的形式前咕娄，應該進行可用性測試。
隱喻錯位
控制錯位
選用合適的控件珊擂，提高輸入的效率圣勒。
不可交互元素和可交互元素應當在視覺上做出明顯區(qū)分。
圖標錯位
通用圖標使用“約定俗成”的意象表示摧扇，非通用的應當含義明確圣贸，無法直觀反映時需加上文字標簽。
心理模型錯位
與用戶的心理模型保持一致扛稽，概念模型要簡單可理解吁峻、具有明確的意義。
愚蠢的對話框
非破壞性操作的反饋行為庇绽，不應該打斷用戶的操作流程锡搜，不要使用模態(tài)彈窗，使用動畫瞧掺、圖標變化耕餐、顏色變化等形式進行暗示。
圖表垃圾
增加數(shù)據(jù)墨水比辟狈，減少圖表中多余的肠缔、用戶無法理解的、干擾用戶視線的裝飾元素哼转。突出主要的數(shù)據(jù)明未。
按鈕海
多按鈕情況下應該區(qū)分層次，進行分組壹蔓。
對于多個列表項的重復按鈕趟妥，可以考慮使用情境工具，將按鈕隱藏佣蓉。但是操作頻繁的功能不適合披摄，功能可發(fā)現(xiàn)性較弱亲雪。
分離頁面層級的操作與導航元素（主頁、返回等）疚膊。
文章結(jié)構(gòu)
