弹窗还是toast?你要的临时框,都整理在这了(附样例)

临时框是每个产品的标配,每个产品经理都会遇到临时框的交互设计,那么哪些算是临时框?警告窗口、操作列表、toast等分别在什么时候使用才符合一定的产品交互规范?本文就来讨论一下临时框以及它的使用场景和规范。

什么是临时框

它是需要对用户重要信息的提示、操作而生的。判断一个页面是临时框还是二级页面,不是看它是否占满整个屏幕,而是看它有没有脱离主任务,临时框只是暂停了主任务,完成了临时框的操作后会自动回到主任务,不要把临时框和二级页面混淆了。

临时框的种类及使用规则:

种类一:警告视图(alert view)

组成部分:标题、正文、按钮三部分组成。

交互体验评价:警告视图是比较“强”的提示方式,它会中断用户当前的操作,必须要用户给出选择之后才能进行下一个任务,体验上过于“强制”,适合比较紧急、重要、必须的提示信息。一个产品里的弹窗提示不宜过多。

使用场景:获取用户地址、调用手机的接口如麦克风、摄像头、访问相册和相机、升级提示、删除提示等。

种类二:Toast

组成部分:一个背景色块加一个短语两部分组成。显示时间1-1.5秒

交互体验评价:Toast和警告视图的弹窗相比,更加温和、友好,既给了用户反馈又不打扰用户。

使用场景:用户执行了一个操作,可能正确、也可能不正确时,需要知道反馈但不宜通过弹窗中断用户操作过程的时候,最常见的如登录成功、下载失败、密码输入错误等。


种类三:操作列表(Action Sheet)

组成部分:如果一个页面里需要用户操作的按钮较多,就可以把它们都集合在一个按钮里面,可以理解为一个按钮包。

交互体验评价:可以最大限度地使界面简洁,把不是最常用的一类功能打包后统一放起来,视觉上会达到化繁为简的效果。

使用场景:阅读软件、分享方式提示等等。


种类四:模态视图(modal view)

组成部分:模态视图通常占据整个屏幕,包含完成当前任务所需的文字和控件,一些完成任务的按钮、一个取消按钮。

交互体验评价:这不是二级页面,而是一个在主任务页基础上延伸出来的临时任务,用户点击取消按钮后会回到主任务页。

使用场景:通常用在发送短信、邮件、以及填写订单页的购买须知等不适合让用户脱离当前页面的场景下。


本文小结

产品经理需要懂基本的交互规则,无论是安卓还是IOS的操作规范,都需要懂,才不至于用错。


作者:Wayings  

个人公众号:Wayings

专注产品人的工作感悟、方法技巧、职业规划、读书心得,欢迎交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,500评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,022评论 4 62
  • 岁月无声雨有声, 夜来闲数至三更。 细锣轻鼓为谁鸣。 芳草萋萋埋远影, 荷塘簌簌泣浮萍。 春风与我共飘零。
    ptjiang阅读 346评论 0 6
  • 《千与千寻》讲述的是荻野千寻和她的父母在回乡下的路上,进行了一次奇幻的冒险。千寻与他的父母因被一个建筑物所着迷...
    九棽阅读 535评论 0 2