移動應用UI設計模式摘錄彙總

版權聲明：本文為半吊子子全棧工匠（wireless_com，同公衆号)原創文章，未經允許不得轉載。 https://blog.csdn.net/wireless_com/article/details/9260659

移動應用使用者界面的一般功能元素包括：導航，表單，表格和清單，搜尋和分類，工具，圖表，視覺吸引，回報和幫助。

常見的導航包括跳闆式（包括九宮格），清單菜單，選項菜單，陳列館式，儀表式，隐喻式和超級菜單，在次級導航中也會用到頁面輪盤，圖檔輪盤和擴充清單。跳闆式又叫launchpad，同等重要内容使用網格布局，但并不拘泥于網格布局。而清單菜單也包括個性化清單，分組清單，增強清單等，适合顯示較長或擁有次級文字内容的标題。使用易于識别或帶有标簽的圖示為已選擇的菜單項設定不同的效果，使用者就能清晰地制度自己選擇了哪一項。陳列館式能很好地應用于使用者需要經常浏覽，頻繁更新的内容。不要使用過多的儀表式設計，謹慎引用隐喻式導航。在選用導航前，首先要确定資訊架構，如果導航對象僅是應用中的少數内容，就可以使用選項菜單。所有主要導航同樣适用于次級導航，對次級導航而言，頁面輪盤可以很好地實作少量頁面導航，圖檔輪盤用于展現藝術品，産品和照片。

常見的表單包括：登陸表單，系統資料庫單，核對表單，計算表單，搜尋表單，多步驟表單，和長表單。表單的參考文獻包括：

forms on Mobile device： modern solutions （http;//WWW.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/）

Mobile Form Design Strategies(http://www.uxbooth.com/blog/mobile-form-design-strategies)

不要獨創登陸表單，采用常見的設計方案，最好提供取回以忘記密碼的方式。注冊頁面要簡潔明了，一屏内顯示完所有要填的資訊。不要讓太多的搜素選項吓到使用者，把搜尋條件控制在一頁之内。把提升速度、效率和讓使用者放心作為設計目标，去掉不必要的輸入域，減少頁面和操作步驟，不要認為地把表單劃分成一些步驟來避免螢幕的滾動。

常見的表格包括：基本表格，無表頭表格，行分組表格，固定清單格，級聯清單，可編輯表格，帶有視覺訓示器的表格，帶有内容總覽和資料的表格等。表格不要使用暗色的網格線和垂直分割方式，文字左對齊，數字右對齊，一屏内顯示的表格内容不宜過多。每一寬行内最多顯示3行資訊，為固定的列設計比較醒目的樣式，以提示使用者，滑動操作能浏覽更多的資料。表格内容總覽應該顯示在資料上方，且要一目了然。使用那些使用者能夠迅速識别的視覺訓示器，去掉不必要的圖示。

常見的資料分類包括:顯性搜尋，自動補全搜尋，範圍搜尋，顯示最近搜尋内容，屏内分類，分類排序選擇器，分類表單，屏内過濾，過濾容器，過濾對話框和過濾表單。對應有限的資料，動态過濾比較有效；對于範圍搜尋，3~6個範圍選項足以。标明已找到搜尋結果的總項數，使用延遲加載，而不是分頁顯示的方式。過濾器選項的用詞應該清晰無誤，易于了解，使用簡短的過濾選項清單，避免滾屏。

常見的操作欄包括：工具欄，重疊菜單，情境工具，内聯操作，調用操作按鈕，批量操作。工具欄通常顯示在螢幕底端，包含有螢幕級的操作。不要把主要操作隐藏在菜單中，也不能将其設計成無法識别的工具欄圖示。每個對象最多有1~2種内聯操作。多狀态按鈕既是觸發器也是一種回報機制，适合在一系列聯系緊密，在有限螢幕空間連續執行内的操作，諸如删除和重新排序之類的批量操作最好在編輯模式下進行。

常見的圖表包括：帶過濾器的圖表，總覽加資料的圖表，滾動預覽圖表，資料點細節圖，詳細資訊圖，縮放圖，資料透視圖和火花譜線圖。如果要提供基于時間的過濾控制，一定要為觸摸點選對象保留足夠的螢幕空間。圖表的特性取決于預覽視窗是隻讀的還是可互動的。如果是可互動的預覽視窗，使用較大的觸摸對象更易于使用者的操作。測試圖表有三個主要内容：主題是什麼？那些資訊最重要？最重要資訊的具體數值是多少？吸引使用者檢視更多的資料，使用導航顯示層級結構。結合火花譜線和詳細資訊圖來顯示所有細節内容。

視覺吸引包括：對話框，提示，使用向導，視訊示範，幻燈片，首次使用引導，持續視覺吸引和可發現的視覺吸引。對話框的内容一定要言簡意赅，確定使用者可以通過其他方式通路程式的使用說明。提示要盡可能地接近它所指向的内容。使用向導能夠從使用者使用目标的角度出發，突出應用的主要功能，視訊示範可以展示應用的關鍵功能。保持持續視覺吸引元素的簡潔，鼓勵使用者去重新整理資料。

常見的回報包括：出錯，确認，系統狀态。用純文字的形式提供解決問題的辦法，盡量不要使用模式對話框。當使用者執行某項操作時，提示确認資訊，但不要打斷使用者使用産品的過程。

常見功能可見性包括：觸摸，滑動，拖拽。斜角和陰影等視覺設計技巧能讓界面元素看上去是可觸摸的。拖到搖桿的圖示一定要易于識别。

常見的幫助模式包括：使用說明，界面元素說明，使用向導。在使用說明中綜合使用螢幕截圖，插圖和文本等多種形式。使用向導所包含的應該是應用中最關鍵的功能，最好從使用者的使用目标開始。

移動應用使用者界面的設計核心：直接了當和輕量化設計。