[笔记] UI 设计入门:画出有程式逻辑的设计稿 – 9 – 单选按钮和复选框

章节连结

近期于前端开发时常会被 PM 要求先提个 Mockup 来看看呈现效果之类的。有鉴于公司目前的人力配置一直没有规划到 UI / UX 这个领域,那就自己下来碰碰看吧。这篇笔记的是六角学院的 UI 设计入门:画出有程式逻辑的设计稿 中关于“Radio Button & Checkbox”这两种特别的输入格。
layout design


课程相关资讯

[连结]:https://courses.hexschool.com/courses/enrolled/724307

本篇范围:Chapter 4 ( 从原子设计学习接口的常见元件 ) ,一共有 13 篇

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。


笔记

1. Radio Button 是用于单选的情境,而 Checkbox 则用于复选,而且是方形的
2. 状态:关闭 ( 仅有外框线 )、开启 ( 填满,通常仅元件样式有颜色变化 )、停用 ( 整体会呈现反灰 )
3. 这两者与文字的配置,可以依情境自由调整于文字左右,但请小心不要两者混用


系列文章

  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 8 – Input 输入格
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 7 – 物件状态
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 6 – 按钮
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 5
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 4
  • [笔记] 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 设计入门:画出有程式逻辑的设计稿 – 17 – Card 卡片
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 16 – Tooltip 提示工具
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 15 – 折叠面板
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 14 – 导览元件
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 13 – 通用设计
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 12 – 色彩
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 11 – 文字
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 10 – 连结和图示
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 1
  • 按赞加入粉丝团

    延伸阅读