读后总结(第13篇 - 覆盖层设计)

覆盖层介绍

覆盖层指在当前页面上打开的临时界面。这些临时界面能够完成提示性的或上下文相关的任务,它们的打断性较弱,为用户保持较为连贯的使用体验。

应用范围

通常用于状况提示/中断操作反馈/信息展示等。

覆盖层分类

按照弹窗形态区分为:对话框、弹出式半屏页面、浮层、弹出式气泡。


------------------------目录------------------------

(1)对话框

1.1 提示型对话框

1.1.1 通知型提示

1.1.2 确认型提示

1.1.3 选择型提示

1.2 输入型对话框

1.2.1 单页对话框

1.2.2 可滚动对话框

1.2.3 全屏对话框

(2)弹出式半屏页面

2.1 ActionSheets

2.1.1 二次确认提示

2.1.2 选项列表

2.1.3 选项网格

2.2 BottomSheets

2.2.1 常规的BottomSheets

2.2.2 更多BottomSheets

(3)浮层

3.1 Toast

3.2 Snackbar

(4)弹出式气泡

(5)使用弹窗弹窗时需要注意点


(1)对话框

对话框也叫弹框、弹窗。它是模态的,属于强提示,通知并获得用户批准后程序才能进行下去的对话框。


1.1 提示型对话框

1.1.1 通知型提示

【使用场景】通常用于通知用户某件事情完成了,或重要信息介绍等; 
【内容】一般由图文信息+1个确认性按钮,只能点击了按钮后才能退出对话框; 
【变形】有时会在对话框角上提供关闭按钮以退出对话框;图文介绍也可以分多页。


1.1.2 确认型提示

【使用场景】通常用于二次确认、引导用户执行某项操作等场景; 
【内容】一般由提示描述+2个按钮构成:描述可带标题或不带标题;2个按钮分别为一个积极的确认按钮和一个消极的取消/拒绝按钮构成,移动端积极按钮一般放于右侧。
【变形】有时会在对话框角上提供关闭按钮以退出对话框,关闭按钮一般等效于取消操作。 


1.1.3 选择型提示

【使用场景】需要用户选择一项操作以保证流程继续下去; 
【内容】
一般由提示描述+2~3个按钮构成;描述可带标题或不带标题。 



1.2 输入型对话框

对话框还可以用于某个或某组信息的输入。输入的信息不易过于复杂,点击对话框的确认键后统一执行输入内容。一般情况下,对话框上不允许再出现其它对话框(反馈可用toast替代)。

1.2.1 单页对话框

【使用场景】输入1~2行文本、进行一组多选操作等; 


1.2.2 可滚动对话框

【使用场景】当输入内容无法在一页展示完全时,对话框可支持滑动; 

1.2.3 全屏对话框

【使用场景】全屏对话框与可滚动对话框的使用场景其实非常类似,区别在于全屏对话框能够承载更多的内容;同时在全屏对话框上允许使用其他对话框。 
【内容】全屏对话框在形式上非常像新的页面,但其本质是一个对话框覆盖层。全屏对话框由标题+关闭按钮+确定按钮构成。页面展开时由底部往上弹出,收起时从上往下收起。 



(2)弹出式半屏页面

它通过弹出的半屏覆盖层来反馈用户操作,弹出式半屏页面优势在于它既能承载较多内容,又能保持上下文关系。


2.1 ActionSheets

ActionSheets是iOS平台上的交互形式,在使用场景上与提示型对话框相似,它可以用于二次确认或呈现与当前操作相关的多个选择等。

触发时,ActionSheets从下往上弹出;操作完成后从上往下收起。需要注意的是虽然点击空白处也能够退出ActionSheets,但iOS规范仍然建议始终为ActionSheet提供取消按钮。

相比对话框而言,Action Sheets对用户打扰程度较小。一般的对话框要求用户必须做出选择,当用户点击了某功能按键或取消后对话框才消失;而ActionSheets 允许用户点击空白处取消操作

2.1.1 二次确认提示

使用场景】通常用于在执行毁灭性操作前,让用户进行二次确认;

内容】一般由操作会造成的结果描述,继续执行操作的按钮和取消按钮构成。点击空白区域和取消都等同于取消操作。

设计Tips】一般用红色等警惕颜色来体现毁灭性操作的确认按钮;当按钮本身的描述清晰明确时,可以不需要额外相关描述。


2.1.2 选项列表

使用场景】通常用于展示上下文相关的2个或多个选项,每个选项可以帮助用户执行对应的任务;

内容】在界面中可以通过“一个功能键”或“更多按钮”承载多个相关且使用频率不高的选项。点击对应功能键后通过ActionSheets弹出全部选项,一般ActionSheets由选项列表+取消按钮构成。点击空白区域和取消都等同于取消操作。

设计Tips

选项数量不宜过多,AnctionSheets中不能出现滚动操作;

iOS规范建议菜单项居中显示且不带图标;


2.1.3 选项网格

使用场景】主要有以下4种场景,网格比列表更适合:1、更多选项相互之间的相关性不大;2、选项分别属于多种类别;3、选项数量过多,一般多于5个;4、需要强调选项的图标,如分享时强调第三方平台logo等。

内容】在网格式的ActionSheets中,每个选项以icon+标题的形式展示;当选项较多时,以相关性分行展示,最多不超过2行为宜,当选项有2行时,每行可以单独横向滑动。

设计Tips

每项的标题最好简介明了、不宜过长。



2.2 BottomSheets

BottomSheets是Android Material Design规范中建议的一种交互形式

2.2.1 常规的BottomSheets

使用场景】BottomSheets的使用场景与iOS中选项列表和选项网格的使用场景相同。

【设计Tips
在设计BottomSheets时最需要注意的是与iOS端ActionSheets的区别:

  • Android 端的BottomSheets中不需要展示“取消”选项,因为Android软键盘中的返回按钮等效于取消;

  • ActionSheets中不能出现滚动操作,但BottomSheets中可以,由于没有“取消选项”,BottomSheets底部是与屏幕联通的,所以在实际应用中BottomSheets也有更大的发挥空间。


2.2.2 更多BottomSheets

使用场景】当页面中操作涉及到更多上下文信息时,则适合通过这种类似BottomSheets的形式进行展示。适用于展开筛选项、更深层级分类等场景,能展示大量信息。

设计Tips】

  • 与常规的BottomSheets类似,点击空白处时等效于取消操作,菜单需要收起;

  • BottomSheets高度不宜过高,顶部不应超过标题栏; 



(3)浮层

是出现后一段时间自动消失的反馈信息层,它与知会提示型对话框在使用场景上类似,也主要用于对系统级、应用级或用户操作结果的提示,区别在于浮层不强求用户一定要对其进行交互,因而其对用户的打扰也更弱。 


3.1 Toast

【使用场景】用户的每一步操作都应该得到反馈,当有些操作的结果是从界面上不能直接获得,或反馈为系统反馈时,应该使用Toast; 
【内容】置于页面底部的一条半透明浮层,出现2-3秒后自动消失; 
【设计Tips】描述文字在一行内为宜,需要保证用户在toast出现的2-3秒内扫一眼就知道其要传达的内容;同一时间只允许有一条Toast出现; 
【变形】也有将toast放置于页面中间或顶部的做法;toast的内容也可定制为icon+文字描述或纯图案描述等。 



3.2 Snackbar

【使用场景】Snackbar是Android平台特有的交互形式,它也用于向用户反馈信息,但其打扰程度介于对话框和Toast之间; 
【内容】置于页面底部或顶部的一条半透明浮层,浮层上应是简单的文本描述+0~1个按钮;浮层出现一定时间后自动消失;Snackbar并不是模态的,其出现期间用户仍然可以在原页面执行其它操作 。

(上图为包含了一个撤销操作的Snackbar,反馈操作成功的同时,提供一个轻量的操作)


(4)弹出式气泡

用它来呈现页面中折叠的一些额外信息,或在首页位置呈现一些常用操作的快速入口,点击气泡外任意地方收起。



(5)使用弹窗弹窗时需要注意:

1. 节制使用。最好在传达关键或需要操作的信息时才使用。过多会干扰用户体验,尤其是广告类的。

2. 注意美观和有趣性。想要让自己产品脱颖而出,在功能做好的前提下,要展示出与众不同的特色。

3. 文案要简洁明了,避免模棱两可的选项。

反例:这个按钮的文字“不”的确回答了弹窗内的问题,但是并没有直接告诉用户点击后会发生什么。


改成这样:肯定的操作文字“放弃” 很明确地指示了选择这个选项的后果。


4. 按钮有主次之分。学会引导用户,去做你想让他做的事情。

5. 轻量内容。用户很有可能会错过,所以不适合放入大量信息。

6. 反馈及时。在不过于频繁的情况下,及时使用有利于提升用户的体验。

7. 注意出现的场景。如APP评分,不要在用户首次登录就立马出来,别人都没用你产品,你就要别人评价是不合理的。


参考文献:覆盖层设计(上)覆盖层设计(下)

评论(1)
热度(2)

© 木木 | Powered by LOFTER