高级设计师的总结:如何设计更合理的弹窗通知界面

你是否有这样的经历,在工作的时候,突然跳出一个弹窗,打断了你的思路,让人火冒三丈。弹窗的出现,原本只是为了提醒用户,却给他们留下了非常糟糕的用户体验。今天格格学姐就从六个方面,分析如何设计更合理的弹窗通知,希望对你有帮助。

高级设计师的总结:如何设计更合理的弹窗通知界面

01、关于弹窗的说明

弹出窗口(也叫做覆盖窗口或悬浮窗口)是出现在页面内容顶部的窗口或对话框。可以根据两个维度进行分类:

1. 用户是否可以与页面的其它部分交互:

模态弹窗:在用户显示的弹窗内容完成交互之前,页面上的其他内容将被禁用。

非模态弹窗:当弹窗显示时,用户仍然可以与背景内容进行交互(例如,点击链接或点击按钮)。

2. 背景是否变暗:

如果背景内容变暗(通常为百分比的黑色,如:40%的不#000000),弹出窗口为灯箱弹出效果。当背景内容没有变暗时,没有特殊的名称。

尽管在许多情况下,灯箱弹出效果都是模态的,但也有一定的区别。如下图所示:

高级设计师的总结:如何设计更合理的弹窗通知界面

注意,弹窗的使用一定要克制,它带来视觉上的中断,打扰用户完成业务流程;再加上弹窗视觉面积较小,承载信息有限,应当尽量减少弹窗使用。

02、设计原则

尽量减少使用:进行弹窗设计时,需要牢记的基本设计原则是它必须协助(而不是打断/阻碍)用户执行操作。一个设计良好的通知模型会考虑到可访问性,并具有适应不同语言的灵活性。所以要求样式和行为必须清晰、简明和易用。

信息有效触达:信息类型上有文字、插图等,组织时从信息关联性、重要性、连续性等特性出发;通过背景分块、字体、字号、粗细的区别来实现,有时候甚至可以辅以局部微动效。

高级设计师的总结:如何设计更合理的弹窗通知界面

尊重用户使用习惯:比如:提供弹窗关闭按钮,作为安全措施;同时,提供体现便捷的交互手段,比如:点击蒙层区域隐藏弹窗、弹窗自动隐藏等。

高级设计师的总结:如何设计更合理的弹窗通知界面

重视氛围和体验:弹窗有很多中业务使用场景,针对有营销性质的弹窗,比如:应用欢迎弹窗、应用更新引导、重要活动通知、营销活动节点等;要通过插图、局部微动效等手段来打造体感。

高级设计师的总结:如何设计更合理的弹窗通知界面

03、注意事项

1. 展现形式

展现形式核心是分场景,一些偏向系统报错考虑使用最简单系统的弹窗展现形式,运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做,一定要让用户懂得,这是一个弹窗。非模态弹窗一般多以最简单的形式出现,避免传递状态信息时干扰用户的关键信息获取。

高级设计师的总结:如何设计更合理的弹窗通知界面

2. 按钮

模态弹窗一般情况下只放置1-2个按钮,信息告知类型的放个“确定”,重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗,可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上,对于用户体验上来说相当的不友好,但是对于运营数据上来说可能会很好看。

3. 动效

因为弹窗承载文本量有限,得利于设备技术的发展,现在越来越多的产品会在模态弹窗中使用动态的形式传递信息,例如很多产品的功能引导。对于非模态弹窗来说,由于本身存在感较弱,动效运用于合理顺应用户的视觉动线,例如你下拉刷新后,一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。

4. 文案表述

由于弹窗的信息承载量非常小,所以一定要用最精炼,恰当的表述来告知用户信息或者当前状态,可以考虑使用“动词+名词”的组合短语,例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的,文案字数要更加注意(可以考虑增加一些通用icon颜色辅助表达,比如正确使用绿色打勾)。

高级设计师的总结:如何设计更合理的弹窗通知界面

5. 时机频率把握好弹窗出现的时机和频率

模态弹窗会直接打断用户的操作状态,一般只有在不可逆,或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下,比如运营广告,那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机,反馈一定要足够及时,这样才能不会让用户在操作中产生疑虑。

高级设计师的总结:如何设计更合理的弹窗通知界面

04、如何创造更优的用户体验

建立灵活的通知模型滥发通知会给产品带来很多负面影响,所以设计要仔细考虑产品的交互和目标,只发送必要的消息。弹窗通知可分为三个级别:高关注度、中关注度和低关注度。

高级设计师的总结:如何设计更合理的弹窗通知界面

高关注度:

警告型(需要立即注意)

错误型(需要立即采取措施)

异常型(系统异常,某些功能无效等)

确认型(需要用户确认才能继续进行的操作)

高级设计师的总结:如何设计更合理的弹窗通知界面

中关注度:

警告型(无需立即采取措施)

确认型(对用户操作的反馈)

高级设计师的总结:如何设计更合理的弹窗通知界面

低关注度:

信息型消息

标记(通常在图标上,展示上次互动后的新内容)

状态指示灯

对通知的关注级别和属性进行分类设计师需要对所有通知进行分析,并划分关注级别和属性。需要思考的一些问题:

1、触发点是什么?

2、触发什么类型通知?

3、重要程度如何?

4、在哪里出现以及如何出现?

5、通知持续多久?

05、总结

无论是怎样的设计,都是一个持续优化的过程,除了针对现状问题进行修复优化,还要时刻了解互联网市场的发展趋势,不断变更以适应互联网时代的产品特性。

当产品前期没有进行好好思考与打磨,那么在使用的过程中会暴露越来越多的问题,基于最基本的设计规范,进行优化更新——这是所有产品从业者、设计师,甚至开发者的共同目标。

在市场竞争日益激烈的环境下,很多产品胜利在于它优秀的体验维度,身为产品设计者还有用户的我们,更要明白体验是维持产品不断发展的调和剂。

业界动态

年味最浓的10条广告文案,看看有你喜欢的那条吗?

2021-2-3 9:09:42

业界动态

业务流程梳理——数据分析的基石

2021-2-3 9:17:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索