06
B营销设计破局打法(一)
刘伟 刘伟
B类业务难做是啥原因?
B类业务难做,轮番设计大大小小的营销活动后,有点沦为资源方了,价值感、成就感弱……想做点创新写个专利,但是无从下手…… -眼看着人工智能好能干,都会做营销banner了,感觉到威胁和迷茫…… 而大公司对设计师的要求却在不断提高, 以阿里UED团队设计师价值模型要求为例:在第一层协同业务基础上,要第二层:为业务做增值、第三层设计赋能、驱动业务,设计价值放大。
二、设计师的价值源于“设计赋能对商业贡献”的程度
1、放大思考的格局、明确一个设计师成长的方向。 首先设计师不要仅限于眼前的需求,不要孤立的去做一个功能或者产品。“就事论事”能把需求做完了,但一定不会把事情做好了。 我把这种能力对应到优秀设计师能力模型上,做了一个更形象化的阐释,便于大家理解:
1-2
基于用户体验做好设计——站在业务角度做好产品——站在全站角度做好业务——站点行业或领域角度去做创新,越往上进阶,着眼点越宽,需要平衡、取舍的因素越多,也越考验设计师全局思考的能力(功能思维——产品思维——商业思维)。设计师跳出局来,站远一点,思考更全局些,很多事情就有了不一样的角度,因此越往上层走,挖的越深,价值也越大,从UI越靠近UX了。
二、了解B类业务
广义的营销设计实际包含两块:营销活动设计、营销型业务的产品设计(两类在目的、关键指标、解决思路等等上都非常的不同)。
1-3
B类业务与C类相比有自己的特点,包括行业差异、用户差异、商业模式的差异种种; B类业务涵盖生产端的原材料生产、流通、加工、多级批发,多级长链路;而C类业务主要指末端零售商、个人到消费者;
t-1
B类电商也有各自不同的分类和定位:是做垂直行业还是综合行业、是外贸还是内贸??
网站各子业务也有较大差异,服务不同的用户群,知己知彼才能更好的抓住自己手头业务的重点; 可以通过调研搜集、整理核心用户群的角色模型、核心需求、行为特征。
1-13
自50年代首个营销理论USP(独特价值主张)推出,其精髓是利用广告,以差异化角度进入顾客心智;如果某品牌已占据了用户心智,那么同样定位就很难再进入用户心智。
-60年代广告非唯一,从管理决策的角度来研究营销,去除企业不可控的因素,归纳了最为经典的4P理论,让营销成为了企业管理的一部分。后面在此基础上又扩展细分了更多理论。
-80年代鉴于传播渠道扩展,提出整合营销,核心思想是将企业与市场营销相关的一切传播一元化;传达统一的信息Speak With One Voice;把广告、促销、公关、直销、CI、包装等都纳入营销范畴;
-移动时代营销以价值为导向,营销是驱动力,通过创造价值、宣传价值、传递价值来赢得客户、留住客户并拓展客户是其首要任务。 2013年,美国市场营销协会(AMA)给营销一个最新定义:在创造、沟通、传播和交换产品中,为顾客、客户、合作伙伴以及整个社会带来价值的一系列活动、过程和体系。
价值驱动已经给很多善于经营的品牌带来巨大的成功,有2个经典商业案例:星巴克、无印良品,通过探索和发现自我价值,创造了全新的产品和商业模式,成为“品类”而非“品牌”的开创者。
无印良品的原研哉说:无印良品追求的不是“这样好”而是“这样就好”,推崇可接受的质量。倡导以理性的视角来使用资源的哲学、一种新生活方式。
星巴克倡导,人们有“第三空间”的需要:“咖啡的消费很大程度上是一种文化层次上的消费,文化的沟通需要的就是咖啡店所营造的环境文化能够感染顾客,让顾客享受并形成良好的互动体验。”强调营造一种温暖而有归属感的文化,因此星巴克脱颖而出,成为特立独行的一个咖啡品牌。
将上面美国市场营销协会的营销定义进一步拆解,结合B类营销的特点,我们可有更多想象的空间:
1-4
此时重新审视之前那个营销效果公式,可以拓展更多关系因素:
原来:营销设计=提升点击率+氛围+影响力/品牌
UX思维:营销设计=(流量曝光率)点击率转化率客单价+口碑+关系-成本
这8个常用关键维度可以帮助快速挖掘设计的机会点:
-流量:吸引更多流量,开辟传播媒介,丰富传播形式等等;
-曝光率:将重要的内容放到更好的位置、流量更多的路径上,增加被曝光的机会;甚至优化轮播展示逻辑,增加曝光率等等;
-转化率:优化逻辑,将对的内容展示给对的人;合理引导用户预期;
-客单价:合理引导用户关联采购,优惠阶梯信息的展示、利益传达等;
-口碑:借助各种营销方式(内容营销、利益链传递等)形成口碑,扩散口碑;
-关系:在B类领域,善借助新颖、互动的营销方式连接并拓展关系、维系关系、强化关系甚至形成联盟,以达到最后巩固关系的目的;
-营销成本:在制作环节能高效利用工具和新技术,低成本的制作营销素材、配置营销活动、传播活动内容,都可以起到事半功倍的效果。
三、升级设计思维
再来看看设计思维:从设计思维到设计策略、到设计方法、再到设计方案,这其实是一个层层收敛,逐步细化落地,最终执行拿到结果的过程。其中最根本、最具影响力的就是设计思维。
7-1
5种技巧提升移动端用户体验
徐燕 徐燕
不谈APP,即使是浏览网页,大部分用户也已经是依靠移动端设备来进行了。所以,无论你是网页设计师还是在研发APP,为移动端的用户设计稳定、可用的用户体验,应该是你份内的事情。当然,由于如今UI/UX设计的成熟,各种最佳实践使得设计师不用再对一些常见的设计模式从头开始摸索,而今天我们所聊的提升移动端体验的技巧,也是这样探索出来的经验总结。
26
一、简化导航
相比于曾经所流行的大型导航设计,移动端设备和精简的导航更搭。当用户在使用移动端设备的时候,注意力和时间通常都是碎片化的,当他们打开应用和网站的时候,希望尽快找到想要的内容。
所以,在设计移动端APP和网站的导航的时候,尽量根据分析和实际状况,保留最常用的的几个导航选项即可。
这样的设计一方面能够节省屏幕空间,而且导航选项的触发区域也可以设计得相对更大一些。
至于汉堡图标和弹出式菜单,具体用法见仁见智,可以根据实际状况灵活处理。但是有了汉堡图标这一约定俗成的菜单标识,用户可以快速理解它的含义,并且意识到背后还有一个弹出式的菜单。
2-3
Ebates 这款APP 就使用了两级菜单的设计,首先最常用的导航选项被做成标签页置于页面顶部,另外一个就是右上角的书签式菜单(心型+汉堡图标)。整个设计确保了功能性,足够简单,不会让用户觉得复杂,也可以轻松找到他们想要的东西。
二、多考虑手势和触感
移动端的交互和桌面端是截然不同的,而你的UI和UX设计要有意识地为移动端进行适配。在这个过程中,手势交互是很重要的组成部分,设计师应该充分利用手势,帮助用户更快更高效地完成交互。
常见的手势包括: 1、点按,双击;2、按压;3、长按;4、托拽;5、缩放;6、滑动
移动端的手势交互的地位相当于桌面端的点击交互。
t2-5
不过当你在思考手势交互的时候,别忘了搭配相应的触觉反馈。在我们日常使用移动端设备的过程中,常常会借用震动和力反馈来强化交互体验。而这种触感的设计,精髓在于尽量微妙一点,确保能让用户感知到反馈,又不会太过吸引人注意。触摸界面越来越多,用户是期望从中获得积极响应的。
三、创造对话
人们始终是希望通过语言交流来沟通的。也正是这种需求,使得对话式UI和聊天机器人能逐步走到台前,成为一种流行趋势。所以,当你的移动端UI当中,拥有让用户可以即时聊天的可能性的时候,你可以借用对话式UI 来提升用户体验:
t2-6
在你的界面当中加入更加触动人心的文案。无论是成段的文本,还是界面元素里的微文案,都可以通过更有触动性的文本来创造对话的感觉。就像 WTFWeather 这个应用一样,从文本到标签都采用的是对话式的表达,在为用户推送信息的时候也尽量营造出对话的感觉。 使用聊天机器人和对话界面来和用户进行沟通。聊天机器人可谓是 24小时在线的客服,他们帮助用户解决问题,也能从某种程度上提升客户的忠诚度。 将语音交互集成到设计当中来。Siri 、Cortana 和 Alexa 几乎是家喻户晓的人工智能语音助手了,将它们加入进来,让对话式界面更加强大。
四、动画化
如果你仔细观察近年来的网页,会发现动画特效已经无处不在了。动画效果能够让页面更加自然,更加漂亮,也更加引人入胜。动画不仅能够吸引用户关注,而且能够帮助用户展示如何更好的设计和交互。
t2-10
Google 地图 当中就集成了少量的动效,它们并不引人注意,但是让整个应用更好周到、完整。在之前 Nick Babich 的文章当中,他总结了动效的三个关键用途: 呈现系统状态:使用动效来显示加载状态,内容刷新,推送通知 用户导航和过渡:使用动效来帮助用户了解内容切换,件视觉层次,呈现状态的变化 用于视觉反馈:使用动画帮助用户确认他们之前的操作完成了。
五、善用新用户引导流程和表单
相比于网页,APP当中的新用户引导流程是相当关键的。 绝大多数的应用因为其中的功能、服务的独特性,设计师会在用户初次打开应用的提供快速入门的教程,引导用户熟悉其功能。这一点在游戏类应用中尤其普遍。 如果新用户引导教程做的足够有趣,很容易提升用户的忠诚度。确保引导教程足够简单,并且能够给用户以帮助,而用户看过之后,如果还能回过头来再次查看,就更好了。 移动端网站则不同,最大的问题通常不是新用户引导而是注册表单和登录表单。移动端设备上,用户对于表单的易用性其实非常的敏感,用户不会喜欢又臭又长的表单和复杂的字段,所以,简化移动端网页的表单,能够更好地提升转化率。
76-1
看看上面的GoodRx,表单的设计就足够简单。 注册表单不应复杂。让用户输入邮箱注册,用户名、邮箱、密码三者绑定,登录的时候用户名和邮箱通用,这样能够便捷不少。 当然,还有更为便捷的思路,就是使用通用的社交网络站好来登录注册,这样对于用户而言就更加方便了。
总结
移动端用户体验要如何构建,对于如今的设计师而言,是很日常的问题了。激烈的竞争中,产品的差异往往是透过各种细节来呈现的。创建一套易用的用户界面,结合良好的用户体验,在细节上精细打磨,才能让用户真正留下来。
提升用户体验的7大微交互
孙蕊 孙蕊
众所周知,我们总是依据封面来判断书的好坏,聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引,但如何一直黏住他们呢? 要试着回答这个问题,所有一切都指向人本设计,其中用户是最主要的考量。以人为本:你的应用应该使用日常用语,包括情绪、口语,外观还要有一丝“诱惑力”。界面应当成为你的好朋友,时刻准备给出建议提升你的体验,让你会心一笑。
现在揭幕:是微交互在起作用。精确的说,这主要是界面附带的交互动画,使它更具表现力。优秀的动画能够: 1.表达状态并提供反馈 2.提升直接的操纵感 3.将操作结果可视化 在用户体验中,关键是你如何对待用户,还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈,表达了当前运行状况。无论背后逻辑有多么复杂,都能使界面更亲切。
一、显示系统状态
面就应当在背景处显示图形,反映完成百分比。或是播放声音,让用户了解当前发生的事情。这个原则也关系到文件传输:不要让用户觉得无聊,给他们看进度条。即使是不太令人愉快的通知,比如传输失败,也应该以令人喜爱的方式展现。让你的用户微笑!
simg-8
s3-3
二、如何平衡广告变现和用户体验?
广告变现和用户体验,这看起来互相矛盾的双方,却又是一对形影不离的CP。今天,包括谷歌、Facebook、阿里巴巴、腾讯在内的全球最成功的互联网公司,以及上面提到的微博和小米,都把广告变现当作了重要的收入源。同时,它们也无时无刻不在思量如何平衡广告变现与用户体验,以实现持续稳健的发展。
uu
yy
yy-5
三、未来广告变现和用户体验将呈现哪些新模式?
需要明确的是,好的用户体验是一个不断变化的东西,很多过去流行的广告模式在今天OUT了,同理,今天时兴的广告模式,也会随着时间的推进而变迁。要维持上佳的用户体验,必须与时俱进、随时求变。在这个移动广告发展与探索的阶段,腾讯社交广告下的朋友圈广告似乎已经找到了一条适合自己的路径。
yy-6
yy-7
yy-8
三、未来广告变现和用户体验将呈现哪些新模式?
需要明确的是,好的用户体验是一个不断变化的东西,很多过去流行的广告模式在今天OUT了,同理,今天时兴的广告模式,也会随着时间的推进而变迁。要维持上佳的用户体验,必须与时俱进、随时求变。在这个移动广告发展与探索的阶段,腾讯社交广告下的朋友圈广告似乎已经找到了一条适合自己的路径。
yy-9
yy-10
三、未来广告变现和用户体验将呈现哪些新模式?
需要明确的是,好的用户体验是一个不断变化的东西,很多过去流行的广告模式在今天OUT了,同理,今天时兴的广告模式,也会随着时间的推进而变迁。要维持上佳的用户体验,必须与时俱进、随时求变。在这个移动广告发展与探索的阶段,腾讯社交广告下的朋友圈广告似乎已经找到了一条适合自己的路径。
yy-11
yy-12
yy-13
三、未来广告变现和用户体验将呈现哪些新模式?
需要明确的是,好的用户体验是一个不断变化的东西,很多过去流行的广告模式在今天OUT了,同理,今天时兴的广告模式,也会随着时间的推进而变迁。要维持上佳的用户体验,必须与时俱进、随时求变。在这个移动广告发展与探索的阶段,腾讯社交广告下的朋友圈广告似乎已经找到了一条适合自己的路径。
yy-14
yy-15
yy-16
yy-17
yy-19
另外,如果受众没有与广告信息产生互动,那么这条广告在24小时内就会消失在用户的朋友圈信息流中。除此之外,消费者还可以主动点击右上角的“不感兴趣”,剔除那些不被欢迎的广告,而这种用户的主动反馈也能很好地起到增强体验的目的。 线上广告发展至今,“原生”这个词反复被提及,大多数平台都能做到“形式原生”,即广告的外在包装形式与其他资讯别无二致;部分平台能做到“内容原生”,即精心安排的内容不会让消费者产生排斥的心理;但极少有平台能做到“意图原生”,即直接满足消费者此刻的需求。 “广告,也可以是生活的一部分。”这是微信广告的slogan。对于具备庞大数据量和技术实力的腾讯而言,这也成为了它努力达到的目标。
小小网页搜索框设计创建大大用户体
姚健 姚健
网页搜索框设计是一个站内给用户直接到达目的地的通道
网页搜索框设计是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。使用搜索时,用户可以自己掌握浏览该网站的路径,没有必要根据网站的页面设计来决定浏览页面的先后顺序。另一个情况是,当用户浏览网页到一半不知道接下去该干什么的时候,往往会使用搜索直接去找到自己想找的内容。
04
两种类型
1、即时搜索: 结果立即显示在用户界面上,不需要按钮,放大镜仅显示为一个图标,输入时立即搜索 2、常规搜索: 通过用户点击搜索按钮后才开始执行搜索
何时使用
1、目标对象很难找到时 a) 对象很多时;如从Mockplus的图标库中需要找到某个图标时。 b) 可能的目标对象不在同一个位置时;如在磁盘中查找某类型文件时。 c) 数据很难找到时;如在一篇长文本中搜索某个字符串时。 2、需要查找特定的内容时;比如我们在淘宝中搜索匹配某种特征的商品时。 3、需要的结果不能在5秒找到时。
设计理念
1、它是界面的一部分,所以要放在一个显眼的位置,要容易找到; 2、在同一应用中,它们应该有统一的外观; 3、它的功能应该是有效的,它的结果应该是准确的,它的速度应该是尽可能快速的。
搜索框设计的8个技巧
1.使用放大镜图标 根据定义,图标是对象,动作或想法的可视化表示,并且有几个图标是用户记忆最深刻的,也是通用的。放大镜图标就是其中之一。即使没有文字标签,用户也可以识别放大镜图标的作用。
7-1
2. 将搜索框放在用户希望找到的地方
如果搜索对于你的应用或网站来说是重要的功能,那么搜索框必须放在显眼的位置,让用户一眼就能找到。 研究发现,搜索框放置的最佳位置是你网站上每个页面的左上角或右上角,用户可以使用常见的F形扫描模式轻松找到它。理想情况下,搜索框应该完美匹配网站的整体设计,并在用户需要时轻松展现。
8-1
直接显示完整的搜索框很重要,因为默认只显示搜索图标(点击图标才展开搜索框)的话会使搜索功能不那么明显,而且增加了用户的交互成本:
tt-2
3.为搜索框提供搜索按钮
搜索按钮可以帮助人们了解还有额外的触发操作 - 即使他们通常使用Enter键。
tt-1
提示: 1)提交按钮的尺寸大小要合适,以便用户不必非常精确地移动鼠标位置到它上面。较大的可点击区域会使得按钮本身更容易被发现和点击。 2)使用Enter键或点击搜索按钮都应该能执行搜索操作才对,毕竟许多用户仍然有点击搜索按钮来提交搜索的习惯。
4.将搜索框放在每一页上
用户在每个页面上都应该能获取搜索框,因为如果用户找不到他们要找的内容,他们往往会自然而然地想要尝试使用搜索功能来进行查找,他们才不关心自己当前是在你网站的哪个地方(以及该不该有搜索)。
5. 搜索框要足够简单
如果你设计一个搜索框,请确保它看起来像一个搜索框,并尽可能简单的使用。根据可用性研究,默认情况下没有显示高级搜索选项,这样更加显示用户友好。高级搜索选项可能会混淆将尝试使用它的用户。
tt-4
6、将搜索框放在用户预期找到的位置
如果因为搜索框不够突出、不容易察觉,用户还得花费精力去找它,那这个设计无疑是不够友好的。 下面的图表来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究:它显示了参与调查的142名参与者针对网站中的搜索表单的位置的预期情况。研究发现,对于用户来说,搜索框最佳的位置是网站上每个页面的左上方或右上方——用户可以使用常见的F形浏览模式轻松地找到它。
tt-5
该图说明了参与者对搜索框所处位置的预期情况。 右上方仍然是用户希望找到搜索的第一个地方。因此,最好将搜索框放在页面的右上方或中上方,以确保用户能在预期的位置找到它。 提示: 1)理想情况下,虽然搜索框在用户需要的地方应该能轻易出现,但是搜索框的设计也应该完美地契合网站的整体设计效果。 2)内容越重的站点,你越希望搜索框显著。如果搜索对你的网站至关重要,请使用大的对比度,以便搜索框和图标能从页面背景和周围元素中脱颖而出。
7. 搜索框尺寸大小要合适
输入字段太短是设计人员常见的错误。当然用户可以键入长查询,但只有一部分文本可见,部分文字被隐藏,这意味着可用性差。因为用户无法轻松查看和编辑其查询。实际上,当搜索框能够输入的文本有限时,用户被迫使用短的文本进行查询,这样就不能精确的查询。如果输入字段根据其预期输入进行大小调整,那么它们更容易阅读并给用户提供良好的用户体验。
经验法则是具有27个字符的文本输入(它可以容纳90%的查询)。
tt-6
Amazon使用长度合适的搜索框 提示:不妨考虑使用扩展型的搜索框,它会在用户点击时展开文本输入框。这种做法一方面节省了屏幕空间,同时仍能给予用户足够的视觉提示以便他们快速找到并执行搜索。
yi-3
8、使用自动检索匹配机制
自动检索匹配机制可根据用户输入的字符进行预测来帮助用户找到一个可能匹配的查询条件。 该机制并不是为了加快搜索过程,而是为了引导用户并帮助他们构建他们的查询条件。普通用户在构建查询方面往往会有困难:如果他们在第一次尝试查询后没有获得满意的结果,后面的查询也会很难顺利,事实上,他们常常就会放弃。而当自动检索匹配机制运作顺利时,它们就能帮助用户将查询条件表达的更加清楚。
Google 搜索自2008年起就已经开始应用该机制,现在已经相当成熟。由于用户常常会多次搜索相同的内容,因此通过记住搜索记录,Google既节省了时间成本又能创造出更为便捷高效的搜索体验。 提示: 1)确保自动检索匹配机制是有效的,若设计不当,就可能会混淆和分散用户的注意力。因此,不妨使用自动更正拼写错误、根词识别和文本预测等做法,来改进这种机制发挥更好的作用。 2)你应该尽快提供自动检索匹配,例如在用户输入第三个字符后就提供有效匹配以减少用户的输入成本。 3)匹配的查询条件不要多余10个(而且不要显示滚动条),以保证信息不会变得过载。 4)允许使用键盘在匹配的条件列表中导航。一旦用户在最后一个项目中接着向下滚动,他们应该重新返回到列表的顶部。另外,Esc 键应该允许用户退出列表。 5)突出输入部分跟匹配部分的差异(例如,输入文本具有标准字重,而匹配部分使用粗体字重)。
yi-4
9、明确告诉用户可以搜索哪些内容
在输入框中显示一个搜索查询的示例条件是一个不错的做法,这样能够向用户表明他们究竟可以应用该搜索框搜索哪些/哪类内容。 如果用户可以搜索多个条件,则使用输入提示模式来向用户说明(例如,下面示例中的IMDb。 HTML5 技术使得我们可以很轻松地在输入框中写明作为占位符的提示文本。提示: 提示部分要限制在几个字之内,否则反而会增加用户的认知负担。
yi-5
结论
对于创建一个重内容的应用程序或网站而言,搜索理应作为一个基本的操作和关键要素。即使小幅的改进(例如使搜索框长度更合适或者指明可以搜索哪些信息)都可以显着增加搜索的可用性以及整体的用户体验。
弹框设计不是想象的那么简单
李旻华 李旻华
“搜索是移动应用上的一个主要功能,甚至有些人认为,搜索是仅次于打电话的最常用的手机功能”。而我想说的是,在这个移动互联网的时代,电话已经很大程度上被微信语音电话、视频等取代了。搜索功能的使用已完全超过了打电话,我们每天打开着各种应用,不知不觉的使用着搜索。
我们日常所说的弹框是一个很笼统的概念。所有的对话框、浮层、提示条我们都习惯性的称之为弹框,其实弹框我们可以分为两种:模态弹框和非模态弹框
gi-1
一. 模态弹框
模态弹框和非模态弹框最大的区别就是是否强制用户交互。模态弹框会打断用户的当前操作流程,用户不在弹框上操作的话,其余功能都使用不了。从这方面,我们可以看出来模态弹框的优缺点都十分的明显。 o优点:可以很好的获取用户的视觉焦点 o缺点:打断了用户的当前操作流程。模态弹框属于一种重量性反馈,一般用于用户进行重要的操作。常见的模态弹框种类有对话框(Dialog/Alter),动作(Actionbar/Actionsheet/ActionView)和浮层(Popover/Popup)。因为现在iOS和Android很多组件都是通用的。
对话框
对话框一般用于用户进行一项很重要或者有风险的操作,这时会弹出一个对话框给用户提示信息,用户根据提示来进行判断。一般出现在屏幕的中间位置,会对界面的主要内容造成遮挡。
gi-2
目前来说对话框的设计样式繁多,用户可以进行信息录入,也可以用于营销宣传。
gi-3
动作栏
动作栏可以看成是对话框的一个加强版,因为无论是Alert还是Dialog一般都只有两个按钮。而动作栏可以提供多个功能按钮,而且展示的样式比较多变。
6s
但是也有例外,有的动作栏只有两个选项。以网易云音乐为例,你要删除歌曲时,「确认删除」提示就是通过动作栏来完成的(如左图)。
其实这里使用对话框也是完全可以的(如右图),网易云音乐的设计师在这里使用动作栏的理由我不得而知。但是我个人猜测是,动作栏位于屏幕下方,相对来说对界面内容的遮盖会小一点。
d9-12
浮层
浮层是用户点击控件或者界面某一区域浮出的半透明的临时视图。浮层的样式跟动作栏很相似,都可以向用户展示多个功能选项。但是浮层可以出现屏幕中的任何位置,能够给用户更具有指向型的提示。
s4-6
非模态弹框
与模态弹框相比,非模态弹框最大的区别是不强制用户交互,也不会弹出半透明背景层,非模态弹框停留一段时间后会自己消失。所以相对于模态弹框来说,非模态弹框属于轻量型反馈,不会对用户造成太大的干扰。常见的非模态弹框有Toast和snackbar。
gi-4
Toast主要用于用户完成操作以后,告诉用户操作结果或者状态的变更。Toast其实是属于Android的组件,iOS里有一个相类似的是hud,最常见的就是音量调节提示。但是现在iOS和Android的界限不断被打破,toast现在也被广泛应用于iOS界面设计中。如果我们去看Android给的设计规范,会发现Toast有以下几个特点: o只出现在屏幕底部 o只能放文字 o非模态弹框
gi-5
其实真实的Toast是可以出现在屏幕的任何位置的,而且可以加icon,甚至连背景层颜色都能变。所以说我觉得设计师不仅要去看那些设计规范,还要花点时间跟开发沟通一下。
Toast的优点是不会打断用户当前的操作流程,属于轻量型的反馈方式。缺点是容易被用户忽视,而且不适合展示过多的信息,可能在用户读完之前就消失了。为了提升信息的可读性和增加样式美感,现在Toast都会采用文字加icon的组合样式。
Snackbar
Snackbar一般是由文字和功能按钮组成的,用户可以点击按钮交互,即使用户不点击Snackbar也会自动消失,一般位于屏幕下方。
虽然snackbar属于非模态弹框,但是它也有模态弹框的一些特点。例如Snackbar也有按钮来供用户交互,此外Snackbar一般会出现在界面下方,这点又和动作栏中的Action sheet很像。
d19
多态按钮
此外多态按钮的使用也可以帮助我们解放弹框的压力。例如,支付宝的支付界面,立即支付按钮可以跳转到付款成功的状态,这时候就没有必要再用弹框给用户提示了。
gi-8
总结
对于模态弹框来说在不考虑信息录入情况下,对话框适用于用户进行判断操作,而动作栏和浮层适用于用户进行选择操作,而浮层相对于动作栏更具有指向型。非模态弹框偏重信息提示,模态弹框既可以信息提示也可以供用户交互;Toast是轻量型的弹框类型,Snackbar集众家之所长。因为任何弹框都会对用户造成干扰,即使是最轻量型的Toast。从用户体验的角度来说,进行一个操作流程所受到的干扰肯定是越少越好。所以根据不同的页面使用适合的弹窗才是关键。
ZOL第六期UXD月刊
ZOL第六期UXD月刊
营销设计破局大法、提升移动端用户体验5种方法