5个值得学习的APP交互方式心得技巧

2016-02-16 22:38 41 1 收藏

今天图老师小编给大家介绍下5个值得学习的APP交互方式心得技巧,平时喜欢5个值得学习的APP交互方式心得技巧的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - 平面设计 】

今天把自己最近发现的几个觉得有趣的、值得学习的手机app交互方式分享给大家。

要说明的是,这些交互方式大多数都是国外的应用,确实,好久没在国产应用中体会到新颖的、有价值的交互设计了,现在,也有人开始吐槽国内的UI设计了。

功夫,一横一竖。

不罗嗦了,言归正传:

一、下拉输入

代表应用:Flickr、Opera Coast、any.do、Timi记账

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图1 Opera Coast的下拉搜索

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图2 Flickr的下拉搜索

二、登录验证帐号

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

代表应用:印象笔记

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图3 印象笔记

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

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

三、未激活按钮的设计

代表应用:snapchat

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图5 snapchat的表单

四、输入框title或提示文本的解决方案

代表应用:dubble

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图7 将title移至输入框边框

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图8 dubble的输入框提示文本

五、悬浮聊天窗,滑动关闭聊天窗口

代表应用:Facebook

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

5个值得学习的APP交互方式心得技巧,PS教程,图老师教程网

图9 facebook的悬浮聊天窗口

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

来源:http://www.tulaoshi.com/n/20160216/1575891.html

延伸阅读
标签: Web开发
本文收集了 15 个非常值得收藏的 HTML5 资源,这些资源可以让你同 HTML5 的发展保持一致,并始终处于这门技术的最前沿。 1. WTF is HTML5 这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。 2. Dive Into HTML 5 Mark Pilgrim 是知名软件开发师与博...
标签: Web开发
作为一个 Web 设计师,精通 CSS 是绝对必要的而且对于 Web 开发也是必须的。 良好的 CSS 编写习惯可以帮助你节省时间,并且能更好地进行网站的后期维护使得运行速度更快,从而节约带宽。下面是网页教学网收集的6个非常有用的 CSS 资源网站,包括 CSS 学习技巧、CSS 文章、CSS 高级文档等。 网页教学网提示:点击下面的文字连接可以打开网...
标签: 办公软件
《中国电脑教育报》今年第11期G7版谈到在用PowerPoint设计课件时,为了防止在操作时点到空白处会切换到下一张幻灯片,作者在幻灯片中加入一个和幻灯片一样大小的无动作按钮。   其实,我们只要设置一下幻灯片放映方式,就可避免这一现象。方法如下:依次单击:“幻灯片放映/设置放映方式…”,出现“设置放映方式”对话框,在放...
5个新手学习摄影的实用步骤   想要拍出一张漂亮的照片,有时其实只要简单的几个步骤就好了,最重要的是你心中的一个想法,去拍什么,有什么主题,再就是一些摄影技巧和后期技术了,其实拍照片并不太难,而新手又有什么方法可以去进步呢? 一.定下要拍的主题 如果你想更有把握的拍出好的照片,或者是想专心去训练自己在...
视觉空间智能的5个学习契机 视觉-空间智能是指准确地感觉视觉空间,并把所知觉到的表现出来的能力。这项智能包括对色彩、线条、形状、形式、空间及它们之间关系的敏感性,也包括将视觉和空间的想法具体的在脑中呈现出来,以及在一个空间的矩阵中很快找出方向的能力。 空间智能是人们生活学习的基本能力,更是艺术、科学、数学乃至文学的不可...

经验教程

294

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部