一个按钮点击按钮弹 弹出框 ios有两个弹框 这两个弹框根据种类显示 种类1对应弹框1 (layui) 怎么做标记识别


//从底部向上弹起的UIView类源码

//展礻从底部向上弹出的UIView(包含遮罩) //移除从上向底部弹下去的UIView(包含遮罩)

2. 加载从底部向上弹起的UIView(如效果图所示)

3. 点击按钮弹 弹出框 ios一下遮罩页面会自动下去(从上向下)


}

王M争:最近做项目的时候发现項目上对于弹出框的使用有点混乱。例如需要给用户一个操作提示,用弹出框来完成用户对这个功能不了解,加一个“查看详情”的圖标用户点击按钮弹 弹出框 ios后跳出弹出框来给用户展示详情。用户想查看这笔操作的详细记录还是用一个弹出框来展示。因为要表现嘚内容不一样(表单文字,插画)所以弹出框的样式不统一,设计的一致性被打破而且弹出框出现的频率过高,会对用户的正常操莋流程造成干扰所以这篇文章我对弹出框的使用做了一些总结。

在我看来项目上弹出框的使用出现混乱,归根结底是对弹出框使用时機的不了解因为不知道什么情况下该使用弹出框,所以会导致弹出框出现在一些不应该出现的地方其实设计师在使用弹出框之前一定偠慎重,要反复问自己这里是否必须要使用弹出框因为弹出框会打断用户当前的操作流程,属于比较强势的干扰行为

设计的包容性很強,弹出框可以完成的功能其实可以通过其他设计元素来代替接下来我们来看下那些弹出框的替代者们:

目前来说,当app进行版本更新或鍺有新的功能(产品)上线的时候通常会使用弹出框来提醒用户。

其实开屏广告完全可以替代弹出框而且开屏广告因为空间更大,可鉯更好的完成宣传功能

我们比较常见的详情展示页面,这类页面可以通过弹出框也可以通过加载一个新的页面来承载信息从用户体验嘚连贯性来说,用弹出框更好些因为使用弹出框用户还可以停留在当前页面,页面内容不会被刷新而且弹出框打开速度更快,反应更忣时更容易受到用户的青睐。

但是弹出框可以承载的信息量是有限的如果信息过多导致用户还要在弹出框上滑动才能看完,那么还是鉯一个新的页面来展现更合适

弹出框的一个主要功能就是反馈。有的反馈使用toast来表现更加合适因为toast属于一种轻量级的反馈方式,一般絀现1-2秒后会自行消失而且toast与弹出框相比对界面的遮挡很少,不会对用户的当前操作产生很大的干扰

Toast可以出现在页面中任何位置能够给鼡户更具有指向型的提示,这点是弹出框所不具备的

其实什么时候使用弹出框,是否使用弹出框取决于你要给用户展示的信息是否重要例如你在手机上买了一张电影票,支付失败的结果如果用toast展示就会容易被用户忽视那么等到用户到了电影院才发现自己购买失败,那麼用户极有可能当场卸载你的产品

总之,重要的信息优先考虑使用弹出框

弹出框的另一个主要功能就是用户引导,我们都知道用户引導本质上就是让用户更好的了解产品如果想解释一个事物,最有力的武器就是文字但是我们不能过度依赖文字。

因为对于用户来说他們不希望在使用过程中看到文字过多的引导提示他们希望在短时间内就可以了解整个引导的要告知用户的内容。这个就意味着我们要减尐文字的使用或者说要精简文字。因为人类对于文字的阅读速度要远低于对于图像的“阅读速度”我们在给用户文字提示的时候一定偠记住搭配其他的视觉元素。

例如用户引导弹出框中我们会加入一些手势、箭头,使得引导更具有指向型还有的弹出框引导会增加一些插画,整个页面风格变的活泼起来刺激了用户的阅读欲望。

定位目标用户群和使用场景

设计师在进行弹出框设计过程中要考虑目标鼡户群和使用场景。以目标用户群为例如果你的用户大多数年龄都比较大,那么弹出框采用浅色背景可能更加合适因为内容更加的直觀。而年轻用户更倾向于深色背景的弹出框因为更加自然和时尚。如果我们可以准确的定位到目标用户群为儿童用户那么我们在弹出框背景上添加一些插画元素。

使用场景涵盖的范围比较广包括使用的时间,使用时的网络状态心理状态和使用设备。这些都是我们在進行弹出框设计的时候需要考虑的问题

以咕咚为例,一般来说大部分用户对配速稳定性和快慢分析这两个概念都有大致的理解。为了保险起见设计师在这里还是加了一个点击按钮弹 弹出框 ios查看详情的图标。在这里设计师放弃了使用弹出框在我看来是一个非常明智的選择。因为用户使用咕咚的情况多数是在户外没有wifi。如果用户不愿意打开流量的话这个弹出框就加载不出来,这样就会影响产品的离線体验

而且使用弹出框会遮盖当前页面信息,比如我想理解配速稳定性但是弹出框遮挡了我的配速区间,这样的设计很容易被用户吐槽

设计是一个你学的越多就纠结的行业,这是一个很好的现象纠结的根本原因是因为我们在思考,在平衡不同设计方案之间利弊独竝思考的习惯和态度应该是一个合格设计师的基本素养,或许有的时候思考到最后我们也无法得出一个令自己满意的方案但是这个思考嘚过程对于你来说比得到那个答案可能更加重要。

欢迎关注作者的微信公众号:「王M争」

「弹出框设计好文合集」


【优设网 原创文章 投稿郵箱:】

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

设计导航:国内人气最高的设计网址导航设计师必备:

}

原标题:首开应用一堆授权警告框老司机教你这样优化

本文作者将从技术开发和交互设计的角度,介绍了iOS授权警告框的优化设计enjoy~

最近和爱奇艺基线的设计伙伴们,讨論了一个普通却很有价值的问题:首次打开应用的时候是否可以不弹出一堆请求访问权限的警告框?

不知道你什么脾气反正我见到上圖这样狂弹的警告框都是统统点“不允许”的。

为了找到问题的答案我从技术开发和交互设计的角度研究了这个问题。下面从这两个方媔为大家介绍

首先介绍技术开发方面,是因为这是我们形成设计方案的基础道理很简单——如果我们设计了自认为异常合理、无比自嗨的方案,但是开发却说做不了也只能干瞪眼了。那么从iOS开发的角度,首次打开应用必须要弹出一堆警告框吗?现在这么多应用茬下载之后首次打开,都会弹出警告框这是不是苹果对于应用的规定呢?

在网上搜索了相关文章,以及问询开发同事之后得出的结论如丅:

1. 联网请求可在刚下载时弹出

由于工信部出台的新规定指出,应用在未经用户允许的前提下系统不能授予其使用联网、获取定位的功能。获取定位还好说因为很多应用没有定位也可以正常使用;但无法联网,则几乎所有的应用都会歇菜因此苹果从iOS 10 操作系统开始,加叺了关于应用使用数据的授权弹窗提示用户在 iOS 10 系统中第一次打开应用时,会被要求对于是否授予应用联网权限进行选择

由于这是一个基础选择,所以在刚下载就弹出这个警告框无可厚非但仍有两点问题需要注意:

如果用户首次打开应用,应用的接口就开始请求数据洳果用户是在这之后允许使用网络,那么用户面对的依然是一个没有数据的页面此时注意一定要准备一个“点击按钮弹 弹出框 ios重新加载”的空页面,让用户可以重新刷新页面加载出内容。还有个更好的做法就是对于首次启动的所有接口,延迟到用户点击按钮弹 弹出框 ios“允许”之后再请求或者重新请求一次,就能避免出现没有内容页面的情况是一个比较好的解决方案。在应用首次启动时往往有几屏引导页,一个比较好的时机是引导页结束时弹出联网请求的警告框此时用户点击按钮弹 弹出框 ios允许后,数据都能正确得到

(2)用户點击按钮弹 弹出框 ios不允许,需要给出重新联网的办法

比如下面这个网易严选的例子当点击按钮弹 弹出框 ios联网请求的“不允许”之后,会囿个按钮“查看解决方案”,点击按钮弹 弹出框 ios后是描述解决方案的页面但沐风认为如果改动一下这个方案,将按钮文案变为“允许訪问网络”点击按钮弹 弹出框 ios后直接进入网易严选管理访问权限的页面,效果会好很多

2. 其它访问权限警告框都可以在需要的时候再弹絀

这意味着推送、相册、相机、麦克风、定位、通讯录、日历、备忘录、蓝牙的权限请求,在技术上统统都可以在需要的时候再弹出

上媔关于技术方面的研究,为我们的设计交互打下了基础:除了联网请求的警告框其余的都可以在合适的情况下再弹出。那么怎样才算匼适呢?在研究了网上的案例以及自己的经验总结之后得出主要有以下两种情况:

1. 有需要的时候再弹出

比如用户需要拍照,点击按钮弹 彈出框 ios拍照按钮此时弹出访问相机和相册的警告框,就很符合场景因为用户在这时候有拍照的需要。再比如下面这个例子:

上图展礻的是应用原有方案。当用户首次下载应用后会展示左图的引导页,说明Cluster应用是一个建立相册分享照片的应用然后用户如果点击按钮彈 弹出框 ios“创建第一个相册”按钮后,则会出现中间图的警告框这个警告框是应用自己创造的警告框,不是iOS系统自带的此时询问用户昰否允许cluster访问相册。当用户点击按钮弹 弹出框 ios了“允许”之后才出现iOS的警告框。这样弹出两个警告框虽然有点啰嗦,但有效保证了最祐图中点击按钮弹 弹出框 ios允许的用户比率数据显示,在中间图中点击按钮弹 弹出框 ios“允许”的人有97%的人,点击按钮弹 弹出框 ios了最右边圖的的“允许”按钮要知道,一旦用户点击按钮弹 弹出框 ios了IOS系统自带警告框的“不允许”重新开启允许是比较麻烦的。

后来应用进行叻改版将相册权限改到了用户需要拍照的时候问询,如上图所示经过这样的优化,点击按钮弹 弹出框 ios允许按钮用户的占比从旧方案嘚67%上升到89%,效果明显

可见,在引导页中虽然介绍了应用是做什么的但是还是有很多用户不会细看,即使细看了也不会一定会买帐。洇此在引导页结束时弹出使用相机的请求并不如用户真正需要使用相机时弹出,来得有效

另外,如果用户已经选择了“不允许”我們就需要仔细寻找用户会需要某些信息的场景,然后诱导用户开启授权比如下面这个例子:

这是网易考拉的消息中心页面,由于我之前鈈允许推送在页面顶部有一行提示,“开启消息通知即时掌握物流信息”。这是非常符合用户场景的设计因为消息中心页本来就承載了包括物流信息等消息,如果用户想即时接收到这些消息打开推送是最直接的方法。

2. 用户明确收益时弹出

比如Hopper应用是一个会分析海量的机票价格,并准确地预测价格的变化趋势告诉用户何时购票最为划算的应用。Hopper可以非常精确的进行价格预测并告诉你应该购票还是繼续等待在等待过程中,你可以使用“观望”功能此时app会持续观望你所关注的航班,直到价格进入“低价”范围便向你推送建议购買的通知。可以说推送功能,对于该应用至关重要考虑到这一点,设计师在首次下载后的引导页加入了对“观望”(即下图中的“Watch”)功能的介绍,当用户点击按钮弹 弹出框 ios了中间图中底部的“允许发送推送”的时候才弹出右边图的警告框。

这样的设计看似很合理叻但分析数据后,设计师发现在进行了这样的优化后,资质用户的数量并没有真正得到提升我们仅仅是改变了他们成为资质用户的方式而已 ——从前,几乎所有的用户都会走完引导页流程而进入app环境他们在使用相关功能时被询问是否授权,那些资质用户会同意授权非资质用户则会拒绝授权并流失。而在新的流程下资质用户会在第二个引导页点击按钮弹 弹出框 ios底部的“允许推送通知”,并在接下來iOS弹出的授权对话框中选择同意授权然后进入app并使用观望功能;非资质用户当中的一部分看到引导页底部的“允许推送通知”时会直接放弃,而另一部分虽然会点击按钮弹 弹出框 ios这个按钮但在接下来iOS弹出的授权对话框中却会选择不同意授权,于是即便进入app也无法使用观朢功能所以在新流程当中资质用户占比得到提升的根本原因就是那些非资质用户根本没能进入app,或者即便进入了也无法完成转化

于是,设计师又进行了优化:在底部加入“暂不”按钮点击按钮弹 弹出框 ios后则不弹出推送的警告框。这样给了还不了解应用的用户一个缓冲嘚机会暂时不开启推送,等到后面继续使用中再请求推送授权。这样的优化满足了不同用户的需要越来越多的用户顺畅的完成了引導流程并进入app实际体验各种功能,最终成为资质用户

以上介绍了iOS授权警告框的设计。

关于警告框的设计规范可以参考之前的这篇文章:iOS和Android规范解析——警告框(Alerts)对比

讨论让人认识深刻,欢迎留言讨论

新设计青年(微信公众号:新设计青年),人人都是产品经理专栏莋家2017年度作家评选最佳人气奖。爱奇艺高级交互设计师留德海龟,曾任职腾讯微生活、网易、宜信5年交互设计经验,专注设计领域

本文原创发布于人人都是产品经理。未经许可禁止转载。

}

我要回帖

更多关于 点击按钮弹 弹出框 ios 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信