经验总结:APP页面提示样式,选择合理的就好

最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好,按照自己的规范选择合理的就好。


最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好,按照自己的规范选择合理的就好。

经验总结:APP页面提示样式,选择合理的就好

以下总结,前三个提示的名称是大家习以为常的,但后面几个的命名是以我个人的经验来命的,不一定很合理,但至少可以说明点问题。

Action sheet

Action sheet 即为操作列表,通常用于在当前页面给用户提供快捷的选择按钮,用在功能较多,对次要功能进行收纳的界面中。

Action sheet的IOS与Android的展示样式有所不同。IOS主要是以我们所熟知的半覆盖式浮层,而Android以弹框菜单为主。如下图:

经验总结:APP页面提示样式,选择合理的就好

iOS的半覆盖式浮层&android的弹框菜单

上图是app中最常见的样式了,当然也会遇到一些其它的样式,如在adroid中有时也会用到半覆盖式浮层,大多是用于分享到第三方的页面。

还有一种情况是选择菜单与当前选项关系比较紧密,选择菜单直接原地展开,当前选项为选择菜单中的一项。如下图左边是ios的popper样式,右边是android的卡片菜单。但在实际应用当中,两个平台并没有很明显的区分,一般就通用成左图的样式了。但手机屏幕比较小,用这咱展示样式会很界面显得比较碎,所以在app的实际应用中,这种样式很少用到。目前大家熟知的app中,微博首页的分组用了这种方式切换,还有qq的v6.3.1版本的空间也带入了这种设计。

经验总结:APP页面提示样式,选择合理的就好

iOS的popper样式 &android的卡片菜单

Alert

Alert 即为弹框提示,也叫警示框,用于向用户提供警示,用户必须进行操作后才能进行下一步操作。主要用于系统向用户提示操作后涉及隐私、及其他非常重要的信息或后果不可逆的操作流程中。必须给出明确的操作按钮,主要以以下几种样式展现。为了引导用户操作,有时会强化某按钮,弱化另一按钮。

经验总结:APP页面提示样式,选择合理的就好

常见的几种alert样式

alert打断用户的操作,因此应减少其在app中的出现次数,同时也避免出现过多导致用户对alert不重视。

还有一种alert提醒,在使用app时经常遇到的,同时也是很另人生烦的,那就是要求对app评价的alert。这种提醒,往往会打断用户的操作,如果出现时机不恰当,会让人产生很厌烦的感觉。这里提到它,是因为它下方的操作按钮,一般有三个,所以上下排列,这咱排列相较于左右排列,按钮间的间距比较小,所以也加大了操作失误的机率。所以一般情况下慎用这种排布方式。

经验总结:APP页面提示样式,选择合理的就好

app引导好评

Toast

Toast即为浮层提示,快速地为用户显示少量的信息。

Toast浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于一些帮助/提示。常用的有两种样式,纯文字的和带图的。

经验总结:APP页面提示样式,选择合理的就好

常见的两种toast样式

这种提示样式是最常见的,能够告诉用户目前的状况,但又不会对用户造成太多的干扰,一带而过。同时这种提示也是比较容易被忽略掉的,所以对于一些比较重要的提示最好不要用这种样式。

页面文字提示

这也是一种比较常见的提示,主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上,对用户的操作影响比较小,提示性比较弱,仅仅是对当前位置的说明,不会影响页面的视觉焦点。

如下图是支付宝蚂蚁花呗的首页,红框中的文字是对前面描述的进一步说明,不影响视觉焦点,看下月应还金额时才会看到它们。在输入界面这种提示比较多见,如注册界面密码规则的提示语等。

经验总结:APP页面提示样式,选择合理的就好

支付宝蚂蚁花呗

页面顶部的提示

位于页面顶部的提示,有三种样式,这三种样式表达的轻重性不一,所用场景不同,对用户的打扰程度也不同,是其它提示样式的一种变体。

第一种:一直存在于页面顶部,用于重要的提示或是没网这种严重影响操作的提示。

如下图,没有网络时,qq顶部的提示。

经验总结:APP页面提示样式,选择合理的就好

第二种:操作出错或是页面内容出错是从页面顶部滑下,之后马上消失,是toast的一种变形。这样的提示比普通toast提示更显眼些,更能引人注意到。

经验总结:APP页面提示样式,选择合理的就好

第三种,位于电池条的位置,用于一些上传的地方,上传需要时间,又要保证APP的流畅性,削弱对用户的干扰,甚至把干扰减少至零。如发布动态时,后台上传,在最顶部提示,这种提示更弱,很容易被忽略掉。这种提示也越来越少见了,没找到图片,请允许我ps乱入一张。

经验总结:APP页面提示样式,选择合理的就好

页面上的新功能提示

一般用于第一次出现的页面,提示一些重要或是常用的功能,或是页面功能搬家的提示。这种提示一般常见的一有两种形式,突出重点的强弱性不同。

如下图左边的页面,功能提示比较强,必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多,可看可不看,不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式,但终归也就是必须看和无须看两种吧。

经验总结:APP页面提示样式,选择合理的就好

必须看的功能提示&无须看的功能提示

特殊提示

通过页面的变化进行的提示,不影响页面的整体布局,同时在用户操作的地方提示,不容易被忽略。

支付宝的手势密码错误的提示是个很好的例子,通过头像的后退缩小,错误提示文字的出现,很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面,输入错误时,页面出现细小而精致的变化,同时很好的提醒用户。

经验总结:APP页面提示样式,选择合理的就好

大体上最常见的提示样式都在这了吧,如有遗漏或是有更好的提示,后续更新。同时也欢迎小伙伴们砸砖。

 

作者:snowgrain

来源:http://www.jianshu.com/p/3dc14c3733d4

本文由 @snowgrain 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-11 23:03
下一篇 2017-05-12 00:47

相关推荐

  • 用讲故事的思维搞定Banner背景的制作,看这篇就够了!~

    鉴于一直有人问banner背景怎么做,所以我就想要不写一篇关于背景的文章吧。

    2017-05-18
  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21
  • 2016年最值得关注的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流。作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都…

    2015-12-23
  • 知识分享直播——用户体验招募

    如果你曾经沉迷直播,为喜欢的主播刷飞机火箭;如果你曾经将直播当作你学习的途径,获取信息;如果你对当下的直播平台设计有想法和建议;如果你希望在看直播的同时,不用送礼物,还能赚些小钱;如果。。。其实,没有这么多如果,只要你想参与到影响直播平台的用户体验设计的活动中,只要你不是直播的小白,那么请毫不犹豫地来参与我们的用户体验实验。我们会提供不低于50元人民币的报酬。01—研究课题在现行的直播用户界面的基础上,我们设计了一个辅助知识分享型主播及...

    2018-04-08
  • 微信红包后台系统可用性设计实践

    作者:方乐明(现任微信支付应用产品系统负责人,主要从事微信红包、微信转账、微信群收款等支付应用产品的系统设计、可用性提升、高性能解决方案设计等,曾负责 2015、2016 和 2017 年春节微信红包系统的性能优化…

    交互专题 2023-03-03
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 交互设计与心理学的关系

    具体联系什么的大家看专业书籍吧,我从另一个角度说一下我的理解吧。 每个学科/专业的产生都是有它的历史使命的,为什么一定是这个时候,为什么一定诞生在这个领域,为什么会如此发展······类比一下其它学科/专业,…

    交互设计 2015-09-11
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27