App临时框的设计,全在这了...

作者: 邹志楠 | 来源:发表于2016-09-08 21:58 被阅读3471次

    昨天,iPhone7发布。更美的工业设计(相较于6s而言),更多的颜色,更高的配置,然后呢?好像没有然后了,握着手里的6s,找不到换机的理由。乔老爷走之后,智能手机圈再也没有了让人惊鸿一瞥的产品,想知道原因可以自己思考一下。虽然如此,iPhone依然是这个星球上最好用的智能手机,没有之一,嗯,小小的感慨一下。

    作为交互设计师和UI设计师,咱们还是把把焦点放在iOS10的发布上来吧,9月13号推送,可以下载体验,看了官网关于iOS10的介绍,总结一句话:“更有趣的微交互,更直观的信息展现形式”。

    唠叨完了,切入今天的正题,iOS和Android里有个特殊的设计形式:临时框,这是从PC时代移植过来的,对于UE设计师来说,在什么情形下用哪种临时框,是基本功之一,对于最终产品的用户体验起到举足轻重的作用。

    根据不同的设计目标,临时框可以分为以下五类。

    警告视图(Alert View)

    回想一下,当听到一个令人震惊消息时你的反应是?大部分人的反应是“什么?”或者“你说什么?”你潜意识的要求对方再说一遍。为什么?因为这个信息太出人意外了,所以你要再次确认下是不是真的!

    同样,当你触发了删除按钮时,App是什么反应?删除的操作太敏感了,所以需要让你再次确认下,这就是App里的警告视图Alert View。App要获取位置信息;访问相册和相机;让你升级App等等,这些都需要用到警告视图。

    警告视图 Alert View

    从上图可以看到,警告视图包括三个部分:标题;正文;按钮。有些文案简单的警告视图只有标题和按钮,不需要正文来说明。

    操作列表(Action Sheet)

    某天你正在用某音乐App听一首歌,看着播放界面,这时候你想要查看歌手信息,专辑信息,还想要收藏这首歌...,在当前页面要满足这这么多需求,就要用到操作列表Action Sheet。针对当前页面,用户想要执行的操作太多了,不可能把这些操作都放出来,这样页面上全都是密密麻麻的icon、button。用操作列表的形式把这些按钮都放在一个临时框里就完美的解决了这个问题,perfect。

    操作列表 Action Sheet

    上面三张图,看起来完全不一样,但是原理是我上面所说的,万变不离其中,只不过换了个UI样式。它们都属于操作列表。

    模态视图(Modal View)

    现在你已经完全掌握了两种临时框的原理,成热打铁,不要停。

    打开iPhone自带的邮件App,点击写邮件,这个时候页面上底部弹出,占据了整个手机屏幕,当写完邮件,点击发送,或者不想写邮件了,点击取消,都可以回到原来的页面。这个页面就叫作模态视图Modal View

     模态视图Modal View

    善于思考的人可能会问,这个页面占据整个屏幕为什么要叫临时框?跟二级页面不是一样的吗?这个问题问的很好,哈哈,我来解答一下。临时框的意思并不是又占据手机屏幕的多少来决定,它的评判标准是有没有脱离主任务。二级页面是直接脱离了主任务,前往执行下一个任务,但是模态知识暂停了主任务,完成了模态里的操作后会自动回到主任务。所以你以前对临时框这个概念的理解可能就错了,懂得了某个设计形式的本质,你才能像庖丁解牛一样游刃有余。

    模特视图有一下几个特点(对照上面三种图会更容易理解):

    ①占据整个屏幕,或者占据整个父视图的区域。

    ②包含完成当前任务所需的文字和控件。

    ③通常也包含一个完成任务的按钮,和一个取消按钮。

    Toast

    Toast,我没有找到与其对应的中文,所以只能用英文了(知道恰当翻译的朋友可以来公众号:UE修养,给我留言),当时这并不妨碍理解它。

    上面三种视图都有一个共同点,你必须执行某个操作(点击完成也好、取消也好)临时框才会消失。当时Toast比较特殊,它会自动消失,一般维持的时间是1秒到1.5秒。时间太短用户没办法感知,时间过长又没有必要。

    Toast

    Toast临时框的组成比较简单,一个颜色作为打底,上面展示要提示的文案。

    那么什么情况下要用到Toast呢?①由于移动端的使用场景很复杂,用户执行了某一个操作时,很多时候App并不能立即反馈给用户操作结果,这个时候弹出一个Toast提示用户已经执行了该操作,会显得很人性化,这就是用户体验。②当用户执行无效操作时提示用户,该操作不正确。想象一下,如果上图的第三张页面,App不提示用户系统账号无法删除,用户会很懵逼,因为点击删除按钮毫无反应,用户也不清楚为什么没反应。③提示用户操作错误或者正确,列如App经常会提示用户:登录成功、下载失败、密码输入错误。

    总结一下,今天讲了不同临时框的作用、使用场景和设计规则:

    ①警告视图(Alert View)

    ②操作列表(Action Sheet)

    ③模态视图(Modal View)

    ④Toast

    记住这些临时框的名字并没有丝毫用处,重要的是理解每种临时框的设计原理。这样你才会根据不同场景不同用户目标来选择恰当的临时框。

    相关文章

      网友评论

      • 7bafd663b8d4:Toast,有人直接英译为吐司,我更喜欢叫它两秒弹层
        7bafd663b8d4:@Jeedoo toast是多士炉的意思,切片面包在多士炉里烤好了后弹上来,表示面包烤好了。但我们现在使用时,简短的无操作提示都会使用,比如当你输入手机号格式错误时。
      • 11dec50da903:toast是不是多士炉的意思,切片面包在多士炉里烤好了后弹上来,表示面包烤好了:stuck_out_tongue_winking_eye:
        11dec50da903:@阿群1986 哈哈,我也是猜的
        阿群1986: @柚子晨 原来是这样子!由烤面包片(土司)引申而来的啊
        邹志楠:@柚子晨 对,是的,一般翻译为土司
      • 龙爪槐守望者:写邮件那个例子我还不是很理解,在邮件主界面点写邮件应该是二级任务啊,如果理解成“写邮件是打断了看邮件这个主任务”感觉会很奇怪啊
      • 龙爪槐守望者:‘[模特]视图有[一下]几个特点’,这里似乎有两个错别字,是模态和以下吧?
      • 龙爪槐守望者:'但是模态[知识]暂停了主任务,',[知识]应该是[只是]吧?
      • 一飞:holle,感觉文主对移动交互的各个场景都了如指掌信手拈来,厉害:+1:,有专家的实力哦;
        问一句,文主这些基础的知识都是通过零散的碎片知识自己收集整理的还是通过看书学习的?
        邹志楠:@一飞 看书,与人交流,深度思考,在工作中总结~,高效率的输入信息,将信息内化为知识。
      • a5cdc4b4c28f:toast是安卓里的叫法 iOS里用的是HUD
      • 任秋野:赞👍
      • a7d4f6f001f2:干货收藏
        邹志楠:@埃菲尔铁塔下的猪 欢迎交流
      • Norman_HU:多谢作者的干货分享,支持~~~~
        邹志楠:@Norman_HU 感谢~一起成长
      • 我想早睡早起有个好习惯:Toast可以理解为警告视图里面包含的一种吗?
        阿群1986: @鬼才晓得 pop-up 气泡弹出
        鬼晓晓:toast我一般称浮动通知 但估计也不准确 气泡通知?
        邹志楠:@我想早睡早起有个好习惯 还是有区别的,警告视图偏向于对某一操作的再次确认,Toast则偏向于对某个状态进行反馈,让用户知晓。

      本文标题:App临时框的设计,全在这了...

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