经验总结: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

相关推荐

  • 经验总结|品牌视觉改版要如何开始做?

    一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?

    2017-05-03
  • 如何制作高段位的交互输出物?

    如何制作具有全局把控和细节专注的高段位交互输出物是交互设计师一直需要淬炼的能力。今天阿里的同学把多年的经验写出来,内容超多,全是干货,来收。 交互设计师在项目体验设计过程中常常担任着承上启下的至关重要…

    2015-10-14
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14
  • 02案例:用户体验和结婚教练

    用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为结婚也好,创业找合伙人也罢,都是非常重要的长期关系。改变一个人...

    2018-04-04
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • 选择极简主义风格做设计,不是没有道理

    极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。你并不需要更多的空间,你所需要的是更少的东西。

    2017-08-04
  • 一份全面系统的渐变色自学指南

    踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

    2017-05-22
  • 从「不修边幅」到「衣冠齐楚」,Google是这样一步步变漂亮的

    在很多人眼里,Google的产品一直与优雅设计无关。但现在,搜索巨人比其他互联网巨头都懂得如何打造一款设计优雅的软件(互联网)产品,如果你不相信这个判断,不妨放下你对苹果产品的钟爱,做个深呼吸,好,现在我们来对比一下Google与苹果在移动操作系统的设计:Android vs iOS。

    2017-06-05
  • 新手转向资深的必经之路——交互文件命名的最详细规范(上)

    经过一期带团队的体验,阁主发现文件命名有点让人抓狂,实在忍不住更新一篇文章去说说这其中大家约定俗成的规则,不仅包括切图命名规则,还包括文件整理规范。之前楼主有整理过简单的,貌似不够用,今天再来具体说说。

    2017-05-01