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 )

( 滑過去會觸發瀏覽紀錄 )

互動視窗排版

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

3、警告訊息 ( Alert )

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

警告訊息的類型

• 成功 ( Success )：如，用戶成功登入
• 錯誤 ( Error )：如，檔案下載失敗
• 警示 ( Warning )：如，網站連線失敗
• 資訊 ( Info )：版本已更新
  

4、資料表 ( Data Table )

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

資料表排版

• 資料標題
• 表格替代顏色
• 互動元件
  • 按鈕
  • 複選框
  • 下拉式選單
  • 分頁條
    

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