说到通知栏设计,可以说是UI交互的排头兵了。通知栏既能提醒用户及时处理新消息,同时也会给用户带来很多负面情绪。通知栏的目的是为了及时的向用户传递信息,帮助用户解决问题的。但是很多糟糕的通知栏设计,却给用户带来了很多问题,例如:

  • 工作时手机突然响了,结果却是垃圾邮件——打乱思绪。

  • 开会时手机突然响了,结果却只是广告信息——当场社死。

  • 和对象看电影时手机突然响了,结果却是毫不重要的通知——制造矛盾。

下面就和大家聊聊如何设计出不让用户讨厌的通知栏。

通知栏分区

1. 按分类设计通知栏

在设计通知栏时,基本设计原则是帮助用户执行任务,而不是阻碍或者干扰用户。与用户交互的重要程度不同决定了通知栏设计方式。通知根据日常使用场景可以分以下三种情况:

  • 日常信息:平时沟通交流的信息

  • 紧急信息:重要通知或者电话等

  • 是否需要用户操作的信息

针对这三种情况,设计师需要将通知栏分为高、中、低三类,即“严重级别”,然后需要通过这三个级别上的特定属性进一步设计通知栏的类型,无论它们是警报、警告、确认、错误、成功消息还是状态指示器,根据不同重要程度的通知栏分类:

高度关注

  • 警报(需要立即注意)

  • 错误(需要立即采取行动)

  • 异常(系统异常,某些东西不起作用)

  • 确认(需要用户确认才能继续的潜在破坏性操作)

中关注度

  • 警告(无需立即采取行动)

  • 致谢(对用户操作的反馈)

  • 成功消息

低关注度

  • 信息性消息(又名被动通知,可以查看的内容)

  • 徽章(通常在图标上,表示自上次互动以来的新事物)

  • 状态指示灯(系统反馈)

通知栏根据不同的关注度在设计样式和行为都需要做出区别,并且通知栏设计时需要清晰、简洁、有用,同时还需要考虑到不同的访问环境出现的访问性问题和语言的灵活性问题。

在这方面苹果手机显得尤为重视,它的通知栏做出了明确细分,分为锁定屏幕、通知中心、横幅三种提示模式,同时还可以选择横幅风格和是否有声音。同时还调整了不同模式通知出现的位置和层级,让通知栏最大程度的适应不同类型的通知需求。

通知栏细分

为了管理短信、邮件通知、移动APP推送消息等通知,我们可以在设计通知栏时对他们进行一定程度的优化。

2. 对通知设置延后提醒

在工作或者学习时,遇到非特别重要的通知,但是又不想立刻查看时,可以增加一个延后提醒的设置,延后提醒的模式不可过于复杂,只需要给出2-3种用户可接受的模式即可。

例如下面案例给出的延后模式分别是:1小时不再提醒、今天不再提醒两种模式,另外还给出了在某某APP中进行配置,修改提醒类型。

对通知设置延后提醒

3. 折叠同一应用的通知栏

在遇到某个应用推送多条通知的时候,手机的通知中心会被撑的很满,导致用户看不到其他应用的通知。这时候可以将统一应用的通知栏进行折叠处理,然后对折叠后的通知栏设计成多层的形式,与单个通知栏区别开。

折叠同一应用的通知栏

4. 提高阅读阅读通知栏效率

在应用程序内通知栏往往会选择小红点的标注方式,多条信息栏就会出现多个小红点。所以很多应用都设计了忽略功能,让用户可以以最快的形式忽略那些不重要的通知。大致有以下几种形式:

  • 一键标记已读:大部分APP常用功能,缺点是容易忽略重要信息。

  • 双指滑屏多选:大幅提高了选择通知的效率,可以边选边快速浏览,避免了遗漏信息,缺点是手动操作不够智能。

  • 缩小通知红点:将APP内部通知标记缩小,既可以起到提醒用户的作用,也不会让APP满屏都是通知图标,增加用户焦虑感。缺点是通知依旧还在,只是不明显了。

这三种基本上是市面上常见的处理通知栏方式,虽然各有利弊,但是却一定程度上解决了大量通知栏对用户的干扰问题。

5. 优化消息通知时间,避免干扰用户

推送时间也是影响用户体验的重要因素之一,需要应用善加利用用户数据分析,了解用户使用频次和时间段,最大程度上避免干扰用户的日常生活。除了按照时间段排列,还可以根据用户画像进行更加细致的推送时间设定,例如年轻人喜欢熬夜,夜晚的状态甚至比白天更好,可以适当推送通知。

6. 选择专业的设计工具Pixso

在设计通知栏时,经常遇到修改一个组件,其他组件都要一起修改的情况。这时候就需要一款优秀好用的设计工具来辅助你完成设计,新一代设计协作工具Pixso 是你不二选择。Pixso是一款一站式完成原型、设计、交互与交付的设计工具,在处理类似通知栏这种大量重复性工作非常擅长。

  • 一键切换的组件变体

Pixso的组件变体功能,能让设计师实现更换组件就和操作App一样简单!在设计和修改通知栏的工作中,Pixso组件变体是个非常实用的功能。

组件变体

  • 超级智能的全局样式

Pixso的全局样式,就可以轻松的解决这个问题,做到一处修改、全局生效。实现了快速修改,不再受制于繁琐的重复性工作,创作效率大大提高。

全局样式

  • 随心所欲的自动布局

Pixso的自动布局,是设计师必不可少的功能。面对各种分辨率的设备需求,可以创建填充或缩小以适应的设计,并随着内容的变化而重新排列。

自动布局