iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 14

UI / UX 設計白皮書 / Material Design 導讀_Day14 Shape 形狀

昨天我們了解到 Shape 形狀,可以設定個式形狀來傳達含意及狀態變化,同類型的形狀可以識別組件和識別不同的元件區塊,獨特的形狀可以跟一般組件形狀產生出差異,也可以藉由形狀來指向其他元素,形狀可以傳達品牌,互動狀態、元件群組更能引起注意力。

今天讓我們繼續完成 Shape 形狀章節的形狀動作及將形狀應用於 UI,讓我們繼續看下去吧。


Shape 形狀

About shape 關於形狀
Shape and hierarchy 形狀層次
Shape as expression 形狀表達
Shape and motion 形狀動作
Applying shape to UI 將形狀應用於 UI

在內容更改或與用戶互動時改變形狀。

Shape and motion 形狀和動作

形狀可以根據狀態或內容的變化或用戶互動的結果而變形。(例如: 將手持設備從縱向旋轉到橫向時,畫面可以通過更改大小來回應轉換,畫面的改變這可能會使形狀變形。或是依照選擇將項目增加到固定的選單中。)

變形可能導致的變化:

  • 元件突出
  • 人體工程學
  • 特定形狀的含意
  • 如何表達品牌的視覺語言
  • 元件之間的關係

本圖片截取自 Material Design。

元件改變大小時,形狀可以保持尺寸及留在原位,形狀可以拉長或收縮,形狀也可以在兩個不同的形狀之間產生變形,變形應保留不同形狀的比例,請避免在變形的過程中讓形狀的比例變形。

形狀可以轉換為其他任何形狀,調整特殊形狀的大小時,請保持長寬比例,以避免形狀比例變形。元件改變形狀時內含的所有內容物仍然保持顯示,元件內容依照尺寸改變去調整變化,避免元件在改變形狀的過程被裁切或遺失內容。

相似形狀之間的轉換會產生更平順的轉場。不同形狀之間的轉換可能會在轉換過程中顯示笨拙的轉場。

圓形按鈕可以變成擴展的矩形視窗,最後再轉換回圓形。可以添加提示( 例如: 折疊或展開圖示 )在圓形按鈕上提示如何轉換。矩形提供了更多可以滾動的視窗內容,並可以與其他矩形區塊元件融合,讓內容受到注目。不要在轉換後擴展的視窗區塊設計形狀,讓內容能最好的顯示出來。

Applying shape to UI 將形狀應用於 UI

形狀系統使您能夠有系統的在各種元件上運用獨特的形狀。

根據元件大小區分形狀類別並提供更改形狀類別的數值,形狀類別包括:

  • 小零件: 按鈕、芯片標籤、展開底頁(折疊)★ 、可擴展畫面的按鈕、浮動操作按鈕、文字輸入區、文字框、Snackbar、工具提示。
  • 中等元件: 區塊、對話、清單圖片項目清、選單。
  • 大型元件: 背景★ 、數據表格、展開底頁(展開/全螢幕)★ 、底部浮動區塊(折疊)、底部浮動頁面(展開/全螢幕)★ 、導覽列項目(底部-折疊)、導覽列項目(底部-展開/全螢幕)★ 、導覽列項目(側邊)、側邊顯示區塊、標準底部頁面(折疊)、標準底部頁面(展開/全螢幕)★。

可以自行定義元件形狀也可以使用獨特形狀, ★ 表示某些邊角無法自行定義。

形狀類別使用屬性來定義元件邊角。可以定義以下屬性:

  • 形狀家族: 圓角、切角 (提醒: 底部元件只能在左上角和右上角改變形狀。)
  • 外形尺寸: 可以使用固定數值或百分比來定義形狀大小。
  • 對稱

外形尺寸可以分為固定數值或百分比,當形狀邊緣為圓角 2dp 時使用固定數值,則無論元件的寬高如何改變,園角尺寸都保持 2dp。

小型的元件可以用百分比來設定邊角形狀大小,隨著元件寬度及高度改變邊角形狀也會依照比例縮放大小。( 請勿在會延展的視窗畫面邊角使用百分比設定尺寸,避免畫面內容超出視窗邊緣。)

本圖片截取自 Material Design。

元件邊角形狀可以分為對稱或不對稱的設定方式,對稱的邊角形狀是將所有邊角設定相同形狀和相同數值,而非對稱的邊角形狀可以在每個邊角設定不同的形狀和數值,設定邊角從左上角開始,順時針依序設定形狀和尺寸數值。當鏡射 RTL 排版設計時,如果元件沿著 UI 邊緣放置時由於不能自訂螢幕邊緣形狀,所以無法定義螢幕四邊的元件邊角,在螢幕邊角設定形狀(例如: 圓角)會產生縫隙顯示後方元件內容,因此需要修改形狀定義。

在不同類別的元件使用邊角形狀和尺寸,對於形狀修改時會統一修改所有元件的邊角形狀,而帶有覆蓋的元件除外。當元素需要的形狀與元件定義的形狀不同時可以修改形狀和尺寸,

將形狀應用於元件時,在產品介面中使用形狀時設定自然或幾何的形狀樣式與品牌呼應,可以連結您的品牌和 UI 的層次結構。也可以開發出一套與品牌呼應的相關形狀運用於您的產品,有助於在整個產品中統一品牌的表達。

具有獨特形狀的元件容易脫穎而出,吸引用戶注意螢幕中特殊的形狀區域達成強調的效果。( 例如: 操作按鈕可以使用獨特形狀吸引注意力。)

在品牌與層次結構間的各個組件中使用一組相似的形狀,建立統一的品牌結構基礎。若是需要突顯元件也可以使用與品牌標誌相似形狀,然而過度使用品牌形狀會導致形狀不具有獨特性而無法突顯目標,過多獨特形狀會使各元件之間缺乏視覺凝聚力。

在兩個元件轉換形狀時需要考量轉換是否可以提高元件的識別性,在展開為全螢幕的元件中,在轉換成全螢幕時不要使用幾何圖形,避免後方物件因為元件周圍有縫隙而出現在畫面中。元件可以藉由形狀改變來表示狀態更改,元件使用獨特形狀來表現與其他狀態不同。例如: 商品區塊的選定狀態可以使用獨特的形狀與未選擇的區塊區別。

對於系統已經定義好的形狀進行變更可能會影響元件形狀的使用,例如: 增加元件在使用時的形狀大小可能會導致內容超出元件形狀。如果尺寸定義為百分比時,因為內容文字增加而新增行數,會導致元件高度增加而影響定義為百分比的形狀尺寸。更改形狀樣式可能會影響組件中的內容,為了避免意外的結果,請考慮使用的形狀和邊角尺寸以及排版和內容。

Material 提供形狀類別用於元件上的設定值。每個元件都包含形狀類別與尺寸數值,藉由左上角;右上角;右下角;左下角的順序應用於元件上,在元件設定尺寸數值後可以運用於元件上的所有邊角,邊角的形狀最大為元件絕對高度的 50%,在邊角形狀可能會裁切到內容時則不建議使用邊角形狀。

小零件

本圖片截取自 Material Design - Category: Small components。

中等元件

本圖片截取自 Material Design - Category: Medium components。

大型元件

本圖片截取自 Material Design - Category: Large components。

無法定義形狀的元件

下列元件無法修改定義形狀,形狀可能會干擾元件的識別性或可讀性。例如: 形狀也可能暗示不支持的動作或是具有方向行的暗示,但實際上無法執行此操作。

  • 頂部應用列
  • 底部應用列
  • 橫幅廣告
  • 選單
  • 分隔板
  • 展開底頁(全屏顯示時)
  • 底部浮動頁面(全屏顯示時)
  • 單選按鈕
  • 標準底部頁面(全屏顯示時)
  • 標籤

今天我們了解到當元件 Shape 形狀改變時,可以增加動畫讓改變動態更順暢,也更能突顯元件。在品牌與層次結構間使用形狀能建立統一的品牌結構基礎,若是需要突顯的元件也可以使用品牌標誌的相似形狀運用於組件,過度使用品牌形狀會導致形狀不具有獨特性而無法突顯目標,過多獨特形狀會使各元件之間缺乏視覺凝聚力。

明天讓我們繼續完成 Motion 動作 的章節,每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

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


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day13 Shape 形狀
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day15 Motion 動作
系列文
UI / UX 設計白皮書 - Material Design 導讀30

尚未有邦友留言

立即登入留言