欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

B端产品设计中,弹窗可以做哪些事情?

发布时间:2018:02:08 13:09:08 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1542个文字,预计阅读时间4分钟
导语
临近春节,果酱妹在和一些公众号主交流中了解到,除了担心放假会涨粉和阅读量会下降,年后公众号的规划他们也做足了打算。其中,不少公众号主把内容电商放在了规划清单内。

  了解弹窗的类型和可以做到的事情,可以帮助我们在设计中做出更合理的决策,并且有助于我们梳理和规范现有产品框架、制定和完善设计规范。

  

B端产品设计中,弹窗可以做哪些事情?

 

  在设计B端产品时,产品经理和设计师总会为写一个问题争执不休:在有限的页面空间,是否还能放些什么?而弹窗它可大可小,且能在当前二维页面之外衍生无限的空间,几乎可以做到所有页面能做的事,同时对于开发来说随便在html中加一个和一句话就能生成一个最简单的提示弹窗。是的,在产品设计中,弹窗真的太“方便”了!

推荐阅读:产品入门须知的一些UI设计准则

  或许正因如此,弹窗可能是产品设计中最被滥用的一种常用控件了。如果用户打开一个链接或是按钮后充斥的是一层层的弹窗,用户会感觉你的产品太复杂太难用!更糟糕的是,有的产品会很粗鲁的弹出各种“提示”、“警告”,还需要强制用户去点击或关闭——可能设计者以为这种”温馨提示“是“已用户为中心”,但很多时候我们完全可以以一种更为温和的方式来提醒用户(如toast、悬停浮层、输入框旁边的橙色文字等)。了解弹窗有哪些类型、可以做什么,能够帮助我们在设计时做出更合理的决策。

  弹窗,是一种“展现于页面之上的一种信息容器”,在x、y轴的平面空间之外扩展了页面的维度和深度,它是一种比页面更灵活的信息容器。细分下来会有很多类型,但并没有一种很明确和统一的叫法。在移动应用流行以前的网页设计中,有对话框(Dialog)、警示框(Alert)、弹出层、弹框、浮层(popup)、气泡……现在,因为响应式设计和多平台统一的趋势下,甚至也有将android的toast提示、Actionbar,以及ios的透明指示层(HUD)和也算作是“弹窗”的一种。同时,非模态各种浮层和窗口,类型和用法千差万别;鉴于此,我在这里重点探讨我们在B端产品(PC端)中常用的传统意义上的“弹窗”。

  以功能和用途为维度,笔者将弹窗分为三种类型:信息展示、任务、反馈。

  一、信息展示

  1、解释或说明

  一般由用户主动触发的,包含图文信息,少数会有简单的操作按钮,如“确认”、“知道了”等等。

  典型场景:欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……

  这种弹窗一般用来对页面内容作补充,用户通过点击图标或文字按钮,可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等,这类信息往往与当前页面紧密相关,且从属于当前语境,所以并不适合用跳转页面、并列tab其或二级页面的形式来表达,因为这样无疑会加深页面层级,增加用户的认知负担。尤其是对一些很重要的操作说明或引导,甚至可以在弹窗中使用翻页或tab页签的形式来扩充弹窗的显示空间。

  

B端产品设计中,弹窗可以做哪些事情?

 

  需要说明的是,很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗,并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明,完全可以用一般的非模态浮层来代替,用户只需要悬停就可以快速浏览,并且快速离开(移开触发区按钮或点击空白区域)(当然,如果内容太多,可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗)。

  

B端产品设计中,弹窗可以做哪些事情?

 

  类似这种页面的补充说明,使用悬停浮层体验会更好

  2、内容拓展

  这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制,以及突出核心需求的原则,我们只会给用户展示最关心的统计结果和字段,不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳(同样会增加页面层级),所以这时候就可以用弹窗来呈现。

  内容扩展型的弹窗,主要有以下场景:查看详情、预览图片、数据透视、历史记录……

  

B端产品设计中,弹窗可以做哪些事情?

 

  对于这种弹窗,模态和非模态并没有很大的差别。一般来说,如果是内容较少,并不会占用较大的屏幕面积,使用非模态的会更合适。因为用户只需要扫一眼内容就行,模态的可能会给用户一种“被打断”的感觉。而且,使用非模态的可以直接展现在目标旁边,关联性更好,同时可允许用户快速切换查看其它同类弹窗,且不会影响对其他的模块的操作和浏览。

  

B端产品设计中,弹窗可以做哪些事情?

 

  弹窗的扩展样式——侧滑面板

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:一个专业易用的健身APP,要如何规划它的功能和UI?

下一篇:产品案例:小程序的登录注册体系设计

  • 18893 文章总数
  • 2299431访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信