本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第1章,第1.4节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 神秘谷,是什么让触摸界面反应灵敏?

我有个两岁半的儿子。他从一岁开始就能解锁iPad并找到他想要的应用程序。他还不会说话,就会解锁iPad。我与其他家长交流意见,发现并不是因为我的儿子智商超群。触摸界面给了孩子们直观的感受:触摸和移动东西,是人类做的最基本的事情之一。触摸界面直观又强大。但它也很容易令人失望。

有一个理论在机器人学里被称为“神秘谷”:机器人看上去越像人,就越对我们有吸引力,但当机器人的外形快要逼近真人的时候,会让我们觉得很奇怪,甚至被吓得毛骨悚然。“谷”是机器人与人类相似程度与人类舒适度等级的映射关系的拐点。

触摸界面让人感觉很自然,感觉像在移动周围真实的物体。不正确的运用时,给人的感受不是慢,而是失望。直接操纵的假象被打破时,触摸界面也不再让用户感觉自然。这种失望感仿佛掉进了神秘谷,用户不再感觉自然,而是感觉怪异。
**
1.4.1 传送长奥布莱恩和直接操纵**
像我这一代的许多人一样,我第一次触摸界面是通过《星际迷航:下一代》。如果你没有看过的话,可以想象一下:船上所有的控制面板为触摸屏,实际上是多点触摸界面。显然,这样做的原因完全是因为预算。电影的创作者希望在所有的控制面板中表现大量的复杂性,但以一个脱口秀节目的预算支付不起建造这些设备的费用。于是,他们想出了在胶片上印出界面,并在后面用灯光,创造出触摸屏的外观的方法。

传送长奥布莱恩,也就是操纵这艘飞船的人,用三指滑动手势来发动飞船。我觉得那个手势真的很有趣。界面上有三个滑块,演员会自然想到去触摸和拖动滑块,就好像操纵真正的物体。这是人们所期望使用触摸界面的方法。当他们触摸屏幕时,能凭直觉感到,与它进行交互,就像在移动一个真正的物体。

苹果的触摸接口指南称这个概念为“直接操纵”,而不是通过控制器来控制。在理想情况下,触摸界面给用户的印象是,直接操纵交互的东西。

你会注意到,当传送长奥布莱恩的手指移动时,小指示器也在随之移动。这就能保持直接操纵的假象。小指示器也提供反馈,表明计算机正在记录他的动作。

1.4.2 给用户反馈
我会想,用户界面只需让人感觉快,而无需真的快。只需及时响应—立即响应用户,让他知道有反应了。我最喜欢的例子是TiVo。不是我现在的高清电视,而是在1999年发售的TiVo。那个电视盒有一个54 MHz的CPU和仅有的16 MB的RAM。虽然TiVo有特殊的硬件对视频编解码,但从用户点击一个影片到开始播放可能还是需要一段相当长的时间。TiVo的投诉有很多,但从来没有人抱怨它的速度慢。这是因为TiVo有用户熟悉的哔嘣声。

当用户点击一个影片时,能立即听到声音。我不知道工程师花费了多少时间才确保声音出现的及时性,这恰恰就是高明的地方。声音让用户能立即知道机器已经收到了他的请求。

在网页的用户界面上,这种及时的反馈是同样重要的。对于桌面电脑的网页,大多数人和设备的交互是分离的:单击后对应的效果出现。对于触摸界面,许多交互是连续的,因为它们是手势交互。当用户在屏幕上用手势操作时,不能等到手势完毕再做反馈,因为根据用户的理解,它们甚至会认为手势没有生效!

我们来谈谈滑动。滑动是指在屏幕上移动手指来执行一些操作。理想的情况下,界面元素应该随着用户的滑动而移动。如果是在页面之间滑动,整个页面应该随着手指移动。如果界面不动,那么在滑动结束之前,就无法知道到底发生了什么。没有反馈的滑动手势会像一个键盘,在你输入一个字母之前,它不会有任何反馈。手势不能等到完成时才反馈。为了让界面感觉反应迅速,还必须是连续的反馈,当用户的手指移动的时候,界面也应该移动。

如果用户在用手势操作,即使在操作完毕时,界面也必须跟着移动。如果界面在手势操作时中途停止移动了,就感觉像死机了一样。

例如,如果你创建了一组幻灯片,用户可以在幻灯片之间滑动,当用户到达最后一张幻灯片时,你不会希望手势响应停止,用户会以为界面卡死了。而是让用户继续滑动,当用户松手时,应该快速地将上一张弹回。用户得到了她的手势已经被机器接收到的反馈,只是幻灯片已经放完了。这是苹果如此严重地依赖在手势结束时的“迅速弹回”的原因。这是告知用户已经到了最后,而又不破坏手势意义的唯一办法。

规范
每个用户界面有它的规范。在桌面上有窗口、按钮、滚动条、关闭框。在移动界面,有一组新的规范。先行者苹果创建了两套UI规范。

你不需要一切都与原生的iOS应用程序完全一样。但知道一些手势和元素在移动领域的意义十分重要:不要使用滑动手势来表示选择,因为原生应用程序中这表示删除。不要更改操作系统通常会保留的手势(比如按下并保持一段时间表示呼出内容菜单,双指捏紧为缩小,双击为放大),除非你重新实现相同的基本功能。(你会在第10章中了解更多有关“滚动和滑动”的知识,在第11章中了解更多有关“双指缩放和其他的复杂的手势”的知识。)

《HTML5触摸界面设计与开发》——1.4 神秘谷,是什么让触摸界面反应灵敏?...相关推荐

  1. html5开发桌面界面设计,HTML5触摸界面设计与开发

    HTML5触摸界面设计与开发 编辑 锁定 讨论 上传视频 <HTML5触摸界面设计与开发>是人民邮电出版社于2014年出版的一本图书,作者是伍兹 (Stephen Woods).[1] 中 ...

  2. 一个Web系统OA界面设计和开发

    早在中国IT业方兴未艾之时,计算机应用系统主要以功能实现为主,几乎没有界面设计这个概念.时至今日,随着计算机和网络的不断普及,社会信息化程度日益加深,用户和市场的不断成熟,人们已经不仅仅满足于&quo ...

  3. 《HTML5触摸界面设计与开发》——导读

    前言 在我写作时, 11.42%的网页流量来自移动设备.这个数字一年前是7%,三年之前是1.77%.虽然桌面设备还会陪伴我们一段时间,但是Web的未来是在移动设备上的. 对于Web开发者,支持移动设备 ...

  4. html5触摸界面设计与开发_原生APP的开发步骤主要分为哪些?

    移动APP的发展也来也好,APP的开发也是越来广泛,同时APP也是有这多种的开发方式.济南网站建设的小编在之前的文章"一起企业APP开发前首先要确定哪些?"中就有提到过APP开发模 ...

  5. 一个Web系统的界面设计和开发.2

    [注:本文文字及图片均为作者原创,保留一切权力,转载请注明作者姓名和出处,谢谢.] 4.主界面设计 设计主界面,确定系统基本风格,是概要设计中的工作之一.首页主界面的主要实现功能是导航,它要达到的目的 ...

  6. 《HTML5 界面设计与开发》 读书笔记

    为什么80%的码农都做不了架构师?>>>    移动设备概述 目前所有的移动设备在绘图上,都是用所谓的"共享内存".与桌面电脑的显卡不同,移动设备上的图形硬件没有 ...

  7. html5网页设计教程读书笔记,《HTML5 界面设计与开发》 读书笔记

    移动设备概述 目前所有的移动设备在绘图上,都是用所谓的"共享内存".与桌面电脑的显卡不同,移动设备上的图形硬件没有专用的内存,只是共享系统内存.这意味着,随着越来越多的东西被添加到 ...

  8. php网页的注册界面设计,HTML开发博客之注册页面设计(一)

    CSS文件的引入 新建文件reg.html文件 首先我们来分析网页布局 这是我们页面完成后的效果, 网页分为三部分 头部,主体,和底部我们按照这个顺序开始编写. 头部导航栏的编写html> 用户 ...

  9. python打开交互界面设计_老司机必备——用PyQt做一个有交互界面的妹子图爬虫...

    内容简介:老司机必备--用PyQt做一个有交互界面的妹子图爬虫 代码飙车,指日可待.今天的课程教大家结合PyQt和 Python 爬虫技术,做一个带有交互界面的妹子图网站爬虫程序. 一.实验简介 1. ...

最新文章

  1. C#表达式,类型和变量
  2. Mac下搭建cocos2d 和cocos2d -x 环境
  3. HBase: Thrift写数据报错——socket.error: [Errno 32] Broken pip
  4. 【MobX】390- MobX 入门教程(上)
  5. 前端学习(8):HTML的基本属性和结构
  6. jquery获取radio的值,a标签传值
  7. samba实现linux之间文件共享,使用 samba 实现文件共享
  8. LeetCode-567:字符串的排列
  9. STC51-1602、12232、12864液晶
  10. 翁恺老师C语言学习笔记(八)数组
  11. WPF入门教程系列二十——ListView示例(二)
  12. gb28181协议java_gb28181开发源码
  13. java工程师优秀简历模板,这原因我服了
  14. Intellij IDEA 插件下载慢或无法查询
  15. 2021深圳观澜中学高考成绩查询入口,2019深圳龙华中学、观澜中学、龙华高级中学录取分数线及高考成绩喜报...
  16. 以 Broadcom Corporation BCM4311、BCM4312、BCM4313、BCM4321 或 BCM4322 为基础的无线网络卡...
  17. (附源码)springboot校园管理系统 毕业设计021104
  18. 分析ajax爬取果壳网
  19. 国内排名前几的客流统计系统公司有哪些?
  20. 别怕未来会把过去写旧【1】

热门文章

  1. figma下载_我关于Figma文件封面的故事
  2. 都快 2022 年了,这些 Github 使用技巧你都会了吗?
  3. Android 多线程之几个基本问题
  4. 分布式版本控制系统之Git
  5. Google的“机器人情结”:两次合计36亿美元的人工智能收购
  6. 第一轮复习完毕,kmp走起
  7. ceph集群报 Monitor clock skew detected 错误问题排查,解决
  8. ECShop 前台用户中心调整左侧栏目及中心部分呈现页面
  9. 帆软报表(finereport)单元格函数,OP参数
  10. WCF从理论到实践(4):路在何方