昨天我們了解到 Shape 形狀，可以設定個式形狀來傳達含意及狀態變化，同類型的形狀可以識別組件和識別不同的元件區塊，獨特的形狀可以跟一般組件形狀產生出差異，也可以藉由形狀來指向其他元素，形狀可以傳達品牌，互動狀態、元件群組更能引起注意力。
今天讓我們繼續完成 Shape 形狀章節的形狀動作及將形狀應用於 UI，讓我們繼續看下去吧。
About shape 關於形狀
Shape and hierarchy 形狀層次
Shape as expression 形狀表達
Shape and motion 形狀動作
Applying shape to UI 將形狀應用於 UI
在內容更改或與用戶互動時改變形狀。
形狀可以根據狀態或內容的變化或用戶互動的結果而變形。(例如: 將手持設備從縱向旋轉到橫向時，畫面可以通過更改大小來回應轉換，畫面的改變這可能會使形狀變形。或是依照選擇將項目增加到固定的選單中。)
變形可能導致的變化：
元件改變大小時，形狀可以保持尺寸及留在原位，形狀可以拉長或收縮，形狀也可以在兩個不同的形狀之間產生變形，變形應保留不同形狀的比例，請避免在變形的過程中讓形狀的比例變形。
形狀可以轉換為其他任何形狀，調整特殊形狀的大小時，請保持長寬比例，以避免形狀比例變形。元件改變形狀時內含的所有內容物仍然保持顯示，元件內容依照尺寸改變去調整變化，避免元件在改變形狀的過程被裁切或遺失內容。
相似形狀之間的轉換會產生更平順的轉場。不同形狀之間的轉換可能會在轉換過程中顯示笨拙的轉場。
圓形按鈕可以變成擴展的矩形視窗，最後再轉換回圓形。可以添加提示（ 例如: 折疊或展開圖示 ）在圓形按鈕上提示如何轉換。矩形提供了更多可以滾動的視窗內容，並可以與其他矩形區塊元件融合，讓內容受到注目。不要在轉換後擴展的視窗區塊設計形狀，讓內容能最好的顯示出來。
形狀系統使您能夠有系統的在各種元件上運用獨特的形狀。
根據元件大小區分形狀類別並提供更改形狀類別的數值，形狀類別包括：
可以自行定義元件形狀也可以使用獨特形狀， ★ 表示某些邊角無法自行定義。
形狀類別使用屬性來定義元件邊角。可以定義以下屬性：
外形尺寸可以分為固定數值或百分比，當形狀邊緣為圓角 2dp 時使用固定數值，則無論元件的寬高如何改變，園角尺寸都保持 2dp。
小型的元件可以用百分比來設定邊角形狀大小，隨著元件寬度及高度改變邊角形狀也會依照比例縮放大小。( 請勿在會延展的視窗畫面邊角使用百分比設定尺寸，避免畫面內容超出視窗邊緣。)
元件邊角形狀可以分為對稱或不對稱的設定方式，對稱的邊角形狀是將所有邊角設定相同形狀和相同數值，而非對稱的邊角形狀可以在每個邊角設定不同的形狀和數值，設定邊角從左上角開始，順時針依序設定形狀和尺寸數值。當鏡射 RTL 排版設計時，如果元件沿著 UI 邊緣放置時由於不能自訂螢幕邊緣形狀，所以無法定義螢幕四邊的元件邊角，在螢幕邊角設定形狀(例如: 圓角)會產生縫隙顯示後方元件內容，因此需要修改形狀定義。
在不同類別的元件使用邊角形狀和尺寸，對於形狀修改時會統一修改所有元件的邊角形狀，而帶有覆蓋的元件除外。當元素需要的形狀與元件定義的形狀不同時可以修改形狀和尺寸，
將形狀應用於元件時，在產品介面中使用形狀時設定自然或幾何的形狀樣式與品牌呼應，可以連結您的品牌和 UI 的層次結構。也可以開發出一套與品牌呼應的相關形狀運用於您的產品，有助於在整個產品中統一品牌的表達。
具有獨特形狀的元件容易脫穎而出，吸引用戶注意螢幕中特殊的形狀區域達成強調的效果。( 例如: 操作按鈕可以使用獨特形狀吸引注意力。)
在品牌與層次結構間的各個組件中使用一組相似的形狀，建立統一的品牌結構基礎。若是需要突顯元件也可以使用與品牌標誌相似形狀，然而過度使用品牌形狀會導致形狀不具有獨特性而無法突顯目標，過多獨特形狀會使各元件之間缺乏視覺凝聚力。
在兩個元件轉換形狀時需要考量轉換是否可以提高元件的識別性，在展開為全螢幕的元件中，在轉換成全螢幕時不要使用幾何圖形，避免後方物件因為元件周圍有縫隙而出現在畫面中。元件可以藉由形狀改變來表示狀態更改，元件使用獨特形狀來表現與其他狀態不同。例如: 商品區塊的選定狀態可以使用獨特的形狀與未選擇的區塊區別。
對於系統已經定義好的形狀進行變更可能會影響元件形狀的使用，例如: 增加元件在使用時的形狀大小可能會導致內容超出元件形狀。如果尺寸定義為百分比時，因為內容文字增加而新增行數，會導致元件高度增加而影響定義為百分比的形狀尺寸。更改形狀樣式可能會影響組件中的內容，為了避免意外的結果，請考慮使用的形狀和邊角尺寸以及排版和內容。
Material 提供形狀類別用於元件上的設定值。每個元件都包含形狀類別與尺寸數值，藉由左上角；右上角；右下角；左下角的順序應用於元件上，在元件設定尺寸數值後可以運用於元件上的所有邊角，邊角的形狀最大為元件絕對高度的 50%，在邊角形狀可能會裁切到內容時則不建議使用邊角形狀。
下列元件無法修改定義形狀，形狀可能會干擾元件的識別性或可讀性。例如: 形狀也可能暗示不支持的動作或是具有方向行的暗示，但實際上無法執行此操作。
今天我們了解到當元件 Shape 形狀改變時，可以增加動畫讓改變動態更順暢，也更能突顯元件。在品牌與層次結構間使用形狀能建立統一的品牌結構基礎，若是需要突顯的元件也可以使用品牌標誌的相似形狀運用於組件，過度使用品牌形狀會導致形狀不具有獨特性而無法突顯目標，過多獨特形狀會使各元件之間缺乏視覺凝聚力。
明天讓我們繼續完成 Motion 動作 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術