交互设计——弹窗设计

时间：2023-07-22 13:54:01 | 来源：网站运营

时间：2023-07-22 13:54:01 来源：网站运营

交互设计——弹窗设计：无论是模态还是非模态，弹窗都是位于当前页面的最顶层







Toast（提示框）

Toast提示框是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。

考虑到Toast提示框显示的时间较短（一般只有几秒种）、占用区域不大，它很容易被用户忽略，所以Toast不适合承载过多的文字和重要信息。







Dialog（对话框）

Dialog对话框是一种模态弹窗。当用户进行了敏感操作，或者当App内部发生了较为严重的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前应以Dialog的弹窗形式告知用户且让用户进行功能选择。

一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。

Dialog的标题和信息内容的文字描述都要设计成尽可能的简洁和无异义，也可以选择省略标题只保留内容描述和功能按钮，功能按钮最好只有两个（是/否），如果不是特别重要的信息，尽量不要打断用户，选择Toast。







Actionbar（功能框）

Actionbar功能框可以看成是无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，Acionbar一般都设计有一个默认的“取消”功能按钮，点击该按钮后关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。Actionbar一般被设计用来向用户展示多个功能按钮选择。

在iOS中，Actionbar的样式比较常见的是文字列表框，它出现在页面底部，以简洁的功能描述性文字展示功能按钮，敏感的功能操作一般用红色字体标出（也可以设计其它颜色以突出某个功能按钮）。




当功能按钮数量很多的时候，文字列表的形式不适合显示，此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。




在安卓系统中，Actionbar还经常被设计成“选择列表框”（其实就是用选项代替了功能按钮），比如安卓版的微信App中就是用这种设计方式让用户进行性别选择。这种设计方式的好处是减少了功能流程中的页面跳转，但是如果选项很多而且描述文字较多的时候，还是设计成选项详情页面会更好些。







Snackbar(提示对话框)

Snackbar提示对话框是安卓系统的特色弹窗之一（安卓平台在开发的时候可以直接调用Snackbar类生成该弹窗，iOS好像也可以进行定制化设计开发），它也是一种非模态弹窗，同时拥有Toast和Dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互（用户可以点击功能按钮进行回应）。

使用分场景：若下方空白多 可用snackbar ，如下方文字内容、动态元素等等多的话就用Toast。