让手势设计带你的产品体验“飞”…

小Q在《细节体验|你离用户只差一个好的交互》一文中较为详尽的归纳了反馈给用户体验带来的好处,那么,今天我就继续讲讲“动作”(即为手势)是如何让你的产品体验可以“飞“起来的。本文所指的直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验。一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感,二是滑动过程中,用户的视觉可以看到的空间更整洁,体验更纯粹。


小Q在《细节体验|你离用户只差一个好的交互》一文中较为详尽的归纳了反馈给用户体验带来的好处,那么,今天我就继续讲讲“动作”(即为手势)是如何让你的产品体验可以“飞“起来的。

让手势设计带你的产品体验“飞”…

随着信息技术的不断成熟,互联网行业的发展以及用户体验对用户的影响力也在不断增强。交互是因为有了“动作”和相应的“反馈”才形成了一个回合的交互行为。

「收」「放」自如

好的开始是成功的一半,一些简单而且常用的手势,如果能用得恰如其分,手势的设计是能让界面看起来更炫,让用户觉得使用很畅通的。

智能手机受尺寸限制,对用户而言首屏空间越发宝贵。如果不能在第一时间让用户得到有效信息,App的魅力将大打折扣。当用户第一眼看到首屏放置的主要内容后,通过上下滑动的方式寻找更多内容信息时,合理的利用手势滑动的魅力,把众多功能归置起来,不让首屏展开的功能堆砌在用户滑动页面的过程中,给用户提供更干净的阅读空间。

譬如下图所示的案例,Airbnb在产品首屏展开最常用的租赁模块,用户一旦进入产品,就能非常方便的填写并完成查询功能,当用户有意识的向上滑动屏幕的时候,展开的模块会以关键词提示的形式吸顶,底部的内容会顺着滑动操作无限延伸,既不完全隐藏常用功能,也不过度干扰用户阅读视觉区域。

让手势设计带你的产品体验“飞”…

同样的设计理念,QQ浏览器也的首屏也是用的很好,它把首屏的默认展示区域留给了天气信息及一些活动公告。一方面把用户使用浏览器的习惯区域日常化,让用户进入一个搜索引擎后不觉得过于枯燥,另外一方面从视觉设计看,通过首屏顶部的加宽,让整个界面的视觉体验更加一气呵成。对于搜索框这个核心功能的入口,待用户滑动界面寻找其他内容的时候,就会很自然的吸顶,利用极小的区域突出搜索框的入口,并释放更多的阅读空间。

让手势设计带你的产品体验“飞”…

「变」「换」 自如

手势操作是苹果带给世界的惊喜,手势的设计能让界面设计看起来更炫。优秀的手势操作是那些可以让用户明确知晓如何使用的手势,手势减少了用户操作的繁琐度,同时可以和不同规格的设备自由交互。App设计中,手势和动画一定是息息相关的。动画是用户在完成整个动作之前,与App交互最直接的信号。

产品心理学之情感设计中,提到这样的观点:我们需要用心关注行为设计,行为设计很大程度上决定了产品的用户体验。在行为设计中,利用手势+动画的设计就是比较炫酷的体验设计。通常可以通过手势的滑动操作,把不动的元素变得有生命;如最美应用、twtter。在不同的内容界面,利用上下滑动这个基本且常见的人机交互;把当前界面的内容操作控件或者主体信息,通过吸顶变形的方式呈现。动画过程自然且高效,动画效果给用户很强的记忆点,能够对产品快速产生喜爱感。

让手势设计带你的产品体验“飞”…

让手势设计带你的产品体验“飞”…

本文所指的直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验。一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感,二是滑动过程中,用户的视觉可以看到的空间更整洁,体验更纯粹。

凡事张弛有度,交互中利用手势操作是可以锦上添花,但过犹不及,如果喧宾夺主就要考虑取消。好设计是能把握到让用户最舒服的度!当你的设计与体验融为一体的时候,才会给用户带来真正意义上的“飞一般的感觉”!

 

作者:Mandy权,微信公众号:Q产品,一名快乐的产品经理!~

本文由 @Mandy权 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-17 08:57
下一篇 2017-05-17 10:42

相关推荐

  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 掌握这10招,再也不愁公众号涨粉了!

    都说现在运营公众号非常难涨粉非常难别担心今天介绍10种强大的运营工具/技巧给你帮你解决下面这些问题帐号涨粉、爆文技巧、文章排版图片设计、数据监测、海报营销1运营公举小磊磊免费学习新媒体运营知识年收入上百万的全栈新媒体运营,全平台有10万新媒体运营关注,成百上千个自媒体大佬都是他的粉丝。公众号上有180万字的原创运营知识,教你写文章、涨粉、赚钱、提升运营能力。并且把新媒体知识梳理成了标准化的知识体系,让所有人都能免费学会公众号运营。长按识...

    2018-04-03
  • 设计只在需要时 —— “暂停”按钮的消失又出现

      很多时候,不好的设计往往是因为思考的不充分或者思考的太多;而好的设计则正是因为它出现的恰到好处,哪怕它可能是在对传统习惯做出的挑战。以下我将通过现实产品中“暂停”按钮的消失又出现来说明这一点。
      对于现实中的声音播放工具,大家应该不陌生吧。录音机、walkman、CD随身听,虽然这是上个世纪甚至上上世纪的名字,但是也不至于让现在沉溺于虚拟世界的人们彻底忘记(90后除外)。我们只是去回味这些古老工具的播放控制按钮,也是能够品味出优良的设计思想的。

    2017-08-04
  • 定义方向策略 – 有理有据做设计

    独立项目中,交互设计师的工作可以分成四个核心环节:定义方向策略、确定解决方案、有理有据的进行设计输出、上线效果跟踪。本期要和大家分享的是:方向策略。 方向策略阶段需要明确了解本次设计原因及产品目标,进…

    2016-12-08
  • 【交互基础】你认为交互设计是什么?它是否有一个完整的定义?它的上升空间如何?交互设计又是如何应用的?

    交互学堂 微信号 IxDSchool 功能介绍: 从零开始学交互!国内最专业的交互设计学习内容资源。如需访问网站请百度搜索:交互学堂。 [alert_success]很多人问:你认为交互设计是什么?它是否有一个完整的定义?它的上…

    2016-02-19
  • 解压设计?一位交互设计学生对智能化的反思

    Skylar Jessen 是纽约大学的一名学生,主修交互设计。他觉得,如今的交互设计普遍缺乏人性化的东西。它们“压缩”了人们的自我表达方式。最近,在学校的交互设计项目上,他提交了一些特别的设计,并称之为“解压设计”…

    2017-08-01
  • 【18应届报考北师大map用户体验方向】经验分享贴

    BNU学习小组互助互帮,轻松考取北师大,我们团队致力于为报考北师大MAP心理学专业的学弟学妹提供最精准的专业课辅导,官方微信:yanni513351。QQ:2194691060。专业课方面:普心、社会心理学我主要是看书背知识点,这两门课不难理解,看书熟悉内容以后将知识点背熟就可以,另外要通过做题检验自己的程度。测量心理学、实验心理学和统计心理学这三门课注重理解,尤其是统计心理学,要将每个知识点弄懂是什么意思,再做题巩固。而实验心理学重点...

    2018-04-15
  • 腾讯高级交互设计师:什么是优秀的设计思维与方法?

    在年轻设计师里普遍存在工作方式和思维方式问题。 编者按:本文系腾讯高级交互设计师秦银(微信公众号“G思维”,ID:DesignG),在Boss直聘主办的直聘学院「对话UI&UX设计」活动上的分享整理,介绍如何把握设计…

    2017-07-28
  • 设计师个人品牌的建立

    个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

    2016-02-21
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06