当前位置: 首页 >文章 > 底部动作栏设计总结
收藏
分享

底部动作栏设计总结

举报王M争王M争发布于 2018-08-162008阅读3点赞
底部动作栏属于弹框体系中模态弹框的范畴,它所代表的不是某一种弹框样式,而是一整个弹框类别:所有从界面底部向上滑出的面板都可以称之为底部动作栏。在Material Design里称之为Bottom Sheets,在iOS的设计规范中有Activity Views和Action Sheets两种。...

前段时间B站对视频缓存功能做了一次调整:之前用户想要缓存当前视频只需点击“缓存”

图标就行了,新版本中用户必须点击右上角的“更多”图标调出底部动作栏,然后再进行

缓存操作。




但是B站官方上传的视频缓存入口依然保留在之前的位置,个人推测因为普通up主所发布

的视频长短不一,良莠不齐,更多的场景是用户阅完即走,缓存的需求不是很大,所以将

缓存功能收起。而官方上传的资源一般质量有保障,且时间大都较长,用户更愿意去缓存。




当然本篇文章并不是讨论B站的这次功能改版,而且缓存功能的载体——底部动作栏。




底部动作栏




底部动作栏属于弹框体系中模态弹框的范畴,它所代表的不是某一种弹框样式,而是一整个

弹框类别:所有从界面底部向上滑出的面板都可以称之为底部动作栏。在Material Design

里称之为Bottom Sheets,在iOS的设计规范中有Activity Views和Action Sheets两种。



当然不管是MD还是iOS给的都只是一个指导意见,并不是说底部动作栏都只能这样做。底部

动作栏本质上就是一个操作选项的容器,操作选项的布局样式有两种:列表式和宫格式。列

表式适合展示的选项不多,一般2-5个,多用于用户进行操作确认或者发起一项新的任务。




当然如果你想展示多个选项也是可以的,固定好高度,用户滑动即可。




宫格式的优势更多体现在其视觉表现力上,因为配有图标,所以会更加讨喜一点。




以上只是对底部动作栏做一个简单的介绍,接下来我们要拿它跟其他弹框样式进行比较。因

为有很多弹框样式跟底部动作栏有共通的使用场景,如果不找出专属于底部动作栏的特征并

且据此定义准确的使用场景,很难说完全的掌握了底部动作栏。那么接下来我就从优先级、

易操作和指向性三个方面对底部动作栏进行分析。





优先级




在产品的弹框体系中,我们必须首先明确各种弹框的优先级。因为仅从满足用户基本需求的

角度来说,一个对话框(Alerts)就可以应付所有的反馈场景。市面上有很多这样的产品,里面

的弹框样式有且只有对话框。这样做会有一个问题,那就是对话框因为处于界面中间位置,

遮挡了主要内容,会干扰用户操作。因此只有优先级最高,要让用户必须看到的信息我们才

考虑使用对话框。只有低频而合理的使用,用户才会当回事,过度滥用会使用户产生“狼来

了”心理。





那么从整个弹框体系角度来说,模态弹框的优先级高于非模特弹框。从模态弹框内部来说,

对话框的优先级高于底部动作栏。




除了优先级的不同,很多设计师包括我自己不明白底部动作栏和对话框的区别在哪。以上图

为例,好像两个都能说的通。




底部动作栏和对话框的另一个区别在于:如果该项操作具有风险性,底部动作栏是确认/

confirm而对话框是询问/ask。什么意思?确认的前提是默认用户对此项操作风险可知,而

询问是不可知的。以上图为例,同样是清理缓存,用户点击“清理音乐缓存”的弹出的是

底部动作栏,因为默认大部分用户都明白清理缓存的意思,这里只需进行一下确认。而点

击关闭“跑步FM离线包”可能大部分用户不明白这是什么意思,所以要使用对话框告知

用户操作的风险性,询问是否要继续操作。






易操作




虽然优先级不比对话框,但是在易操作的角度来说,底部动作栏胜过对话框,因为其位置

正好被拇指的活动热区所覆盖。看到这里大家可能会思考,如果弹框在底部更容易用户操

作,那么为什么不把所有的弹框都放在界面底部呢?这是因为并不是所有的弹框都对操作

性有要求,最常见的例子就是通告栏(Notice Bar)。




你在刷微信的时候,网络突然断掉。如何向用户去传达这条信息呢?理论上,所有的弹框

都可以满足这个需求。我们可以使用对话框或者底部动作栏,但是网络的故障并不影响用

户继续去使用微信的其他功能,没必要立刻去重新设置网络,有的用户就是想看聊天记录

呢,使用对话框会干扰用户。只需用户持续关注,不需要立即去处理,所以距离拇指活动

热区远一点也没有关系。






指向性




衡量弹框的另一项要素就是指向性。如果一个界面中有多个同类元素,为了防止用户无法

确定具体的操作对象,弹框应该具有指向性。




例如聊天记录中的图片,如果我想直接对某张图片进行转发操作,弹出的是UIMenuController,

而不是底部动作栏。这是因为这一屏中的图片有好几张,如果使用底部动作栏,我无法确定

要转发的是否是我所期望的那张图片。但是一旦我点击进入大图模式,就可以确定所操作的

对象,那么操作选项就会以底部动作栏的样式展示出来。





适配




适配的问题不属于设计师的锅,但是对于适配场景的了解,可以帮我们更好的把控设计的开

发还原度。举个例子,如果用户使用的是苹果手机,开通了热点,如果开发没有考虑到这个

场景,那么就会导致整个屏幕向下移动,会对底部动作栏的信息造成遮挡,即使没有遮挡,

平移了一下也不是一个好的用户体验。




0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩11天65人已报名
【5月】零基础手绘插画训练营
距离开班仅剩11天51人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩28天15人已报名
猜你喜欢
不瞒你说,空间感这么做更出效果!

2020-10-16

小虎转载君 发表

不瞒你说,空间感这么做更出效果!
大厂 App 们的集中整改!

2021-07-17

小虎转载君 发表

大厂 App 们的集中整改!
提高产品状态可见性的4种方法

2020-05-15

Clip设计夹 发表

提高产品状态可见性的4种方法
设计师,请你身上多一点铜臭味!

2018-09-06

BG设计商学院 发表

设计师,请你身上多一点铜臭味!
Figma让设计变得更轻松

2021-06-02

幺零三记 发表

Figma让设计变得更轻松
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了41,154
并提交了234份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证