《行動介面設計模式》筆記

一、構圖

1.元素編排的視覺層級：位置 -> 尺寸 -> 形狀 -> 對比 -> 顏色 -> 形式。最重要的項目較大、較高、較量。


2.盡量使用條列式資訊，而非表格。


3.決定 wrapper（版型）裡的資訊時，需考量到與情境有關的事：

（1）技術的、功能的、商業的需求和限制。

（2）使用情境發生的地方。

（3）使用者的目標。

（4）達成這些目標所需執行的任務。

（5）需要呈現哪些資訊以達成每個目標或任務。


4.wrappers 的模式：

（1）Scroll

設計問題：頁面上的資訊超出視窗。

解決方案：顯示可捲動的捲軸。

設計重點：

• 只有現在取得焦點的項目才能被捲動。
• 留意手指觸發的慣性捲動（inertia scrolling）。
• 確保捲動行為只能朝一個軸向（通常為直向）。
• 盡可能避免在一個直向捲動的區域再放一個直向捲動的區域。
• 避免使用拖放，或其他需要在可捲動區域裡拖拉元素的互動行為。
• 使用者與內容互動時，務必要指出捲動的位置，尤其是當他在捲動時。
• 當每個方向的資訊都同樣重要時，才可使用兩種移動的軸向，如放大圖片。

參照的其他模式：

• Vertical List
• Infinite List
• Infinite Area
• Thumbnail List
• Fisheye List
• Carousel
• Directional Entry
• Pop-up
• On-screen Gestures
• Press-and-Hold
• Accesskeys
• Grid
• Film Strip
• Location Jump

（2）Annunciator Row

設計問題：使用者想得知硬體功能的狀態。

解決方案：顯示一長條，上面有一系列代表裝置狀態的圖示。

設計重點：

• 狀態的訊息以圖示呈現，盡可能地少用文字或數字。
• 圖示不是代表一個功能的存在與否，而是功能的狀態。

參照的其他模式：

• Notifications
• Icon
• LED

（3）Notifications

設計問題：在不干擾的情況下，告訴使用者任何通知和重要的事。

解決方案：以單一、一致的通知方式貫穿整個系統，並且使用者可以很簡單地處理或清除通知。

設計重點：

• 不要讓通知阻止使用者當前的動作。
• 各種通知都應呈現在單一檢視畫面裡。
• 當有不止一個通知時，必須能夠立刻顯示所有通知。
• 不要連續顯示通知，如果一次不只收到一則，就以多則通知的方式，而非連續的呈現。
• 把通知清單收疊起來，不要條列每則通知，而是每一列用來顯示不同的項目，標示出該項目的數量。
• 處理通知時，要暫停目前的任何操作或動作，儲存所有使用者輸入的資料，處理完通知後再回到之前的狀態。

參照的其他模式：

• Annunciator Row
• Pop-Up
• Confirmation
• Titles
• LED
• Tones
• Haptic Output
• Voice Notifications

（4）Titles

設計問題：為每個主要元素下標籤，讓整個脈絡都很清楚。

解決方案：為頁面和元素或頁面裡的內容區塊下標題，彈出式元素和其他獨立元素應該要有類似頁面層級標題。

設計重點：

• 以一致的形式使用 Titles。
• 不要有圖示或保留空間給指出狀態的圖示。
• 當標題是連結時，務必要清楚地表現出來。
• 任何最高層級的標題都應該放在圖文框裡，或以其他形式區隔開來。

參照的其他模式：

• Notifications
• Vertical List
• Infinite List
• Thumbnail List
• Fisheye List
• Carousel
• Grid
• Select List
• Confirmation
• Sign On
• Exit Guard
• Timeout
• Windowshade
• Pop-Up
• Hierarchical List
• Returned Results

（5）Revealable Menu

設計問題：存取非必備的功能。

解決方案：使用者透過選取螢幕上的一個元素，或操作一個手勢時，選項選單會出現。

設計重點：

• 子選單最多只應該有一個。
• 所有可開啓的選單一定要有關閉方法。
• 在選項選單已開啓的情況下，禁止使用者選取父視窗裡的項目。
• 選單的項目以文字來呈現，並只在有空間時才使用輔助的圖示。
• 子選單應該要包含一個 Title，或必須強調選取中的父元素，把它指向子選單，作為子選單的標籤文字。
• 可以展開其他選項的項目旁邊應該要放指引。空間有限的話，應該要把主選單變暗，讓取得焦點的項目更清楚。
• 不能使用的選項應該變灰色，把它們由在清單裡有助於告訴使用者有哪些動作可用，並使它們的位置達到一致性。

參照的其他模式：

• Fixed Menu
• Vertical List
• Pop-Up
• Thumbnail List
• Select List
• Accesskeys
• Icon
• Button

（6）Fixed Menu

設計問題：需要能夠存取應用程式裡的選項或控制項。

解決方案：一個一直出現的選單或控制組堆疊在視窗的一側。

設計重點：

• 捲軸不能跟選單重疊。
• 通常設計在視窗的下方。
• 把主選單固定在視窗裡，避免把它捲出螢幕外。
• 只在這個模式適用於整個作業系統或應用程式時，才使用它。
• 通常排成一列，以 Icon 形式呈現每個選項，並有相對應的文字標籤。
• 不要把多個固定式選單堆疊在一起，也不要把固定式選單跟其他同樣形狀的互動列排在一起。

參照的其他模式：

• Revealable Menu
• Annunciator Row
• Titles
• Vertical List
• Pop-Up
• Icon
• Button

（7）Home & Idle Screens

設計問題：裝置一啟動，就必須顯示一些預設的資訊和動作，以及離開或完成所有活動時，要返回這裡。

解決方案：設計首頁。

設計重點：

• Home Screen 應該跟著應用程式的畫面有顯著的不同。
• Home Screen 上不要放 Title，而是在其他畫面上都要使用標題。
• 在下探 Home Page 畫面時，為主畫面後的所有畫面下標題，且使用相同的圖示。
• 在 Home Screen 或相關清單裡使用資料夾架構來組織項目時，要讓所有資料夾有一個像資料夾的圖示。

參照的其他模式：

• Lock Screen
• Grid
• Film Strip
• Thumbnail List
• Icon
• Link
• Pagination
• Location Within

（8）Lock Screen

設計問題：讓裝置進入鎖定或睡眠狀態。

解決方案：顯示裝置的主要資訊，或提供鎖定功能的情境脈絡，以及如何解鎖的操作說明。

設計重點：

• 避免使用組合鍵來解鎖。
• 顯示任何導引或幫助使用者解鎖的資訊或手勢標的物。

參照的其他模式：

• Sign On
• Annunciator Row
• Home & Idle Screens
• Notification
• Pop-Up
• On-screen Gestures

（9）Interstitial Screen

設計問題：完全載入使用者要求的畫面前，產生了延遲，無法繼續呈現之前顯示的資訊。

解決方案：將情境脈絡顯示成標題，說明正在載入什麼內容，利用一個進度列指出活動。

設計重點：

• 一直顯示應用程式或服務的 Title，在程序中包含位置。
• 要描述正在載入什麼東西，以及為什麼要載入。
• 取消程序時，應載入一個畫面上的按鈕，並標示為「取消」。當使用者選取時，將回到最近一次的畫面。

參照的其他模式：

• Wait Indicator
• Confirmation
• Pop-Up
• Advertising

（10）Advertising

設計問題：將廣告放入服務裡。

解決方案：跟內容要有清楚的區別，不會干擾到使用者，並且能夠和使用者互動。

設計重點：

• 把廣告放在較暗、有顏色的背景上，通常背景應該跟頁面同寬。
• 廣告應該要可選取，注意連結以不會干擾現有程序的方式載入。
• 廣告在堆疊的區域時，應該被堆在下方，視為內容的上一層。
• 利用尺規把廣告跟其他內容分開來，尺規一定要全尺寸，或是在比廣告大的閉合方塊裡。
• 如果廣告比螢幕寬度稍微小一點，則用不同的對齊方法：若內容是靠左對齊，則廣告靠右或置中。

參照的其他模式：

• Revealable Menu
• Fixed Menu
• Link
• Button

二、元件

1.資訊呈現的模式：

（1）Vertical List

設計問題：呈現一組文字資訊。

解決方案：把項目一個個堆疊在一起。

設計重點：

• 把文字標籤置左。
• 確保項目之間的分隔是清楚的。
• 清單應以像素為單位捲動，不要逐行或逐頁捲動。
• 當到達清單的尾端時，應取消加速度，讓清單明顯地慢下來，好指出發生的變化。
• 中止指示器或清單頂端的標示應該放在清單的第一個項目處，指出清單能不斷的捲動。

參照的其他模式：

• Infinite List
• Thumbnail List
• Select List
• Location Jump
• Search Within
• Sort & Filter
• Titles

（2）Infinite List

設計問題：需要呈現一個 Vertical List，不過資訊組非常大，且可能不是儲存在本機，因此存取時間長。

解決方案：一次存取和顯示較少量的資訊，首先顯示的資訊組會填滿視窗。

設計重點：

• 把資訊放在至少跟視窗一樣高的區域的頂端，使用者可以繼續捲動到空白區域。
• 在使用者看到隱藏的項目或載入指示器前，就應先在畫面外預載資訊，可在每個進行的項目中使用延遲載入（lazy loading）。

參照的其他模式：

• Vertical List
• Thumbnail List
• Select List
• Location Jump
• Search Within
• Sort & Filter
• Wait Indicator

（3）Thumbnail List

設計問題：需要 Vertical List，不過你需要加入其他圖像資訊來協助使用者了解資料組的項目。

解決方案：在文字左邊使用圖片、圖示或照片。

設計重點：

• 如果圖片是主識別物，就不要裁切它們。
• 沒有很多獨特的縮圖時，避免使用這個模式。
• 在圖片上使用邊框或陰影，以有著類似背景的顏色。

參照的其他模式：

• Vertical List
• Select List
• Infinite List
• Carousel
• Grid
• Titles

（4）Fisheye List

設計問題：為非觸控裝置設計和需要 Vertical List 時，為每一行顯示一點其他資訊。

解決方案：取得焦點的項目會展開，顯示其他資訊，其餘的項目則維持閉合的狀態。

設計重點：

• 盡可能提供轉換動畫，不要直接跳到開啓的狀態，且絕不要重新整理整個畫面。
• 在焦點的項目展開前，你應該讓大部份或所有配置和內容保持不變，把附加資訊加到這個資訊下方的空間裡。

參照的其他模式：

• Vertical List
• Windowshade
• Pop-Up
• Pagination
• Location Within
• Titles

（5）Carousel

設計問題：需要呈現一組資訊，它們大部份或全部由獨特的圖片所組成，以供選取。

解決方案：呈現一組可選取的圖片，只有一部份能放進可用空間裡，但可以透過其他方法捲動圖片。

設計重點：

• 顯示一張圖片的背面時，不要翻轉圖片。
• 取得焦點的項目會在畫面的正中央，並加上文字標籤。
• 在焦點項目的標籤兩側加上箭頭 / 三角形指示器，告訴使用者仍可繼續捲動。
• 不要改變圖片的比例，需要的話，加上黑邊或裁切圖片，讓它符合一致的空間。
• 如果為了產生透視效果而傾斜圖片，必須傾斜整張圖片，而不要裁掉圖片的四個角來模擬。
• 沒有取得焦點的圖片應該有位置之外的屬性，來指出它們是在清單裡的次要位置，尺寸和角度是最常使用的。

參照的其他模式：

• Pagination
• Location Jump
• Grid

（6）Grid

設計問題：需要呈現一組資訊，它們大部份或全部由獨特的圖片所組成，以供選取。

解決方案：呈現一組可選取的圖片，一部份無法出現在可用空間裡，它會模擬成連續的圖片陣列。

設計重點：

• 取得焦點的圖片會以某種形式表示，但不會改變大小。
• 不要讓單一選取任務太過容易，導致難以執行其他任務。
• 呈現的圖片在尺寸和比例上要相似，當一張圖片取得焦點時，可顯示相關資訊。
• 使用輔助的 Scroll 指示器，針對取得焦點的項目，在它的標籤兩側或任一邊加上箭頭 / 三角形指示器。

參照的其他模式：

• Simulated 3D
• Effects
• Pop-Up
• Slideshow
• Location Jump
• Pagination
• Position Within
• Carousel
• Stack of items

（7）Film Strip

設計問題：呈現一組資訊，是一系列尺寸跟畫面一樣的項目，或可分組成好幾個畫面，供查看和選取。

解決方案：當任何一頁取得焦點時，以全螢幕呈現。當捲動時，可同時看到兩個畫面的一部份和分隔物。

設計重點：

• 在單一片幅裡不能使用水平捲動。
• 確保每個垂直捲動的區域是完全獨立的，捲到一個頁面的底部，然後再往右邊移，會載入那個頁面的頂端。
• 必須在每個影幅間產生清楚的輪廓，最好顯示一道間距，就像每個影幅是一個實體，浮在另一個表面上一樣。

參照的其他模式：

• Carousel
• Fixed Menu
• Revealable Menu
• Pagination
• Location Within

（8）Slideshow

設計問題：有一組圖片或類似的圖像資訊，需要詳細顯示。

解決方案：每張圖片以全螢幕呈現，能轉換到系列裡的前一張或下一張圖片。

設計重點：

• 不適合用在一張幻燈片裡的項目做互動。

參照的其他模式：

• Pagination
• Location Within
• Film Strip
• Infinite Area

（9）Infinite Area

設計問題：有複雜或互動性的視覺資訊，但無法僅以一張圖片呈現。

解決方案：將可視範圍區分成幾個方形的圖像資料，可把較小的子集看成是「拉近」到較大圖片的各部分。

設計重點：

• 避免使用特效。
• 捲動必須是即時的，不要重新整理整個頁面。
• 在畫面上加入按鈕或其他控制項，以支援捲動。
• 還沒完全載入的圖片，應該以前一個縮放程度的模糊版本呈現。

參照的其他模式：

• Simulated 3D
• Effects
• On-screen Gestures
• Wait Indicator

（10）Select List

設計問題：必須從一個大型、排序的資料組做單選或多選。

解決方案：為任何呈現方法加上選取方法、項目方法或每個元素的核取框。

設計重點：

• 不要設計選取的確認。
• 選取器項目應該重疊在清單項目上。
• 即使項目無法被選取，選取狀態也要一直顯示。
• 如果在確認前離開了清單，你應該為使用者保留選取資訊，以防誤觸返回鈕。
• 當使用者選取了項目時，應該自動把使用者帶到下一個步驟，不用強迫他選取 Next 按鈕。

參照的其他模式：

• Vertical List
• Grid
• Confirmation
• Wait Indicator
• Titles

2.控制和確認的模式：

（1）Confirmation

設計問題：在一個程序裡抵達決策點時，使用者必須從選項裡做選擇。

解決方案：按照脈絡來顯示選項。

設計重點：

• 對話窗的 Title 一定要清楚表示要做的選擇。
• 按鈕的標籤必須不依賴敘述或標題，以存檔而言，不要呈現像是「Yes」和「No」，而是用「Save」和「Cancel」。
• 盡可能減少點擊次數，做一個選取時，應該立刻變更，並前往下一個步驟，絕對不要強迫使用者先做選擇，然後按上傳之類的按鈕。

參照的其他模式：

• Exit Guard
• Pop-Up
• Wait Indicator
• Titles

（2）Sign On

設計問題：提供一種方式，讓有權限的人才能夠操作動作。

解決方案：只在首次登入時才驗證身份。

設計重點：

• 輸入方式一定要設計成容易存取和預防輸入錯誤。
• 思考整個存取方式，並提供連結，讓使用者能尋求協助。
• 使用表單欄為輸入密碼時，必須把輸入方式限制在那些可行的。
• 顯示時最好讓它成為唯一能存取的項目，可做成整個頁面或狀態。

參照的其他模式：

• Pop-Up
• On-screen Gestures
• Titles

（3）Exit Guard

設計問題：離開一個畫面、應用程式會造成資料遺失，或中斷 session。

解決方案：顯示一個強制回應對話窗，告知使用者離開的風險，並提供選擇，用來離開或返回前面的狀態。

設計重點：

• 建立系統預防資料遺失。
• 此模式只應用於那些明顯需要保護的程序。
• 選取離開的那一刻，一定要清除鍵盤和觸控輸入的緩衝區。

參照的其他模式：

• Wait Indicator
• Pop-Up
• Titles

（4）Cancel Protection

設計問題：使用者輸入的資料因為誤選而遺失。

解決方案：設計保護使用者輸入的資料，提供方法還原歷史的輸入。

設計重點：

• 不要在沒有告知使用者的情況下，保留安全性的資訊。
• 藉由分隔和標示，區別歷史的、使用者輸入的、自動完成的資料和其他類型的結果。
• 不要把資訊儲存成純文字資料，能在遠端或儲存成備份檔時被搜尋，也不要永久保留所有資訊。

參照的其他模式：

• Clear Entry
• Autocomplete & Prediction
• Hierarchical List
• Input Areas

（5）Timeout

設計問題：針對高度安全性的系統或公開存取和可能被大量共享的系統，必須有計時器，離開 session，或一段時間後鎖住系統。

解決方案：透過計數器在畫面上的互動，顯示一個 Timeout 通知和可能終止 session 的通知。

設計重點：

• 絕對不要在 session 時間到了沒警告使用者的情況下，讓 session 永遠過期。
• 需要自動登出時，一個強制回應對話窗會出現，說明即將登出，並顯示保留這段 session 的方法。
• 若要讓畫面上的資料夠隱密，在自動登出時必須隱蔽它，你可以讓對話窗夠大好隱藏所有主要資訊，或使用一個圖案來讓畫面變暗。

參照的其他模式：

• Pop-Up
• Sign On
• Exit Guard
• Titles

3.顯示更多資訊的模式：

（1）Windowshade

設計問題：不離開目前脈絡或頁面的情況下，一個顯示元素必須能夠簡單地呈現少量或適度的額外資訊。

解決方案：選取一個項目時，會展開來，顯示出其他資訊，箭頭圖示會給提示。

設計重點：

• 盡可能利用動畫來指出開啓的動作。
• 如果一個區塊展開來，要確保整個垂直空間有四個邊。
• 指示器應放在標題旁，或整合到閉合狀態的標籤裡面。
• 把任何有範圍的區塊設計成讓使用者能清楚察覺到有界限。
• 設計一個控制項來關閉展開的區塊，往往就是開啓控制項。
• 開啓時不應該發生自動捲動。即使它跑到視窗外，區塊也會往下展開。

參照的其他模式：

• Fisheye List
• Pop-Up
• Titles

（2）Pop-Up

設計問題：你必須呈現少量或適度的額外資訊，並同時跟目前脈絡或頁面保持關聯。

解決方案：以子頁面強制出現在父頁面上方或顯示它所處的脈絡。

設計重點：

• 避免在 Pop-Up 裡捲動。
• 一次只能有一個 Pop-Up 開啟。

參照的其他模式：

• Annunciator Row
• Titles
• Exit Guard
• Link
• Advertising

（3）Hierarchical List

設計問題：你必須呈現大量的資訊，資訊依層級排序，且這個架構跟使用者有關。

解決方案：使用者可打開或收合清單只查看他們需要的部分。

設計重點：

• 應該出現指示器，表明清單可能是開啓的，利用箭頭或加減號。
• 當一組子頁面出現時，指示器要改變狀態，指出它可用來關閉或隱藏清單。
• 利用位置來指出項目間的層級關係，最上層的項目會置左，第二層會有點縮排，以此類推。

參照的其他模式：

• Fisheye List
• Vertical List
• Select List
• Titles

（4）Returned Results

設計問題：使用者明白要求資訊的子集時，必須以有意義的方式來顯示限縮後的結果。

解決方案：呈現的頁面以一個排序的清單顯示，或顯示在其它相關資訊的上方。

設計重點：

• 運用編號排列結果。
• 若資訊是限制在某範圍，必須在每個結果旁放置某種指示器。
• 顯示結果被呈現的原因，通常是用標題，如果是顯示查詢結果，查詢詞必須在畫面上。

參照的其他模式：

• Vertical List
• Thumbnail List
• Fisheye List
• Select List
• Pagination
• Location Within
• Accesskeys
• Titles

三、控制和確認

1.設計導覽系統時應提供線索回答下列的使用者問題：

（1）現在在環境中的狀態或位置？我在這個頁面的哪裡？

（2）我的目的地在哪？該往哪邊去好達成最終目標？

（3）該如何到達目的地？該如何瀏覽內容好達成最終目標？

（4）當我到達時，如何能知道？

（5）該如何規劃返回的路？有其他可以走的替代路線嗎？


2.橫向存取的模式：

（1）Tabs

設計問題：提供方法，讓人存取資訊架構裡的同一層級的少量項目，同時也清楚傳達資訊的層級架構。

解決方案：建立會把內容分成三到八組的不同標籤，來遵守檔案資料夾的隱喻。

設計重點：

• 確保所有頁籤和標籤是立刻能看得見。
• 頁籤通常只用在三到八個項目的功能。
• 頁籤只有在橫向排列時才能運作得很好。

參照的其他模式：

• Titles
• Pagination
• Location Within

（2）Peel Away

設計問題：你必須呈現少量的深層資訊，或以整體的方式提供存取相關控制項或設定。

解決方案：利用模擬 3D 效果來假裝頁面是一張紙，使用者可以把它撕掉或翻過去，查看它後面的第二頁。

設計重點：

• 打開的過程要用動畫呈現。
• 要讓使用者能輕鬆返回前面的頁面。

參照的其他模式：

• Simulated 3D Effects
• Pagination
• Pop-Up
• Film Strip
• Fixed Meun
• On-screen Gestures

（3）Simulated 3D Effects

設計問題：你必須以整體的方式，呈現少量直接相關的資訊，提供存取相關控制項或設定，或提供相同資訊的替代觀看模式。

解決方案：假裝畫面上的元件或甚至整個頁面，只呈現一個實物體的一側。

設計重點：

• 任何呈現的形狀，都必須看起來像 3D。
• 避免使用次要的互動方法來改變頁面上的元素。
• 確保所有在可移動元素上的互動不會妨礙到任何其他手勢。

參照的其他模式：

• Stack of items
• On-screen Gestures

（4）Pagination

設計問題：清楚傳達在一系列畫面裡的位置，並提供方法存取一疊頁面裡的其他頁面。

解決方案：顯示頁數和在總頁數裡的相對位置。

設計重點：

• 避免過度把捷徑映射到按鍵。
• 分頁的整體呈現可用圖像化的方式在一疊頁面的上方顯示目前的頁面，以暗指位置。
• 針對每一種控制項，你應該指呈現真的存在的頁面，把那些因為目前脈絡無法存取的頁面變暗。

參照的其他模式：

• Infinite List
• Search Within
• Peel Away
• Directional Entry
• Accesskeys
• On-Screen Gestures

（5）Location Within

設計問題：你必須清楚說明在一系列畫面裡的位置，這些畫面包含不同的觀看模式或持續顯示一組內容。

解決方案：運用指示器幫助使用者了解目前在系統裡的位置。

設計重點：

• 指示器不應該暗指動作或活動。
• 要提供方法能輕易地讓指示器顯示出來。
• 頁面間發生轉換時，要確保任何圖形指示器都會出現。

參照的其他模式：

• Slideshow
• Film Strip
• Pagination
• On-screen Gestures
• Tabs

3.下探的模式：

（1）Link

設計問題：必須提供一個功能，從頁面裡的任何位置來存取相關內容。

解決方案：藉由載入一個新頁面、跳到一段內容或載入一個彈出式對話窗來存取其他資訊。

設計重點：

• 不要使用連結來觸發功能。
• 不要在頁面上的其他元素使用底線。
• 連結的顏色要跟其它樣式的文字不同。
• 當沒有其它訊息時，有連結的圖片應該用跟文字連結一樣顏色的外框，可行時，加上圖片會發生什麼事的敘述，或立刻在圖片旁加上說明性的文字連結。

參照的其他模式：

• Pop-Up
• Vertical List
• Indicator
• Icon
• Button

（2）Button

設計問題：必須觸發一個動作、遞交頁面或促使一個狀態改變。

解決方案：觸發一個立即的動作。

設計重點：

• 考慮在按鈕裡加上圖示。
• 不要讓選取區域小於 10 公釐。
• 按鈕高度不要小於最小文字高度的 120%。
• 避免使用會被誤認為變暗和無法存取的色彩組合。
• 按鈕應大約是預設頁面文字的兩倍高，較小的按鈕可用作較不重要的項目。
• 按鈕看起來要像是稍微浮在頁面上，當一個按鈕被選取時，看起來要像是被按過。

參照的其他模式：

• Link
• Icon
• Indicator
• Mechanical Style
• Controls
• Pop-Up
• Exit Guard

（3）Indicator

設計問題：必須觸發一個動作、遞交資訊、更多資訊跟在連結的後面，或促使目前頁面上的一個狀態改變。

解決方案：指出項目是可選取的，以及點選後的結果。

設計重點：

• 避免把指示器放在文字的上方或下方。

參照的其他模式：

• Link
• Button
• Icon
• Pop-Up
• Pagination

（4）Icon

設計問題：以可掃視的方式來提供不同項目或功能的存取。

解決方案：提供其他資訊的立即存取，並透過它們的圖形表現來了解。

設計重點：

• 圖示應該暗指功能性。
• 圖示應該配上一個置中的文字標籤。
• 使用一個互動式圖示時，你必須立即顯示一個改變，和提供任何其它相關的回饋。

參照的其他模式：

• Link
• Button
• Indicator
• Home & Idle Screens
• Grid
• Carousel
• Avatar
• Thumbnail List

（5）Stack of Items

設計問題：一組可用圖示或縮圖表示的相關項目，必須以一種方式呈現，要能按指層級和提供簡單的內容呈現。

解決方案：一組堆疊的縮圖，只有最上面那張完全看得見。

設計重點：

• 堆疊在展開的時候，不要讓使用者可以選取個別的卡片。
• 堆疊收合時，絕對不要把它們收合到只看得到最上面的縮圖。
• 要關閉一組開啓的縮圖，你必須使用裝置預設的「返回」功能。
• 每個展開的項目以縮圖顯示，合起來時，堆疊會像是一疊實體的卡片，並使用陰影和其它效果來強調。

參照的其他模式：

• Hierarchical List
• Icon
• Grid
• Fixed Menu
• Revealable Menu
• Wait Indicator

（6）Annotation

設計問題：在不離開原來的呈現脈絡下，一堆資訊理的一個資料點必須能顯示其他細節或選項。

解決方案：一個圖示化元素指向選取得資訊，而且顯示一個標籤和其他選項。

設計重點：

• 揭露標籤展開時，要確定它不會擋到使用者可能會要求其他動作。
• 使用外框、陰影和轉換，讓大頭針和標籤看起來不像是頁面脈絡的一部份。

參照的其他模式：

• Link
• Button
• Tooltip
• Fixed Menu
• Revealable Menu
• Simulated 3D Effects

4.使用下探小工具的時機：

（1）Link：必須載入一個相關內容的新頁面使用。
使用一個連結來跳到目前頁面裡的其他內容。
使用一個連結來開啓一個包含相關內容的 Pop-Up 對話窗。

（2）Button：使用一個按鈕來觸發一個立即的動作。

• Standalone：使用一個獨立的按鈕來觸發一個立即的動作，無需使用者輸入。
• In-conjunction：合併使用按鈕和其他使用者輸入或控制項，來遞交這些使用者選取。
• Delayed input：使用一個延遲輸入按鈕來中斷遞交，要求其他的使用者資料，可能使用一個強制回應 Pop-Up 對話窗來存取這個資訊。

（3）Indicator：使用一個指示器來觸發連結的動作、遞交動作和狀態改變。
使用一個指示器以視覺化的方式來說明觸發時會發生的活動類型。

• Content beyond：使用一個內容指示器，以視覺化的方式來說明如果點選了連結會載入哪種類型的內容。
• Type of action：使用一種動作指示器來說明點選連結時會發生哪種活動。
• Manner of action：使用一種動作方法指示器來說明動作會被執行的方式，圖示應該要指出動作可能在程序中是往前或返回，開啓一個彈出式視窗，或執行某種其他動作。

（4）Icon：使用一個圖示來存取不同的項目或功能。

• Fixed：使用一個固定的圖示來清楚說明在圖片裡它的功能或目標。
• Status：使用一個狀態圖示來指出目前情況的改變。
• Interactive：使用一個互動圖示來直接執行一個行為，這個圖示不能立即存取任何目標應用程式貨資訊。

（5）Stack of Items：資訊可用縮圖表示時，使用一疊項目，所有群組裡的項目以一個虛擬的堆疊出現，可以變換順序或展開。

（6）Annotation：應該為取得焦點的項目顯示更多資訊時，使用註解。可提供連結或動作。


5.標籤文字使用小的字體時，必須跟背景有顏色上的反差，文字的明度和背景色的明度至少要 3：1。


6.使用顏色來呈現細節時，明度的對比是最重要的原則。


7.標籤和指示器的模式：

（1）Ordered Data

設計問題：針對情境脈絡和觀看者，以最適當和可辨識的格式來顯示資訊，尤其是文字和數字資料。

解決方案：以特定格式來顯示，讓使用者容易辨識。

設計重點：

• 不要用縮寫。

參照的其他模式：

• 無

（2）Tooltip

設計問題：需要一個小標籤、描述字或其他部分的資訊，來解釋一部份的頁面內容、一個元件或一個控制項。

解決方案：藉由滑過一個目標來觸發工具提示，或者系統決定使用者需要幫助時自動出現。

設計重點：

• Tooltip 裡的文字盡量只有一行。
• 資訊標籤應被設計成，有選取機制的地方它們就等於不存在。

參照的其他模式：

• Fixed Menu
• Revealable Menu

（3）Avatar

設計問題：針對各種聯絡人清單裡的使用，為每個人提供一個容易看到的代表。

解決方案：以圖片代表或輔助一個人的名字。

設計重點：

• 不要為每個 Avatar 都使用相同的替代圖片，圖片應該要為每個個別的使用增加意義。

參照的其他模式：

• Icon
• Indicator
• Thumbnail List
• Link
• Tooltip

（4）Wait Indicator

設計問題：必須清楚地向使用者傳達處理中、載入中、遠端網路傳送和其他延遲的狀態。

解決方案：通知使用者技術限制所造成的延遲。

設計重點：

• 顯示任何測量的單位。
• 不要讓指示器靜止不動。
• 永遠要確定任何視覺元素和單位要正確地對應到任務完成度的百分比。

參照的其他模式：

• Interstitial Screen
• Infinite Area
• Reload, Synch, Stop

（5）Reload, Synch, Stop

設計問題：必須提供下載和跟遠端裝置或伺服器同步的使用者控制項。

解決方案：來自遠端來源的資訊會提供互動行動裝置大部份的互動性。

設計重點：

• 不要接受重複的輸入。
• 絕對不要只提供一對按鈕的其中一個。
• 使用者選取任一按鈕時，動作就應該立刻開始。
• 只讓使用者存取目前狀態下可用的功能，把不用的功能停用或變暗。
• 使用者沒有途徑可取消作業的情況下，絕不要顯示下載或同步行為的狀態。

參照的其他模式：

• Notifications
• Icon
• Tooltip

8.資訊控制項模式：

（1）Zoom & Scale

設計問題：你必須提供使用者一個方法，來改變高密度資訊理的細節程度。

解決方案：設計一個縮放功能或隱喻來呈現細節程度。

設計重點：

• 不要在兩個縮放程度間使用雙態觸變。
• 要在顯示的資訊上方顯示一個比例尺。
• 沒有一個縮放程度時，要停用控制項，清楚表示它是無法存取的。
• 忽略超過目前資訊組的縮放程度的要求，不要為此顯示錯誤，使用者只要觸發另一個縮放控制來退出即可。
• 縮放程度改變的任何時候，你都必須在畫面上顯示一個縮放指示器，這個指示器必須立刻反映目前的縮放程度設定。

參照的其他模式：

• Annotation
• On-screen Gestures
• Ordered Data
• Wait Indicator
• Infinite Area

（2）Location Jump

設計問題：要捲到長的直式清單裡的項目。

解決方案：位置的指示器或索引系統要在畫面上出現，可用來跳到一個索引單元的前面。

設計重點：

• 要讓小工具夠大、能看得見。
• 必須傳達位置指示器裡的目前位置。
• 不管用任何捲動方法，都不要直接跳到新的位置，要指出清單裡的新位置是以動畫方式捲到那邊。

參照的其他模式：

• Tabs
• Vertical List
• Location Within
• Home & Idle Screens
• Accesskeys
• On-screen Gestures
• Search Within

（3）Search Within

設計問題：要在一個長清單或其它大頁面或資料陣列裡找到特定的項目。

解決方案：在頁面上上一個文字搜尋，來搜尋出現的一組資訊裡的資訊。

設計重點：

• 結果必須立刻呈現，以及盡可能不需要使用者輸入。

參照的其他模式：

• Infinite List
• Accesskeys
• Pagination
• Annotation
• Wait Indicator
• Tooltip

（4）Sort & Filter

設計問題：使用者必須能立即用一些常見的屬性來排序和篩選，以發掘最相關的結果。

解決方案：顯示一個大型結果清單裡的最相關結果。

設計重點：

• 讓篩選器看起來像導覽元素。
• 應該在整組結果上執行選取的動作。
• 清單底部應該要有相同的篩選機制，或能夠容易存取篩選機制，試著讓使用者仍看得到一些結果。

參照的其他模式：

• Search Within
• Exit Guard
• Vertical List
• Infinite List
• Select List
• Pagination

四、輸入與輸出

1.文字和字元輸入模式：

（1）Keyboards & Keypads

設計問題：文字和數字輸入必須很容易，並且在行為上能夠預測。

解決方案：考量輸入方式與文化，並符合鍵盤法則。

設計重點：

• 在虛擬鍵盤上，目前的狀態要用標籤。
• 記得要接受來自實體方向鍵和輸入鍵的輸入。

參照的其他模式：

• Input Method
• Indicator
• Dialer
• Autocomplete & Prediction
• Directional Entry
• Button
• Remote Gestures
• Exit Guard

（2）Pen Input

設計問題：必須提供一種文字輸入方式，且在任何環境裡使用。

解決方案：以觸控螢幕輸入。

設計重點：

• 輸入面板必須能捲動。

參照的其他模式：

• Keyboards & Keypads
• Autocomplete & Prediction
• Wait Indicator
• Cancel Protection

（3）Mode Switches

設計問題：在不用佔據更多畫面空間的情況下，透過模式切換，提供方法存取其他替代的控制項。

解決方案：模式切換藉由存取字元和符號的各種變體來擴充鍵盤功能。

設計重點：

• 你必須一直清楚地指出目前的模式。
• 標簽必須同時符合反射和透射模式。

參照的其他模式：

• Tabs
• Keyboards & Keypads
• Pen Input
• Dialer
• Input Method
• Indicator

（4）Input Method Indicator

設計問題：必須讓使用者知道選取中的輸入方法的目前模式，以及為特定輸入欄位選取模式的任何限制。

解決方案：在畫面上放一個指示器，明顯地指出目前的輸入模式或方法。

設計重點：

• 輸入模式一切換，所有標籤必須立刻改變。
• 不要同時使用欄位層級和螢幕層級的指示器。
• 欄位層級的標籤應該以某種方式加在欄位的邊緣。

參照的其他模式：

• Pen Input
• Mode Switches
• Annunciator Row
• Notifications
• Accesskeys
• Dialer

（5）Autocomplete & Prediction

設計問題：使用輔助技術來減輕使用者輸入文字所花的心力，以及減少錯誤。

解決方案：利用自動完成和預測輸入。

設計重點：

• 候選清單必須是循環的。

參照的其他模式：

• Infinite List
• Pen Input
• Tooltip
• Cancel Protection

2.一般的互動控制項模式：

（1）Directional Entry

設計問題：為了選取和跟畫面上的項目互動，必須有一個標準、可預測的輸入方法。

解決方案：透過硬體輸入裝置和控制它們的行為，以符合需求。

設計重點：

• 若一個項目固定在一個軸向的移動，要確定輸入移動是以選取的項目開始。

參照的其他模式：

• Focus & Cursors
• Scroll
• Wait Indicator
• Mode Switches

（2）Press-and-Hold

設計問題：必須有一個替代的、游標啓動的功能，提供一個簡單、通用的方法來應用這個模式的切換。

解決方案：以一個按住的行為，顯示一個脈絡相關的選項，或其它脈絡相關的選擇性選取。

設計重點：

• 選單一出現，計時器就要消失。
• 動作發生前需要按住的時間大約是 0.5 秒。
• 指示器要指出進度，倒數計時到觸發的時間。
• 選單必須在視覺上清楚地跟界面的其他部分區隔開來。

參照的其他模式：

• Keyboards & Keypads
• Mode Switches
• Revealable Menu
• Fixed Menu
• Annotation

（3）Focus & Cursors

設計問題：必須向使用者清楚地傳達輸入行為的位置。

解決方案：在被視為焦點的區域或項目中，透過一個游標來指出。

設計重點：

• 焦點和游標要同時使用。
• 不要只藉由指向區域或欄位來傳達焦點。
• 你應該透過元素背景或外框線的改變來表示焦點。

參照的其他模式：

• Directional Entry
• LED
• Input Method
• Indicator
• Mode Switches
• Wait Indicator

（4）Other Hardware Keys

設計問題：裝置上和介面裡的功能由一系列排在裝置周圍的按鍵所控制。

解決方案：使所有按鍵都遵守基本的行為標準。

設計重點：

• 經常用的控制相不要用多鍵組合。
• 不要創造新符號來描述按鍵的功能。
• 畫面上的行為和它們的按鍵應該要盡可能地放在一起。

參照的其他模式：

• Keyboards & Keypads
• Directional Entry
• Annunciator Row
• Pop-Up
• Mode Switches
• Exit Guard

（5）Accesskeys

設計問題：必須能單擊存取一組任意的按鍵功能。

解決方案：為每一頁或每一次檢視提供能單及存取一組任意的按鍵功能的方法。

設計重點：

• 你必須標示每個能用快捷鍵的功能。

參照的其他模式：

• Mode Switches
• Dialer

（6）Dialer

設計問題：必須提供方法存取電話的撥號器。

解決方案：遵守使用者常用的輸入操作方法，提供存取語音網路的方法。

設計重點：
無。

參照的其他模式：

• Home & Idle Screens
• Dialer
• Tooltip
• Autocomplete & Prediction
• Keyboards & Keypads

（7）On-Screen Gestures

設計問題：讓使用者直接跟畫面上的物件和控制項互動。

解決方案：讓畫面上的項目被認為是實體物件，以逼真的方式操控。

設計重點：

• 以多點手勢而言，必須在很短時間內移除所有接觸。

參照的其他模式：

• Directional Entry
• Vertical List
• Film Strip
• Infinite Area
• Pop-Up

（8）Kinesthetic Gestures

設計問題：行動裝置以可理解的方式，對使用者的行為、動作和跟裝置的關係作出回應。

解決方案：運用感應器來偵測和對接近、動作和方向做出回應。

設計重點：

• 必須有非手勢方法來移除或復原改變狀態的手勢。
• 所有改變狀態的手勢應該要能復原，通常是相反的手勢。

參照的其他模式：

• Orientation
• Location Jump
• Remote Gestures
• Tones
• Voice Notifications
• Haptic Output
• LED
• Tooltip
• Annotation 

（9）Remote Gestures

設計問題：一個手持遠端裝置以即時的方法，來跟另一個附近的裝置溝通。

解決方案：運用加速度感應器、相機和其他感應器，讓使用者透過手勢來控制或提供周遭的輸入。

設計重點：

• 使用感應時，輸入指示器應該要出現。

參照的其他模式：

• Kinesthetic Gestures
• Simulated 3D Effects
• Directional Entry
• On-screen Gestures
• Focus & Cursors
• Tooltip
• Annotation

3.輸入和選取模式：

（1）Input Areas

設計問題：必須提供使用者一個方法，不受限制地輸入文字和其他字元為主的資訊。

解決方案：提供單行文字和多行文字輸入欄位。

設計重點：

• 你可以將標籤放在標單欄位裡，作為提示字。
• 只要系統知道內容時，要記得先填入內容，讓使用者不用輸入。
• 必須利用外框線、背景或其它效果清楚地描繪出一個欄位的焦點。
• 當欄位是可編輯時，必須使用游標，指出狀態改變和文字插入點的位置。
• 盡可能在欄位層級驗證表單，在使用者輸入時或欄位離開焦點時，可在欄位旁邊、靠近提示字的地方指出驗證成功。

參照的其他模式：

• Dialer
• Directional Entry
• Clear Entry
• Focus & Cursors
• Input Method
• Indicator
• Autocomplete & Prediction
• Cancel Protection

（2）Form Selections

設計問題：必須提供使用者一個方法，能輕易地從預載的選項清單裡做單一或多個選取。

解決方案：提供能多選的表單選項。

設計重點：

• 必須利用外框線、背景或其它效果清楚地描繪出一個欄位的焦點。
• 盡可能在欄位層級驗證表單，在使用者輸入時或欄位離開焦點時，可在欄位旁邊、靠近提示字的地方指出驗證成功。

參照的其他模式：

• Button
• Select List
• Vertical List
• Focus & Cursors

（3）Mechanical Style Controls

設計問題：必須提供使用者一個簡易的方法來修改一個設定程度或數值。

解決方案：單選的 Form Selections。

設計重點：

• 盡可能地對輸入使用非視覺化的回應。

參照的其他模式：

• Form Selections
• Vertical List
• Zoom & Scale
• Search Within

（4）Clear Entry

設計問題：使用者必須能夠不費力、安全地移除欄位裡的內容。

解決方案：清除或重設整個文字輸入欄位。

設計重點：

• 當你可能重複使用到一個欄位，或沒有其他方式能捨棄資訊時，你需要加上一個方法來清除輸入。

參照的其他模式：

• Input Areas
• Cancel Protection

4.音訊和震動模式：

（1）Tones

設計問題：必須使用非語言式的音訊，來提供對情況或事件的回饋，或提醒使用者注意。

解決方案：以音效用來提醒，以及作為強調輸入成功的管道。

設計重點：

• 音效必須至少跟一個視覺或觸覺元件相符。
• 顯示通知在使用者沒有輸入的情況下一定不能消失。

參照的其他模式：

• Haptic Output
• Notifications
• Voice Readback
• Voice Input
• LED

（2）Voice Input

設計問題：讓使用者在不用操作裝置的情況下，來控制行動裝置的或提供文字輸入。

解決方案：讓語音作為一種控制項和輸入機制。

設計重點：

• 要在畫面提供提示來觸發語音命令或語音輸入文字模式。

參照的其他模式：

• Accesskeys
• Voice Readback
• Directional Entry
• Input Method
• Indicator
• Tones
• Mode Switches

（3）Voice Readback

設計問題：讓使用者不用閱讀螢幕就能使用內容。

解決方案：讓裝置朗讀顯示在螢幕上的文字。

設計重點：

• 當使用者接上耳機時，播放應該預設到裝置，並使用上次設定的來電音量。
• 播放前為了通知使用者即將開始，以及調整好音量，應事先播放一個小音效。

參照的其他模式：

• Voice Notifications
• Directional Entry
• Annotation
• Pop-Up
• Voice Input

（4）Voice Notifications

設計問題：通知與使用者相關的狀態，不需要他們閱讀裝置的畫面。

解決方案：讀出一則通知的內容，讓使用者能使用資訊。

設計重點：

• 播放前為了通知使用者即將開始，以及調整好音量，應事先播放一個小音效。

參照的其他模式：

• Notifications
• LED
• Annotation

（5）Haptic Output

設計問題：必須使用震動式提醒和觸覺回饋，來協助確保使用者能察覺，和強調使用者介面機制的本質。

解決方案：以震動做虛擬觸覺輸出。

設計重點：

• 不要一次發出數個震動。
• 確保觸覺提醒會重複送出震動。

參照的其他模式：

• Pen Input
• Tones
• Notifications
• LED
• Wait Indicator
• Voice Notifications

5.螢幕、燈光和感應器模式：

（1）LED

設計問題：不需要使用主要顯示器的狀態通知。

解決方案：利用 LED 指出行動裝置上的電力狀態、連接性和提醒。

設計重點：

• 謹慎控制 LED 的位置、顏色、速度。

參照的其他模式：

• Notifications
• Annunciator Row
• Tones
• Haptic Output
• Focus & Cursors
• Display Brightness
• Controls

（2）Display Brightness Controls

設計問題：顯示器的亮度最適化。

解決方案：手動控制來調整目前營目的亮度設定。

設計重點：

• 要從螢幕立即存取亮度設定。
• 當使用者調整亮度時，要立即模擬調整結果。

參照的其他模式：

• LED
• Pop-Up
• Mechanical Style
• Controls
• Directional Entry
• Other Hardware
• Controls

（3）Orientation

設計問題：裝置必須能做到方向的改變，以使用者最舒服的方式來呈現內容。

解決方案：自動感測或回應一個實體的模式切換，來改變顯示器的方向。

設計重點：

• 絕對不要讓讓畫面留白。
• 盡可能以動畫表現旋轉。
• 總是要重新編排畫面上的項目，以利用新的方向。
• 旋轉的角度必須要大，一旦切換一發生，要使用新的基準線來測量。

參照的其他模式：

• Kinesthetic
• Gestures
• Simulated 3D
• Effects
• Directional Entry

（4）Location

設計問題：必須簡單、正確地傳達為制服務的可及性和手持裝置真正的位置。

解決方案：以外顯的位置應用程式，用來啓動通知，或改變裝置的行為

設計重點：

• 絕對不要顯示或暗指做不到的精確度。

參照的其他模式：

• Orientation
• Annunciator Row
• Icon
• Pop-Up