走近移动设计——硬件设备篇

设计文章 / 产品设计, 设计思想 | 2012-12-15 | 来源:一淘 | 发布者: mobileui

从磐石一般的台式机，到可移动的笔记本，再到手机，一个能永远携带的硬件设备，开启了一个属于个人的新媒体时代。生为无线领域的设计师，需要对手机各方面有清晰的认知和理解。上一篇，我们熟悉了移动环境的应用场景，这一篇我们将进入更小的环境——硬件设备，来看看它将给我们设计上带来什么样的惊喜。

同样，我们从一个有趣的问题开始，走近移动设计之旅的硬件设备篇。问题：手机摄像头能干什么？我们日常中最常用的是拍照，录视频，视频通话，扫描条形码、二维码。

如果你发现摄像头还能干下面图中所示的各项，像截屏，屏幕操控，测心跳，脸部识别，测距离等等，是不是感觉到很惊讶。但确实这些功能手机摄像头都能做到，甚至还有更多我们还未想到的功能。

空间容量

Web设备：空间容量大

移动设备：较为有限，插卡

设计启示：产品大小，缓存处理…

对于空间有限的手机来说，产品的应用大小是用户必然考虑的一个问题，特别是一些大型游戏。是不是游戏下载多了，突然系统弹出提示，告知手机磁盘空间不够了。这时候你就会挑选那些特别占用空间的应用删除了。是不是应用中浏览太多的图片，感觉机器慢了，同时这时候图片也占用了你更多的空间。每个应用都有设置缓存空间，超过了就会覆盖。清除缓存，不仅仅是空间的释放，也会让手机更流畅。所以需要的时候，设置清除缓存的入口，让了解的用户敢于各种预览。

硬件按钮

Web设备：产品主要通过浏览器呈现，基本布局一样

移动设备：手机硬件与平台的多样性，应用客户端和浏览器产品并存

设计启示：手机硬件按钮，了解平台的规范，了解浏览器特点…

每个平台都有自己的硬件特性，所以了解平台规范，是手机设计师必须要经历的。同样了解简单的按键也是特别需要的，比如iPhone只有一个按键，单击返回主桌面，双击出后台运行应用。Windows phone有返回，搜索和返回主界面按钮，andriod有菜单，返回主界面和返回按钮，这些按键都直接影响应用的信息架构设计。

走近移动设计——硬件设备篇

具有跨平台的浏览器手机页面的设计，也是需要了解各个浏览器的特性的。现在主流的浏览器，包括andriod和ios自带的，uc和QQ浏览器。Uc和QQ浏览器的左右滑动，是与前进和后退匹配的，还有全屏模式下各自的特点，这些特性都将影响到我们在产品设计时候的框架。

鼠标&手指

Web设备：鼠标，可以精准到1个像素的点击

移动设备：手指，44ppi的模糊点击

设计启示：为拇指而设计，底部原则，边缘原理，点击区域，操作反馈…

随着iphone重新设计了手机，iphone的经典触屏和多点触摸基本就成了现在手机的标配。我们瞬间从鼠标按键和触控笔时代进入了手指直接触控时代。所以，对于移动设计来说，判断应用是否好坏的衡量标准，不再只是应用本身的架构，也在于设备与人本身操控的友好程度，这就需要设计师对人机工程有更多的了解。人机工程，是一门重要的工程技术学科，是研究人和机器、环境的相互作用及其合理结合，使设计的机器和环境系统适合人的生理、心理等特点，达到在生命中提高效率、安全、健康和舒适目的的一门科学。移动触屏手机的诞生，让我们与屏幕有了直接接触，也带来了更丰富的手势操作。但与鼠标能精准到1个像素的点击相比，手指的触点有着相对的不稳定性和区域的要求。不好的设计，将带来严重的操作挫败感。

为拇指而设计

上图是我们日常使用手机的一些情况。可以总结为如下六种持机方式。这些方式都将直接影响产品的信息架构的友好程度。

当然实际情况中还存在更多的握法，但这六种是具典型代表性的。其中单手持机又占了更大部分。这就让我们更加考虑为拇指而设计的概念。

使用拇指进行操控，是我们使用手机最常用的方式。寒冷的冬天，你吝啬的只拿出一只手，握着手机打发时间，不是等人就是等车。拥挤的交通上，你不得不抓紧拉手，同时还开着手机看八卦和小说。一个电话，一条短消息，预览内容，拿起放下，我们都习惯了一只手来处理这些简单任务。这些任务都是由我们的拇指来进行的，所以触屏手机的界面交互方案是要着重考虑拇指这个点的。已有研究证明，当右手持机，拇指的有效的触控区域如下：

何为有效，能灵活触碰，能减少误操作。不要让用户在触碰的时候感觉到费力，不要让用户需要调整持机的方式，为了一个点击。这些人机交互方式，都将体现在我们的界面设计中，请考虑将重要的功能元素放置在这个范围内。从各个移动平台的操作系统来看，页面重要的工具栏，还有标签栏均处于这个位置，也是考虑到这个点。所以设计信息架构的时候，必然要考虑到拇指的影响力。

底部原则

同时，设计的底部原则也有来自于拇指的有效触控区域，还有一点，也来自于对内容和反馈的少干扰。传统的web界面布局，导航和重要功能点都在页面上部，我们在操控鼠标的过程中，显然不会对内容和反馈有所遮挡，但如果在小屏幕的手机上，操作页面上部分内容的时候，页面中会有大部分内容会被遮挡住，包括点击后的页面反馈有时候也不能及时看到。

边缘原理

还有点，需要利用好手持设备的边缘。Windows平板就是大量的利用了边缘原理。微软的菜单栏和苹果系统的菜单栏的点击效率，就有很大的区别。号称苹果的菜单栏设计比微乳的效率高了20%，就是利用了边缘的原理，让用户移动鼠标和点击更直接方便。

chrome浏览器不仅仅是性能好那么简单，他的tab也是利用了边缘原理，让用户选择切换的成本更小。

屏幕边缘可以理解为无限大，充分扩张了用户的实际操作范围。Andriod和ios手机的消息中心，就是利用了边缘原理，是不是大家在操作的时候，很少出现误操作。因为我们一般都会从屏幕的外部开始滑动进来，与屏幕内其他操作基本不会触碰到。还有点，这里是拉动的设置，应用大部分在这个区域是点击，所以动作上是不一样的，避免了误操作的可能。

所以，善于利用边缘原理，可以将我们的点击效率和误操作得到更好的改善。

点击区域

误点击和视差，决定了需要更大的点击区域。因为屏幕的玻璃厚度，有一定的视觉差，造成点击的错误。所以大部分的点击区域往往比我们看到的要大的多。设计的时候最好标注好大小的区域。

手指让我们跟产品更接近，操作更便捷，但没有了鼠标那种点击陷下去和滴答声，所以需要更直接的反馈，来告诉用户已经操作成功。可以通过多态按钮，声音提示和震动等等。

键盘

Web设备：有键盘，物理弹性的键盘，可以让我们随心所欲的长篇大论

移动设备：小屏幕内的虚拟键盘，只有半屏的输入空间，小按钮，晃动的屏幕

设计启示：避免输入，默认值，记录历史，转化输入方式，关联词…

避免输入，使用语音

碎片化的时间，不稳定的环境，让我们很难心平气和的在一个小屏幕下，仔细的按着那一排小按钮，然后还要时常按错按键。越多的输入，只会让用户对产品的认可度更低。所以，避免输入，转换输入方式，能提升产品操作的流畅度。Uc的语音搜索，微信的语音聊天。

转化输入方式

传统的价格筛选，就是最简单的文本框输入

后来很多设计就改变了这样的方式，通过区间滑块，让用户通过简单拖拉就能实现区间值。

记录历史

默认记忆成功输入信息，让系统完成信息记忆，减少输入。比如登录，

关联词

搜索的联系词，搜索历史记录，这些都是减少输入的方式

传感器

Web设备：传感器。。。沉默。。。

移动设备：手机传感器包括定位系统，重力传感器，距离传感器，光线传感器，方位传感器，陀螺仪，磁力计，气压、温度传感器。。。

设计启示：利用好手机传感器，能让设计更有趣，更有创造力。

距离传感器

随着iPhone的诞生，催促着新一代智能手机在传感器上的全面应用，让手机的体验和互动达到了一个新的层面。我们在接听手机电话时候，将手机靠近耳朵，这时候背景等就会自动熄灭。一方面防止触屏与脸部接触的误操作，另外一方面也是节省电量。拿开手机的时候，背景灯又自动亮起，这些都是距离传感器在起的作用。我们也想过利用距离传感器跟产品做结合，传达各种温馨的效果。

手机屏幕小，商品的搜索结果页一般都是列表模式。用户在一些恶劣环境（如公交车上），或则因为视力不好，为了看清楚商品图，往往非常近的靠近屏幕。如同我们看书时，因为字太小，而不得不更靠近书本。当用户较长时间浏览商品结果页，容易伤害到视力，引起眼疲劳。也增加了更多辐射的机会。这时候就可以利用距离传感器来判定，设置用户在太靠近屏幕的一定时间内，提示用户危害，将屏幕远离自动切换到大图模式。