设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 IT综合资讯 查看内容

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

2014-5-27 11:45| 发布者: joejoe0332| 查看: 2531| 评论: 0|原作者: Jeffrey|来自: 伯乐在线

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


NO.3 未激活按钮的设计

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

gergeIMG_0864-169x300

图5 snapchat的表单


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

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

fwefwfnamed-QQ-Screenshot20140507115525

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

sdjfhdskjfehfklhfklsgf2

图7 将title移至输入框边框

 

refgamed-QQ-Screenshot20140507120821-165x300

图8 dubble的输入框提示文本


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

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

fgdfoto20140507121922-169x300

图9 facebook的悬浮聊天窗口

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


转自 http://blog.jobbole.com/69040/

原文出处: Jeffrey的博客(@刺绅堂七) 


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部