移動設計模式總結(一)

這篇文章整理自一本書《移動設計模式大觀》,下載地址:http://download.csdn.net/detail/shanxing2/5103470

1.導航

1.1桌面式


最佳實踐:菜單無主次之分,每個菜單所佔空間大小一致。菜單有主次之分,主要的佔空間較大,其餘的佔空間較小。在使用桌面式導航佈局時,要充分考慮到給用戶提供個性化和定製化功能。

1.2列表式

最佳實踐:列表菜單導航適合長標題或者有副標題說明,使用類表菜單導航應該提供一個從子頁面返回類表頁面的方式,通常在標題欄添加一個一個帶有菜單字樣的按鈕作爲返回按鈕。

1.3選項卡式


最佳實踐:使用選項卡導航要注意視覺上對已選擇和未選擇的選項進行有效區分 圖庫式

1.4圖庫式

圖庫式表面被分爲各個內容區用於導航。內容區通常載有單獨的文章,標題,照片,產品和其他能夠放置在內容區,網格或幻燈片展示裏的內容。

最佳實踐:圖庫式適用於用戶想要瀏覽的經常更新的內容

1.5儀表盤式

儀表盤彙集展示了一些關鍵指標。進入每一種度量方式都可以瞭解更多額外信息。這種主導航模式常用於金融應用程序、分析工具、銷售和營銷應用程序

最佳實踐:儀表盤不需要載過多內容,而需要載入一些被研究確認過的關鍵數據

1.6隱喻式

用一個頁面來反應整個應用程序。這種模式常用於遊戲,也能夠在幫助人們分類物品(如各類筆記,書籍,酒品)等應用中看到

最佳實踐:使用隱喻式要慎重,如果一個執行起來不明確的隱喻反而會起到不好的反作用

1.7菜單式

移動應用菜單式導航與網頁上菜單導航極爲相似。

最佳實踐:在選擇導航模式前,請先明確你的信息架構,根據信息架構選擇需要的導航模式。

1.8二級導航


任何主導航都適合於二級導航,有些專門適合二級而不是主導航的導航:頁面旋轉式、圖片旋轉式和當前頁面展開式

頁面旋轉適用於頁面數量較少的情況,使用指示器反應頁面數量和當前頁面,左右滑動手勢是最常見的旋轉導航手勢。

圖片旋轉木馬式最適合展示新的視覺內容,例如文章,產品和圖片。注意要提供視覺可預見性,要麼左右留有箭頭,要麼有部分圖片漏出來,要麼有頁面指示“…”能夠顯示更多的內容。

擴展類表模式特別適合逐步顯示細節或者某一對性的信息

2.表單設計

2.1登錄表單

登錄表單至少應有用戶名及密碼的輸入框,登錄按鈕,密碼找回及註冊選擇幾項組成。另一種做法是放棄用戶名字段,只需要一個密碼。用戶只需要輸入密碼來訪問敏感數據,在金融類應用中大受歡迎。

最佳實踐:不要在登錄屏幕上做太多創新。通常登錄表單要做的足夠容易讓用戶完成登錄,要留有密碼找回功能,以便用戶找回密碼。

2.2註冊

最佳實踐:保持簡短,一屏內顯示,去掉右鍵和密碼確認,使用縱向標籤,實時反饋有效性

2.3確認表單

移動設備確認表單設計原則:在確認表單使用設備標準控制;考慮多屏使用一個控制表單;提供一種機制爲未來更快速的確認,例如借記卡信息或登錄結賬;顯示一個安全的鎖頭標誌來表示一個安全的連接;checkout嚮導模式可能不是一個最快速有效的設計

最佳實踐:側重速度,效率和安全,減少不必要的字段,將頁面和步驟最小化

2.4計算表單

如體重跟蹤器,稅收計算器和貸款計算器。好的計算截面應該輸入輸出對其整潔並帶有計算結果的視覺展示。

最佳實踐:對齊,標籤,字體,按鈕擺放,對比,顏色,都會影響到表單可讀性,儘可能在同一頁面展示可視化效果。

2.5搜索表單

最佳實踐:搜索字段不要太多,一個頁面一個搜索維度或字段,空間佈局合適,操作快捷方便

2.6多步操作表單

移動設備上的一個簡單的解決方式是顯示當前步驟和總步驟數。

最佳實踐:顯示用戶去過哪裏,還可以去哪裏,減少不必要的字段,將頁面和步驟最小化。

2.7長表單

最佳實踐:不要爲了減少滾動機械的將表單劃分成幾步。

3.表格與列表


3.1普通型

一般是網格佈局並帶有標準列和標題,同時有不同顏色的分割線區分個行列(或更精細的分割線)使得表格更易讀。

最佳實踐:避免使用黑色網格線以及將表格垂直劃分的形式,文字左對齊,數字右對齊,如果一屏信息太多時,可考慮使用其他模式。

3.2無表頭型

無表頭表格佈局的特點是不使用列,但是使用行顯示一個對象的豐富變量。通常使用較大的文字顯示行標識符,而使用較小的文字顯示每行細節內容。此模式的理想狀態是顯示數據項集合和搜素結果。想一個列表,此模式用來快速的掃視和選擇。

最佳實踐:表中每一行最多顯示三小行信息,信息內容要有主次之分,對於主次,不要主觀猜測,可由用戶調研後得出結果確定設計

3.3固定列型

對於大的表格,固定列模式表格可能是一個很好的解決方案。

最佳實踐:當列被固定後,要提供視覺引導,提示用戶滑動後可以看到更多內容。

3.4綜述+數據型

綜述+數據模式是指在單個行上面顯示一些總結綜述性信息。

最佳實踐:綜述位於數據之上,比較醒目,容易理解。

3.5分組型

行分組可以使表格的數據更容易理解。行分組可以充當小節或分段的標題摘要,

最佳實踐:在視覺上區分總分關係

3.6層疊型

原因很明顯,在移動設備上,一個樹形表格會非常繁瑣臃腫,級聯層疊表格可提供相同的層次結構。

3.7視覺指示型

微線圖和圖標可以增強一個表的視覺展示,使其在特定元素中更淋漓盡致的表現。

最佳實踐:選擇的圖標要一眼容易辨認出來,避免使用無意義的圖標。

3.8可編輯型

可編輯型應用幾乎完全是電子表格。許多相同的用於WEB的設計指導方針仍可用於移動設備設計。晰的表明被選擇的行或列。如果表格使用特定的格式,提供適當的編輯器(選擇器,顏色選擇,數據選擇等)。在保存狀態時提供反饋和錯誤信息,而不是在更改狀態中

最佳實踐:不太適用於大規模的數據錄入和編輯。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章