[筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 17 – Card 卡片

章節連結

近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域,那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門:畫出有程式邏輯的設計稿 中關於「Card 卡片」的介紹。
layout design


課程相關資訊

[連結]:https://courses.hexschool.com/courses/ui/lectures/13038970

本篇範圍:Chapter 5 ( 原子設計第二階段:分子 ) ,一共有 13 篇

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


筆記

1. 相當常見的容器組件,使用上非常的彈性
2. 便於瀏覽、版型內容彈性、整齊排列、功能多元
3. 訊息流 ( Stream )、發現內容 ( Discovery ) 和儀表板 ( Dashboard )
4. 常見的卡片排版會由 一個容器  ( Container ) 外加上標題、副標、內文、媒體、按鈕、圖示…等元素組合而成


系列文章

  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 5
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 4
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 3
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 2
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 15 – 摺疊面板
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 14 – 導覽元件
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 13 – 通用設計
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 12 – 色彩
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 11 – 文字
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 10 – 連結和圖示
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 1
  • 按讚加入粉絲團

    延伸閱讀