美文网首页产品养成计划
几种弹窗设计模式(iOS端)

几种弹窗设计模式(iOS端)

作者: 2f9c70690c9b | 来源:发表于2016-09-07 16:27 被阅读8251次

    弹窗,是用户自行操作或者系统后台产生变化时告知用户,或者需要用户参与去选择去决定的一种交互。

    最近在研究关于iOS上各种弹窗模态的表现形式,结合了iOS的设计规范相关内容,把自己整合的一些弹窗的相关想法写了下来,欢迎大家一起讨论


    通用提示
    这一种提示属于用户不需要了解详情,只需要让用户感知到系统已经有变化,同时也容易被用户忽略,所以这种提示不应承载太多信息,像蜻蜓点水一般点到即止
    设计注意:
    1.因为处于告知用户又不能打扰用户的临界点,所以出现的时常一般在1~2S
    2.样式上没有过多限制,可以考虑是否带icon,提示的位置可以在顶部,中部,底部,注意应保证一个应用内提示的一致性
    3.内容上应该尽可能保证言语简洁

    下面是此种样式提示的一个流程展示


    设计规范上提到关于这种场景下提示的建议是:设计一种引人注目但又和你的 app 的样式相协调的方式去展示信息比如下面这种下拉刷新的提示

    实际中例子是这样的

    下拉刷新融入品牌的配色,加上没有遮盖住底部信息展示,即告知了用户刷新成功和刷新的信息量又保证了用户的阅读性
    为了避免警示框(下文会提到)滥用,采用提示+按钮的方式来提醒用户

    例如在删除的场景中,一些不重要的删除不需要通过警示框的形式来提醒用户是否确认删除,可以给予用户用于尝试的权利,但是同时给予用户改错的机会
    注意:不要把一些重要度高的操作采用这次弹窗交互,因为会被用户一定程度上忽视

    下面是警示框的相关弹窗介绍

    警示框
    这种是属于警示框的其中一种,首先警示框出现频率低,因为是需要用户去高度关注,所以设计时应严格控制弹窗出现的数量
    而这种单按钮弹窗则是起到提醒用户,需要用户注意/学习的操作,避免用户直接忽略,因为需要用户点击后才会取消,但需要注意的是,相比简单的通用提示,这种提示会打断用户的心里流程
    设计注意:
    1.标题的文字必须简洁易懂,快速传达当前的情境和对应的解决方案
    2.标题不应该只是简单的文字,应该是一句短句,保证没有正文的情况下也能告知用户
    3.在同一个应用中,弹窗的宽度应该是固定不变的,高度随着文字的多少而改变

    当遇到需要用户自行判断的警示框则需要用到下面这种双按钮的警示框


    两个按钮的警告框是最为常见和有用的,给予用于控制当前状态的能力
    一般出现在用户操作之后才触发的弹窗,例如如图删除应用
    设计注意:
    1.不要出现引导用户操作的文案,应该让用户自行做决定
    2.按钮应该使用更加符合情景的词语,例如接受,忽略,避免使用是,否,这样过泛泛之交
    3.按钮顺序,按钮字体加粗
    -如果不会造成损害性结果,取消在左,确定在右
    -如果会造成损害性结果,又是用户最容易接触的操作,例如删除软件,删除在左,取消在
    -加粗:不一定要进行加粗,加粗可以对用户起到再次提醒,加粗的操作一般是产品不希望用户去做的操作(有待验证)
    4.尽量不要出现多于两个按钮的警告框,不要出现滚动的体验

    多于两个按钮的应该采用下面这种操作列表的弹窗

    操作列表
    这种列表弹窗的形式多存在于用户自己操作而触发的行为
    例如
    提供完成一项任务的不同方法

    在用户完成一项可能有风险的操作前获得用户的确认

    设计注意:
    1.对于一些破坏性的操作,用红色按钮起到警示作用,例如删除
    2.避免滚动,选择项的数量通常在2-5个

    下面这种是在复杂场景下使用的


    因为还是属于警示框,所以一般存在付款,输入密码等需要用户高度关注的场景下
    多处于聚焦,单任务的情况,弹窗中不宜出现过多的任务需要用户参与

    下面三种就简单的说一说



    全屏模态:可从底部弹出或者从右往左弹出,其中包含比较多的操作,需要用户高度关注
    弹窗式引导页:必须包含退出按钮
    分享页弹窗:适用于功能比较多的情况,列表弹窗功能过多时可以考虑使用这种形式

    以上就是总结下来的iOS上常见的弹窗介绍


    谢谢阅读~欢迎关注我的公众号,随时与我一起学习成长,微信搜索:包子设计铺


    文章标题-01.png

    相关文章

      网友评论

        本文标题:几种弹窗设计模式(iOS端)

        本文链接:https://www.haomeiwen.com/subject/jzijettx.html