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

相关推荐

  • 聊一聊不同应用场景下的验证码

    最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

    2017-05-05
  • 在设计过程中,6种心理学原理被有效应用

    有些人习惯于将设计视为一种纯艺术的工作,但它背后却有更多的东西。美感和灵感不足以创造精湛的设计,这就是为什么设计师们应该拥有不同领域的一些科学知识和技能来完成他们自己的工作。它不仅是设计的艺术,而且还涉及各种知识和实践领域,这些可以帮助他们高效地工作。帮助设计师了解用户的基础研究之一是心理学。今天,我们将了解心理学在设计中扮演的重要角色,以及哪些心理学原理在设计过程中是必不可少的。

    2017-04-28
  • 用户体验设计的5大目标

    我们常说产品的用户体验设计很重要,但究竟怎样才算好的用户体验呢?以下5大UX设计目标层层递进,帮你在最短的时间内明确用户体验设计方向,成为一名合格的UX设计师。“我能否以最简单,快捷,直接的方式得到我想要的东西?”最好是“别让我思考”。“我是否享受使用该产品的过程?”“该产品是否有足够的吸引力让我愿意长期使用”,甚至“成为我生活的一部分,让我戒不掉?”“该产品是否能调动我的力量,让我主动加入产品宣传推广的队伍。”

    2017-04-30
  • 千万级用户的视频体验,我们是这么做的

    如今app的更新迭代速度很快,因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化,且在功能上较难满足用户预期,因此需要在整体视觉和产品功能上进行相应的美化和完善,使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

    2017-05-26
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31
  • VR中的协作游戏

    在VR中分享经验、与他人协作,这是绝无仅有的一个新维度。玩家们甚至语言都不通,这个事实如此奇妙,证明了我们仅凭极少的手段就能沟通和协作。

    2017-04-28
  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • 尼尔森交互原则,讲的到底是什么?

    这几天,脑海里面一直回绕着一个声音,尼尔森,尼尔森交互,尼尔森交互十大原则。blues老师的讲解至今让我记忆犹新,如果真的让我选择一款产品进行尼尔森交互分析,我想应该就是简书了。

    2017-06-01
  • 設計者說 | 交互设计总监+创始人+设计师导师 潘翔的多维思考

    设计者说  |  设计发声平台| 第 53位设计师 |▲ 专访:设计总监+企业管理者+资深导师 三位一体经验分享今天的嘉宾经历过很多次转型——工业设计出身;毕业做交互设计;创业做用户体验设计;当然他也是一只梨的导师之一:潘翔尚器设计联合创始人资深交互设计师同济大学硕士曾任职于designeaffairs一只梨交互设计资深导师几次转型都成功是潘翔最厉害的地方。每换一次角色就会让他的思考和经历叠加一层全新维度。在他身上,同时有资深设计师的专...

    2018-03-26
  • 真诚的用户体验设计

    不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手。

    2017-05-26