[笔记] 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 设计入门:画出有程式逻辑的设计稿 – 34 – 设计标注档
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 33 – 切图命名与格式
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 32 – 设计规范
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 31 – 深色模式
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 30 – 页面
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 3
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 29 – 改变页面状态来提升使用者体验
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 28 – 响应式排版
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 27 – 高转换的登陆页
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 26 – 模板
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 25 – 运用常见的接口版型排出好设计
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 24 – 页尾
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 23 – 页首
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 22 – C.R.A.P. 四个帮助你优化接口的设计准则
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 21 – Form 表单
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 20 – DataTable 资料表
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 2
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 19 – Alert 警告讯息
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 18 – Modal 互动视窗
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 16 – Tooltip 提示工具
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 15 – 折叠面板
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 14 – 导览元件
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 13 – 通用设计
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 12 – 色彩
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 11 – 文字
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 10 – 连结和图示
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 1
  • 按赞加入粉丝团

    延伸阅读