五个值得学习的移动应用交互方式

最近事比较多,心情也波动很大,遇到一些坎坷。博客刚刚建起来就停更了这么久,实在有点不像话,于是今天把自己最近发现的几个觉得有趣的、值得学习的手机app交互方式分享给大家。

要说明的是,这些交互方式大多数都是国外的应用,确实,好久没在国产应用中体会到新颖的、有价值的交互设计了,现在,也有人开始吐槽国内的UI设计了,比如,《台湾设计师吐槽:我们的UI到底怎么了?》

不罗嗦了,言归正传,

NO.1. 下拉输入

代表应用:Flickr、Opera Coast、any.do、Timi记账
即通过下拉的动作来呼出输入操作,比如搜索、添加项目等,比如flickr、opera coast就是通过下拉呼出搜索框,另外,还有一种就是下拉添加项目,此类的app有any.do、Timi记账。下拉是一个很自然很便捷的动作,很适合于“随时、快速输入”的情境,比如any.do作为GTD应用,采取下拉添加的设计就非常适合,因为很多时候,我们都会在这样一种情境中使用这个功能:走在路上,突然有了一个灵感,于是赶紧打开any.do,把想到的记下来。这样的情境要求能够以最简单、最快的方式输入,而不用去寻找添加按钮。

Opera Coast的下拉搜索
图1 Opera Coast的下拉搜索
Flickr的下拉搜索
图2 Flickr的下拉搜索

NO.2 登录验证帐号

代表应用:印象笔记
通常的登录和注册是分开设计的,而印象笔记将登录和注册整合,每一步骤都只有一个表单,注册和登录没有任何冲突。这样避免了“用户已存在”然后又要重新填写表单的不良体验,在流程上有很大的优化,如下图4所示:

印象笔记
图3 印象笔记
印象笔记的登录流程优化
图4 印象笔记的登录流程优化

NO.3 未激活按钮的设计

代表应用:snapchat
交互设计中有个叫做“预设用途”的原则,大意就是一个界面或者控件,要让用户一看见它就知道如何使用。显然,最基本的要求就是至少要能知道这个控件可否操作,而所谓“未激活的按钮”就是含有“激活”和“未激活”两种状态而目前处于“未激活”状态的按钮,这就要求分别对两种状态进行设计。通常来说,有两种方法,隐藏或呈不可操作的视觉效果(比如灰色),比如snapchat的表单填写界面,当表单尚未填写完全时,CONTINUE按钮一直处于灰色状态,即告诉用户该按钮尚未激活。读到这里你或许会觉得这其实很简单嘛,但只要你仔细观察一下,就会发现有很多的应用没有这样设计。

snapchat的表单
图5 snapchat的表单

NO.4 输入框title或提示文本的解决方案

代表应用:dubble
通常设计输入框时,我们会使用Lable标签给每个输入框一个title,比如“用户名”、“密码”,另外,还会在输入框中使用灰色的提示文本,如图6所示。但是,在手持设备的应用中,这样的设计会产生两个问题,一是浪费屏幕空间,我们知道,手持设备的屏幕空间是很宝贵的,而以Lable标签呈现的title会占去很大一块屏幕空间;二是提示文本在用户输入时便消失不见,提示效果无法持续到任务结束。那么,如何解决这两个问题呢,如下图7所示,在用户输入时将title移至输入框边框中,或者像dubble应用的注册界面,把输入框的提示文本移动到键盘上面,如图8所示:

图6 通常情况下的输入框设计
图6 通常情况下的输入框设计

 

图7 将title移至输入框边框
图7 将title移至输入框边框
dubble的输入框提示文本
图8 dubble的输入框提示文本

NO.5 悬浮聊天窗,滑动关闭聊天窗口

代表应用:Facebook
如图9所示,Facebook将聊天窗口悬浮在界面边缘上,可以任意拖动,但会自动贴紧屏幕边缘,打开聊天时其他背景半透明遮罩,层次感很强,按住聊天窗口任意位置向右上角滑动即可关闭聊天窗,有一个回收的动效。淘宝手机客户端也借助了这个设计,这样的设计对于以用户动态为主,而私信聊天为辅的应用非常适合,比如微博、QQ空间等。稍微嘴贱一句,新浪微博之前一直想加强社交属性,减弱媒体属性的标签,但最终未果,我觉得新浪早点重视移动客户端并且像facebook一样用设计来加强社交属性或许会比较有效果。

facebook的悬浮聊天窗口
图9 facebook的悬浮聊天窗口

好了,这篇文章就到此为止了,找图、截图神马的真心不容易啊。如果你也发现了其他有趣并且有价值的交互设计,我非常期盼你也与我分享。你我共同进步,Peace and Love!

在 “五个值得学习的移动应用交互方式” 上有 10 条评论

  1. dubble的设计不怎么样,离得太远了。印象笔记的登录注册也不怎么样。假如我有帐号的话,那么直接登录,印象笔记却让我多点了一次按钮;假如我没帐号的话,想要注册,输入了已存在的其它用户的账号,印象笔记以为你要登录,转到登录页面去了。刚才在官网下载最新版本的印象笔记,发现登录注册已经回归传统了。我们要寻找的是用户友好的交互设计,而不是新颖的交互方式。

    1. 第一个不赞同,虽然看起来“离得远”,但实际上当时情境下用户的注意力正好在键盘上,所以其实并不远。你说的第二条对我的思路很有启发,好棒。不过第一,“假如我有账号的话,那么直接登陆,印象笔记就让我多点了一次”。这句不对,做个对比,传统登陆的点击流程是这样“登陆——输入邮箱——输入密码——提交”,而新方案是这样“输入邮箱——下一步——输入密码——提交”,你会发现,其实都是四次点击/输入。第二,“输入已存在的其他用户的账号”属于用户记错/输错邮箱地址,不知这个情况的发生概率有多大,如果大的话确实需要重新设计了。最后,你下的是IOS版本的吗,IOS版本好像没有改成传统的登陆注册啊

      1. “但实际上当时情境下用户的注意力正好在键盘上”。这时用户的注意力应该在下一个输入框或刚才的输入框。而不是键盘。传统登陆的点击流程是这样“登录——输入邮箱——输入密码——提交”新方案应该是“登录——输入邮箱——下一步——输入密码——提交”如果你说新方案中的“登录”这一步没有的话,那么传统方案的“登录”也可以没有。其实这个东西一看就明白了,新方案在每次输入邮箱后都要点击下一步(这就是多出来的一步),传统方案可以同时输入邮箱和密码。不知道你怎么会说新方案的点击次数和传统方案一样的。“输入已存在的其他用户的账号”这个概率的确非常小非常小。但这个概率和你注册时“用户已存在”的概率有差别吗?我下的是Android版本,在看完这篇文章后特意下载的。事实上,单纯讲这个设计的话,我觉得它非常糟糕,因为每次登录都要多点一次“下一步”按钮。但印象做的比较好,打开到主界面时直接就把我的Google邮箱列出来了,避免了输入。我这里主要就是对这个设计讲的。

        1. Dubble那个设计正如我文中所说,它的好处是“让提示效果持续到任务结束”,我们想象一下情景: 1,、用户现在在输入邮箱地址,输入框获得焦点后提示文本跳转到键盘边缘; 2、用户输入完邮箱地址了,开始输入名字; 3、名字输入框开始获得焦点,提示文本跳转到键盘边缘;以上三个步骤中, 第一个步骤时,用户的注意力在键盘上和邮箱地址输入框之间切换; 第二个步骤时,用户的注意力开始转移到名字输入框; 第三个步骤时,用户的注意力在键盘和名字输入框之间切换。也就是说,除了第二步,至始至终用户的注意力都在键盘上,而第二步时,输入框里面本来就有灰色的提示文本,因此,任务的整个过程,提示文本的作用都一直持续着。新方案中确实不需要格外点击“登录”,一来就给你个输入框。至于“注册时用户已存在的概率”……这个从我自己的经验来说,确实挺大的,我常常忘记我有没有注册过这个App或者网站……跟你一讨论,我发现这个设计的确不够完美,但它有个很好的思路就是避免了重复输入和无效输入以及解决了用户忘记自己是否有账号的问题。代价是在某些情况下增加了点击次数。现在我突然有个想法就是,是否可以像传统方案中那样把输入框都放在一个界面,输完邮箱后,立马进行验证,如果邮箱存在,则继续,如果邮箱不存在,则提示是否要注册。就是不知道实现后会不会因为验证而给用户卡顿的感觉。

          1. 提示文本和相关输入框分离难道不会对用户造成困惑吗?!当然,对我来说,即使没有提示文本都不会有困惑,不知道其它菜鸟来说会不会有这个问题。“…就是不知道实现后会不会因为验证而给用户卡顿的感觉。”这个想法我也有,还有个好一点的想法是单独登录界面,点击注册链接后进行注册,然后输入邮箱后,验证邮箱是否存在,也有验证卡顿的问题。

发表评论

电子邮件地址不会被公开。 必填项已用*标注