手机界面设计调研报告

概要

    界面设计项目自金山企业带入我国问世以来，经过多年的发展，已经成长为新型设计行业的一大巨头，成为众多移动终端生产商和应用程序开发者青睐的选择。这次调研分析了手机界面设计的特点，介绍了手机界面设计的构架、市场   占   有   率 、各   版   本   的   更   新  ，以  及   使   用   效   果   的   简   单  分   析。概   括  了   手   机   界   面   设   计   行   业    能取得成功的原因，以及手机界面设计的发展面临的困难和问题。

UI

    UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

UI的实质

   界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断满足用户操作体验和视觉体验的过程。

UI的发展现状

   目前在国内UI还是一个相对陌生的词。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。

　　但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。

事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高竟竞争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和铉，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。

               我的调研

 调研目的

1.通过调研，了解各类人群对手机界面的看法，以及需求。

2.通过调研，了解现有手机市场手机界面的样式。

3.通过调研，了解我国手机UI的市场发展情况。

4.通过调研，了解手机UI的设计需求。

    5.通过调研，确定本次设计的排版、布局及构成成分。

   

 调研计划

手机UI

    随着科技的发展，移动设备已经成为人们生活的必需品之一，移动设备的用户界面及体验将越来越受用户关注，一个好的UI界面也是目前公司重要发展前景。人机交互技术的走向对未来的手机界面的发展做了展望，未来手机的界面将会以自适应的智能界面及多通道的人机界面占据主导地位，所以我们设计UI界面的重点对象将是以智能手机为主，这个在未来的发展前景中我认为是十分乐观的，将会成为一个热门的专业。所以就目前手机的发展趋势和当前手机界面的现状，掌握手机UI界面设计的技术对我们是十分有利的，未来的发展离不开它。所谓的

UI包含有UI交互、UI界面、UI图标三大块。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。所以作为一个手机界面的设计师应该具备勇敢、坚持的“画上帝”的精神，把最新的趋势和思想带给团队和领导层，要明白手机的产品设计已经步入一个界面时代，准确来说是应用体验和用户需求的时代。

使用人群对手机UI的看法

   现在手机市场产品的琳琅满目，各大手机厂商也对手机界面要求完美对越来越高，导致现在手机用户，不管是青年还是老年、幼年，都能够轻松掌握手机性能。虽然手机都带有说明书，但是由于手机界面制作的完美度，大部分人都能够不看说明书轻松玩转手机。但是随着现在商品的越来越炫目，现在的消费者也希望能够在手机界面上能够多加入些现代青春气息的元素，能够更加适合现代人的审美原则。

手机UI设计原则

   1.简易性

　　界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。

　　2.用户语言

　　界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

　　3.记忆负担最小化

　　人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。

　　4.一致性

　　是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与游戏内容相一致。

　　5.清楚

　　在视觉效果上便于理解和使用。

　　6.用户的熟悉程度

　　用户可通过已掌握的知识来使用界面，但不应超出一般常识。

　　7.从用户习惯考虑

　　想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。

　　通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。

　　8.排列

　　一个有序的界面能让用户轻松的使用。

　　9.安全性

　　用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

　　10.灵活性

　　简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

　　11.人性化

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。

我国手机UI市场

    　在国内手机UI还是一个相对陌生的词。我们经常看到一些招聘广告写着：招聘手机界面美工、界面美术设计师等等。这表明在国内对手机UI的理解还停留在美术设计方面，认为手机UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而手机UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是手机UI设计真正的价值体现，只是手机UI设计发展的一个必经过程。当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其他功能。由于当时的主导是技术，所以大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。事过境迁，如今技术已经完全的达到用户的需求，于是商家为了创造卖点，提高竞争力，非常重视产品的外观设计，除此之外还频频推出短信,彩屏，和弦，彩信,摄像头等等。这样一来产品的美观、个性、易用、易学、人性化等等都成了产品的卖点。软件产品与物质产品的发展是相同的。过去由于计算机硬件的限制，编码设计成为软件开发的代名词，美观亲和的图形化界面与合理易用的交互方式都没有得到充分的重视，实际上这个时期的软件叫作软件程序，而不是软件产品。

　　现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到手机UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。各大手机的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，不断推出的界面更新软件，为公司带来了可观的收益等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。

　　我们不得不承认现阶段中国在很多领域都与西方发达国家有相当大的差距，如何赶上并超过他们是我们这代人肩负的历史使命。软件产品领域不象物质产品那样存在工艺、材料上的限制，软件产品核心问题就是人。提高软件UI设计师个人能力减小人员上的差距是中国手机UI以及其他UI项目发展首要关键的问题。

目前国内各院校还没有设立相对健全的UI设计专业，所以提高UI设计师能力关键在于提供一个良好的学习与交流的资源环境。国内已经有很多交流设计网站，介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，但是UI设计一直没有受到应有的关注，仅仅被放在数码设计或者平面网页设计的一个栏目里，这仅有的资源对培养优秀的设计师是不够的，必须有一个信息快捷、资源丰富、设计水平一流、专业权威的UI设计学习与交流的地方才能适应日益发展的UI设计师们的需求。以达到能够做出更好的手机UI及各项目UI作品。

手机UI作品　

     

    

    

结论

    信息时代，手机UI在人们的生活中扮演着越来越重要的角色，手机UI的可用性涉及到用户在使用产品时的认知、操作和心理感受等，不同于机械产品的设计，手机UI设 计  需  要  更 好  的 设 计 方  法，运 用 符 号 学 的 传 达 理 论，提  出“以 用  户  为   中  心”的   符号 传  达  模  式，在  设  计  的  整  个  过   程  中，我  要   理  解  用  户  的  目  标、需  要、行  为  和  使  用  情  景   等，。保证各个方面和用户的心理模型相匹配，减少用户在使用手机时的挫败感，最终让目标用户在使用手机时获得良好的体验。

设计定位

    

第二篇：触屏手机界面设计

包装工程　PACKAGINGENGINEERINGVol.30No.22009.02

触屏手机界面设计

刘心雄,郑家元

(华中科技大学,武汉430074)

摘要:介绍了触屏手机界面设计的发展历程,并运用工业设计的方法总结出设计时的一般原则,同时结合实例产品具体说明这些原则在触屏手机界面设计上的应用。

关键词:触屏手机;界面;交互;可用性

中图分类号:TB472　文献标识码:A　文章编号:()02UIDesignofXn2x,GJTechnology,Wuhan430074,China)

oftouchscreenmobilephoneUIdesignwasintroduced.Thegen2

eralweresummarizedbasedonindustrialdesignmethod.Theapplicationoftheprinciplesintou2chscreenmobilephoneUIdesignwasdemonstratedwithanexample.

Keywords:touchscreenmobilephone;UI;interaction;usability

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

1.2　彩色图形界面阶段

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

1.3　人机交互界面阶段

20xx年,Iphone的发售使触屏手机界面设计产生了一种

1　触屏手机概述

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

1.1　双色文字界面阶段

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

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

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

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

收稿日期:2008Ο10Ο22;修订日期:2009Ο01Ο06

作者简介:刘心雄(1966-),男,武汉人,华中科技大学副教授,主要研究方向为产品造型设计。

130

? 1994-2009 China Academic Journal Electronic Publishing House. All rights reserved.

刘心雄等　触屏手机界面设计

一种工具,来满足人实现某种目的带来的愉悦性。它不仅仅是一种表象,而是一种实质性的体现,带有更多的实用性[1]。

成功的触屏手机界面设计必须进行人机方面的可用性研究,了解人在感觉和认识方面的需求。在设计的同时,必须充分考虑各种视觉元素的样式和在不同操作状态下的视觉效果。触屏手机界面设计涉及的具体内容很多,总的来说可以概括为视听元素设计和版式设计两个方面。

2.1　视听元素设计

目标。当然,在导航简单明了的同时,也充分考虑到用户的习惯,减少用户学习的时间。

2.2　版式设计

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

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

2.1.1　图标设计原则

,,布局合理,流畅使视线融会。根据视觉注意的分布可知,人的视觉对左上角比较敏感占40%,明显高于其他区域[3]。因此,设计师应考虑将重要信息或视觉流程的停留点安排在注目价值高的最佳视域,使得整个界面的设计主题一目了然。

2.2.2　交互原则

,、,,常重要的。以图标设计为例,每一个图标都表示一个目标动作,它应该有强烈的表意性,帮助用户识别。同时,由于手机屏幕有尺寸限制,图标不易过大,否则会产生比例失调。当然,由于触屏手机上图标的可点击性,图标的设计也不能过小,否则让用户手操作时产生困难。在颜色的选择上,颜色不宜过多,过多的颜色出现在一个小的区域中会产生一种杂乱的感觉。同时,颜色也要保证可识别性;比如,在暗色的背景上,图标颜色的设计就应该以白色,黄色,草绿等亮色为主色调。为了确保图像的清晰,可以适当采用颜色的渐变,阴影等效果。当然,图标的设计也可以遵循一定的规范,例如《WindowsVista用户体验设计规范》中就从概念、透视、光源、阴影等几个方面对图标的设计有着详细的说明。

2.1.2　文本设计原则

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

2.2.3　色彩原则

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

2.1.3　图表设计原则

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

图像和表格所占的区域相对较大,如何保持如此大面积的元素和页面的整体协调是设计师在设计时必须考虑的问题。此外,对于一些尺寸上超出界面范围的图像和表格必须保证在移动操作的过程中也保持相当好的可识别性和易操作性。

2.1.4　导航设计原则

用户需要适当的反馈信号来评价操作结果[2],优秀的导航设计应该提示明确,让用户随时知道自己所处的位置,同时能够迅速跳转到自己想进的目标页面。操作步数也是衡量导航设计的一个重要标准,要尽可能的用最少的操作数使用户达到

下面以触屏手机Iphone的界面为例,谈谈触屏手机界面

3　触屏手机界面设计实例

131

? 1994-2009 China Academic Journal Electronic Publishing House. All rights reserved.

包装工程　PACKAGINGENGINEERINGVol.30No.22009.02

设计原则的运用。

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

Iphone的默认图标为圆角方形,全屏可放20个图标,大小

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

Iphone默认的界面在色彩设计上以黑色为主色调,配合

适中,在清晰明确表现出图标内容的同时也利于手指点击操作。在色彩表现上颜色鲜明,玻璃效果的运用很好的表现出了光感。图标的动态效果也是吸引消费者的一个重要因素[7]。

用户进行文体操作时,由于屏幕上面默认字体比较小,

Iphone采用一个放大境显示出放大的字体效果,而软键盘输

入时由于手指会遮挡视线,所以Iphone将放大的字体在旁边显示。这样的设计,极大地提高了用户识别文字的能力,尤其是对于老年人或者视力比较差的用户益处更大。

Iphone的图像设置也别具一格,着白色透明的玻璃高光,。处。,:,而;界面设计的色彩个性化,可以协调用户的心理,让用户对软件产品时常保持一种新鲜度。

前专辑的图像正面居中,,,,示更多的专辑,

,见图1。

4　结语

随着数字化识别技术在我国日新月异的广泛应用,传统的按键式手机的使用手段和方法受到了极大的挑战,而触屏手机则凭借其良好的交互性和操作性无疑将是手机发展的重要方向之一。触屏手机的界面作为用户直接操作和应用的主体,也必将受到人们的关注。目前的触屏手机界面在视觉效果上已

图1　Iphone的音乐浏览器界面

经达到了一个相当高的水平,如何让用户使用时感到舒适、方便已成为现在设计师在设计时所考虑的问题,一切必须以人的需求为前提,这也是人本主义设计关注的焦点之一。可以预见,未来一段时间触屏手机界面的设计在视觉效果更加突出的同时,人机交互性也会是设计师关注的重点,具有优秀的人性化的设计,才是用户真正想要得到的。

Fig.1MusicplayerinterfaceofIphone

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

3.2　版式设计原则的运用

Iphone的布局并没有采用常见的3×3的九宫格布局模

式,而是把界面划分成上下2大区域;界面上区域显示一些较常用的功能图标,在界面下区域显示重要的4个功能,见图2。两区域之间有明显地距离间隔,便于用户快速识别出下方重要的功能图标。所有图标采用大图形加文字的组合方式,据科学分析得知大量图形的使用有利于快速识别和便于记忆[8],因此如果图标设计地很优秀,则用户可以降低视线搜索的时间,操作效率也会得到相应提高。

Iphone最大的创新

参考文献:

[1]　杨涛,曾维鑫.浅析人机界面设计中的心理学因素[J].艺术与设

计(理论),2007,(3):85-87.

[2]　刘冬冬,何人可.3G手机用户界面设计探讨[J].包装工程,2007,

28(5):98-100.

[3]　宋军,张明山.认知心理学在人机界面中的应用[J].包装工程,

2006,27(5):260-261.

[4]　杨大松.产品形态的设计语言探讨[J].合肥联合大学学报,1998,

8(4):53.

[5]　杨明朗,王红.人机交互界面设计中的感性分析[J].包装工程,

2007,28(11):11-13.

[6]　孙配配.“面子”问题———手机用户界面“人性化设计”浅谈[J].数

字通信,2004(14):97-98.

[7]　祝瑜,王毅,黄海燕.手机界面设计的视觉语言分析及其风格化设

在于它的交互设计,它打破了触屏手机传统的交互方式,充分模拟了正常

图2　Iphone的图标布局

计艺术研究[J].包装工程,2007,28(12):218-220.

[8]　蒋陆.手机图形用户界面的图标个性化设计研究[J].黑龙江科技

Fig.2Iphone’siconarrangement

信息,2007,(6):67-67.

132

? 1994-2009 China Academic Journal Electronic Publishing House. All rights reserved.