[笔记] UI 设计入门:画出有程式逻辑的设计稿 – 18 – Modal 互动视窗

章节连结

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


课程相关资讯

[连结]:https://courses.hexschool.com/courses/ui/lectures/13038970

本篇范围:Chapter 5 ( 原子设计第二阶段:分子 ) ,一共有 13 篇

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


笔记

1. 需要使用者决定执行特定任务、提供讯息时才会出现的视窗。使用者通常必须操作完后才能进行其他动作。
2. 互动视窗可以细分成:Popups ( 弹出视窗 )、Popover ( 触发区域的弹出框 )、警告视窗 ( Alert Modal )
3. 为了让使用者专注在弹出视窗上,常会加上遮罩来让背景文字和图片变暗


系列文章

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

    延伸阅读