临时框这种交互方式,产品经理请慎用

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


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

临时框这种交互方式,产品经理请慎用

什么是临时框

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

临时框的种类及使用规则

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

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

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

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

临时框这种交互方式,产品经理请慎用

种类二:Toast

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

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

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

临时框这种交互方式,产品经理请慎用

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

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

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

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

临时框这种交互方式,产品经理请慎用

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

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

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

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

临时框这种交互方式,产品经理请慎用

本文小结

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

 

作者:兢兢,个人公众号:兢兢在路上   ID:ontheway-jj。

本文由 @兢兢 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26476/

(0)
CatherineCatherine
上一篇 2017-05-14 16:46
下一篇 2017-05-14 18:49

相关推荐

  • 为什么你爱用的 App,都用卡片式设计?

    今天这篇文章,将全面介绍「卡片式设计」,看完之后,你会知道为什么爱用的 app 都喜欢用这样的设计。设计的时候一定要思考用户会如何使用他的拇指在界面上交互。所以,界面内容的大小一定不要让用户在交互时感到不适。——译者注注:Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者 API。

    2017-05-04
  • 团队项目现已在Axure RP 9中提供

    团队项目现在可以在最新版本的Axure RP 9 beta中获得!请查看以下步骤以开始使用。 在RP 9中创建一个新的团队项目 转到文件>新团队项目或团队>从当前文件创建团队项目。 为团队项目命名。 为团队项目创建新工…

    2019-04-04
  • 精髓干货!一组精挑细选的用户体验设计网站和书目

    精髓干货!一组精挑细选的用户体验设计网站和书目 学校可以为你传授很多知识,但是有些职业学校教不来,产品经理、用户体验设计师、交互设计师、程序员鼓励师这样的职业都在此列。这样的职业通常都有几个显著的特性…

    2015-11-14
  • 浅析手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇指法则”。

    2017-05-02
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 制作在线UX作品集的四个步骤

    本文作者将帮你系统梳理一下创建一份作品集的全部步骤,让你明白UX作品集的常规创建流程。

    2017-05-02
  • 四个步骤,完成一个APP的LOGO设计需求

    希望这篇文章,能够在你做LOGO设计时,提供一些方向和思路。

    2017-05-01
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08
  • 最重要的用户体验设计细节恰恰是被忽视的地方

      编者按 : 本杰明·布兰德尔(Benjamin Brandall)是 Process Street 的内容设计师。 我算不上是一个优秀的设计师,事实上我的设计水平还比较糟糕。不过我对设计的理念很感兴趣。我读过和写过很多关于 客户成…

    2015-11-30
  • 将Axure移动端原型生成二维码教程(二维码支持微信等app扫描访问)

    使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。链...

    2018-03-24