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


昨天,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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容