iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
2
自我挑戰組

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

【Day 08】原子設計:常見元件 ( Buttons 按鈕 + States 物件狀態 )

在繪製設計精稿 ( Mockup ) 之前,先了解原子設計的五大階段,對於後續的溝通與產品建構,會更有幫助!
Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點【常用元件】

  • 按鈕功能
  • 按鈕種類
  • 按鈕樣式
  • 按鈕排版
  • 物件狀態

按鈕功能

按鈕 ( buttons ) 通常是用來讓使用者採取行動或做出選擇的元件,在點擊後會產生立即的反饋。

按鈕種類

依重要程度或想要使用者操作的順序:

  • 填滿按鈕 ( Contained button ):最希望使用者操作的目標,例如:馬上結帳
  • 外框按鈕 ( Outlined button ):用於次要目標,如:加入願望清單
  • 文字按鈕 ( Text button ):通常用於展開卡片的操作,如瞭解更多
    https://ithelp.ithome.com.tw/upload/images/20200923/20130402ZF2LjCk4Lc.png

按鈕樣式

使用適合的樣式,打造產品風格的整體感與一致性:

  • 直角
  • 圓角:設計上,邊緣圓角會將視線集中在中間,引導使用者進一步操作。
  • 切角

按鈕排版

  • 文字垂直置中
  • 文字精簡並保持單行
  • 粗體字重
  • 英文全大寫或字首大寫
  • 加上圖標或陰影的事項

物件狀態 ( States )

互動性是介面設計與平面設計最大的不同,設計元件用相似的視覺變化 ( 顏色、陰影等 ) 來表達目前狀態,藉此回饋給使用者,現在操作的階段或目標

常見的物件狀態:

  • 可用 ( Enable )
  • 停用 ( Disable )
  • 懸停 ( Hover )
  • 聚焦 ( Focused )
  • 啟用 ( Activated )
  • 點擊 ( Pressed )
  • 拖移 ( Dragged )
  • 選取 ( Selected )
  • 開啟 ( On )
  • 關閉 ( Off )
  • 錯誤 ( Error )
    https://ithelp.ithome.com.tw/upload/images/20200923/20130402Kwt0Lanxzg.png

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


上一篇
【Day 07】設計流程:繪製 Mockup 設計精稿之前 ( 網格系統+原子設計 )
下一篇
【Day 09】原子設計:常見元件 ( Input 輸入格 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言