昨天我們了解到 Motion 動作中，轉場動畫可以藉由控制速度及緩和速度帶給用戶順暢的畫面轉場，搭配持續時間的運用可以讓轉場效果如同自然物體的動態。藉由編排動畫的順序安排畫面中的物件，元件改變形狀之後依照層次結構顯示，最後搭配符合品牌風格的轉場效果動畫。除了可以提高注目性也可以幫助用戶順暢的完成任務。

今天我們進入到 Material Design 中 Interaction 相互作用的章節，由於內容涵蓋的範圍較廣，我們會分成兩天來介紹，今天會先了解動作和運動系統，讓我們繼續看下去吧。

Interaction 相互作用

Gestures 手勢
Selection 選擇
States 狀態

用戶通過手勢觸摸與螢幕元件進行互動。

Gestures 手勢

用戶通過手勢觸摸快速且直覺的執行任務。使用手勢觸摸提供了另一種執行任務的方式。在有效的範圍都可以依照手勢執行任務。允許手勢觸摸直接更改 UI 元件。(例如: 縮放地圖)

本圖片截取自 Material Design。

Material 即時響應手勢表達用戶對觸摸互動的直接控制。用戶操作手勢的速度與螢幕上元件移動的速度相同。在執行手勢動作時不要完全依照手勢在畫面中產生歪曲的移動效果，而是將移動動畫順暢執行。

元件的外觀和行為應傳達出是否可以對它們執行手勢，並用視覺提示可以執行手勢，例如: 在元件邊緣顯示圖示箭頭清楚的指示可以拉開區域。在元件上預先設計與手勢互動有關的狀態指示，例如: 用戶使用手勢在拖移元件的過程中顯示刪除圖示。

當用戶執行手勢時，元件動態指示手勢執行的元件移動方式 ( 例如: 手勢下移時把原本全螢幕的圖片關閉 )。執行動作的手勢應使用能傳達手勢動作的圖示。( 例如: 滑動物件後出現圖示，當手勢移動超過區域元素一半寬度時，在手勢完成後執行操作。)

手勢類型可幫助用戶在區塊之間導覽，執行操作和操縱元件內容。手勢類型包括：導覽手勢、動作手勢、變換手勢。

導覽手勢可幫助用戶輕鬆瀏覽產品。導覽手勢提供了更多變換顯式的方式，例如: 按鈕和導覽組件。導航手勢的類型包括：點按、滾動和平移、拖動、滑動、收縮。在手勢設計上請避免同一個手勢產生兩種不同結果的情況。

• 點按: 用戶可以通過觸摸元件前往目的地。
• 滾動和平移: 用戶可以垂直、水平或在全螢幕滑動執行連續移動內容。
• 拖動: 用戶可以拖動拉開摺疊區域。
• 滑動: 用戶可以在同主題之間水平移動畫面，例如: 項目頁籤。
• 收縮: 用戶可以在畫面內容縮放區塊導覽。

動作手勢是藉由手勢執行動作或提供完成動作的快速方法。動作手勢的類型包括：

• 點按或長按: 點按手勢和長按手勢分別允許用戶與元件進行互動並執行其他功能。
• 滑動: 用戶可以滑動元件在超過元素一半寬度時執行預設操作。

用戶可以使用手勢來改變元件的大小、位置和旋轉。變換手勢的類型包括：

• 輕按兩下: 輕按或兩次輕按，即可放大或縮小內容。
• 複合手勢: 用戶可以在各種手勢之間轉換使用。
• 拿起並移動: 長按並允許用戶重新排列內容區塊。

Selection 選擇

用戶選擇操作特定項目後將操作應用於選定的項目。

觸控裝置
在觸摸設備上使用以下手勢選擇項目：

• 長按或兩指觸摸
• 選擇捷徑方式（如果可用），例如點擊頭像

桌上型裝置
在桌上型裝置上，除非選擇項目是 UI 中的主要活動，否則帶有復選框的項目不應預設（或永久）顯示複選框，應僅顯示複選框（或類似指示符號）：

• 懸停在元件上方時顯示目前項目的單個複選框
• 選擇第一個項目後，顯示組件中其餘項目的複選框

本圖片截取自 Material Design。

要選擇一個項目並進入選擇模式，請長按該項目或使用捷徑方式，例如: 點擊該項目選相框，要選擇其他項目請點選每個項目。

要取消選擇，點按選中的項目即可取消選擇為止，或者點按工具欄上的取消選擇。

要同時選擇多個項目，請在項目之間使用長按並拖動手勢即可選擇。如果應用已經預設該手勢來選取和移動項目則會執行預設手勢。

要進行選擇時，請將滑鼠懸停在項目上並顯示選取框。然後可以單擊該選取框進行複選。

要指示選擇，請在選中的項目或選相框上顯示打勾圖示和半透明色塊覆蓋。選中的項目應與未選擇的項目區分。

States 狀態

狀態是用於傳達組件或互動式元件狀態的視覺表現，相同狀態在視覺上都應該相似並且不能徹底改變組件，必須具有清楚的功能與其他狀態和周圍的排版區分開。當同時出現多個狀態（例如: 選取和聚焦）時，應同時顯示兩個狀態圖示。

狀態類型有:

• Enabled 啟用狀態傳達互動式組件或元件。
• Disabled 禁止使用狀態表示無法互動的組件或元件。
• Hover 當用戶將鼠標置於互動式元件上方停留時，元件產生的視覺回饋。
• Focused 使用鍵盤或語音輸入時，正在執行的元件處於聚焦狀態突顯元件。
• Selected 選取狀態傳達用戶的選擇。
• Activated 觸發狀態傳達顯示的目標，無論是由用戶觸發還是預設情況下。
• Pressed 按下狀態傳達用戶點擊。
• Dragged 用戶按下並移動元件時即可拖動元件。
• On/Off 開關狀態表示兩個選項之間的切換。
• Error 錯誤狀態表示用戶或系統錯誤。

本圖片截取自 Material Design。

覆蓋是一種使用半透明色塊來表現狀態的系統方法，在元件上增加半透明色塊覆蓋，可以應用於整個元件或選取元件。覆蓋層使用的顏色應與元件上的內容或圖示搭配，如果內容或圖示在狀態過程有改變顏色，則半透明色塊要依據最終元素色彩搭配調整，在顏色的搭配上要注意元件整體可見性及顏色對比度，針對不同組件調整。

單一元件上一次只顯示一個狀態效果。例如: 元件被聚焦然後用戶鼠標停留在元件上方，則顯示鼠標停留的狀態直到用戶移開鼠標；這時如果該元件仍然處於聚焦狀態則元件此時可以顯示聚焦狀態。

當組件或元件不是可以使用或是無法使用時就會顯示禁止狀態，禁止狀態可以通過顏色變化和降低高度陰影表示無法使用，在整體元件設計為 38% 透明度，降低元件在畫面中的存在感。禁用元件可以顯示鼠標停留但是不會有任何狀態更改。在組件中能同時存在多個禁用元件。

可以繼承用戶禁止狀態的元件： 切換按鈕、選取元件、文字段落、圖示、網格和列表項目、區塊、芯片標籤和按鈕。

無法繼承用戶禁止狀態的元件：浮動操作按鈕（FAB）、按鈕和側拉式選單、對話框、選單、工具列和警報、導覽組件（例如應用列、選單、底部導覽列和 steppers 步驟條）。如果 FAB 無法使用應隱藏其元件。

停留狀態由用戶使用鼠標在互動式元件上停留而觸發，可以應用於所有互動式組件，使用低強調性的淡入淡出動畫效果避免強調停留狀態以免干擾內容。使用覆蓋來表現用戶停留狀態，可以應用於整個組件或單一元件甚至是元件內的元素。停留狀態可以與聚焦、啟用、選取或按下狀態結合使用，在整個畫面中只能有一個元件表現停留狀態。

針對畫面上每個不同組件調整覆蓋色塊的透明度數值，保持元件整體可見性及顏色對比度及用戶可以選取的狀態，應調整用戶停留狀態色塊透明度數值，避免分散注意力。(在淺色區塊疊加色塊透明度為 4%，在深色區塊疊加色塊透明度為 8%，在圖片上疊加色塊透明度為 12%。)

可以繼承用戶停留狀態的元件：按鈕、浮動操作按鈕（FAB）、切換按鈕、選取元件、網格、列表、列表項目、區塊、芯片標籤、文字段落和圖示。

無法繼承用戶停留狀態的元件：應用列表、標籤、底部導覽列、表格、對話框、警報、選單和步驟條。

聚焦狀態是當用戶使用鍵盤或語音輸入，依照畫面構圖的讀取順序，直到用戶完成輸入時正在執行的元件處於聚焦狀態突顯元件。聚焦狀態適用於所有互動式元件，使用淡入淡出動畫顯示和消失，聚焦狀態是所有狀態中最顯眼的狀態。當使用覆蓋來表現聚焦狀態時，覆蓋可以應用於整個組件或單一元件甚至是元件內的元素。

保持元件整體可見性及顏色對比度與用戶可以選取的狀態，應調整聚焦狀態的色塊透明度數值達成聚焦功能。( 在淺色區塊疊加色塊透明度為 12%，在深色區塊疊加色塊透明度為 24%，在圖片上疊加色塊透明度為 36%。)

可以繼承聚焦狀態的元件：按鈕、浮動操作按鈕（FAB）、選取元件、網格、列表、列表項目、區塊、芯片標籤、文字段落和圖示。

用戶可用點擊、鍵盤、鼠標和語音來選擇選項，被選取的項目呈現選取狀態提供識別，但不能分散用戶的注意力。可以運用覆蓋來表示選取狀態於組件或組件內的元件，使用淡入淡出動畫顯示和消失，選取狀態依照用戶選取的順序顯示。選取狀態可以和用戶鼠標停留、聚焦、按下和拖動狀態結合起來表現。整個畫面可能同時存在多個選取狀態。

可以繼承選取狀態的元件：圖片列表、列表項目、區塊、芯片標籤、數據表格、選單項目、步驟條。

無法繼承選取狀態的元件：應用列表、背景，底部導航、底部導覽列、表格、對話框、按鈕、分隔線、可擴展區塊、警報、消息欄、選項區塊、文字段落和工具提示。

保持元件整體可見性及顏色對比度及用戶可以選取的狀態，應調整選取狀態色塊透明度數值完成重點突出。(在淺色區塊疊加色塊透明度為 8%，在深色區塊疊加色塊透明度為 16%，在圖片上疊加色塊透明度為 24%。)

觸發狀態表示用戶正在觀看介面中項目，預設顯示主題或是由用戶選擇 ( 例如: 點擊、鍵盤、鼠標和語音 )，觸發狀態應被強化顯示。當運用覆蓋色塊來呈現觸發狀態，可以藉由色塊更改或是使用元件內的元素與線段來呈現，觸發狀態使用淡入淡出動畫顯示和消失，觸發狀態依照用戶選取的順序顯示。觸發狀態與選取狀態的差異在觸發狀態傳達了突出顯示的目的。觸發狀態可以與用戶鼠標停留、焦點狀態和結合使用，在一組選項中一次只能出現一個觸發狀態。

可以繼承觸發狀態的元件：導覽列表項目、選項區塊、底部導覽列、步驟條項目、芯片標籤、切換按鈕。

無法繼承觸發狀態的元件：按鈕、浮動操作按鈕（FAB）、控制項目、拉霸、應用列、底部導覽列、側拉是選單、對話框或警報。

保持元件整體可見性及顏色對比度及用戶可以選取的狀態，應調整觸發狀態色塊透明度數值，觸發狀態應設定較高的透明度，因為觸發狀態不一定是用戶選取的，也有可能是預設觸發。( 在淺色區塊疊加色塊透明度為 12%，在深色區塊疊加色塊透明度為 24%，在圖片上疊加色塊透明度為 36%。)

按下狀態是用戶通過鼠標、鍵盤或語音輸入啟動的輸入或點擊。此狀態適用於所有互動式組件。按下狀態會讓畫面結構更改需要高度重視。按下狀態使用圓形區塊表現執行狀態，使用圓形點擊動畫顯示和消失。可以應用於整個組件或單一元件甚至是元件內的元素。按下狀態可以與用戶鼠標停留、聚焦、觸發和選取狀態和結合使用，在畫面中只能出現一個按下狀態。

可以繼承按下狀態的元件：按鈕、浮動操作按鈕（FAB）、切換按鈕、選取控制元件、網格列表項目、列表項目、區塊、芯片標籤、文字段落和圖示。

無法繼承按下狀態的元件：應用列表、標籤、底部導覽列、工作表、對話框、選單、步驟條或警報。

保持元件整體可見性，應調整按下狀態色塊透明度數值，按下狀態應設定較高的透明度，因為按下狀態會觸發整個畫面的更改。( 在淺色區塊疊加色塊透明度為 16%，在深色區塊疊加色塊透明度為 32%，在圖片上疊加色塊透明度為 48%。)

當用戶按住並移動元素或組件時，會產生拖動狀態，拖動狀態不需要設置太過顯眼的動態，避免分散用戶注意。使用覆蓋色塊來表現拖動狀態，拖動狀態使用淡入淡出動畫顯示和消失，依照用戶拖動即時給予移動回饋，覆蓋色塊可以應用於整個拖動狀態的組件或元件中。

可以繼承拖動狀態的元件：網格列表項目、列表項目、區塊、芯片標籤。

無法繼承拖動狀態的元件：應用列表、按鈕、底部導覽列、對話框、選單、步驟條或警報。

保持元件整體可見性，應調整拖動狀態色塊透明度數值，拖動狀態應設定較低的透明度，避免分散用戶對內容的注意力。( 在淺色區塊疊加色塊透明度為 8%，在深色區塊疊加色塊透明度為 16%，在圖片上疊加色塊透明度為 32%。)

今天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動，透過不同手勢類型可以執行不同的任務指令，並依照應用程式預設好的狀態與產品進行互動，互動式組件同時也呼應了使用者的手勢給予狀態回饋，元件狀態根據重要性來強調視覺外觀或動畫效果，強調需要受到注目的元件狀態，讓用戶能順暢的完成目標動作。

終於結束落落長的一篇，明天讓我們繼續完成 Communication 傳達的章節、每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~