實心與線條 icon 的視覺感受|筆記

■ filled|□ outlined|● rounded|▲ Sharp|◪ duotone

Doris
Dec 21, 2021

圖標的功能

它們被賦予可操作,提示說明等作用

相似圖形的變化

運用實心 icon 和線條 icon 區分不同的狀態

you could use the slash variant of a symbol to show that an item or action is unavailable, or use the fill variant to indicate selection.

您可以使用符號的斜杠變體來表示項目或操作不可用,或者使用填充變體來表示選擇。

線條 icon

透過線條的描繪,更容易增加細節,能夠給人精緻,輕鬆的感覺。
不同線條能帶來不同的視覺感受,直角顯得專業嚴謹;圓角則顯得圓滑流暢。

實心 icon

填滿圖形的描繪方式,視覺上面積較大更顯眼,能夠快速辨識圖形表達的含義。
完全填滿的實心顯得扁平而簡單;運用簍空和元件之間的距離,創造細節和豐富層次感。

視覺協調的評斷標準

1、識別性
圖標的大小,顏色,線條的粗細,這些影響視覺識別的因素識別性是否高。

2、規範性
也是做好一個圖標的基礎,我們要保證圖標在視覺大小的一致性,圖標飽滿度、遵循同一種規律,細節統一性。

3、統一性
線條的粗細比重,邊角的大小,配色方案,細節層次和設計元素在整個合集中是否是不變且一致的。

4、呼吸感
就是適當留白,不管是圖標還是界面,適當的留白可以突出主體內容,讓內容具備易看性。

參考文章

--

--

Doris

UI/UX 設計師|上線作品 Beiyi北宜 APP|記錄學習過程|何謂設計?「設」定目標;「計」畫執行