赞助商
立即赞助

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

交互设计3年前 (2021)发布 流光
2.6K 0 0

Z Yuhan:稍微复一点的产品少不提示功能,种局模块既需要整决方案,也需要具运用规则。以手机 App 为例,提示种类很(操成功、操失败、收藏点赞、二次确认……),展示形式也很。

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

下文会从三角度分析提示设——重程度、出置内构。

一、重要程度

提示种类之多,几乎无法完全枚举,况且很多 Bug 提示无法设时就预料到的,所以比较实际的方法用重程度划分提示。但以什么依据呢?我这里参考了的可用性问题级规则,利用「如果提示,可能对用户产的影响」判断提示的重程度。

1. 重度提示

不可逆、涉及金钱或不建议的变信息,如:永久删除、购买、取消关注……

计方向:

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

2. 度提示

用户可能需要了解、感兴趣变更信息,如:好友消息、网络误、账号升级……

设计方向:

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

3. 轻度提示

用户可以预料的变更息,如:发送成功、添加收藏、开启流量模式……

设计方向:

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

二 、出现位置

位置对注意力来说非常重要,提示出现在不同地方产生完不同的效果。因为能的位置太,里主要将其分为三类。

1. 原位

在用户原操之处、视焦点出现提示肯定是最的方式。

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

因为无论引导何强烈,对用户来说有一个代价是无避免的——转移视。尤其是有时用户做某件情太集中时,能强的旁提示无法引注意。所以像样相当把信息放到用户眼前,就消减很问题和代价。

这种方式固然好,但可行性却相对较低。例中收藏图标点一下加动效变实这种当然简单,但很多提示(如加载失败)都不存触发操作或不确视线焦点,对于这类提示用原展示的话,视线本就比较高了。

2. 中央

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

这种提示必然从视觉打断了当任务,所以加合程度较高的提示。

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

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

3. 边缘

消息推送、角标这类利界面边缘位置的示很见。

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

这种位置的好处是会打扰当前任务,且顶或位置可摆放较多字,适合中或轻示。

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

三、结构组成

1. 闭

传统 Windows 都是清一色带有闭按钮的,但是大分情况可并需要这个按钮。因为:

  • 重度提示会在用户进行选择操作后动消失,所以不需要关闭。
  • 轻示会很快自消失,需要闭。
  • 有必选项度提示才可能需要关闭按钮。

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

2. 标题

了不扰用户,提示应该越简洁易懂越好,所以标题这东就很鸡肋了。由于一些系统弹窗的结构限制,时配置提示的时候了填充标题区域,不得不写「提示」、「二次确认」这种毫无意义的文字。

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

3. 图片

从纯粹的人机交互,部分提示其实完全不用配图,尤其些系统了强行配图,每提示框都加一级强度的图标,这样其实什么意义。

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

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

4. 选项

重度提示通常都求用户选择操作的;轻度提示一般自动消失不需行任何选择。

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

例如在打开页面时,因为流量太大问题而错。如果简单处,给户说明错由就好了。但是如果要真正为体验而设计,就要考虑户此时的心。户发现页面打开,管由如何就是会觉得开心。如果这里有一个反馈入口,供一个宣泄途径,哪怕实际上并够解决任何问题,至户在心上有「做了努」的感觉。

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

5. 情

这是有思的一点,也是近年来才出现的计趋势。大部人都对可爱的事物持有较高的容忍度,例如一个成年人路摔了一下会被嘲笑,而一个孩路摔了一跤会被说可爱,这可能和呵护下一代的性有关吧。

利人的感性这一点,如果将系统包成一个较为可爱的人物形象,就户对问题的容忍。示通会对户成一定干扰,尤是问题示,这些情况是最需要容忍的,此处是情感包的良机。

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

注作者的微信公众号:「交互进阶」

如何做好提示设计?我从3个角度完成了这篇超全面的总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

现在,当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候,乍一看很难区分清楚彼此的区别:带有圆...
App设计
一、移动互联网开启了新金融时代 为了探索移动互联网的普及以及用户对金融服务的需求变化,在2017年腾讯用户研究与体验设计部...
服务设计
任何设计规范都不能详细说明一个完整的用户界面。因此,根据定义,即使设计师致力于遵守适当的设计规范,仍然还会有很多设计...
一致性原则
故事要从我搬到新出租屋开始讲起。半年前搬到新的出租屋后,房间里配置的洗衣机也比之前的大了一倍,而且操作区上分布着的密...
开关
编者按:本文总结了微交互的基础知识和三大作用,作者用大量优秀的微交互案例演示让你直观感受到微交互的强大,适合对微交互...
交互设计
本文分享国际化司机端首页改版完整思考过程,化繁为简提升司机使用效率,提升产品用户体验。 关于国际化司机端 随着滴滴国际...
改版设计
谈到我们生活中的那些产品和服务,它们常伴于我们左右,影响着我们的生活,与我们处处相关联,同样的这些产品也会影响我们的...
App设计
卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构。 一个网站是否好用,判...
信息架构