您的位置：
触摸屏的交互设计：滑动手势取代点击操作
作者：曉生語錄
&　　在分析N9的滑动手势时，分析其如何取代iPhone的Home键，提出&取代点击&的论点。汇总之前几篇文章，强调这一设计趋势。
　　触摸屏的点击是沿用鼠标点击的操作，其本身具有诸多不利的因素:
　　显示空间。控件会占用显示控件，44像素的正方形对于手机界面也是宝贵的显示空间。
　　不易操作。控件需要放置的特定的位置，由于屏幕过大和手持设备的姿势导致部分控件不容易点击到。
　　精确度。一是点击手势有精准性要求，触摸屏可点击区域由手指的指肚面积决定。二是用户点击的落点通常在目标区域中心的下方。
　　尺寸。如按键密集的输入法键盘，按键大，用户点击比较随意，速度快但导致精准度差。按钮太小，导致用户点击比较小心，点击速度较慢。
　　形状。圆形和菱形按钮不如方形按钮输入准确率高。
　　位置。在大拇指周围易于点击，但是右下角点击的准确度却不如左上角的按钮。
　　隐喻。点击与现实生活的隐喻很弱，按钮通过指示开关或者某项特定的操作，但是删除、下载、关闭、打开和切换等操作与点击没有直接的关系，这也是和鼠标操作比较单一有关系，触摸屏的操作方式更为丰富，自然用户界面(NUI)比图形界面(GUI)更为直接，与其说是隐喻，不如说直接表现物理世界，转向最自然的交流方式。
　　从更多的设计重可以看出，以滑动和拖拽等手势取代点击已经成为交互设计的一种趋势。以滑动手势举例，设计中使用滑动手势取代点击有诸多优点：
　　更方便。滑动操作与点击相比，易操作，甚至可以全屏操作。如愤怒的小鸟，在拉弹弓时，并不要求精确操作某个区域，这一点应用在很多游戏的交互设计中。又如Android3.0左右滑动切换标签。
　　扁平化界面。如ios5相机取景时，滑动界面可以查看之前的照片，界面切换不是通过点击跳转，而是平级的呈现方式。
　　节约显示空间。如iPhone豆瓣主界面下拉显示搜索框、Palm应用程序界面随着滑动轨迹显示常用功能、邮件列表向右滑动删除邮件和微博列表下拉刷新，可以减少控件占有显示空间，控件只在需要的时候出现，让用户的注意力放置在主体内容上。
　　减少误操作。当控件被取代之后，由于控件本身指示性弱和控件过小导致点击不精准导致误操作的问题出现的概率更小。
　　隐喻强。Palm的卡片删除多任务和邮件列表右滑删除邮件隐喻&移除&，而不是呆板地点击一个叉叉图标。
　　通过对比，滑动比点击有着很多优势，虽然个别操作需要学习成本或者暂时作为快捷操作，应用在设计中确实可以提升体验，特别对于翻页这种频繁的操作。除此之后，滑动作为本身还有很多特性可以利用。
　　从技术的角度来，是通过参数来识别手势。点击是获取手指触摸屏幕的坐标，滑动是获取坐标和时间，拖拽是长按加上滑动操作。连接各个时间点的坐标绘制出滑动曲线轨迹，这个曲线可以利用的参数有：
　　方向性。在Safari里可以任意方向滑动页面，iPhone主界面可以左右滑动，WP7的sina微博可以上下和左右滑动，百度手机输入法可以四个方向滑动选词。当只能单方向滑动，如左右，左右方向Y轴只要有位移都可以导致滑动;当可以两个方向滑动，滑动根据位移所在的区间识别滑动方向，WP7的应用程序有时会分辨不清滑动方向。
　　惯性。滑动轨迹具有惯性，当手指离开触摸屏时有速度，滑动效果不会立即结束，比如网页的快速滚屏效果。在Android系统主界面，缓慢左右滑动半屏，界面并不会切换，当快速短距离左右滑动时，界面会根据惯性切换，这和现实世界的物理运动规律相吻合的。
　　起点和终点。在特定的区域内开始滑动，操作不同，如百度手机输入法的滑动选词，滑动手势也可以像点击一样限定区域。N9由底部向上滑动在五分之一区域停留识别为切换多任务。
　　这些是滑动的基本元素，更为复杂的操作需要应用程序自定义，如swype输入法是利于曲线的折角识别选择的字母，浏览器可以定义滑动的快捷操作，顺着这个
思路可以预见将会有更多的滑动操作方式出现。
(转载请保留)
置顶推荐热门话题
您刚刚看过
互联网的一些事，已超50万小伙伴关注！用setOnScrollListener(new AbsListView.OnScrollListener()）来实现，判断滑动后显示的第一个条目 ，与滑动前的第一个条目的大小来判断，
这种方法逻辑简单，但是必须要滑动到当前第一条目隐藏后才能起作用，当listview的单个条目的高度很大时，这种方法就不好使了。代码如下：
lv_shiti_content.setOnScrollListener(new AbsListView.OnScrollListener() {
boolean scrollFlag=false;//标记是否滑动
boolean isFirst=true;//标记第一次进入，因为第一次进来lastVisibleItemPosition默认为0，
// 此时如果listview的第一个显示的条目不是第一个（下表为0），则往下滑也会出现firstVisibleItem&lastVisibleItemPosition的情况
//所以第一次进入时不做操作，第二次进来已经给lastVisibleItemPosition赋值，就可以判断了
int lastVisibleItemP//标记上次的显示位置
public void onScrollStateChanged(AbsListView view, int scrollState) {
if(scrollState==1||scrollState==2){
//其中1 表示滑动，等同于 AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL
// 2 表示惯性滑动
等同于 AbsListView.OnScrollListener.SCROLL_STATE_FLING
scrollFlag=true;
scrollFlag=false;
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if(!isFirst){
if(firstVisibleItem&lastVisibleItemPosition){
//执行向上滑动时要做的逻辑
lastVisibleItemPosition=firstVisibleI//记录当前条目
isFirst=false;
使用setOnTouchListener(new View.OnTouchListener(）方法，这种方法，只要有一点移动距离就可以判断。
特别说明：android控件的事件传递时是默认直接传递到最里层，只有在上下滑动的时候才会中断事件，所以我们获取到的第一个事件是move事件。
而我们的逻辑也是在move事件中做的，这就造成获取的lasty和movey的值是相同的（看下面代码）
所以我们要判断，只有第一次进来的时候获取lasty。以后都是lasty直接记录当前的movey。不然每次的lasty和movey永远是相同的值。
lv_shiti_content.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if(isFirstClick){//只有第一次进来的时候用获取位置的方法给lastY赋值，后面的值都是上一次的move坐标
//如果不做此判断，每次的lasty和movey是相同的值，这是因为在此处获取的的y值其实就是move的值，
//是因为在listview中，down事件是默认传递进去给条目的，在此处无法响应down事件。
lastY=event.getY();
isFirstClick=false;//初始值是true，此处置为false。
switch (event.getAction()){
case MotionEvent.ACTION_MOVE:
float moveY = event.getY();
Log.e("moveY_START",moveY+"");
if(moveY& lastY){
if(!NewPageisOpen){//初始值为false ，由于move方法会不断调用，为防止多次打开页面。
Intent intent = new Intent(getActivity(), ShitidianTestActivity.class);
startActivity(intent);
NewPageisOpen = true;
lastY=moveY;
return false;
阅读(...) 评论()js如何实现惯性滑动效果_百度知道
js如何实现惯性滑动效果
我想做一个html5的相册，主要想实现以下效果：根据鼠标左右滑动时的速度来加载图片，速度越快加载越多，反之越少，就像有惯性一样。这效果也有点像手机浏览器的平滑滚动
我有更好的答案
主要思路是：鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。下面是简单的js代码实现：仅供参考：&style&&&&&#div1{&width:100&height:100&background:&position:&left:0&top:0;}&&&&&/style&&&&&&script&&&&&window.onload=function(){&&&& var&oDiv=document.getElementById('div1');&&&& var&iSpeedX=0;&&&& var&iSpeedY=0;&&&&& var&lastX=0;&&&& var&lastY=0;&&&& var&timer=&&&&& oDiv.onmousedown=function(ev){&&&&//div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。
var&oEvent=ev&||&&&&&
var&disX=oEvent.clientX-oDiv.offsetL&&&&
var&disY=oEvent.clientY-oDiv.offsetT&&&&&&
clearInterval(timer);&&&&&&
document.onmousemove=function(ev){&&&//鼠标拖动事件。&
var&oEvent=ev&||&&&&&&
oDiv.style.left=oEvent.clientX-disX+'px';&&&&
oDiv.style.top=oEvent.clientY-disY+'px';&&&&
iSpeedX=oEvent.clientX-lastX;&&&&
iSpeedY=oEvent.clientY-lastY;&&&&&
lastX=oEvent.clientX;&&&&
lastY=oEvent.clientY;
document.onmouseup=function(){&&&&//当鼠标抬起后，清掉移动事件。
document.onmousemove=&&&&
document.onmouseup=
oDiv.releaseCapture&&&&oDiv.releaseCapture();&&&&&&
startMove();&&&&
oDiv.setCapture&&&&oDiv.setCapture();&&&&
}&&&&&&&&& function&startMove(){&&&&//移动函数，主要操作是计算鼠标移动速度和移动方向。
clearInterval(timer);&&&&
timer=setInterval(function(){&&&&
iSpeedY+=3;&&&&
var&t=oDiv.offsetTop+iSpeedY;&&&&
var&l=oDiv.offsetLeft+iSpeedX;&&&&
if(t&document.documentElement.clientHeight-oDiv.offsetHeight){&&&&
t=document.documentElement.clientHeight-oDiv.offsetH&&&&
iSpeedY*=-0.8;&&&&
iSpeedX*=0.8;
if(t&0){&&&&
iSpeedY*=-0.8;&&&&
iSpeedX*=0.8;
if(l&document.documentElement.clientWidth-oDiv.offsetWidth){&&&&
l=document.documentElement.clientWidth-oDiv.offsetW &&&&
iSpeedX*=-0.8;&&&&
iSpeedY*=0.8;&&&&
if(l&0){&&&&
iSpeedX*=-0.8;&&&&
iSpeedY*=0.8; &&&&
oDiv.style.left=l+'px';&&&&
oDiv.style.top=t+'px';&&&&
if(Math.abs(iSpeedX)&1)iSpeedX=0;&&&&
if(Math.abs(iSpeedY)&1)iSpeedY=0;&&&&
if(iSpeedX==0&&&&iSpeedY==0&&&&t==document.documentElement.clientHeight-oDiv.offsetHeight){&&&&
clearInterval(timer);&&&&
document.title=i++;&&&&
}&&&&};&&&&&/script&&&&&&/head&&&&&&body&&&&&&div&id=&div1&&&/div&&&&&&/body&
一般用jq来实现，有专门的类包。直接调用即可。
可否上传下？
为您推荐：
其他类似问题
您可能关注的内容
惯性的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。扫二维码下载作业帮
3亿+用户的选择
下载作业帮安装包
扫二维码下载作业帮
3亿+用户的选择
（2014o佛山）如图所示，小宇从公园里的滑梯上滑下，在滑下的过程中，下列说法正确的是（　　）A．人与滑梯接触部位感到好烫，是因为太阳把滑梯晒热了B．自于惯性，当他滑到滑梯底部时难以立即停下来C．人受到的重力与摩擦力是一对平衡力D．人的重力势能变小，但总的机械能不变
作业帮用户
扫二维码下载作业帮
3亿+用户的选择
A、小宇从滑梯上滑下，臀部和滑梯之间存在摩擦，克服摩擦做功，机械能转化为内能，臀部内能增加，温度升高，有灼热的感觉，不是因为太阳把滑梯晒热了，故A错误．B、小宇原来是运动的，当他滑到滑梯底部时，由于惯性仍保持原来的运动状态，所以难以立即停下来，故B正确．C、人滑下来是加速下滑，说明人无论是在竖直还是水平方向都并不受平衡力的作用，故C错误．D、小孩从滑梯上自由滑下的过程中，克服摩擦做功，部分机械能转化成了内能，机械能变小，故D错误．故选B．
为您推荐：
解答此题从以下知识点入手：（1）克服摩擦做功，机械能转化为内能，机械能减少，内能增加．（2）物体保持运动状态不变的性质叫惯性，惯性是物体的一种属性，一切物体都有惯性；（3）平衡力是作用在同一物体上的两个力，大小相等、方向相反、作用在同一直线上．
本题考点：
惯性；平衡力的辨别；动能和势能的转化与守恒．
考点点评：
此题主要考查惯性，平衡力的辨别，能量的变化，包括动能、重力势能的变化或机械能的转化等，属于基础知识．
扫描下载二维码没有更多推荐了，
不良信息举报
举报内容：
仿iphone原生短信滑动时惯性效果
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！}