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

小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

相关推荐

  • 『涨姿势,什么是交互设计?』

    干货分享,点击标题下‘琅沐创意年代’订阅关注『涨姿势,什么是交互设计?』交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品…

    2017-08-02
  • 经验分享|利用品牌基因法进行图标设计

    在看这篇文章之前你需要清楚,我所讲的东西并不是什么权威,只是在工作中总结出来的一些的小经验而已,制作图标的方法也有很多种,这里只是给大家一个思路上的启发,希望能对你有所帮助吧!

    2017-05-06
  • 网页重设计的7个常见误区与解决方案

    “如果所有都是重点,那么就不存在重点了。——Patrick Lencioni”“用户在手机上永远用不到这些内容。”

    2017-05-23
  • 微站三大更新,优化用户体验!

    微盟新云微盟官方产品发布平台关注微站加粉组件上线后,商户快速使用该功能向微信公众号或个人微信号引流。为了让商户掌握引流情况,近日微站上线了加粉组件的数据明细功能,帮助商户分析数据,优化内容。新增加粉组件的数据明细功能描述:包含加粉点击次数与人数两项统计,商户从微站→店铺→数据→页面分析,查看数据明细。通过数据分析,商户可以获取引流的实际情况,优化加粉组件位置和页面布局。(加粉组件:微站最新上线的一个引流功能,商户在微站后台编辑时,点击微...

    2018-04-10
  • 用户体验设计:你必须知道的的9种状态(下)

    眼看着年纪比我们小却成就比我们高的人来说,我们依旧需要不停的汲取知识来成长。所以这个假期也是撸了两篇文章出来,这是第二篇,希望大家一起来探讨。

    2017-05-18
  • 交互设计基础概念

    交互设计(Interaction Design,简称IxD)是指设计人机交互的过程和方式,主要目的是让人与数字产品之间的交互变得更加自然、高效和愉悦。在数字产品的设计过程中,交互设计被视为一个重要的领域,因为它是用户体验…

    交互设计 2023-04-03
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • Axure RP 8.0安装教程

    Axure RP 8.0Win版/64位下载地址:https://pan.baidu.com/s/13eqSe3IeqvnyqjBYxIEqZA密码:2gkwAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • 从我个人经历来说,交互新人需要注意这3点

    当你做完交互稿的时候你可以不停的讲述给自己或者另外一个人听;在这个反复的过程中你就会发现你的交互稿中的漏洞。

    2017-05-25
  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17