从三个角度全面分析APP的提示设计方法

稍微复杂一点的产品都少不了提示功能,这种全局模块即需要整体解决方案,也需要具体运用规则。以手机 App 为例,提示种类很多(操作成功、操作失败、点赞、二次确认…);展示形式也很多。

我最近对这一方面有所思考,结合外网资料整理了一套提示设计的方法和建议。为了方便解释,下面会以移动端为例,但是核心的方法理念是适用于各种终端平台的。

下文会从三个角度分析提示设计——重要程度、出现位置和内容构成。

重要程度

提示种类之多,几乎无法完全枚举,况且很多Bug提示是无法在设计时就预料到的。所以比较实际的方法是用重要程度划分提示。但是以什么为依据呢?我这里参考了的可用性问题评级规则,利用“如果没有提示,可能对用户产生的影响”来判断提示的重要程度。

想要了解可用性问题评级规则的话,可以去看我早期写的这篇理论性较强的文章:《正视可用性问题》

重度提示:不可逆、涉及金钱或不建议的变更信息,如:永久删除、购买、取消…

设计方向:

  • 确保用户能够看到提示,哪怕打断当前任务
  • 必须用户主动操作或进行选择才能继续

中度提示:用户可能需要了解、感兴趣的变更信息,如:好友消息、网络错误、账号升级…

设计方向:

  • 在尽量不打断当前任务的前提下,确保用户可以看到提示
  • 不自动消失,但用户可以选择忽视

轻度提示:用户可以预料的变更信息,如:发送成功、添加、开启省流量模式…

设计方向:

  • 避免对当前任务产生任何干扰,让感兴趣的用户能够发现提示
  • 自动消失,无需任何操作

出现位置

位置对于注意力来说非常重要,提示出现在不同地方会产生完全不同的效果。因为可能的位置太多,这里主要将其分为三类:

原位:在用户原本操作之处、视线焦点出现提示肯定是最好的方式。

因为无论引导如何强烈,对用户来说有一个代价是无可避免的——转移视线。尤其是有时候用户做某件事情太过集中时,可能再强的旁侧提示都无法引起注意。所以像这样相当于把信息放到用户眼前,就消减了很多问题和代价。

这种方式固然好,但是可行性却相对较低。像上例中图标点一下加个动效变实心这种当然简单,但是很多提示(如加载失败)都不存在触发操作或不确定视线焦点,对于这类提示要用原位展示的话,视线成本就比较高了。

也就是 Google 这种量级的公司,才敢在构架 Material Design 时提出,我之前也在《谷歌 Material Design 从这些方面打破了我思维局限》中用“不是视线追踪元素,而是元素追踪视线”进行了阐释。可也就连 Google 这种量级的公司,都没有办法真正将这套理念铺展运用起来,实际上他们大部分产品并没有实现 Material Design 中的很多理想化的设计。

但是从技术发展的发展速度来看,这些应该都不是太遥远的事情。

中央:中央弹窗、浮层可能是我们印象最深刻的提示位置了,无需过多解释。

这种提示必然从视觉上打断了当前任务,所以更加适合重度程度较高的提示。

如果自动消失,也是可以运用于弱提示的,但是这样的效果远比不上在原位提示更好。尤其是如果触发操作或视线焦点在界面边缘,之后屏幕中央出现一闪即逝的弱提示未必能够引起注意。

总的来说,中央位置算是比较省事保险的方案。

边缘:消息推送、角标这类利用界面边缘位置的提示也很常见。

这种位置的好处是不会打扰当前任务,且顶部或底部位置可以摆放较多文字,适合中度或轻度提示。

缺点也很明显,即很容易被忽略,所以通常要搭配动效、音效。更糟糕的情况是,这种边缘很有可能距离触发操作和视线焦点较远,如果不巧发生了,那么用户很有可能看不到。

结构组成

关闭:传统Windows都是清一色带有关闭按钮的,但是大部分情况可能并不需要这个按钮。因为:

  • 重度提示会在用户进行选择操作后自动消失,所以不需要关闭。
  • 轻度提示会很快自动消失,也不需要关闭。
  • 只有无必选项的中度提示才可能需要关闭按钮。

标题:为了不干扰用户,提示应该是越简洁易懂越好,所以标题这个东西就很鸡肋了。由于一些系统弹窗的结构限制,有时在配置提示的时候为了填充标题区域,不得不写上“提示”、“二次确认”这种毫无意义的文字。

没有必要就不要强塞标题了,除了给用户造成阅读负担之外没有任何好处。

图片:从纯碎的人机交互上来说,大部分提示其实完全不用配图,尤其有些系统为了强行配图,每个提示框都加上一个等级强度的图标,这样做其实没有什么意义。

但是从视觉美感和易于记忆的角度来看,搭配一些真正合适好看的图也是不错的。

选项:重度提示通常都是要求用户选择操作的;轻度提示一般自动消失不需要进行任何选择。

所以关键在于中度提示是否需要提供选项呢?最好是能够提供可选操作,哪怕用户可以叉掉或无视提示。

例如在打开新页面时,因为流量太大问题而出错。如果简单处理,给用户讲一下出错理由就好了。但是如果要真正为体验而设计,就要考虑用户此时的心理。用户发现页面打不开,不管理由如何就是会觉得不开心。如果这里有一个反馈入口,提供一个宣泄途径,哪怕实际上并不能够解决任何问题,至少能让用户在心理上有“做出了努力”的感觉。

情感:这是很有意思的一点,也是近几年来才出现的设计趋势。大部分人都对可爱的事物持有较高的容忍度,例如一个成年人走路摔了一下会被嘲笑,而一个小孩子走路摔了一跤会被说可爱,这可能和呵护下一代的天性有关吧。

利用人的感性这一点,如果将系统包装成一个较为可爱的人物形象,就能提高用户对问题的容忍度。提示通常会对用户造成一定干扰,尤其是问题提示,这些情况是最需要容忍度的,所以此处也是情感包装的良机。

知乎

作者:Z Yuhan

(0)

相关推荐

  • App启动页设计实例和技巧,启动即让人心动

    作为UX/UI设计使,究竟如何才能巧妙而富有创意的结合简单图片,文字,图标以及logo之类常见元素,设计出让用户眼前一亮,心动而忍不住想要尝试,而非直接离开的web或mobile app启动页呢?以下 ...

  • 对于键盘上三个灯的分析

    操作方法 01 来源:U大师U盘装系统 对于键盘上三个灯的分析我们都知道键盘上有三个灯,但是许多人都没有真正的了解过它们分别的作用,今天我们来了解了解吧! 1.Num Lock键.我们都知道在它的灯显 ...

  • 设计干货!品牌(VI)设计案例分析和设计方法

    小编:@梦尽笑兮 品牌设计包含太多就不在去深入讨论,今天要说的是品牌设计中的VI部分,在很多人眼中品牌设计就是简单的画一个LOGO,其实这样的认知是不准确的,品牌设计和LOGO设计差别非常之大. 今天 ...

  • 如何4步搞定一个APP的LOGO设计?

    @Olaf_Chou  讲解一下LOGO设计的流程和总结一下自己设计LOGO的,如果有不对的地方,希望指出 APP的LOGO对于产品来说,至关重要,如果能让用户在众多的APP中认出你,并能在使用几次后 ...

  • 5步打造APP节日主题设计:以Lofter新年图标设计为例

    2018年春节已远去,一直想把lofter新年logo设计思路分享给大家,直到现在才整理出来,希望这篇文章能给大家一些思路和参考. 每当过节的时候,市场上大大小小的APP icon都进行了节日换装,作 ...

  • 设计师进阶笔记!APP导航的设计套路

    背景 产品同学要做一款新APP,对导航犯了愁.而在两大设计规范中,均为我们指出了如何设计APP导航,前人的文章中也有不少总结,在此作一次梳理,供自己内化也给各位读者分享. 精华浓缩版 导航设计四步走: ...

  • 高德地图可以组队导航吗?高德地图APP组队导航的方法

    高德地图可以组队导航吗?据说现在的高德地图有一个组队导航的功能,有些朋友不太清楚这项功能是如何使用的,接下俩的文章中小编将会带来详细的使用步骤,需要了解的朋友可以继续阅读本文. 高德地图APP组队导航 ...

  • 简单搜索冲顶神器是什么?简单搜索冲顶神器app功能及使用方法介绍

    简单搜索冲顶神器是什么?简单搜索冲顶神器怎么用?自从头脑王者.冲顶大会等现金答题平台爆火之后,很多辅助软件也就相继而出了,而简单搜索冲顶神器app就是一款可以助力你在百万英雄或冲顶大会快速答题的客户端 ...

  • 花椒直播特效怎么弄 花椒直播APP特效制作使用方法教程

    花椒直播特效怎么弄?花椒直播是时下非常火的一款直播平台,在花椒直播上有诸多好玩有趣的功能,比如可以做脸红.泪奔等特效,非常有趣,那么花椒直播怎么弄特效?让我们小编告诉大家花椒直播特效制作使用方法把! ...