APP特有的交互设计模式解析

文章目录[隐藏]

 


1、触屏滑动操作,移动APP端最基本的操作方式。

(1)屏幕之间或者页面直接的自由滑动切换

比如手机移动端的界面切换效果,可以滑动使用快速友好的切换

(2)滑动条目经行删除

横向滑动条目的操作犹如一汪清泉给移动端交互带来了更多地可能性。比如前两年的GDT明星产品“Clear”,作为一款无按钮的APP,左滑完成这个待办事项,右滑删除这个代办事项,把之前的“删除按钮”或者其他功能按钮转化为不同的手势操作,减少了用户的点击操作。

目前,侧滑操作已经广泛的出现在各种移动端应用中了,并且有了很多变种。比如IOS7的任务管理,已经从“点击删除”转变为“将条目向上划出”经行删除了。这种滑动操作似乎是在模拟人们扔掉东西的这种状态,相比点击操作,有更强的暗示性。

(3)滑动解锁

滑动解锁的本质是一种防错机制。早期的非智能手机会通过组合按键的方式,来防止手机放在包包或者裤兜里不小心被解锁了的问题。而在智能触屏手机中,通常只有一到两个物理按键,防错机制很不完善。

滑动解锁作为一种有效的防错机制,包含流程“点亮屏幕”—“完成滑动任务”—“解锁完成”,通常滑动任务具有一定的难度,不会被意外出发。因此这个流程要求要求人们经行一组“理性的行为”,很好地防止了意外行为下的错误发生。

(4)侧滑呼出菜单,也就是抽屉式菜单

在移动端,人们想进入新的页面需要经行跳转,如果跳转的次数太多,用户就会感到困扰和迷惑。而侧滑呼出菜单,并且保留主界面20%~50%的内容,就可以保证用户体验的一致性。

侧滑呼出菜单通常与”三线汉堡“按钮结合在一起使用,用户可以通过点击“三线汉堡”按钮,也可以直接经行滑动,相比起来,滑动的操作更加具有可用性,因为可操作范围非常大,目标距离为零。

2、摇一摇功能

“摇一摇”最早的成功案例可能是微信中随机添加好友的“摇一摇”。它的成功之处在与用新颖的交互操作替代了原先枯燥乏味的操作。

假设没有“摇一摇”,那么替代操作很可能是个大按钮,点击一下,推送一个好友,同样地产品,却失去了趣味。“摇一摇”的过程中,配合手机的声音,屏幕上的画面,给人带来了增强现实的感受。
目前“摇一摇”这个功能应用面广泛了,比如抽奖,领取金币,找好友等等。

3、扫二维码和条形码

通常情况下,二维码中包含的内容只有一个连接。但是扫二维码这个交互替代的流程是:

(1)打开浏览器的搜索引擎,或者地址输入栏

(2)输入一段非常长的地址

扫二维码通过一个拍照的交互,主要解决了输入地址信息的过程。通过简化地址信息的传播,

二维码可以广泛的运用在各种地方,包括电视媒体,平面海报等等。

4、下拉刷新和下拉切换页面

以前刷新内容需要点击浏览器刷新,微博等现在变成下拉载入新内容,基于手机触摸端的操作特性,这样的操作自然效率更高。

5、长按效果和隐喻

在网页端,我们有足够的空间和hover效果,因此删除操作可以方便的放在页面里或者下拉菜单中。而在移动端,我们的空间变少了,失去了hover效果,放置按钮的地方极大的减少。

不过幸运的是,但是在触摸操作中,我们可以有时间的概念,就是“长按”与“短按”。在大多数智能设备中,长按可以删除应用和关闭之前打开的应用。在很多版本的安卓手机里,长按返回键或者HOME建也可以呼出任务管理菜单。
长按可以复制文字,转发图片,发布文章等。

6、拍照扫描上传,拍照分享

移动APP端,大部分手机都有摄像头,可以调用拍照功能,丰富很多交互操作等等。

7、地图实时定位功能,

有着类似GPS的功能,有箭头的指向。比pc端的地图更具生动和友好的交互体验效果

 作者信息:
破茧成蝶读书笔记

许天琦

还不敢称设计师

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/6823/

(0)
iouedioued
上一篇 2015-08-19
下一篇 2015-08-19

相关推荐

  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 图片优化的那些工具

    图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、 image…

    2014-11-06
  • 一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

    在我们常规意义上组成一个APP的视觉风格有几大元素——颜色、交互元素、字体、阴影、ICON的图形等,但是有一个总容易被设计师们忽略的元素,它能给与用户一个非常直观的视觉记忆,大家却总是忽略,甚至做的很糟糕。那就是APP里面的配图。

    2017-05-12
  • 网页感知价值研究:UI中的感知价值

    “感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。定义:感知价值是指对产品或服务目标的主观感受。

    2017-05-13
  • 防火防盗防父母:95后隐私观报告

    今天,结合QQ大数据以及对95后的采访,我们共享一份有趣的——《95后迷之隐私观报告》。 来,看看95后们是如何“防火防盗防父母,相爱相杀为自由”: 看来,95后对家长的怨念,收集起来都可以发电了。但魔高一尺,道高…

    2016-05-09
  • 交互设计:给新人设计师的交互设计知识体系

    一篇完整阐述系统交互设计知识体系的文章,希望能够对新人设计师建立的设计知识体系有帮助。

    2017-05-14
  • 线上讲座 | 送你一份全新的交互设计指南ヾ(゚∀゚ゞ)

    ▲ 向左滑动查看更多导师作品摘要:上期Designer Talk 我们邀请到的UI设计师Coraline,以“对现代科技发起交互”为媒介,来传达她所创作的艺术呈现,不知道同学们有没有通过对非现场性艺术分享,使思想脱离理性范畴,继而进行创作性的探索与尝试。本期Designer Talk我们将借助符号性的语言,将碎片化的艺术凝结在一起,打破虚无与现实桎梏,为您呈现全新的交互设计。关键词:交互设计 / 当下全新的非完美呈现分享导师Jason本...

    2018-04-19
  • Axure官方教程中文版第4课:构建交互动作-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(4).MP4 新建文件 1、添加一个按钮和两个文本框 2、禁用第二个文本框 3、设置第一个文本框不可点击 4、设置第二文本可用 5、将第二个文本框设置获…

    2015-01-26
  • 用微妙动效改善用户体验的简单方法

    译者:zyl0127     应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧, 这些都是过去的事情了。 当…

    交互专题 2017-08-07
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09