移動應用的交互設計模式總結

1導航

• 主導航模式－persistent導航：跳板式（springboard）／選項卡菜單式（Tab menu）／列表菜單式（list menu）／陳列館式（gallery）／隱喻式（skeuomorphic）

• 主導航模式－transient 導航：側邊抽屜式（side drawer）/下拉菜單式（toggle menu）/轉盤菜單式（pie menu）／

• 次級導航模式：翻頁式（page swiping）［iOS版audible］／摺疊菜單式（accordion）［ios版 Elevatr］／滾動選項卡式［安卓Google play］

2表單

• 登陸表單sign in:

少輸入（用戶名，密碼，操作按鈕，密碼幫助，註冊選項）＋少創新

自動填充？

密碼顯示與否？

註冊是在一開始的登陸頁上還是用戶想要有進一步操作時？

登陸與註冊是列表還是選項卡切換？

• 註冊表單registration［iOS版本的polar］

減少輸入項＋去掉確認電子郵箱＋去掉確認密碼+ 易於閱讀＋及時反饋＋垂直對齊＋提示

文字＋提交後給反饋＋長度控制在1屏以內＋操作按鈕清楚的在可視範圍內＋說明輸入要求

密碼顯示還是隱藏？

重複註冊怎麼辦？自動識別是要登陸？怎樣找回密碼？

• 個性化註冊表單registration with persona lization

關聯社交媒體＋註冊中融入偏好設置提示

path和Instagram在註冊中鼓勵用戶找到好友

• 多步驟表單

長使用進程欄process bar,但是會使得頁面擁擠

跨屏幕設計，但是在標題或者頁腳顯示當前是第幾頁

• 結賬表單checkout

  常見於電商平台，要讓用戶在他興緻最高的時候支付，不要差勁的用戶體驗影響支付

  技巧1:同時提供登陸、註冊和用戶選項，可在支付完成後提示它去創建賬號

  技巧2:棄用進程欄，把分屏步驟融合進一個結賬頁

  技巧3:掃描信用卡等功能免去輸入全部信息的麻煩，輸入地址時可選導入／自動填充，可選其他的付款方式

  技巧4:一鍵支付，快捷結賬

  新移動支付案例：

  iOS版沃爾瑪掃描商品的方式來加入購物車，避免店內排隊結賬，

  蘋果商店的EasyPay 自助結賬功能

• 計算表單calculator

  體重跟蹤器、稅款估算器、貸款計算器

  對齊方式、標籤、字體、按鈕位置、對比及顏色這些全部都是影響移動表單易用性的因素

  輸入欄位整齊優雅，輸入變化實時顯示，增強交互可視化

• 搜索表單search form

  篩選功能

  實時預覽

  提供合理的默認選項

  保存搜索記錄的選項

  隱藏式搜索，開啟自動建議

• 長表單long form

單頁滾屏比表格切分成多頁更好

back鍵放在左上角，命令按鈕應該放在右上角

3表格

• 基本表格（basic table ）

一般使用固定列表頭以及網路標準表格

文字左對齊，數字右對齊，保證對齊

• 無表頭表格（headreless table）

一般使用較寬的行顯示某一對象的多個變數

適合顯示多個項目集合

要點：去燥（圖片和邊框等多餘的視覺元素）；不重要的信息使用淺色和小的文字

• 固定列表格（fixed column）

適用於大表格

要點：提供視覺功能可見性，露出一部分讓用戶知道滑動還有更多

• 概覽加數據型表格 (overview plus data)

互動式更佳，

圖標概覽太大，可考慮逐級深入

• 行分組表格 (grouped rows)

數據更易讀

將表格匯總行與其他行區別開來，匯總行窄而且字體顏色淺

• 帶有視覺指示器的表格 （tables with visual indicators）

利用圖形化突出數據信息，增強可讀性

• 可編輯表格 (editable tables)

清晰指出選中的單元格和行

適當的編輯器（選擇器、下拉菜單、顏色選擇器、日期選擇器）

需要考慮編輯後產生錯誤提示和確認反饋

移動端的可編輯表格不適合進行大量的數據輸入操作

4 搜索、排序和篩選

4-1搜索模式：

隱式搜索（implicit search）

跨平台整合

proactive cards

增強現實

顯式搜索（explicit search）

掃碼搜索

語音搜索

直接搜索

模態搜索（頁面從右向左滑出／從下向上）

自動完成搜索（auto－complete）

點擊任何一項結果就會觸發搜索

如果在顯示自動完成搜索結果前存在延遲，可以將提示進行分組，提高搜索效果

限定範圍的搜索（scoped search）

搜索時給出下拉菜單控制項

iOS上的分段控制項實現限定範圍的搜索，ui控制項可使用滾動選項卡或膠囊導航欄（pill bar）

動態搜索（dynamic search）

動態篩選，搜索結果顯示在背景層

適合於有限的資料庫，比如地址薄或個人媒體庫，海量數據不應該採用這種模式

保存最近搜索記錄（recent）&熱門搜索

遵循可用性準則：尊重用戶付出的努力

搜索表單

有一個用於輸入多個搜索條件的單獨表單和一個顯式搜索按鈕

最小化輸入欄位的個數

輸入欄位的對齊，標籤和字型大小

搜索結果

列表視圖

磁貼視圖

根據搜索結果的類型和用戶偏好，提供多種視圖選項

卡片式、幻燈片、磁貼樣式呈現出來

用輕掃的手勢進行切換瀏覽

4-2 排序模式：

蘋果的「以用戶為中心」的設計，在app store的搜索功能上最沒有包括在內

搜索結果太多，順序排列不明

單頁排序（onscreen sort）

iOS boxer 在點擊排序按鈕後顯示單頁排序選項，用戶點擊選擇排序方式或者關閉隱藏

安卓下拉菜單控制項，選擇排列順序

排序浮層（sort overlay）

用戶通過點擊排序標籤，可將它放在搜索結果頁面的頂部、中間或者底部

「篩選、視圖切換開關、清楚搜索記錄」按鈕，要明確顯示出活動的排序選項

排序表單（sort form）

需要用戶做更多操作：打開表單—選擇選項—完成應用—返回按鈕

排序表單設計前，先考慮更高效的單頁排序或排序浮層模式，保證頁面簡短、整齊

4-3 篩選模式：

單頁篩選（onscreen filter）

頭部或者底部給出種類，讓搜索結果篩選

橫向滾動篩選欄，雙層篩選，下拉菜單控制項篩選

篩選浮層（filter overlay）

用戶點擊篩選或者設定條件標籤開啟浮層，也可以使用能夠清晰表達可以應用篩選條件的圖標

特點：省空間／更多高級選項／消耗用戶更多時間精力

篩選表單（filter form）

篩選選項可設置多個

遵守系統表單設計規範，不要設計新型的篩選控制項

篩選抽屜（filter drawer）

篩選抽屜從當前側邊滑出，或者向下滑出，完全遮蓋搜索結果

關鍵點：

• 打開和關閉抽屜是對應的操作

• 動態更新搜索結果的個數

• 搜索結果在背景層中始終可見

• 在篩選器被執行後給予清楚的反饋

篩選過程中停留在內容頁上，在選項被應用時顯示更新後的搜索結果個數，當抽屜關閉時，控制欄指示出當前應用的篩選項

手勢篩選（gesture－based filter）

基於地理位置的縮放、放大和拖動手勢可以用於篩選結果

5 工具

工具模式：

工具欄 （toolbar）、工具箱（toolbox）、行為召喚按鈕(call to action button )、行內操作(inline actions)、多狀態按鈕(multistage buttons)、上下文工具(contextual tools)、批量操作(bulk actions)、鎖屏控制項(lock screen controls)

按鈕只是一個變通手段，人們必須通過學習才能將這些間接交互，以主題內容為控制對象設計出直接交互的感覺.

5-1工具欄

iOS

注意區分工具欄與導航欄

工具欄是用戶對當前頁面操作的內容，始終顯示在頁面底端

可定義收起工具欄

安卓

操作按鈕放置在操作欄的右上角，而操作欄位於頁面頂端

安卓操作欄一般分為四個功能區

主要操作按鈕顯示在頂部操作欄上，次要操作放進溢出菜單里，用戶通過點擊垂直的省略號圖標進行操作

優點：長按一個操作按鈕會出現工具提示，說明這個按鈕的用途

缺點：操作欄里不僅有操作按鈕，還有導航控制項（標題名稱、抽屜圖標、向上返回按鈕、下拉菜單等），因此操作欄很快會變的擁擠不堪

windows phone

工具欄＝應用欄

以帶有文字標籤的圖標顯示，次要操作可以摺疊進省略號

與操作系統無關的模式：上下文工具欄

適用於輸入欄或者輸入框中使用的操作按鈕

總結工具欄：在工具欄放置和行為方面，要遵守針對特定系統的建議，選擇用戶熟悉、易識別的圖標。

5-2 工具箱

增強型工具欄（多用於拍照app）

放置在屏幕底端，選項可超出屏幕寬度，需要通過滑動選項

iOS 版本repix：工具選項作為第二行顯示在工具箱上方

virtual makeover ：扇形工具箱

總結：

標籤＋圖標的形式可增強工具欄和工具箱的可用性

要確保設計中有「取消」按鈕

5-3 行為召喚按鈕

全局，點擊後往往直接購買

標籤欄，點擊後彈出全屏操作選項

懸浮行為召喚按鈕，點擊後」＋」變」x」，對應交互的正確設計方式（比如「打開」和「關閉」按鈕要放在同一位置）

path點擊懸浮的行為召喚按鈕後，會顯示浮動選項

使用情景：1幫助用戶成功完成一個流程

2 讓用戶快捷使用有特定全局操作的應用（拍攝照片、分享、錄音錄像入口）

5-3 行內操作

操作按鈕與其作用的對象在同一行，而不是在全局或者整個屏幕層級上

應該靠近被操作對象

選擇用戶熟悉的圖標，為圖標加上文字標籤

5-3 多狀態按鈕

既是操作觸發器，同時也是反饋機制

iOS系統的應用商店中下載應用，「購買」－「安裝」－「打開」

適用於一系列緊密相關的過程被快速連續執行

5-4 上下文工具

專門針對一個對象或者任務（包括下載、分享、複製、刪除等）

點擊省略號，或者長按出上下文工具

點擊「更多」，手勢左滑或右劃，顯示上下問工具浮層

5-5 批量操作

選擇、刪除和重新排序

編輯模式中多用

5-6 鎖屏控制項

音樂類應用，播放和暫停播放

any do，重複提醒，幫助用戶管理任務

6.圖表