美文网首页移动设计交互设计精华文章
正确使用控件-底部浮层(上)

正确使用控件-底部浮层(上)

作者: 沐风与体验设计 | 来源:发表于2017-09-14 17:32 被阅读135次

Google Material Design设计规范和iOS设计规范中,都有从底部向上出现的浮层组件。在Android中,是底板(Bottom Sheet);在iOS规范中,是上拉菜单(Action Sheets)和活动视图(Activity Views)。由于内容较多,本文介绍iOS规范中的两个组件:上拉菜单(Action Sheets)和活动视图(Activity Views)。Android中的两个组件,将在下一篇文章中进行介绍。

上拉菜单

上拉菜单,是当用户激发一个操作的时候,出现的浮层。“使用上拉菜单让用户可以开始一个新任务或者对破坏性操作(例如:删除、退出登录等,笔者注)进行二次确认。” 使用上拉菜单开始一个新任务,在苹果官方的邮件应用里有很多案例,比如下面这个👇

点击了那个长得很像“回复”的按钮,出现了三个操作供用户选择:回复、转发、打印。

在用户进行破坏性操作的时候,上拉菜单成为一个确认性质的存在,防止用户误操作引起了破坏性结果。�比如删除照片时👇

有心的好奇宝宝(比如笔者)这里可能就会想了:之前介绍过的警告框(Alerts),在进行一些重要操作的时候也会有再次提示的作用,那么它和上拉菜单有什么区别呢?笔者经过研究,终于在一个英文论坛上找到了答案:

警告框比较打扰用户的使用,一般是告知出现的问题、希望用户来处理一下;而上拉菜单,往往出现在在用户点击了删除按钮之后,用户比较对此有预期。


本文为小密圈“交互小殿堂”本周主题“场景思维”的节选内容。文章后半部分将介绍流程的完整性。感兴趣的朋友可加入小密圈“交互小殿堂”查看原文。

关于小密圈“交互小殿堂”

交互小殿堂设置了6个主题,帮助你系统学习交互:

- 场景思维(2周)

- 心理模型(1周)

- 流程设计(5周)

- 正确使用控件(15周)

- 测试方案(3周)

- 用研(3周)

以上这些专题,将每周固定发布在我的小密圈“交互小殿堂”。

同时,为了让大家更好地掌握每周的专题,安排每周的计划如下:

- 周一在小密圈“交互小殿堂”独家发布一篇主文,介绍本周主题;

- 周二至周五解答圈友们关于本周主题的问题;

- 周六分享优秀交互设计案例,并带领大家解析设计亮点;

- 周日总结本周所学。

6个专题结束后,会为大家提供7个需求,供大家实战,锻炼之前学到的技能。

具体的安排如下:

第一周,给出需求说明和重点提示;

第一周剩下的几天以及第二周,大家根据需求进行交互方案设计;

第三周集中点评大家的方案,给出建议。

欢迎加入,和大家一起系统学习交互。

加入小密圈方法

方法一:可保存下面的二维码到相册,然后使用微信“扫一扫”→“从相册选取二维码”。注:长按识别二维码会出bug,导致无法支付(摊手)。

方法二:点击链接加入http://t.xiaomiquan.com/MBiq7qV

现在圈子刚刚建立,实行短暂优惠:

两人一起报名,享8折优惠;

三人一起报名,享7折优惠;

四人一起报名,享6折优惠;

五人及五人以上一起报名,享5折优惠;

最后顺提一句,讨论会使我们更清楚地认识这个控件。欢迎大家留言讨论。

相关文章

网友评论

    本文标题:正确使用控件-底部浮层(上)

    本文链接:https://www.haomeiwen.com/subject/ouidsxtx.html