关于触控设备设计的总结――Design for Touch

标签: 交互设计 | 发表时间:2013-07-03 00:01 | 作者:百度MUX
出处:http://www.yixieshi.com

  自入职以来,一直在做移动端的交互设计,半年多感触最深的便是触屏设备的大规模兴起所带来移动互联网翻天覆地的变化。我们身边随处可见的触屏手机、平板电脑,证明着移动互联网的狂潮已悄然而至。地铁、公交、商场、大街,人手一台的移动设备正在改变我们的生活。

  作为一名设计人员,自然少不了对行业的密切关注,最近浏览国外同行的博客,看到一篇关于触控设备设计的个人总结,在此小作翻译,与大家分享一下。

  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  以下是译文部分:

   Design For Touch

  by Luke Wroblewski

  原文地址:http://www.lukew.com/ff/entry.asp?1699

  在西雅图举行的2013 An Event Apart活动里,Josh Clark发表了名为“为触控而设计”的演讲,分享了在当前日益扩大的设备种类环境下,如何思考为触控而做的设计是否符合人体工程学等观点。这里是我做的一部分笔记:

   1. 回顾网页设计的历史,我们已经意识到在某些方面,我们正在做的事情是错误的:表格的布局、Web标准等等。触控操作也正预示着类似的转变。

   2.  没人真正的在往Web中输入内容。我们不得不与手指、鼠标、键盘等“设备”抗争。

   3.  触控操作已经不仅限于智能手机和平板电脑,每一个桌面主题的设计现在都必须支持触屏移动。

   4.  网页设计一直被认为是一种视觉媒体,但如今,它不仅仅需要关心你的设计在屏幕上的每一个像素看起来如何,而是它看起来给人的感觉怎样。我们不再只是视觉设计师,同样也是工业设计师(译者注:此处可以理解为交互设计师)。

   5.  在触摸屏上,有真正对于人体工程学的设计。触控是一种物理层面的交互:事物在你手中是怎样的感觉?所做的设计在你手里使用时是否行得通?

   手机指南

   1. 你有三种握手机的方法:1、单手握住手机,用一个拇指操作;2、双手握住手机,用一个拇指或其他手指操作;3、双手握住手机,用两个拇指操作。据调查,49%的人在户外使用手机时,用单手,一个拇指操作;当你算上使用两个拇指操作的人,这个比例到达了75%。

   2. 拇指触控区域:即用单手,一个拇指操作时最舒服的操作区域。当使用Web端时,标准的导航操作在页面顶部,而现在,手机的底部成了放置重要操作更好的位置。

   3. 内容在上,操作在下,这是当下设计软件时的交互设计惯例。我们不希望我们的手指在操作的时候挡住内容。

   4. 不要太担心“左还是右?”的问题,重要的决定都是围绕着上和下来决定的。

   5. 内容在上,操作在下已经是一个古老的交互模型了,你可以确保用户在进行任何操作时都不会遮挡内容。

   6. 但是在Android上,系统的控制按钮在设备的底部,为了不和这些按钮冲突,Android会建议你将APP内的操作放在界面顶部,这意味着我们的手指会频繁遮挡住内容。

   7. Web端所拥有的固定位置和高度限制,在手机浏览器的底部会更难定位。有的浏览器还在底部使用了自己的工具栏,再次压缩了空间。因此,在页面顶部添加锚链接,可以提供更快速的导航功能,取代页脚导航模式。

   8. iOS apps:控制键在屏幕底部。Android apps:控制键在屏幕顶部。Web(手机浏览器):控制键在页面底部。

  平板指南

   1. 同手机一样,握平板的姿势也是千奇百怪,但通常你握住的是它的两侧。

   2. 在平板电脑上,同样存在着关于拇指操作的人体工程学。考虑使用屏幕顶部区域放置导航控制键,多多利用屏幕两侧和角落,将中心部分空出来。

   3. 相对与顶部与底部来说,够到屏幕的两侧是成本最小的。

   4. 如果你想通过底部放置的Scrubber控件平移来预览内容,也是可以有例外的。

   5. 为大尺寸平板而设计:多多利用屏幕两侧和角落,将上中部空出来,用底部来查看画布中的效果。

   触控本指南

   1. 运行Windows8系统的可触控式笔记本,也开始进入市场了,这类设备要求能够在传统笔记本电脑上进行触控操作。

   2. 在此类设备上,当同时支持触控与鼠标键盘操作的时候,触控是首选交互方式。

   3. 为了避免“大猩猩手臂”问题(译者注:提起大猩猩手臂这个词,主要针对传统的台式电脑和笔记本终端,这些附带触屏功能的终端设备让我们使用者长时间抬着手臂在屏幕上划来划去,真的很累人。),人们通常会将屏幕拉到面前,然后在设备的边缘使用拇指进行操作。

   4. 为了使拇指操作体验最优化,你也许会考虑将主要功能放置在屏幕的左侧。这里说的主要功能不是指主导航选项,而是使用频繁的操作。

   5. 拇指在左侧控制关键内容的操作,比如分享。

   6. 这种舒适的点击区域与传统的桌面系统相比有很大差异。

   7. 通过屏幕大小来检测触摸屏是一个糟糕的方法,没有靠谱的方式来检测所有的设备。

   8. CSS4 Media Queries提供了一个属性为coarse的指针,它允许人们基于触控交互而改变页面风格(译者注:eg:http://stuffandnonsense.co.uk/)

   9. 由于我们不能可靠地知道所有设备上触屏的情况,因此所有的桌面主题设计不得不支持触屏移动。

   10. 在你的界面里将悬停状态看做一个优化,而非决定性的元素(唯一可以将事情做好的方法)。

   点击目标尺寸

   1. 基于人类普遍的手指指尖点击面积,最理想的点击目标尺寸为7*7mm,CSS2.1定义了一个像素的大小为1/96英寸,因此7mm差不多就是30px。但是,由于动态的视图变换,事情远不止这么简单。

   2. 像素点在动态的视图变换中也是变化的。算上这种变化,我们需要将30这个数值扩大至44,差不多是2.75em。

   3. 苹果公司基本上运用44px规则来设计iOS设备上的原生应用。只要你在某一处用到44px的尺寸大小,那么在其他地方你可以用29px。这样就从生理上,呈现出一种视觉的和谐感。

   4. 是的,你得考虑生理维度。不仅要为了手部去设计界面,还得使他们融合起来。

   5. 当你遵循点击目标尺寸相关的指南时,你需要权衡它在设计中的比重。也就是说,你越少用到屏幕上的空间完成操作越好。在所有的设备上,特别是手机,逻辑清晰胜过一切。

   6. 简单是好的,但别太过分,不要失去重要的复杂性。复杂性给了我们生命,给了我们界面的结构。人们不想要愚蠢的界面,他们只要简单的体验。

   7. 在更大的屏幕上,人们都认为需要将空白部分填满,因此导致了界面出现不必要的混乱。

   8. 在小屏幕上,次要的信息可以隐藏,使用渐进公开的原则揭示信息,因为它是必要的。渐进公开:通过逐步地显示来管理复杂的信息。

   9. 当你能控制性能问题的时候,多余的点击并没有什么坏处。在手机上,我们应该更多的考虑多余的操作步骤所带来的厌恶感。只要一次点击是高质量的,能够保证信息传递的完整,那就不是多余的。

   10. 需要留意的是,冗长的内容可能会在屏幕中晦涩地来回滚动,画布外的元素,能帮你解决这个问题。

   触控之外

   1. 最好的触控界面有时根本不需要你来“触控”,利用传感器和语音控制进行操作,是交互设计的发展趋势,这已经不再是技术上的问题,而是如何实现的问题了。

   2. 未来几年针对设计的挑战,将是如何从单一输入方式扩展至多种输入并用的方式。

   3. 数码已经越来越接近自然,而自然也变得越来越数字化。我们要如何让我们的界面更好的融入真实世界呢?

相关 [触控 设备 设计] 推荐:

关于触控设备设计的总结――Design for Touch

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  自入职以来,一直在做移动端的交互设计,半年多感触最深的便是触屏设备的大规模兴起所带来移动互联网翻天覆地的变化. 我们身边随处可见的触屏手机、平板电脑,证明着移动互联网的狂潮已悄然而至. 地铁、公交、商场、大街,人手一台的移动设备正在改变我们的生活.   作为一名设计人员,自然少不了对行业的密切关注,最近浏览国外同行的博客,看到一篇关于触控设备设计的个人总结,在此小作翻译,与大家分享一下.

移动设备手势设计初探

- redhobor - 腾讯CDC
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

iOS设备上的App设计规范

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  APP界面设计规范指导APP设计过程中的设计标准,根据统一的设计标准,使得整个APP在视觉上统一. 提高用户对APP的产品认知和操作便捷性. 今天我们互联网的一些事和大家分享一份iOS设备的App设计规范,内容“本来每”负责整理. 本文链接: http://www.yixieshi.com/ucd/13759.html.

『设计』把苹果设备都架起来!

- 牛牛大人 - 爱范儿 · Beats of Bits
如果你有超过 2 个以上苹果设备,经常可能遇到设备摆得乱七八糟,一堆数据线纠缠在一起的状况,非常不方便. 19 岁的 Andrew Kim 是洛杉矶美国艺术中心设计学院的学生,他的巧思妙想会解决这个问题. 在“两周快速项目”中,他设计了这款名为“polyply”的产品. 这款支架可以容纳一个 iPad、一个 iPod Classic、一部 iPhone 4 和一支笔.

为移动设备一致体验做设计

- Estella - 所有文章 - UCD大社区
原文designing for the future web: http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/. 这里只了提些主干出来,强烈推荐原文,尤其技术方面的很多tips有深入的讲解. 本文推崇的是“因为现代人越来越生活net依存状态,ipad,3g等等,各种情况下人时时刻刻都在online状态中.

移动设备手势设计初探 – 腾讯CDC

- 奥斯汀Outman - cdc.tencent.com
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

又是为了触屏移动设备而设计

- - 盒子UI
印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔. November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界. 可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗.

移动设备的简单交互设计

- - Tech2IPO
用户访问移动站点不仅消费内容,还会完成某些任务. 就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务. 移动用户界面(UI)的设计是如何帮助用户完成任务的呢. 移动站点传达和展现交互的最佳方式又是什么呢. 为了找出在移动设备上设计简单交互的最佳方法,我对航班状况查询的任务做了些调查.