以iphone为例简述触屏手机界面的设计

　　触屏手机界面的设计是伴随着触屏手机的发展而产生的视听设计新课题，是对传统手机界面设计的更加细化的一个分支，其设计必须是设计师以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对手机界面的构成元素进行艺术规划的创造性思维活动，并随着通讯技术的发展而发展。表面上看，它不过是关于页面版式设计的技巧与方法，而实际上，它不仅是一种技能，更是艺术、技术和人机交互科学的高度统一。本文主要从设计师的角度出发，运用工业设计的方法，对触屏手机的界面设计原则进行初步思考与探索，以期从中得到一些有益的结论。

　　1　触屏手机概述

　　触屏手机，顾名思义，就是可以通过触摸屏幕而实现控制的手机。它的历史并不长，从1999年Motorola公司推出款触屏手机A6188以来，也不到10年时间。然而在这短短的几年间，触屏手机界面却产生了重大的变化，其间，大致可以划分为3个阶段。

　　1.1　双色文字界面阶段

　　早期（1999～2002年）的触屏手机由于技术上的限制，绝大多数采用黑白、蓝黑、绿黑等双色屏幕。在界面设计上，主要是以文字为主，辅以直线用于划分不同区域。在图形设计上，基本没有或是采取少量的线条勾勒出图形的轮廓。这一时期的手机界面设计十分简单，甚至可以说是原始，设计仅仅只是满足于功能，在视觉表现方面和交互设计方面考虑并不多。

　　1.2　彩色图形界面阶段

　　由于技术上的提高，这一时期的触屏手机界面以基本上采用彩屏界面。界面设计从内容上更加的丰富，图标设计更加精致，少量设计采用了动态效果表现。文字方面字体字号的选择更加自由，用户可以自行定义自己所需字体。同时，部分手机厂商提供多套页面主题可供更换，用户也可自行制作相关主题。这段时期（2003～2006年），触屏手机页面在设计方面处于高速发展时期，视觉表现方面和之前相比有了很大的提高。

　　但在交互设计方面设计仍有限制，主要还是以点击为主。

　　1.3　人机交互界面阶段

　　2007年，Iphone的发售使触屏手机界面设计产生了一种革命。其创新性的人机交互设计，使得手机界面设计从视觉效果设计方面向对用户体验方面发生了转移。人们慢慢的意识到，触屏手机界面的设计不仅仅只是GUI（用户图形界面）的设计，同时还包括了交互设计和用户测试/研究设计。这一时期的设计，更强调于用户体验，好的用户体验不仅仅只是包括视觉上的，同时还有触觉、听觉以及交互性方面等。

　　2　触屏手机界面设计的内容及原则

　　随着人们对审美、时尚、趣味的不断追求，手机界面设计也不断花样翻新，越来越多精美、新颖、富有创造力和想象力的界面充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的界面越被用户所接受，界面的美，不仅要作为艺术审美形式的美，满足人们感觉上的愉悦性，更多的是产品作为操作的一种工具，来满足人实现某种目的带来的愉悦性。它不仅仅是一种表象，而是一种实质性的体现，带有更多的实用性。

　　成功的触屏手机界面设计必须进行人机方面的可用性研究，了解人在感觉和认识方面的需求。在设计的同时，必须充分考虑各种视觉元素的样式和在不同操作状态下的视觉效果。

　　触屏手机界面设计涉及的具体内容很多，总的来说可以概括为视听元素设计和版式设计两个方面。

　　2.1　视听元素设计

　　这里所说的视听元素，主要包括：文本、图标、图像、表格、导航工具等界面构成元素。无论是文本、图标，还是图像、表格、导航工具，设计师所要考虑的是如何把它们放进触屏这个小的"画板"中才能达到很好的效果。

　　2.1.1　图标设计原则

　　手机界面的特点就是屏幕尺寸小，传统的用户界面、窗口界面技术并不适用，因此，让手机视听元素一目了然是非常重要的。以图标设计为例，每一个图标都表示一个目标动作，它应该有强烈的表意性，帮助用户识别。同时，由于手机屏幕有尺寸限制，图标不易过大，否则会产生比例失调。当然，由于触屏手机上图标的可点击性，图标的设计也不能过小，否则让用户手操作时产生困难。在颜色的选择上，颜色不宜过多，过多的颜色出现在一个小的区域中会产生一种杂乱的感觉。

　　同时，颜色也要保证可识别性；比如，在暗色的背景上，图标颜色的设计就应该以白色，黄色，草绿等亮色为主色调。为了确保图像的清晰，可以适当采用颜色的渐变，阴影等效果。当然，图标的设计也可以遵循一定的规范，例如《WindowsVista用户体验设计规范》中就从概念、透视、光源、阴影等几个方面对图标的设计有着详细的说明。

　　2.1.2　文本设计原则

　　和传统按键式手机不同，触屏手机界面上的文本大多是可以触摸操作的，要在用户操作的同时，保证文字的可识别性和减少用户误操作的几率，这就对文本图形的设计提出了更高的要求。一般而言，在手机界面设计中，字体的大小要与界面的大小比例协调，通常使用的字体中宋体9～12较为美观，很少使用超过12号的字体。而对于触屏界面而言，由于操作时存在视线遮挡的情况，因此，在手指滑过的状态下，可以适当考虑将文字放大和偏移。

　　2.1.3　图表设计原则

　　图像和表格所占的区域相对较大，如何保持如此大面积的元素和页面的整体协调是设计师在设计时必须考虑的问题。

　　此外，对于一些尺寸上超出界面范围的图像和表格必须保证在移动操作的过程中也保持相当好的可识别性和易操作性。

　　2.1.4　导航设计原则

　　用户需要适当的反馈信号来评价操作结果，的导航设计应该提示明确，让用户随时知道自己所处的位置，同时能够迅速跳转到自己想进的目标页面。操作步数也是衡量导航设计的一个重要标准，要尽可能的用少的操作数使用户达到目标。当然，在导航简单明了的同时，也充分考虑到用户的习惯，减少用户学习的时间。

　　2.2　版式设计

　　触屏手机界面的版式设计，同报刊杂志等平面媒体的版式设计有很多共同之处，它在界面设计中占据着重要的地位。即是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。

　　2.2.1　布局原则

　　一个合理布局的对于触屏手机界面的版式设计尤为重要，一般来说，手机显示屏的尺寸有限，布局合理，流畅使视线融会贯通，也可间接帮助用户找到自己关注的对象。根据视觉注意的分布可知，人的视觉对左上角比较敏感占40%,明显高于其他区域。因此，设计师应考虑将重要信息或视觉流程的停留点安排在注目价值高的视域，使得整个界面的设计主题一目了然。

　　2.2.2　交互原则

　　设计要与人进行交流，操作的便捷性和多样性也是设计师在触屏手机界面版式设计中所要考虑的一个重要的问题。

　　和普通手机不同，触屏手机的特点是可以用手触击屏幕而产生不同的操作，而非单纯的点击某些特定的按键。在此基础上，触屏手机界面的交互方式呈现出多样性，可以点击，可以滑动，可以拖拽，可以多点滑动，也可以将一系列动作组合起来形成一个个特殊的“手势”，设计师必须通过一个特定的版式设计一些视觉元素排列，使之清晰明确的告诉用户有效的操作信息，即让用户明确知道该如何操作，而不是让用户一点点的尝试。当然，对于多种手势的复合运用，也可以采用帮助菜单的方法，但需要注意的是帮助菜单必须放在显眼的位置，以便用户比较容易的发现，从而达到良好的用户体验。

　　2.2.3　色彩原则

　　柳冠中先生说过，设计不仅是在造物，其实也是抒情的过程。色彩影响着人的情绪，一些餐厅或饭馆把自己的招牌设置成橙黄色，这是因为橙黄色比较容易激起人们的食欲。触屏手机界面版式的色彩设计也是如此，其总体色彩应该和自己相对应的页面主题相协调。比如蓝底色的手机页面上配上白色的按键图标就会产生一种醒目的效果，可以提示用户该按键图标可点击，而如果配上大红色的按键图标就会产生一种不舒服的感觉，让用户想远离它，这就违背了设计的初衷。同时，在色彩设计中，也应注意主题的鲜明，操作区域和非操作区域一定要通过不同的颜色使之有效的区分开来，已达到吸引用户注意力的效果。

　　3　触屏手机界面设计实例

　　下面以触屏手机Iphone的界面为例，谈谈触屏手机界面设计原则的运用。

　　3.1　视听元素设计原则的运用

　　Iphone的默认图标为圆角方形，全屏可放20个图标，大小适中，在清晰明确表现出图标内容的同时也利于手指点击操作。在色彩表现上颜色鲜明，玻璃效果的运用很好的表现出了光感。图标的动态效果也是吸引消费者的一个重要因素。

　　用户进行文体操作时，由于屏幕上面默认字体比较小，Iphone采用一个放大境显示出放大的字体效果，而软键盘输入时由于手指会遮挡视线，所以Iphone将放大的字体在旁边显示。这样的设计，极大地提高了用户识别文字的能力，尤其是对于老年人或者视力比较差的用户益处更大。

　　Iphone的图像设置也别具一格，例如在音乐浏览器中，当前专辑的图像正面居中，占据了用户的视觉中心，其它专辑分居两侧且为立体式的斜放，这样的斜放设计，既在数量上能显示更多的专辑，又在视觉上符合用户的体验习惯，见图1。

图1　Iphone的音乐浏览器界面

　　在界面的下方，Iphone设置了电话、短信等4个常用的功能按钮作为快捷导航，同时，当图标增多时界面上会出现亮点不同的小圆点来辅助导航。

　　3.2　版式设计原则的运用

　　Iphone的布局并没有采用常见的3×3的九宫格布局模式，而是把界面划分成上下2大区域；界面上区域显示一些较常用的功能图标，在界面下区域显示重要的4个功能，见图2。

图2　Iphone的图标布局

　　两区域之间有明显地距离间隔，便于用户快速识别出下方重要的功能图标。所有图标采用大图形加文字的组合方式，据科学分析得知大量图形的使用有利于快速识别和便于记忆，因此如果图标设计地很，则用户可以降低视线搜索的时间，操作效率也会得到相应提高。

　　Iphone的创新在于它的交互设计，它打破了触屏手机传统的交互方式，充分模拟了正常人操作物体的固有习惯和思维方式，用操作日常中的物体时一般采用的推、拉、滚、扭、按压和拨动等基本动作，以令人赏心悦目的交互手法带给了用户非常棒的体验感。例如，在闹铃页面时钟的设计上Iphone采用一种滚筒造型，用户直接用手指向上或向下快速拨动即可，系统会自动根据手指拨动的方向显示对应的信息。实践表明，这种直接用手指在屏幕上滑动的方式就比较容易且操作效率也较高。

　　Iphone默认的界面在色彩设计上以黑色为主色调，配合着白色透明的玻璃高光，一系列高对比色的运用凸显出高科技的色彩。在具体的页面设计上，Iphone也有自身一些独到之处。例如，在初始菜单页面中，各个图标的颜色是变化且鲜艳的，这样有2点好处：不断变化的事物能够引起人的注意力，而提示用户点击；界面设计的色彩个性化，可以协调用户的心理，让用户对软件产品时常保持一种新鲜度。

　　4　结语

　　随着数字化识别技术在我国日新月异的广泛应用，传统的按键式手机的使用手段和方法受到了极大的挑战，而触屏手机则凭借其良好的交互性和操作性无疑将是手机发展的重要方向之一。触屏手机的界面作为用户直接操作和应用的主体，也必将受到人们的关注。目前的触屏手机界面在视觉效果上已经达到了一个相当高的水平，如何让用户使用时感到舒适、方便已成为现在设计师在设计时所考虑的问题，一切必须以人的需求为前提，这也是人本主义设计关注的焦点之一。可以预见，未来一段时间触屏手机界面的设计在视觉效果更加突出的同时，人机交互性也会是设计师关注的重点，具有的人性化的设计，才是用户真正想要得到的。