赞助商
立即赞助

超全面!底部动作栏设计总结

UI设计3年前 (2021)更新 流光
2.2K 0 0

王M争:前时间 B对视频缓存功做了一次调整,之前户想要缓存当前视频只需点击「缓存」图标就行了,版本中户必须点击右上角的「更多」图标调作栏,然后再进行缓存操作。

超全面!底部动作栏设计总结

但是 B官方上传的视频缓存入口依然保留在之前的位置,个人推测因为普通 up发布的视频长短一,良莠齐,更多的场景是户阅即走,缓存的需求是很大,将缓存功收起。而官方上传的资源一般质量有保障,且时间大都较长,户更愿意缓存。

超全面!底部动作栏设计总结

当然本篇章并是讨论 B的这次功改版,而且缓存功的载体——作栏。

一、底部动作栏

作栏属于弹框体系中模态弹框的范畴,它代表的是某一种弹框样式,而是一整个弹框类别:有从界面向上滑的面都可称之为作栏。在 Material Design 里称之为 Bottom Sheets,在 iOS 的设计规范中有 Activity Views 和 Action Sheets 两种。

超全面!底部动作栏设计总结

超全面!底部动作栏设计总结

当然不 MD 还 iOS 给的都只一指导意见,并不底部动作栏都只能这样。底部动作栏本质就一操作选项的器,操作选项的布局样式两种:列表式宫格式。列表式合展示的选项不多,一般2-5,多用于用户行操作确认或者发起一项新的任务。

超全面!底部动作栏设计总结

当然如果展示多选项也可以的,固好高度,用户滑动即可。

超全面!底部动作栏设计总结

宫格式的优势多体其视觉表力,因配图标,所以会加讨喜一点。

上只是对作栏做一个简单的介绍,接来我们要拿它跟他弹框样式进行较。因为有很多弹框样式跟作栏有共通的使场景,如果专属于作栏的特征并且据此定义准确的使场景,很难说全的掌握了作栏。那么接来我就从优先级、易操作指向性三方面对底部动作栏行分析。

二、优先级

产品的弹框体系中,我们必须首先明确各种弹框的优先级。因仅从满足用户基本需求的角度,一对话框(Alerts)可以应付所有反馈场景。市上有很多这样品,里弹框样有有话框。这样做会有个问题,那是话框为处于界位,遮挡了主要内容,会干扰用户操作。此有优先级最高,要让用户必须看到信息我们才考虑使用话框。有低频而合理使用,用户才会回事,过度滥用会使用户生「狼来了」心理。

那么从整弹框体系角度,模态弹框的优先级高于非模特弹框。从模态弹框内部,对话框的优先级高于底部动作栏。

超全面!底部动作栏设计总结

除了优先级的不同,很多设师包括我自己不明白底部动作栏对话框的区别哪。以图例,好两都能的通。

超全面!底部动作栏设计总结

底部动作栏对话框的另一区别于:如果该项操作具风险性,底部动作栏确认/confirm,对话框询问/ask。什么意思?确认的提默认用户对此项操作风险可知,询问不可知的。以图例,同样清理缓存,用户点击「清理音乐缓存」的弹出的底部动作栏,因默认部分用户都明白清理缓存的意思,这里只需行一下确认。点击关闭「跑FM离线包」可能部分用户不明白这什么意思,所以使用对话框告知用户操作的风险性,询问否继续操作。

三、易操作

虽然优先级不比对话框,但易操作的角度,底部动作栏胜过对话框,因其置好被拇指的活动区所覆盖。看到这里家可能会思考,如果弹框底部易用户操作,那么什么不把所的弹框都界面底部呢?这因并不所的弹框都对操作性求,常见的例子就通告栏(Notice Bar)。

你在刷微信的时候,络突然断掉。如何向户传达这条信息呢?论上,有的弹框都可满足这个需求。我们可使对话框或者作栏,但是络的故障并影响户继续使微信的他功,没必要立刻重设置络,有的户就是想看聊天记录呢,使对话框会干扰户。只需户持续注,需要立即处,距离拇指热区远一点没有系。

超全面!底部动作栏设计总结

四、指向性

衡弹框的另一项素就指向性。如果一界面中多同类元素,了防止用户无法确具体的操作对象,弹框应该具指向性。

超全面!底部动作栏设计总结

例如聊天记录中的图片,如果我直接对某张图片行转发操作,弹出的 UIMenuController,不底部动作栏。这因这一屏中的图片好几张,如果使用底部动作栏,我无法确转发的否我所望的那张图片。但一旦我点击入图模式,就可以确所操作的对象,那么操作选项就会以底部动作栏的样式展示出。

五、适配

配的问题不属于设师的锅,但对于配场景的了解,可以帮我们好的把控设的发还原度。举例子,如果用户使用的苹果手机,通了点,如果发考虑到这场景,那么就会导致整屏幕向下移动,会对底部动作栏的信息造遮挡,即使遮挡,平移了一下也不一好的用户体验

超全面!底部动作栏设计总结

总结

以上就是对底部动作栏做的一个简总结,有不同见和法的欢迎留言和加群交流。

欢迎关注作者微信公众号:「王M争」

超全面!底部动作栏设计总结

图片素材作者:UI8

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发...
交互控件
为什么给自己买个上万的包包会心疼,但如果是老公送的生日礼物就会很开心? 为什么钻石不过是块美丽的硬碳,但在爱情中几万...
心理账户
@Jenny黄静雯 :​​​空状态是APP内必然存在的一个状态,适宜的空状态设计可以提升用户体验,实现用户留存。鉴于空状态在异常状...
交互设计
本文总结了 9 个排版的小技巧,帮你快速提高版式设计能力。 两种颜色就够了 圆形聚焦 粗框装饰 左起的1/4法则 分散的三角...
平面设计
现如今,在互联网领域,用户体验逐渐成为一个炙手可热的关键词,用户体验设计师也逐渐成为产品开发设计团队重要的成员。可以...
人工智能
UI和设计这一行似乎越来越难混了:进要懂手绘,退要明交互,以往一个界面的事情,如今都不够了。上一屏到下一屏之间的变化,...
AE
昨天,在一个职业咨询的留言中看到一个来自互联网设计师的焦虑,36 岁,从业 10 年,做过后台产品设计、电商设计、内容设计等...
发展趋势
@糖糖糖就是糖 :这篇文章给大家分享一下在画好线稿的重要性,并总结了一些常见问题。选择合适的构图,画好线稿是一张画的开...
手绘