申请报道

扫一扫,联系编辑获得审核机会

符合以下要求,获得报道机会

  • 1. 新公司求报道
  • 2. 好项目求报道
  • 3. 服务商求报道
  • 4. 投资融资爆料

当前位置:首页 >  站长 >  交互设计 >  正文

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

 2018-02-08 09:30  来源:人人都是产品经理  我来投稿

  月入百万 2018互联网创业项目加盟

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

  

 

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

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

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

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

  一、信息展示

  1、解释或说明

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

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

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

  

 

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

  

 

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

  2、内容拓展

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

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

  

 

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

  

 

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

  还有一种比较常见的“弹窗”,会以侧滑的形式出新,而不是加遮罩层的模态弹窗。这样做的好处是,用户在查看弹窗内容的同时,不会失去当前页面的信息,方便用户进行对比、参照和检阅;同时并不会影响用户对界面其他区域的操作。这种形式一般在表格中出现较多。当然,这里的弹窗并不局限于一般的对话框样式,我们也可以使用侧滑浮层。

  

 

  而对于那些信息量较大(可能有滚动条、拖拽操作等),甚至会有一些可选的支线任务或扩展操作时,建议最好使用模态的弹窗。这样可以让用户的注意力更为聚焦,且可减少可能产生的误操作(一些非模态的弹窗允许用户点击弹窗范围外区域关闭弹窗)。

  渐进式的展示:

  除了弹窗和二级页面,还有一种信息展示方式——渐进式的策略值得借鉴:即在页面只展示结构式信息和核心元素,更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响,但你能得到一个更清爽更简洁的用户界面。

  

 

  二、任务

  1、复杂任务

  这种弹窗在B端产品中也非常常见。当用户在浏览当前页面时,有一些很常见的场景:“登录”、“审核”、“申请”、“编辑”……这些相对复杂的任务和操作,它除了标题和文字、说明、操作按钮之外,通常还会有一些复杂的可编辑表单,以及点击、选择、拖动等操作。在移动端,因为屏幕的控件限制,设计师更喜欢用新的页面来容纳这些内容。但在pc上,更常见的是用模态弹窗来设计这种基于当前页面的、承载用户明确目标的任务。因为弹窗会让用户明确感知到所进行任务是基于当前语境的,且在“提交”或“取消”后可以很自然的自动返回到主页面。

  此外,对于一些任务来说,虽然信息量大,但大多数场景下用户并不需要去编辑所有的字段,而只是修改你其中一两个。因此,从用户感知来说,相比二级页面,使用弹窗会让他们感觉更快捷、简单。

  

 

  大多数情况下,用户只需要编辑或修改一两个字段

  这里有必要说一下其中比较特殊的弹窗——登录/注册界面。虽然以弹窗的形式来呈现目前仍然很常见,但已经有越来越多的产品在用户点击“登录”时会跳转到新的页面,这样做的好处是可以有更大的空间,用来增加产品slogan和场景图,以达到向用户介绍产品核心功能、烘托产品氛围、宣传品牌理念的目的。

  

 

  2、简单任务

  如选择器、输入验证码、高级搜索、分享、操作权限确认、用户反馈等一些单一、简单的操作。多数情况下,这些弹窗更多的只是整个任务的一个过渡操作、前提设置,或者你可以把它看做仅仅是一个选择器。

  

 

  用悬停浮层来代替

  有一些过渡操作,并不一定要使用传统的模态弹窗,比如下面这种场景:用户点击“打印”时,需要用户来选择打印样式(纵向和横向),最开始我们的设计是让用户点击“打印”后,显示弹窗让用户选择打印样式,用户需要选择并确认(或直接确认默认选项),才能进入打印预览界面。这样看起来符合逻辑和用户心理模型;但结果发现,对那些使用打印功能频繁的用户,每次这样的弹窗“确认”让人觉得 “多余”和“愚蠢”:我基本都是“横向(或纵向)”打印,为什么每次都要让我选择?正是因为这样,我们最终放弃了弹窗,而改用了这种浮层的设计:用户悬停按钮时,就即时显示可选择的选项,如果用户不需要切换选项,直接点击打印就好(这对于绝大多数用户来说如此)。同时也允许用户快速切换到其他选项。通过与真实用户的沟通和观察,我们发现他们很明显更喜欢这种交互。

  

 

  三、反馈

  用户点击按钮、完成任务,或系统状态更新后,需要给用户一个明确的反馈,这是人机交互中的一个至关重要的部分。如果只有输入,没有输出,很容易造成用户的不良情绪,如困惑、怀疑、不信任等。告知用户发生了什么?结果如何?此外,容错是评价一个产品可用性的重要标志之一,我们要在用户可能“犯错”前给予必要的提示、警告。

  (1)重要操作确认

  确认退出、确认删除、确认提交……需在弹窗中告知用户正在进行的操和可能带来的“危害”,减少用户犯错的可能。有的可使用非模态浮层,但最好能显示在操作触发区域旁边,以防止用户忽略提示。

  

 

  (2)告知操作结果

  告知结果和影响,并引导用户接下来可进行的任务;

  

 

  如果只是普通的告知用户操作成功(如申请成、删除成功、提交成功……),这里建议使用toast提示即可,让用户“了解”即可,而不需要特别用户关注和点击关闭。如果是操作失败,在告知结果同时,还需要告知用户失败的原因、需要做什么。

  

 

  诸如导入等相对复杂、不可控和出错率较高的任务,在操作失败时还需要告知用户具体出错的位置,帮助用户快速定位原因并找到解决方案。

  

 

  (3)页面异常

  断网、数据出错、系统崩溃等。

  (4)下线通知

  页面登录超时,强制下线重新登录;账号被挤下等。

  (5)其他反馈类弹窗

  四、小结

  在B端web设计中,弹窗的视觉样式可以是多种多样的(本文也并未过多涉及这方面),但从功能上来说,无外乎以上所述信息展示、任务、反馈三大类型。一般来说,如果可以替代,我们应慎重和少使用弹窗。但了解弹窗的各种应用场景,可以方便我们更好地权衡设计方案:是否可用弹窗?是否只能用弹窗?用二级页面、浮层、甚至toast提示是否会更好……从另一个角度来说,了解弹窗的各种功能,对于我们梳理和规范现有产品框架、制定和完善设计交互及视觉规范来说,也是大有裨益的。

  日常设计小结,如有不足,欢迎拍砖指正!

  本文由 @Rindy 原创发布。未经许可,禁止转载。

  题图来自 Unsplash,基于 CC0 协议

扫一扫关注A5创业网公众号

扫一扫关注A5创业网公众号

责任编辑:西瓜

相关文章

  • 网易设计师:6个技巧让用户参与到你的设计里

    这篇文章讲述了我对产品设计的一些个人理解和看法。用户参与设计,指的是在有限的设计引导下,要给予用户或是体验者主动的情绪引导和操作体验,使设计不会成为剥离用户而孤独的存在。双方结合并有了相互影响后,会使我们的设计更有立体感,也更有拓展性。

    标签:
    产品设计
  • 对创业者和产品经理而言,如何训练你的洞察力找到真正的用户痛点?

    产品要能找到用户需求,从为用户解决问题出发来设计,才能赢得市场。不过用户需求是要经过调研的真正需求,而不是你自己想象出来的。下午我来分享“如何发现用户需求”。相信做产品的人都想找到风口,成为被风口吹来的猪。真正让创业者疯狂的是什么?是不得其道,是用户需求难以寻找。

  • 从三个角度分析提示设计

    稍微复杂一点的产品都少不了提示功能,这种全局模块即需要整体解决方案,也需要具体运用规则。以手机App为例,提示种类很多(操作成功、操作失败、收藏点赞、二次确认…);展示形式也很多。我最近对这一方面有所思考,结合外网资料整理了一套提示设计的方法和建议。为了方便解释,下面会以移动端为例,但是核心的方法理

    标签:
    产品设计
  • 以改良弹窗为例:教你如何改良你的设计

    每当你看到一个界面时,你的大脑其实都在欺骗你。无论你如何努力使事物看起来一致——旁观者的眼睛往往不会同意,因为我们在现实生活中是通过大脑来感知物体的。所以,作为设计师,我们唯一的选择只能是反向「欺骗」用户的大脑(译者注:在视觉上)。在本文中,我将向你展示一个设计组件需要从哪些地方去做改善,一起来看看

  • 两个层面分析:抖音的交互设计

    抖音首页有【推荐】、【附近】两个Tab,推荐的算法据说是采用【今日头条】算法,在播放率和播放时长上进行权重分析。如果在附近被看的次数多播放时间长,就会推荐给更多的类似用户,通过这样的数据分析。若推荐出去之后播放次数和播放时长是增加的,那就会不断良性循环;若播放次数和时长是减少的,则恶心循环至冷藏!回

    标签:
    抖音
    产品设计
  • 如何设计一个好LOGO?LOGO设计网让LOGO设计不再难!

    LOGO是让品牌呈现在用户面前的最好形式,通过LOGO,用户可以快速地识别公司和品牌,因此拥有一个让人过目难忘的LOGO是品牌营销的重要方式。LOGO的形状、颜色、形式,每一个元素都直接影响人们对他的印象,那么什么样的LOGO才能深入人心,起到很好的宣传效果呢?

  • 如何优化操作流程,提升用户体验?

    关于提升用户体验的方法论非常多,其中一个比较常见的就是简化操作流程。我们对此非常熟悉,但是我很少看到有文章系统的去论述该如何去简化操作流程。这里我就做一个简单的分析,如果大家看完之后有所收获或启发,不胜荣幸。

  • 在设计APP签到功能的时候,我在想什么?

    什么是签到?让我们先从表象理解:签到就是用户每天在APP内使用此功能,并得到系统给予的奖励。签到功能,用好了能够有效的促活,用不好的话只是一个增加应用包大小的鸡肋功能。怎么设计一个高效的签到功能呢?这篇文字记录了我的思考,希望能对你有启发。

    标签:
    app设计
  • 抖音播放主页交互设计分析

    众所周知,交互设计是产品经理的必备技能,对一款产品进行交互设计分析,也是产品经理的日常工作之一。那么对于互联网产品来说,我们应该如何对其进行交互设计分析?选取的维度,关注的重点又有哪些?下文我以抖音播放主页为例,说说我的看法。

  • 交互设计师在全流程设计中,有哪些注意事项?

    在整个设计过程中,我们有标准化的设计流程。据我了解:很多大的设计团队流程都是一样的,这里不做过多讲解。在具体的项目中我们经常会碰见各种各样的困难,我们如何克服困难帮助业务成功?如何在协同业务的全流程中利用体验的视角洞见机会,让设计的价值最大化至关重要?

    标签:
    交互设计师
  • 理财产品中,体验金的设计与分析

    理财产品,从推广营销活动开始,用户一层一层流失掉,到最后,投资的用户所剩无几,转化率可想而知。这也是困扰从业者普遍的问题。如何使新用户成功转化为投资用户,成为关键一环。众所周知,在这个线上流量枯竭的时代,互联网理财产品如今获取一个真实有效投资用户的成本相当高。尤其是和金钱挂钩的理财产品,与用户建立信

  • 在设计过程中,有哪些不容忽视的交互设计要点?

    本文总结了一些在交互设计中重要的理论要点,并针对各理论要点展开描述相应的设计策略。主要涉及视觉感知、认知摩擦、认知负荷和情境认知四个方面。视觉是人类认识自然、了解客观世界的重要手段,同时也是理解人类认知功能的突破口。当人们开始观察外界物体时,视觉系统将剌激以图像的方式传递到大脑,并通过大脑的视觉皮层

    标签:
    交互设计
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?

    在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常常会呈现出更为独特的氛围,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。想要借助深沉的色调来创造情绪相对

  • 浅色还是深色?教你选择合适的界面配色方案!

    我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于建议,而且是以事实、经验和知识为基础的。今天我们要讨论的是UI设计师在工作中经常会遇到的一个项目:对于用户界面来说哪个配色方案更好,是浅色还是深色?

    标签:
    界面设计
  • PC端表单设计的研究:如何设计一个优秀的表单页面

    最近身边的一些小伙伴,总会遇见B端设计工作,对于这种偏后台设计的B端设计,总会有大量的表单设计需要做,结合以前自己也有过不少表单设计的工作,在这里给大家分享一下自己对于PC端表单设计的研究,聊一聊表单在PC端中的运用。

    标签:
    表单设计
小程序

热门排行

信息推荐

扫一扫关注最新创业资讯