本書詳細講述了移動端涉及的絕大部分UI界面設計模式并配以豐富的圖例,并且對各UI模式的適用場景和可能問題進行了介紹,適合學習使用。
第1章 導航
1. 全局導航設計模式:跳板式(或叫做啟動面板)、磁貼式(跳板式的升級)、卡片式、列表菜單式、儀表盤式(數據作為選項入口)、陳列館式(適于經常更新的內容,通常采用網格布局)、選項卡菜單式(或叫做標簽欄)、隱喻式(或叫做擬物式,例如閱讀APP的書架)
2. 瞬時導航設計模式:側邊抽屜式(風格分為浮層和嵌入層)、下拉菜單式(風格分為浮層和嵌入層,安卓提供了Spinner控件來實現這一模式)、轉盤菜單式(環形的菜單欄)
3. 以上介紹的是主導航模式,其中所有的設計都可以應用到次級導航中。除此之外次級導航設計模式還可以包含以下這些:翻頁式(通過使用滑動手勢)、滾動選項卡式(可以滾動的標簽欄)、折疊菜單式(又稱手風琴式)
第2章 表單
1. 登錄表單的設計建議:(1)包含盡可能少的輸入;(2)盡可能將輸入框設計在同一頁面上;(3)如果有明文顯示密碼的功能,提供給用戶關閉和開啟的圖標或文字提示;(4)使第一個輸入框自動獲得焦點
2. 注冊表單的設計建議:(1)去掉不必要的輸入元素,例如確認電子郵箱字段和確認密碼字段(因為可以加入密碼明文顯示的功能);(2)提供即時反饋,不要在用戶提交之后告訴用戶他的輸入不合法;(3)提交后給予注冊反饋;(4)如果信息較多可以采用多步驟表單進行注冊,記得標注用戶所處的位置并提示下一步
3.?對于整個應用而言,如果有注冊必要那么登錄和注冊應放置在首頁,如果沒有必要那么最好讓用戶在使用應用時無需登錄和注冊。
4. 結賬表單的設計建議:(1)同時提供登錄、注冊和客人用戶選項;(2)簡化流程,棄用進程欄;(3)提供省時的快捷方式;(4)提供快速結賬方式;(5)忘掉網頁端
5. 計算表單的設計建議:(1)保證表單的易讀性;(2)可以嘗試增加交互可視化
6. 搜索表單的設計建議:(1)保持短而簡單,搜索條件盡量控制在一頁內;(2)提供合理的默認值和保留搜索的選項以便后來使用;(3)在搜索結果頁提供篩選功能
7. 長表單的設計建議:提供退出按鈕和命令按鈕并固定在頁面的頂端或底端位置。
第3章 表格
1. 表格通常的設計:(1)省略垂直網格線以減少視覺噪音,同時保證列對齊;(2)使用無表頭表格顯示項目集合,如菜譜、存貨清單等,起到列表的作用;(3)較大的列較多的表格可以固定首列,通過左右滑動查看信息;(4)對于財務類型的應用可以在第一行數據的上方以圖表形式顯示表格內容的摘要;(5)采用行分組方式分組數據;
2. 可編輯表格的設計規范(適用于網頁端和移動端):(1)清晰地指示出選中的單元格和行;(2)如果單元格有特定的格式,就要提供適當的選擇器;(3)除非編輯后產生錯誤提示,否則沒有必要為每項編輯都提供確認反饋,只需在保存時要求用戶確認即可。
第4章 搜索、排序和篩選
1. 搜索的設計模式:隱式搜索(在用戶檢索相關內容時自動給出提示)、顯示搜索(包括文字輸入、圖片和數碼掃描、語音、模態搜索等)、自動完成搜索(在輸入時就進行搜索結果的匹配和篩選)、動態搜索(動態篩選)、限定范圍的搜索(提供搜索范圍的選擇欄)
2. 在設計搜索時將保存的搜索、最近搜索記錄和熱門搜索納入考慮中會優化用戶體驗。
3. 排序——當搜索結果或其他信息數量較多時必須考慮合適的排序方式。排序的設計模式主要指排序規則位置的放置,包括單頁排序和排序浮層
4. 篩選的設計模式:單頁篩選(固定在底端的篩選選項或滾動篩選欄)、篩選浮層、篩選表單(注意要解決搜索結果會被暫時隱藏的問題)、篩選抽屜、基于手勢的篩選(例如地圖中的縮放手勢可以改變顯示的結果數)
第5章 工具
1. 工具的設計模式包括:工具欄、行為召喚按鈕(適用于頁面只有單一操作,也可用于彈出一組級聯菜單選項)、行內操作、多狀態按鈕(適用于一系列緊密相關的過程被快速連續執行時,例如下載應用時由“安裝”到“打開”)、上下文工具(觸發的動作包括長按和左右滑動)、批量操作
2.?工具欄雖然看上去和導航欄差不多,但不具有導航作用,主要用于放置如轉發、編輯等工具。工具欄的設計要依據移動端的操作系統,iOS中工具欄可以置于底端或收起,安卓系統中通常位于頁面頂端。
第6章 圖表
1. 圖標設計的技巧:(1)了解基礎知識,很多桌面端的圖標設計準則都適用于移動應用的圖表設計;(2)保持簡單,不要讓多余的數據或視覺效果降低圖表的有效性;(3)進行用戶測試,一定要讓用戶能看懂并能正確理解;(4)了解你的開發團隊正在使用的圖表庫。
2. 圖表的設計模式:帶有篩選器的圖表(使用篩選功能增強圖表設計)、交互式時間線、數據點詳情(點擊餅圖中的扇區或折線圖的點顯示數據詳情)、逐級深入、概覽加數據、交互式預覽(適用于需要顯示預測的場景,隨著用戶改變數據而變化)、儀表盤、縮放(引導用戶橫屏瀏覽更多數據以及直接縮放等)、迷你圖、嵌入式圖例、閾值、透視表格(相當于置于大表格中的小概覽表格)
第7章 引導和視覺吸引
1. 引導(又稱向導)的原則:(1)少用文字,多采用交互的方式使用戶自己操作;(2)不要前置引導,將信息分成小塊,最初只介紹必要的部分,當用戶需要時再逐一展示;(3)給予用戶成就感;(4)在使用中強化學習;(5)傾聽用戶的心聲,做個不帶傾向的用戶測試;(6)不要在最后再設計引導,將引導融入整個設計過程;(7)允許用戶跳過;(8)引導中傳達的所有信息應該都可以隨時訪問
2. 視覺吸引的設計模式:提示、持續的視覺吸引(例如永遠留一個空位置便于用戶添加內容);可發現的視覺吸引
第8章 社交模式
1. 提供社交服務的設計模式:注冊(正確使用常見社交網絡的API接口以簡化注冊體驗)、連接(使用戶能夠連接訪問他們已有的社交網絡、關注功能、個人資料(社交網絡的核心,應涵蓋足夠多和足夠有趣的信息)、群組、游戲化(添加升級概念和激勵機制等)
第9章 反饋與功能可見性
1. 恰當的、清晰的、及時的反饋對于用戶非常重要。反饋的設計模式:錯誤提示(應當突出而明確)、確認(在執行操作后提供確認反饋,但不要打斷操作流)、系統狀態(例如加載時應該讓用戶了解到進程,進程較長時提供取消按鈕)
2. 功能可見性指一個對象具有讓用戶知道它可以用來執行一項操作的特性,實現這點需要一些技巧。具體實例如下:(1)使用斜面和陰影示意元素是可點擊的;(2)使用圓點指示器、頁面元素的溢出、滾動條等示意頁面能夠滑動;(3)使用手柄示意可進行的拖曳移動和縮放的功能
第10章 幫助
1. 幫助的設計模式:入門介紹、用戶指南/幫助系統、常見問題解答列表、功能使用向導(可能會對應用的轉化率和使用量產生負面影響,應謹慎使用)、新手引導、上下文幫助、收集反饋
第11章 反模式
1. 反模式一詞來源于計算機科學,也稱為陷阱,指一類通常是重復發明的糟糕的問題的解決方案。在UI設計時應避免反模式。
2. 反模式的問題來源:標新立異(無效的、和已有設計模式沖突的創新只會使用戶厭煩)、不必要的復雜(在簡化設計和展現創意中間要選擇前者才能為用戶提升效率)、隱喻錯位(包括控件錯位、圖標錯位、手勢錯位、心理模型錯位)、愚蠢的對話框(在不必要的地方干擾用戶行為)、圖表垃圾(圖表是為了更好地展示數據而不是為了獲得絢麗的視覺效果)、按鈕海、格格不入(注意iOS平臺和安卓平臺在界面設計上的區別)