为触控而设计

Fanny:

在触摸屏上,有真正对于人体工程学的设计。触控是一种物理层面的交互:事物在你手中是怎样的感觉?如何使为触控而做的设计符合人体工程学?针对这一问题,Josh Clark发表了演讲,总结出一些移动设备的设计指南以及未来发展趋势:


Mobile Phone指南


1. 手握手机操作方式:


①单手(左手或右手)握住手机,用大拇指操作;


②单手握手机,用另一只手操作(点击/滑动);


③双手握住手机,用两个大拇指操作。


据调查,49%的人在户外使用手机时,用单手一个拇指操作;使用两个拇指操作的人,累计比例到达了75%。


2. 拇指触控区域:即用单手,一个拇指操作时最舒服的操作区域。


3. 内容在上,操作在下,这是当下设计软件时的交互设计惯例。因为多数用户习惯单手握机大拇指操作,操作栏设置在底部,可以确保用户在进行任何操作时都不会遮挡内容。


4. 不同系统产品的控制栏:


    iOS app:控制键在屏幕底部。


    Android app:控制键在屏幕顶部。


    Web(手机浏览器):控制键在页面底部。


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


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


平板指南


1. 在平板电脑上,同样存在着关于拇指操作的人体工程学。握平板的姿势千奇百怪,但通常是握住它的两侧。因此,相对于顶部和底部来说,够到屏幕的两侧是成本最小的。


2. 考虑使用屏幕顶部区域放置导航控制键,多多利用屏幕两侧和角落,将中心部分空出来,用底部来查看画布中的效果。。


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


触控本指南


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


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


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


4. 为了使拇指操作体验最优化,可以考虑将主要功能(不是指主导航操作,而是指频繁操作的功能)放置在屏幕的左侧。


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


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


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


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


点击目标尺寸


1. 基于人类普遍的手指指尖点击面积,最理想的点击目标尺寸为7*7mm,CSS2.1定义了一个像素的大小为1/96英寸,因此7mm差不多就是30px。


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


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


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


5. 简单是好的,但不要失去重要的复杂性。复杂性给了我们生命,给了我们界面的结构。


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


7. 在手机上,我们应该更多考虑多余的操作步骤所带来的厌恶感。只要某次点击是高质量的,能够保证信息传递的完整,那就不是多余的。


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


触控之外


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


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


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







评论

热度(4)