UI设计基础概念(五)之手势应用

用户头像
北京/UI设计师/10年前/1375浏览
UI设计基础概念(五)之手势应用
用户头像
catwomanx

各种手势操作介绍


所谓手势,有些人可别想歪了噢~手机上面的手势真的是非常多的。我们具体来介绍一下。。

d0975746adc76ac72525aea394d7.jpg


不同于传统的按键界面,手势操作的隐藏性很高。如果我们没有阅读过某个手势应用的帮助信息的话,我们很难知道这个应用中到底隐藏着多少种手势。不直观的手势加大了新用户的上手难度。虽然手势有很多弊端,但我们不能抛弃手势。

我们今天就先介绍几种最常见的手势吧。

一、单击


db7e5746b30a32f875a4294b1dad.jpg点击一下,这个是最简单最基础的手势,类似于鼠标单击。

案例:视频播放器界面单击出现很多功能图标等。


二、双击


ebbf5746b5136ac72525aed4ff78.jpg

通过双击对象,快速聚焦单击的内容对象。比如照片可以通过双击局部变大。

案例:iPhone手机双击AssistiveTouch中主屏幕就能删除应用使用记录。

           微信首页中,双击标题栏可快速返回最顶部页面。


三、上下滑动


9e085747f48d6ac72525aebb9fd8.jpg

快速滚屏,方向是上下滑动

案例:界面中上下滑动可以快速浏览页面内容。

           ios系统中从上往下滑动顶端可展开通知中心。

          下拉刷新,也是上下滑动的手势


四、左右滑动


de88574807126ac72525ae2d7cd5.jpg

通过横向滑动,展示或者切换页面。

案例:一般界面中分类信息运用左右滑动形势来切换页面,新闻类运用的比较多。还有读书类软件左右滑动实现        翻页效果。

          微信信息列表页,向左滑动可展开删除按钮。


五、长按


cf83574806ac32f875a429370c1c.jpg

“长按”,按住屏幕超过两秒。此动作通常用来调出“菜单”。

案例:比如站酷文章详情,长按文章上面的文字,可以出现“复制”相关操作。

           微信中发布朋友圈功能,长按发布按钮就会跳转到直接发布文字界面,不需要选取照片。


六、拖动


2aab5748082932f875a429ca3256.jpg

“拖动”,准确来说应该叫做“按住并拖动”。滚屏或移动对象,将对象从界面的一边移动到另一边。

案例:iPhone界面就是通过按住图标来移动图标的位置。


七、张开/闭合


9acc5748083e32f875a429aae70f.jpg

“缩放”“闭合”动作,是查看图片、网页时最常见的操作

案例:照相时也可使用缩放手势来进行调焦。照片也可以夸大缩小。


其实还有很多双手指,三手指,五根手指的一些操作。这里就不一一举例啦。

反正最好的手势一来简单,二来支持单手操作。想要手势好用,满足下面条件就哦啦。

*简单易用。不仅动作简单,还要能在拥挤的地铁上单手操作。

*容易记忆。其一手势要好记,其二要让人愿意记住。

*自然。也就是说,该手势一方面要遵循人的自然习惯和意识,另一方面要契合手势即将产生的操作。

*实用。手势要让用户感到舒服,鲜有用户愿意点两次才看到想看的东西,让会让他们感到麻烦。

*愉悦的体验。Winkler认为好的手势会有神奇的感觉。UX总是个未知数,而且难于言传。但这恰是我们认识、享受科技的一种表现。


27
举报
|
15
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
你可能喜欢
大家都在看
登录注册