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

小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

相关推荐

  • 关于微交互动效的“六脉神剑”

    好的产品必备的两点要素:功能和细节设计。功能吸引用户使用你的产品,细节设计塑造产品的差异化,将你的用户留下。功能满足需求,细节打动人心。

    2017-05-22
  • 为熟练用户设计:如何设计才能帮助用户提高使用效率?

    本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

    2017-05-19
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 一样的页面,为什么英文排版起来就很好看?

    想起之前有一个朋友私我说,想知道英文排版怎么设计?为什么同样的页面英文排版起来就很好看呢?想必大家也非常想知道吧?那么,下面我们就立马来分析分析,听完你们就会恍然大悟!

    2017-05-17
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 花了7天看了上千个交互动效神作,我总结出5个技巧

    对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面,附上案例分析,帮你学会基础的动画制作技巧。

    2017-05-22
  • 如何做好新领域下的产品交互设计

    我所在的大数据部,是百度技术体系中一个极具技术与产品创新的部门。因此,作为交互设计师会设计各种行业的产品,已经接触过的行业有网站统计分析、旅游、金融、广告营销、医疗、房地产、零售O2O、彩票、体育、汽车…

    2016-05-10
  • 设计规范 | 详解组件控件结构体系:导航类

    本文作者将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航、分段控制式导航、列表式导航、下拉菜单式导航、抽屉式导航、宫格式导航和卡片式导航。enjoy~

    2017-04-27
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • Sketch49交互原型新功能测评教程!

    昨天,Sketch49新版本发布,小编朋友圈又被刷了一波屏。对于该全新版本,具体有哪些新功能,以及如何使用呢?「10000个知识点」特邀讲师UIBANG-乔帮主连夜做了sketch新功能测评教程,分享给大家,希望可以给予你们帮助。深夜给大家整理了Sketch49版本更新的新功能-交互原型,希望大家能有所收获。下午在圈内微信群里,忽然看到2月28日发布了Sketch49新版本的...

    2018-03-03