• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 提升细节体验!移动应用的弹窗设计指南

提升细节体验!移动应用的弹窗设计指南

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互控件,弹窗设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

@可乐橙_ColaChan?(译者):弹窗、对话框,随你怎么称呼,这些小窗口出现在屏幕上从来都不是理所当然。虽然它们是你应用中一些相对较“小”的元素,却扮演着影响用户体验的重要角色。

一方面,它们可以帮助用户度过应用内的旅程。另一方面,处理不当时,它们也会使用户感到挫败。

有幸的是,弹窗比较成熟,容易实现。用适当的手段和规范可以轻易改善它们。我们这篇文章要讨论的就是这个。

由于并非所有弹窗形式都相同,我们把它分解为5种常见类型,并且总结了每一种的优化“准则”。遵循这些指南,你一定可以使你的弹窗更好地达成目标。

阅读之前可以看看看弹窗的种类:《实用干货!UI设计师需要了解的 APP弹窗体系》

“推荐给朋友”和“为应用打分”弹窗

你当然希望用户量增长、提升好评率、增加病毒式传播的可能。谁不想呢?但是你要了解,多数用户不会向朋友推荐你的应用,或者给它打分,除非他们觉得这么做会得到有价值的回报。

Uber的奖励弹窗

“但是,推荐给朋友是如此简单轻松的任务啊!为什么用户不会大发慈悲,帮助一款小软件成长呢?”很不幸,现实没有这么简单。

注意我们刚才用的词是“任务”。这就是多数用户看待“推荐给朋友”和“为应用打分”的方式——看成任务。互换原则就在此时发挥作用。大概来说,就是你得给予用户某些东西,然后才能向他们索取。可以是通勤应用中的免费出行,或者是某种总体价值和乐趣。最好对这些弹窗使用A/B测试,让它们以不同时机出现在用户旅程的不同位置。这能让你更好地获得重要的统计数据,了解最终应该在何时何地放置弹窗。

同时也一定要确保,从你的应用中转到App store、社交媒体频道、或消息平台的过程尽可能流畅。获得一个推荐链接对于用户真的是“简单”的事情吗?在Wi-Fi和移动网络环境下,整个流程的运转有何差别?有许多重要因素需要考虑。花时间分析和优化这两种弹窗,你肯定能收获更高满意度、活跃度和更多新用户。

记住,聪明地索取,你才会有回报。

“推送通知”弹窗

推送通知是一个超有价值的手段,能使用户保持投入、反复使用。对许多用户来说,推送通知已经成为了他操作一款应用的主要媒介。不必再打开应用,用户通过推送通知满足他们大部分需求。于是,获取和保持向用户发送通知的权利,应该是用户粘性与留存策略中的一个重要方面。

在Android系统中,方式很直接:推送权限请求会作为AndroidManifest.xml的一部分,用户在安装前会看到所有需要获取的权限。

在iOS上就是另一回事了。iOS的权限弹窗必须由应用内的代码触发,会向你的用户展示一个这样的弹窗:

如果用户点按了“不允许”选项,对你来说就相当于玩完儿了。除非用户手动进入权限设置,否则拒绝权限是不可逆转的。所以让你的用户按下“允许”权限至关重要。

我们推荐两种方式,来尽可能保有最多的通知推送许可:

  • 尝试创造一个你自己的、应用自带的权限弹窗,让你评估用户接受推送通知的意愿。这会让你更加理解用户的行为和偏好,把权限获取留到某个用户真的愿意点“允许”的时机。
  • 仅仅在你认为最相关和最有说服力的时候请求权限。在此时此地,真的有需要获取通知权限吗?在权限请求提示中,借助当前环境清晰地向用户作出解释。

数据权限弹窗

推送通知权限和数据获取对话框一脉相承。同样,对于这些特殊弹窗的用户体验,我们都是在讨论iOS应用。数据权限弹窗包含对位置、日历、联系人信息、提醒事项和相册的请求。移动开发者必须小心翼翼,因为请求数据权限不是一系列勾选框那么简单。

苹果在他们的权限请求指南中提到:“虽然人们赞赏移动应用获取个人信息所带来的便捷,但他们也希望能掌控自己的私密数据。例如,人们喜欢自动给照片标记上地理位置,或者找到附近的朋友,但他们也想要一个能关闭此功能的选项。”

要使这类弹窗保持相关、显而易见。别设计一个请求用户地理位置的计算器——别这么做。

使用苹果在弹窗中提供的文字位置,描述你的应用为何需要这些信息,即使你自己认为原因显而易见。在某些特定的、相关的用户操作之后,再请求适合的权限,也是一个好方法。比如说,用户使用你的应用创建了一段视频,并且想要分享给朋友。只要用户点了“在Facebook上分享视频”按钮,这就是弹窗请求用户社交媒体账号权限的绝佳时机。用户更容易接受权限,因为它提供了清楚的解释,“要想达成A,必须先完成B”。

“错误”弹窗

除了向用户索取权限,弹窗也是开发者向用户表达信息的一种重要手段。尤其是关系到应用内的错误。

世事无常,总有错误出现。错误中的错误是最不该发生的。这么说是什么意思?就是说你的弹窗不能让用户感到迷惑,使得已经发生错误雪上加霜。

我们来举个例子,比如用户的收货地址写得不合逻辑,所以当他们在支付时就会发生“错误”。如果你的弹窗里写着:“发生了错误:支付无法完成”,用户就不得不试图猜测错误的原因。相反,你应当利用这个时刻告诉用户为什么错误会发生,收货地址中具体哪一项需要更正。必须要了解,用户任何的猜测和挫败,可能被一个弹窗放大,最终影响潜在的转化。

而且,对于那些需要用户操作的错误,我们不仅仅告诉用户错误发生、该做什么,还需要引导他们前往相关的操作界面。坚持使用清晰的措辞来准确表明操作(抹掉、撤销、前往的我个人信息界面),而不是使用模糊的文案,例如“是”或“否”。

如果应用中发生了技术性错误,你可以利用弹窗来触达用户,告诉他们你正在努力解决问题。这给你的应用增加了一丝人性,同时向用户表明你在乎他们的个人体验。

挥洒你的才华

我们不是要粉饰任何事情。最终有些用户仍然会看到这样的弹窗:

但也并非人人如此。你有能力轻松改善弹窗,让使用与转化增长。首先,要确保你拥有一个移动应用数据分析平台,例如这个,Appsee,能使你监控它们的表现和用户体验效果。这些洞见可以让你自信满满地迭代、测试和验证。弹窗可能名声不怎么样,但利用深思熟虑的策略,它们会给你的移动应用带来重大转机。

「学好控件进阶高级设计师」

  1. 高手帮你学规范!iOS和Android规范解析之提示框+警告框
  2. 高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  3. 高手帮你学规范!iOS和Android规范解析之底部浮层
  4. 高手帮你学规范!iOS和Android规范解析之按钮

原文地址:Usabilitygeek
译文地址:colachan

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 实用总结!「返回」功能应该怎么设计?
  • 超多案例!超全面的提示框设计总结
  • 春节专题!App 设计系列之提示的概念和设计要点
  • 春节专题!App 设计系列之模态弹窗与非模态弹窗
  • 「这个控件叫什么」系列之输入框/文本框/Text fields
  • 「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡
  • 超实用!如何正确使用控件系列之提示框(Toast)
  • 提升细节体验!移动应用的弹窗设计指南
  • 这两个最常见的交互控件,你知道该怎么用吗?

相关文章

  • 2018-08-23基础科普!重复与突变在产品设计中的应用
  • 2018-08-23实战经验!如何做好网页后台的表单和表格设计?
  • 2017-08-06网页设计中对于图片格式与设计关系的详解
  • 2018-08-23专业科班方法!写给视觉设计师的印刷基本知识和技巧
  • 2018-08-23优设×汉仪字库:适合母亲节使用的中文字体打包下载(个人非商用)
  • 2017-08-06资讯类产品阅读列表的交互设计思考与经验分享
  • 2018-08-23腾讯高级设计师:交互知识树系列之如何积累交互模型?
  • 2018-08-23如何做图标改版设计?来看58 App的实战案例!
  • 2018-08-23网易资深设计师:视觉设计如何继承品牌基因?
  • 2018-08-23如何制作一份优秀的答辩PPT?来看高手的方法!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 设计师越来越多,但为什么APP设计得越来越像?
    • 授人以渔!用一个清晰的思路帮你掌握移动界面标注
    • UCAN 2017回顾!8分钟看完设计大咖们的尖端干货
    • 超实用!6个小技巧帮你打造高转化的网站落地页
    • 探讨百度百科UI的发展趋势
    • 今年最火的全链路设计有实战案例了!滴滴设计团队出品
    • 亿万好评的新版微博小黄脸表情,设计师是这么做出来的!
    • 没经验没思路?最常用的电商Banner 设计方法都在这
    • 上亿人使用的QQ空间萌宠形象,原来是这么设计出来的!
    • 那些很熟悉但又叫不出名字的设计法则:希克定律

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有