一、導覽
1.選擇導覽模式之前務必要先決定好你的資訊架構。
2.主要導覽模式：
（1）Springboard：上面有選單項目，是作為應用程式的入口。
個人化的 Springboard 可用來呈現個人資料和選單項目，通常有自訂功能來改變 Springboard 的版型。
＊重要性相同的項目使用格狀版面，或使用不規則的版型來強調某些項目比其他項目重要，要考慮個人化和自訂的選項。
（2）List Menu：為應用程式的入口，它有各式各樣的變化，包括個人化的清單選項、分組清單和進階清單。
＊適合用於長標題或那些需要文字說明的標題，使用 List Menu 的應用程式應該在所有內部畫面提供一個選項，以回到 List Menu，通常是在標題列的按鈕，有一個清單圖示或以「menu」標示。
（3）Tab Menu：利用視覺化的方式區隔選取中的頁籤和其它頁籤，清楚指出選取中的清單項目，要使用容易辨識的圖示或有標籤的圖示。
＊iOS 習慣把頁籤放下方；Android、Widows Mobile 習慣把頁籤放上方。
（4）Gallery：把每一則內容都呈現出來，可用旋轉式圖片播放（carousel），格狀版面或幻燈片展示呈現。
＊適合用在經常會更新的內容上，人們會想瀏覽這些內容。
（5）Dashboard：提供關鍵績效指標（KPIs）的總覽，可點進去每項指標查看其他資訊。
＊不要把 Dashboard 塞滿，要做調查來決定要包含的關鍵指標。
（6）Metaphor：用來反映應用程式的隱喻。
（7）Mega Menu：為一個大的覆蓋面板，有自訂的選單項目格式和分組。
3.次要導覽模式：
（1）Page Carousel：旋轉式的頁面播放。利用輕彈手勢快速瀏覽一組頁面，頁面指示器會顯示有幾頁，輕彈會顯示下一頁。
＊適合用來瀏覽少量的頁面，要使用視覺指示器來反映畫面的總數和目前的畫面，輕彈是常用來瀏覽的手勢。
（2）Image Carousel：旋轉式的圖片播放。原理同上。
＊適合用來呈現新的視覺內容，要提供視覺化的預設用途，利用箭頭、部分的圖片或頁面指示器，告知使用者還有更多內容。
（3）Expanding List：允許在同一個畫面上揭露更多資訊，輕擊圖示會展開清單，顯示個別的資訊。
＊適合漸進式地顯露更多細節或選項。
二、表單
1.表單的模式：
（1）Sign In：輸入登入。輸入的內容要少。
＊不要在登入畫面標新立異，要利用最佳慣例讓使用者容易登入，並提供忘記密碼的取得方式。
（2）Registration：輸入註冊資訊。輸入的內容要少。
＊1.避免使用橫式標籤。
＊2.要簡短，所有欄位和註冊按鈕最好都在一個畫面裡，要讓已成為會員的使用者容易登入。
（3）Checkout：結帳表單。把多個畫面合併到一個清單，並使用裝置標準控制項。
＊把頁面和步驟減到最少。
（4）Calculate：計算機表單。要把輸入和視覺化結果緊密關連在一起。
＊設計和版型要使用標準的表單慣例，最好在同一頁裡以視覺化的方式呈現結果。
（5）Search Criteria：搜尋表單。查詢條件必須限制在必要的欄位和提供合理的預設值。
＊盡可能把所有條件放在同一頁裡。
（6）Multistep：多步驟表單。要顯示出目前的步驟和所有步驟數。
＊要告訴使用者他們的位置和他們接下來的方向。
（7）Long Form：長表單。把按鈕放在表單下方。
三、表單和清單
1.表格和清單的模式：
（1）Basic Table：標準的表格，有固定的分欄表頭和格狀頁面，行列的背景色以兩種顏色相間。
＊避免使用深色的格線和直式分隔線，把文字置左、數字置右，不要塞滿整個畫面。若有太多資訊無法放入同一個畫面裡，則使用其他模式。
（2）Headerless Tables：無表頭的表格以比較高的行列為特徵，顯示一個物件的多個變數，以及沒有分欄標籤，每一行的標題字型較大、其他資訊的字型較小。
＊1.適合用來呈現項目組合和查詢結果。
＊2.每一列最多放三行資訊，比較不重要的細節要使用較小和較淡的字型。
（3）Grouped Rows：行列分組。
＊要以視覺化的方式區隔摘要和表格裡的其他行列。
（4）Fixed Column：固定欄位模式。
＊提供視覺化的預設用途，指出哪一欄是固定的，以及滑動可以揭露更多資料。
（5）Cascading Lists：層疊式清單。
＊使用扁平的資訊層級來避免深入下探應用程式（超過三層）。
（6）Editable Tables：可編輯表格。
＊當需要輸入大量的資料或需要大量的編輯時，避免使用此模式。
（7）Tables with Visual Indicators：折線圖和圖示能提升表格的資訊呈現。
＊選擇能夠立即辨識出來的視覺指示器，避免使用不必要的圖示。
（8）Overview plus Data：每行資料的上方呈現表格內容的總覽或摘要。
＊總覽要放在資料上方，且容易一眼就明瞭。
四、查詢、排序和篩選
1.查詢的模式：
（1）Explicit Search：外顯查詢。仰賴一個明顯的動作來執行查詢和查看結果。查詢結果通常出現在搜尋列下方的區域裡。
＊1.考慮合併使用外顯查詢模式和自動完成模式。
＊2.要在欄位裡提供清除按鈕和取消查詢的選項，要利用回饋顯示查詢正在進行中。
（2）Search with Auto-Complete：自動完成。使用進度指示器作為回饋。
＊若結果顯示會有延遲的話，要出現回饋；考慮在查詢結果裡強調相符的查詢詞。
（3）Dynamic Search：動態篩選。輸入查詢詞會自動選畫面上的資料。
＊適合有限的資料組。
（3）Scoped Search：設定查詢條件。
＊根據資料組提供合理的範圍選項，約三至六個。進接查詢功能考慮用一個查詢表單。
（4）Saved & Recent Search：提供已儲存的和最近的查詢讓使用者做選擇。
＊已儲存的查詢通常需額外的步驟，為之後的參照命名一個查詢，而最近的查詢則會自動儲存和出現。
（5）Search Form：有一個輸入多個條件的獨立表單和一個明顯的查詢按鈕。
＊把輸入欄位的數量降至最低。
（6）Search Results（View Results）：一旦執行了查詢，可在同一個畫面上呈現結果。
＊標示回傳的結果數，用延遲載入的方式取代分頁。
2.排序的模式：
（1）Onscreen Sort：畫面上的排序可以提供簡單的單擊方案，把排序項目放在畫面的上方或下方取決於其它畫面元素。
＊清楚顯示哪個項目在選取中或「開啓中」，如果項目標籤不適合放在雙態觸變按鈕列裡，則使用 Sort Order Selector 模式。
（2）Sort Order Selector：選擇器模式。有很多用來選取不同介面控制項。
（3）Sort Form：將排序和篩選的項目合併在同一個畫面。
＊使用此模式前，要考慮有效率的排序項目雙態觸變，或排序選擇器模式。
3.篩選的模式：
（1）Onscreen Filter：畫面上的篩選項目根結果或物件清單呈現在一起，輕擊即會篩選。
＊1.不要把這個篩選模式當作主要導覽，而是用來分組和篩選內容。
＊2.要顯示選取中的篩選項目。
（2）Filter Drawer：篩選抽屜。可用來顯示篩選項目，點擊把手會開啓抽屜。
（3）Filter Dialog：篩選對話窗。需要使用者選取一個篩選項目或取消動作。
＊項目清單要短，避免捲動，若是比較長或多選的篩選項目考慮使用 Filter Form。
（4）Filter Form：條件式篩選表單。
五、工具
1.工具的模式：
（1）Toolbar：工具列。包含一些用來做畫面層級的動作工具。
＊通常出現在畫面下方，包含畫面層級的動作，選擇容易了解和辨識的圖示，或使用標籤加上圖示。
（2）Option Menu：可包含畫面層級的動作，不過可透過一些不同的方式來存取和呈現。
＊盡量要用直接互動，不要把導覽藏在 Option Menu 裡，若有一個針對畫面的單一動作，考慮用 Call to Action Button 模式。
（3）Contextual Tools：脈絡工具可用在畫面上的一個特定物件。
＊盡量要用直接互動，若需要按鈕，按鈕應該出現在可行動的物件旁邊，並選擇熟悉的圖示或使用文字標籤。
（4）Inline Actions：行內行動，可用於畫面上的一個特定物件，不過這些動作是會一直出現的。
＊盡量要用直接互動，若需要按鈕，按鈕應該出現在可行動的物件旁邊，並選擇熟悉的圖示或使用文字標籤。一個物件最多有一到兩個行內行動。
（5）Call to Action Button：行動呼叫。
＊不要把行動呼叫藏在選單裡，要讓它清楚（高對比）明白（清楚地的標示）。
（6）Bulk Actions：批次行動。
＊最好在編輯模式裡處理像刪除和重新排序的批次行動，要清楚提供離開模式的選項。
（7）Multi-State Button：按鈕同時擔任觸發和回饋機制的角色。
＊適合用在一連串有限的畫面中依次被執行的行動，這些行動彼此緊密關聯。
六、圖表
1.圖表的模式：
（1）Chart with Filters：利用時間控制項或其他篩選功能來加強一個基本圖表。
＊1.若你打算提供時段篩選，要提供大量的空間給觸控目標。
＊2.使用對齊畫面下方的控制項。
＊3.要動態更新圖表，而不是使用「Apply」按鈕。
（2）Preview Window：不用點擊即可提供更多的脈絡和歷史資訊，傳達隨著時間所產生的資料變化。
＊圖表的本質應該決定預覽視窗是唯讀或互動的，若是互動的，要使用夠大的觸控目標。
（3）Overview plus Data：把圖表當作總覽用。
＊要測試圖表，看看使用者是否能回答三個問題：主題是什麼、重要資訊是什麼、重要資訊的價值是什麼。
（4）Datapoint Details：以不同的互動來顯示資料點的詳細資料。
＊詳細資料透過 onHover 來顯示，要考慮透過 onTap 來實作資料點的詳細資料，提供使用者想要的額外資訊。
（5）Drill Down：點擊圖表就能進入資料。
＊邀請使用者往下探索更多資料，要使用麵包屑來顯示層級。
（6）Zoom：放大或轉向螢幕。
＊邀請使用者轉到橫向使用全螢幕檢視，裝置轉回直向時自動讓導覽恢復原狀。
（7）Pivot Table：樞紐分析表。
＊把樞紐分析表的選取和結果圖表放在一個畫面裡，動態套用選取。
（8）Sparklines：微圖。以小尺寸和高密度為特徵的資訊圖表，以簡單扼要的方式，呈現跟測量數據相關的趨勢和變異。
＊考慮合併使用 Sparklines 和 Drill Down 模式來揭露完整的圖表詳細資訊。
七、邀請
1.邀請的模式：
（1）Dialog：有說明文字的對話窗。
＊對話窗內容保持簡短，並且要有別的途徑從應用程式裡存取說明文字。
（2）Tip：小技巧提示。
＊小技巧要放在它們所指的功能旁，內容保持簡短，互動一旦開始就要消失。
（3）Tour：導覽。按照畫面和功能，依序探索應用程式，提供最後的邀請。
＊從使用者的角度，強調應用程式的主要功能，保持簡短並吸引人。
（4）Video Demo：影片介紹。
＊提供常用的影片功能。
（5）Transparency：透明層。一般出現在首頁，是一個透明的圖層，有使用圖表放在真的畫面內容上方。
＊互動一旦開始，透明層就要消失。
（6）1st Time Through：融合在畫面設計理，維持在介面裡，直到取代它們或執行了動作。
＊利用圖片或其他視覺線索清楚區隔邀請和其他內容。
（7）Persistent：持續的邀請內建在畫面裡，一直都看得見。
＊保持簡短，利用圖片或其他視覺線索清楚區隔邀請和其他內容。
（8）Discoverable：顯露的邀請。設計成執行像輕彈或滑動的常見手勢時就顯示出來。
＊常用於執行資料的重新整理。
八、回饋和預設用途
1.回饋的模式：
（1）Error Messages：錯誤訊息。以平鋪直述的語言來表達，精確地指出問題，並提供具建設性的解決方案。
＊要讓錯誤顯而易見，用畫面裡的訊息代替強制回應對話窗。
（2）Confirmation：執行動作時的確認視窗。
＊不要打斷使用者的流程。
（3）System Status：系統狀態的即時回饋。
＊針對可能費時較久的操作，提供一個取消選項。
2.預設用途的模式：
（1）Tap：可點擊的控制項。
＊運用斜角和陰影之類的視覺設計技巧來指出可點擊的控制項。
（2）Flick：顯示邊緣告知使用者有更多東西可看。
＊使用液面指示器或顯示下一個項目的邊緣，來提供輕彈會揭露更多項目的預設用途，避免使用粗的捲軸。
（3）Drag：拖拉控制。指出一個項目可以被移動、重新整理或重新排序，適合用在清單裡的項目上。
＊使用可辨識的圖示，考慮一起使用邀請，讓使用者知道有這個功能。
九、協助
（1）How To：如何使用應用程式的簡單說明。
＊在 How To 裡合併使用畫面截圖、插圖和文字來溝通。
（2）Cheat Sheet：以輕量化的方式來介紹畫面上的所有元素。
（3）Tour：導覽。可在使用者第一次使用時提供，之後並能隨時存取。
＊最好從使用者的角度來強調應用程式的主要功能，要保持簡短和看起來吸引人。
十、反面模式
（1）Novel Notions Anti-Pattern：把舊式的互動模型移植到新平台上，並使用非標準的介面元件。
＊專注在和新功能和內容，但介面仍以最佳慣例為基礎。
（2）Metaphor Mismatch Anti-Pattern：不當使用一個控制項或圖示，例如以少見的方式使用熟悉的圖示，應用程式的概念模型不符合使用者的心智模型。
＊從圖示和控制項到概念模型，都應使用常見的方式。
（3）Idiot Box：無緣無故出現對話窗。
＊避免打斷使用者的流程，只有在採取不能挽回的動作時才顯示一個確認對話窗。
（4）Chart Junk：圖表裡的視覺元素對理解圖表上的資訊是不必要的，或者這些元素會轉移使用者對資訊的注意力。
＊只在圖表和圖像裡使用對傳達圖表上的資訊有必要的視覺元素。
（5）Oceans of Buttons：頁面出現大量的按鈕。
＊用標準模式來顯示頁面層級的行動，項目層級的行動則用脈絡工具來代替重複的按鈕，頁面層級的行動在視覺上要跟導覽元素有所區隔。
沒有留言:
張貼留言