iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
1
自我挑戰組

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

【Day 13】原子設計:分子 ( 卡片、互動視窗、警告訊息、資料表 )

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

本篇重點

  1. 卡片 ( Cards )
  2. 互動視窗 ( Modal )
  3. 警告訊息 ( Alert )
  4. 資料表 ( Data Table )

1、卡片 ( Cards )

卡片式版型非常常見,透過容器包含、區隔不同的內容,並將相關功能群組起來,可以彈性使用。

卡片元件的優點

  • 便於瀏覽
  • 整齊排列
  • 彈性版型
  • 功能多元

卡片元件通常會透過格線系統來規範寬度或排版位置,未來在頁面上套用一樣的版型時,能呈現一致性。而且卡片能組合多種功能,同時在畫面呈現上保持一致感不凌亂。

卡片常用於

  • 訊息流 ( Stream ):如 Facebook 社群平台
  • 發現探索 ( Discovery ):如 Pinterest
  • 儀表板 ( Dashboard )

卡片排版

  • 容器 ( Container )
  • 元件 ( 選擇性加入 )
    • 卡片標題 ( Header Text )
    • 卡片副標 ( Subhead )
    • 卡片內文 ( Supporting Text )
    • 媒體分享 ( Media )
    • 按鈕 ( Button )
    • 圖示 ( Icon ) ...

2、互動視窗 ( Modal )

互動視窗是一個需要使用者執行特定任務、作出決定或提供訊息時,會出現的視窗,使用者通常必須操作完之後才能執行其它動作。

互動視窗類型

  • 彈出視窗 ( Popups )
  • 彈出視窗 ( Popover ):觸發區域的
  • 警告視窗 ( Alert Modal )

https://ithelp.ithome.com.tw/upload/images/20200928/20130402RQoWh2GxOh.png
( 滑過去會觸發瀏覽紀錄 )

互動視窗排版

  • 關閉的按鈕或圖式
  • 確認和取消的按鈕
  • 標題
  • 內容
  • 輸入格
  • 背景遮罩 ...

3、警告訊息 ( Alert )

是一段簡短的文字訊息,常用於操作結果的描述 ( 如:成功、失敗、提醒等 ),也可以表達目前的狀態 ( 如:運作中、未連線等 ),並不會影響使用者操作介面。

警告訊息的類型

  • 成功 ( Success ):如,用戶成功登入
  • 錯誤 ( Error ):如,檔案下載失敗
  • 警示 ( Warning ):如,網站連線失敗
  • 資訊 ( Info ):版本已更新
    https://ithelp.ithome.com.tw/upload/images/20200928/20130402wadTkVJmGi.png

4、資料表 ( Data Table )

資料表以行與列的網格格式顯示資訊,方便瀏覽,適合大量數據資料比對使用,可以新增篩選、排序等功能,方便使用者搜尋。

資料表排版

  • 資料標題
  • 表格替代顏色
  • 互動元件
    • 按鈕
    • 複選框
    • 下拉式選單
    • 分頁條
      https://ithelp.ithome.com.tw/upload/images/20200928/20130402OpKjJYiOQO.png

好! 下一篇會繼續介紹原子設計中分子階段的其他部分 : )


上一篇
【Day 12】原子設計:分子 ( 導覽元件、折疊面板、提示工具 )
下一篇
【Day 14】原子設計:分子 ( 表單、CRAP優化界面準則 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言