1. 程式人生 > >移動應用UI設計模式摘錄彙總

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

移動應用使用者介面的一般功能元素包括:導航,表單,表格和列表,搜尋和分類,工具,圖表,視覺吸引,反饋和幫助。 常見的導航包括跳板式(包括九宮格),列表選單,選項選單,陳列館式,儀表式,隱喻式和超級選單,在次級導航中也會用到頁面輪盤,圖片輪盤和擴充套件列表。跳板式又叫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種內聯操作。多狀態按鈕既是觸發器也是一種反饋機制,適合在一系列聯絡緊密,在有限螢幕空間連續執行內的操作,諸如刪除和重新排序之類的批量操作最好在編輯模式下進行。 常見的圖表包括:帶過濾器的圖表,總覽加資料的圖表,滾動預覽圖表,資料點細節圖,詳細資訊圖,縮放圖,資料透檢視和火花譜線圖。如果要提供基於時間的過濾控制,一定要為觸控點選物件保留足夠的螢幕空間。圖表的特性取決於預覽視窗是隻讀的還是可互動的。如果是可互動的預覽視窗,使用較大的觸控物件更易於使用者的操作。測試圖表有三個主要內容:主題是什麼?那些資訊最重要?最重要資訊的具體數值是多少?吸引使用者檢視更多的資料,使用導航顯示層級結構。結合火花譜線和詳細資訊圖來顯示所有細節內容。 視覺吸引包括:對話方塊,提示,使用嚮導,視訊演示,幻燈片,首次使用引導,持續視覺吸引和可發現的視覺吸引。對話方塊的內容一定要言簡意賅,確保使用者可以通過其他方式訪問程式的使用說明。提示要儘可能地接近它所指向的內容。使用嚮導能夠從使用者使用目標的角度出發,突出應用的主要功能,視訊演示可以展示應用的關鍵功能。保持持續視覺吸引元素的簡潔,鼓勵使用者去重新整理資料。 常見的反饋包括:出錯,確認,系統狀態。用純文字的形式提供解決問題的辦法,儘量不要使用模式對話方塊。當用戶執行某項操作時,提示確認資訊,但不要打斷使用者使用產品的過程。 常見功能可見性包括:觸控,滑動,拖拽。斜角和陰影等視覺設計技巧能讓介面元素看上去是可觸控的。拖到手柄的圖示一定要易於識別。 常見的幫助模式包括:使用說明,介面元素說明,使用嚮導。在使用說明中綜合使用螢幕截圖,插圖和文字等多種形式。使用嚮導所包含的應該是應用中最關鍵的功能,最好從使用者的使用目標開始。 移動應用使用者介面的設計核心:直接了當和輕量化設計。