昨天我們了解到 Iconography 影像學中各種圖示設計的注意事項，圖標由不同的設計元素構成，透過網格我們可以設計出具有統一性的圖示，配合筆畫粗細、圖示顏色、排版疏密、主題性，讓設計更符合品牌，透過圖示動畫可以展現品牌風格，也可以吸引注目性並提升樂趣。
今天我們進入到 Material Design 中 Shape 形狀 的章節，由於內容涵蓋的範圍較廣，我們會分成兩天來介紹 Shape 形狀，今天會先了解關於形狀、形狀層次、形狀即表達，讓我們繼續看下去吧。
About shape 關於形狀
Shape and hierarchy 形狀層次
Shape as expression 形狀表達
Shape and motion 形狀動作
Applying shape to UI 將形狀應用於 UI
元件可以顯示為不同的形狀，吸引注意力、識別組件、交流狀態並表達品牌。元件邊緣預設為矩形帶有 4dp 圓角，可以調整稜角曲線及邊角曲線。
獨特的形狀容易引人注目，所以它們可以將注意力轉移到不同地方。形狀提供快速識別不同元件的方式。當同一組元件改變狀態，可以使用不同的形狀來傳達元件的狀態變化，使用形狀表示狀態變化時，請使用一致的形狀表現同樣的狀態。
要表達品牌請用一致的形狀搭配其他定義項目 ( 例如: 顏色 ) 策略的應用。通過對形狀進行細微調整，有助於提升品牌整體印象。
元件邊緣與背景具有足夠的對比度時，形狀便清晰可見。加入顏色、不透明度和陰影都可以加強形狀的外觀。形狀可以用來反應特定的目的或意義。當形狀不明顯時內文或圖示可以幫增強形狀內含的意義。 ( 例如: 地圖上有一個水滴形狀表示所在位置。 )
形狀可以幫助用戶識別組件也可以影響可用性。請勿使用干擾用戶輸入形狀或是按鈕的觸碰範圍太小的組件。請勿在不同元件群組使用相似的形狀設計。
組件可以改變形狀的程度取決於：
形狀設置工具 可用於各種單獨的組件生成不同的形狀，包含每個組件推薦的數值範圍。組件跟據它們的相對大小分為三類。連接到同類型的元件零件將繼承該類別的形狀數值，或是針對零件再進行修改形狀類別數值。
形狀可以將注意力轉移到重要元素上，也可以幫助用戶了解元件之間的互動關係。
具有獨特形狀的元件會相對一般形狀的元件搶眼，它們的形狀具有強調的功能，有助於吸引用戶的注意力。相似的形狀可以表現元件關係是對等的。例如: 在同一個畫面中具有相同尺寸或是相同邊角的元件。
可以通過使用類似於箭頭的形狀來指示彼此相關性，通過箭頭帶來的形狀示意指向到其他畫面。(例如: 菜單的箭頭可以指向相關的菜色圖片。)
當畫面需要被區分時，形狀可以突出顯示。例如: 當一個獨特的形狀出現在畫面中並使用顏色對比加強強調，用戶就可以輕易發覺差異。
形狀可以傳達元素的狀態或幫助表達品牌。
形狀可以傳達有關元素的許多信息，包括元素的當前狀態、用戶互動的結果或應用程式中的其他更改。在相同狀態和互動行為中使用相同的形狀，以便每次遇到特定形狀時都表示相同的事物。
為了將涵義附加到特定形狀，可以將 "形狀更改" 與 "用戶啟動的動作" 或 "狀態更改" 一起表示。在選定形狀時對元件進行變形時，或通過圖示或引入形狀以增強形狀的含意。( 例如: 拖動選項後從原本的矩形變化為圓角矩形 )
如果形狀不是互動式的，請避免尺寸設計超過按鈕尺寸。(例如: 卡片上的小三角形形狀不應大到足以使它被誤認為是點擊目標。)
請避免使用暗示互動、不正確的狀態表達、會干擾可用性的形狀來表示品牌，混合使用不同的形狀樣式，可能會讓特定形狀與品牌關聯性變差。
過度使用類似商標的形狀會使該形狀變得普通，無法引起注意，可以從品牌標誌中拆解出基本形狀，在整個產品中使用類似品牌標誌的基本形狀來傳達品牌。使用形狀表達品牌時，請勿降低組件的可用性。形狀的大小會干擾列表的使用性，也不要使用無法反應品牌的形狀。
今天我們了解到 Shape 形狀，可以設定各式形狀來傳達含意及狀態變化，同類型的形狀可以識別組件和識別不同的元件區塊，獨特的形狀可以跟一般組件形狀產生出差異，也可以藉由形狀來指向其他元件，形狀可以傳達品牌、互動狀態、元件群組，搭配動畫效果能更吸引用戶的注意力。
明天讓我們繼續完成 Shape 形狀的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術