Skip to main content Skip to docs navigation

圖標 Icons

在文字的附近,協助其溝通意涵。


關於圖示

圖示是一種在文字附近的視覺加強,通常用來幫助重述文字的意涵。除此之外,圖示也可以用來表達目前狀態或引導使用者進行某個動作,或是給予使用者動作之後的回饋。

預設圖示

本設計系統元件直接沿用 Bootstrap Icons,您可自行選用其他圖示庫 (icon library) 或自製 Icon 替換。在為元件替換 Icon 時請參考元件頁面的圖示大小 (size) 設計,注意不要放過大或過小的 Icon。

圖示易用性

風格一致性 讓您製作的整個網站使用類似風格的圖示,能降低使用者的學習成本,幫助他們更順利的使用您的網站。

站內圖示一致性 試著注意在您的網站上不同位置、頁面所使用的圖示一致性,這能減少使用者的認知負荷,幫助他們看過幾次圖示便能記得其代表的意涵。

範例:圖示一致性

...
Do
圖示用來輔助文字的溝通。
...
Don't
過多的圖示變化反而容易加重認知負荷
...
Do
類似意涵的地方用一樣的圖示有助於引導使用者迅速判斷。
...
Don't
用有些許差別的圖示表示類似的意涵容易加重認知負荷。

範例:圖示風格一致性

...
Do
Icon 風格都用視覺上一致的框線風格,且四個 Icon 的留白處比例都差不多。
...
Don't
有的 Icon 使用黑色填滿風格,有的 Icon 使用無填滿框線風格。