在常见的Banner布局方式中(banner设计方法和要素)

当你需要显示一个连续的提示,但又不想打断用户的操作时。使用对话框弹窗会打断用户的操作,Toast不够明显,Snackbar会自动消失。显然,这些都不符合要求。那你不妨跟我去了解一下能满足这个要求的Banner控件。
横幅是什么?
这里的Banner不是电商和视频网站常见的焦点图,而是素材设计规范中推荐的提示控件。我们可以翻译成横幅提示。
横幅控件通常用于轻微干扰的消息提示,会在视觉上干扰用户,但不会阻止当前操作。用户可以选择忽略或稍后操作。
上一篇文章解释了Snackbar,它比吐司好吃。Banner与Snackbar属于同一个提示控件,但两者的区别在于:
位置不同:Snackbar一般显示在页面底部,Banner一般显示在页面顶部。干扰程度会更强:Snackbar会自动消失,Banner会永久显示,除非满足其消失的必要条件。左边是Snackbar,右边是Banner。
与另一个著名的提示控件Dialog(弹出窗口)相比,Banner的不同之处在于:
视觉表现弱:对话框会用深色遮挡背景,显示在页面中央,使得用户不得不将全部注意力集中在对话框上;横幅在显示时只占据页面顶部,导致局部视觉干扰。干扰少:在对话持续期间,用户将被禁止进行其他页面操作,而Banner持续时间不会影响用户的其他操作。左边是对话框,右边是横幅。
所以综上所述,三个提示控件的干扰程度可以从强到弱排序:DialogBannerSnackbar。
那么,当我们需要在不中断用户操作的情况下长时间给用户一些提示的时候,Banner绝对是你最好的选择。除此之外,Banner可以兼容1-2次操作,也是兼具提示和操作功能的好帮手。
我来给你解释一下Banner控件的一些特性和玩法。
常见的横幅样式
横幅样式可以根据设备的宽度进行调整和更改。
1.窄屏幕风格
注意文案的字数,保持单行显示,按钮装不下时允许断行显示。
2.宽屏风格
注意文案的字数,保持单行显示。
横幅的显示和消失机制
1.显示
Banner一般是在内容加载到屏幕上时出现,加载后出现的Banner会从顶部向底部滑出。
消失
横幅必须保持显示在屏幕上,直到自定义消失逻辑得到满足。
横幅的显示位置
当页面有顶部应用程序栏或搜索栏时,它将显示在其下方(不允许重叠)。
当页面没有顶部应用程序栏或搜索栏时,它将显示在状态栏下方(不允许重叠)。
横幅的层次结构
可以设置横幅级别高于页面内容,横幅从顶部滑下时会遮挡下面的内容。当页面内容向上滑动时,横幅将固定在顶部。
可以将横幅设置在与页面内容相同的高度,当横幅从顶部向下滑动时,会将内容向下推送;当页面内容向上滑动时,Banner也会滑出屏幕(不会消失)。
当页面使用导航抽屉时,横幅将被展开的抽屉导航所阻挡。
横幅的点击热区
当进行两个操作时,设置相应的操作按钮点击热区。
当只进行一次操作时,可以将对应的操作按钮设置为点击热区,也可以将整行banner设置为点击热区(应用需要具有交互性和统一性)。
横幅的“不要”
不要同时展示多个横幅,一次只能展示一个;不要用文字按钮以外的样式,因为会太强势;不要使用两个以上的按钮。如果有必要,请考虑使用对话框;按钮复制不要用“忽略”或“取消”复制,取消复制要和信息内容匹配。用法示例
Teambition使用Banner在主页上提示新版本。用户可以点击查看新版本的更新内容,也可以选择以后查看或者忽略。
微信还在消息列表页面用Banner告知网络异常状态。用户可以点击查看详细问题,也可以选择查看本地缓存的消息内容,当网络恢复正常后会自动消失。

综合资源

木雕如意?曲阜如意的形状有哪些

2023-11-7 9:16:50

好玩下载

tiktok shop小店带货速成班(备战全球流量)

2023-10-13 11:27:26

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索