恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
关于弹框:四类弹框的设计准则
0.0°
2020-11-18 自译外文 经验/观点 原作者: 未知 举报 1085 1 1 0

弹框大致分为四类:

系统提示— 系统自动弹出的提醒

操作引导— 帮助用户快速做选择

信息反馈—对用户的操作给予反馈

广告弹框—广告 (此类多用于赚钱)


一、系统提示

A. 有一种是大家见得最多的,就是评分类弹框。这种自动弹出的提醒如下:

这类弹框,需要遵守的四个设计准则:

1.不要在用户第一次登录就立马出来。别人都没用你产品,你就要别人评价,是想怎么样?

2.注意弹框的频率。不要一会就弹一会就弹的,会干扰用户的操作和影响用户体验。

3.专门定个入口。有些用户确实人品不错,他会在使用之后去给产品评价,所以留个这样的入口,层级可以深一点,让用户自己去操作,会更好。如:

钉钉、微信等很多APP都会直接在页面里留个评价入口。虽然层级深,但是总比一直弹框提醒和干脆取消这种弹框提醒的方式要好得多。

要记住,用户想要评价,自然会去做,如果不想,你做得多了反而给用户的体验不好。

4. 注意美化。想要让自己产品在同行业中脱颖而出,在功能做的较好的前提下,要展示出与众不同的特色。多思考思考,有时候细节真的是可以决定成败的。如:

2. 再来说说另一类系统提示弹框。就是产品更新之后,进入页面会让用户查看更新详情,也可以点击“知道了”选择不看。如:


这类提示弹框需要注意的如下:

1.注意弹框频率(这类提醒一般只有更新产品之后第一次打开会弹出)

2.专门定个入口(一般来说在评价的相同层级留个入口,展示新功能详情会更好)

3.美化

以上举了两个例子,用了四个点来说明这类弹框的设计方法,我把它们称作为系统提示类的弹框设计。当然还有系统会提醒用户是否接收推送消息等等,这些弹框都是系统提示类弹框。只要遵守这四个准则,设计思路都是一样的。


二、操作引导

什么是操作引导?上个图:

看到这个是不是很疑惑,很想去点呢?有人可能会认为着不是弹框,这类引导顶多算是弹出层,算不上是框,但只是名词的差异而已。所以这里我把它也归为弹框,其实概念还是一样的,它也是操作引导的一个弹框提醒。


再来看看操作引导的第二种弹框:


有印象么?这类弹框经常会出现在一些用户没有把握的页面,避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊,有的地方出现的不合时宜,打断了用户的使用状态。所以在设计这类弹框时要非常谨慎,得通过多次讨论、研究确认是否有必要出现。

这类弹框,也有四个设计准则:

1.注意出现的频率。如果是自动弹出做引导,那必须注意频率,它们一般在下载之后第一次打开应用才会出现。

2.文案要简洁明了。

3.按钮的主次之分。通常用颜色或字体的粗细来进行区分的,要学会引导用户,去做你想让他做的事情。


4.美观依然重要。

在设计操作引导类的弹框时,遵守这四个准则,设计出来的弹框一定不会差。


三、信息反馈

信息反馈类的弹框相信大家经常会有看到,只是印象不深,因为这个弹框给人一种好像不存在的感觉,但是实际上是存在的。来个图:

有印象了吧?这类弹框一般出现在会有反馈的操作之后,提醒用户页面正在加载中、保存成功、已删除、已刷新等等。

那么这类弹框同样也有四个准则:

1.提供一个小动效,如菊花。为什么呢?因为这类反馈弹框都会让用户等待,所以要跟用户产生互动,让用户知道现在已经在加载,而不是卡住了。如果实在懒,不想做图片动效,那来个省略号动效也行吧。

2.让用户选择关闭。不知道你们有没有遇到一种情况,就是点击了某个按钮之后会有加载,然后不知道为什么就是加载不出来,速度非常缓慢,一直在转菊花,然后点哪里都没反应,只有一层黑色蒙版的背景,结果只能退出应用重新打开它。是不是很烦?所以提供一个关闭按钮,绝对是非常合理的。

3.文案简洁明了。一个信息反馈类弹框,千万不要有多余的文字,有些 App 为了彰显独特的个性,非要来一些非主流的文案,说实话,用户一点都不关心。不要把时间浪费在这类所谓的“细节”上,意思明确且简单是最好的。

4.美观,还是那么重要。

反馈信息类弹框的设计较为简单。只要遵守这四个准则,基本能完成这类弹框的设计了。


四、广告弹框

最后一类,这是现在经常看到的一类,它存在于各类弹框中,当然也包括系统提示、操作引导、信息反馈。有些产品的弹框是为了广告而弹,这也是很常见的。来看看出现最多的一类:


有时候外卖点完会让你分享红包,这类弹框是非常典型的广告类弹框。

也是一样,广告类弹框的设计也需要遵守四个准则:

1.广告内容明确,主体不要偏。需要注意的是:不要所有东西都摆上去,显得内容丰富,其实会很low。在设计App广告弹框时,必须要记住,你要宣传的东西得很清晰,很明确,突出主题就好。

2.按钮设计要突出。想要让用户使用你宣传的东西,就干脆点,别小家子气的来几个小按钮,然后内容特别多,你是要让用户看还是让用户用呢。一定要突出重点,引导用户去操作去点击按钮。真要说很多的话就专门留个入口给用户好好介绍下。

3.优化文案。

4.还是美观。


总结

一定要记住无论什么类型的弹框,必须要做到文案简洁突出主题。不要让用户看半天还没明白你要说的是什么,然后才没办法也无所谓的点了确定或取消(大部分这种情况,他们都会点击取消)。

四个弹框种类的设计准则都说完了,大概总结为:美观、文案简洁、突出按钮、区分主次、注意频率和出现时机。

弹框是交互设计中非常重要的一个点,这类设计不仅考验交互设计师的综合能力,也能从产品看出整个团队的整体水平如何。这就是一个细节,但是细节往往决定成败。


END.

作者:西西

Powered by Froala Editor

更新:2020-11-18

收藏

1人已收藏

CC设计录

B站/抖y/快s:CC设计, 微信: yaojing1513

  • 45

    作品

  • 28

    粉丝

  • 16

    关注

  • 数据可视化设计 数据大屏设计
  • 【基础入门·UI动效合集】
  • 【APP页面 · UI动效合集】
  • 【Tabbar图标动效设计·合集】
相关标签
设计ui弹框

    猜你喜欢

      2020-11-18 自译外文 经验/观点 原作者: 未知 举报 1085 1 1 0

      关于弹框:四类弹框的设计准则

      0.0°

      你确定要举报关于弹框:四类弹框的设计准则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年11月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录