iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 10

【Day 10】原子設計:常見元件 ( Radio Buttons & Checkbox、Links、Icon )

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

  • 常被搞混的單選按鈕 ( Radio Buttons ) 和複選框 ( Checkbox )
  • 連結 ( Links )
  • 圖示 ( Icon )

常被搞混的單選按鈕 ( Radio Buttons ) 和複選框 ( Checkbox )

通常在具有選擇選項的情境出現,依使用情況分別是:

  • Radio Buttons:多個選項中只能選一項
  • Checkbox:可以同時選取多個選項

單選按鈕和複選框常見狀態

  • 開啟 ( On )
  • 關閉 ( Off )
  • 停用 ( Disable )

https://ithelp.ithome.com.tw/upload/images/20200925/20130402A0xRoOPoUn.png

連結 ( Links )

連結排版

  • 通常是藍色
  • 會加入下底線
  • 可以選擇加上圖標 ( 若下底線會造成文字的可閱讀性降低時 )

連結狀態

  • 可用 ( Enable )
  • 懸停 ( Hover )
  • 點擊 ( Pressed )
  • 已拜訪 ( Visited )

圖示 ( Icon )

圖示樣式

  • 填滿 ( Filled )
  • 外框 ( Outlined )
  • 雙色 ( Two-Tone )
    通常用來作為裝飾或功能按鈕。
    功能按鈕通常會在 Filled Icon 跟 Outlined Icon 間轉換。

https://ithelp.ithome.com.tw/upload/images/20200925/20130402wnw3IA1szX.png

線上圖示資源:

用線上圖示服務的好處:
自己繪製的 Icon,會需要針對不同尺寸、顏色的情況重新繪製。可能會造成網頁的圖檔過多而影響網頁效能。

  • 圖示狀態變化
  • 圖示狀態變化
  • 程式端好處理

圖示排版

  • 輔助文字 ( 除了少數大家都懂的圖示;不同設計師使用的情境可能不同 )
  • 簡單明確
  • 樣式一致
  • 避免混淆 ( Icon 與其連結功能的相關性要高 )

圖示狀態

  • 開啟 ( On )
  • 關閉 ( Off )
  • 停用 ( Disable )
  • 懸停 ( Hover )

好! 下一篇會繼續介紹原子階段剩下的常用元件哦 : )


上一篇
【Day 09】原子設計:常見元件 ( Input 輸入格 )
下一篇
【Day 11】原子設計:常見元件 ( Text 文字、Color 色彩、Accessibility )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言