手机界面设计.ppt

1、手机界面设计一、界面设计的原则一、界面设计的原则手机软界面是置身于手机操作系统中的人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解，例如：手机所支持的最多色彩数量、手机所支持的图像格式，其次应该对软件的功能详细了解熟悉每个模块的应用模式。从而做到最大限度的利用现有资源进行用户界面的开发。二、定制界面版式二、定制界面版式1界面层级界面层级idle（待机界面）-mainmenu（主菜单）-submenu（二级菜单）-thirdlevelmenu（三级菜单）2界面构成的基本单位界面构成的基本单位主要界面的构成被分为几个标准的信息区

2、域（主要针对于按键手机，触屏手机相对灵活）：状态区、标题区、功能操作区、公共导航状态区、标题区、功能操作区、公共导航区区1）状态区：）状态区：标示手机目前运行状态及事件的区域，可以包含电池电量、信号强度、运营商名称、未处理事件icon及数量、时间等。状态区域并不是必须存在，可依照交互需求进行取舍。2）标题区：）标题区：主要是LOGO、名称、版本以及相关图文信息。3）功能操作区：）功能操作区：它是软件的核心部分，也是版面上面积最宽的部分。包含有列表（list）、焦点（highlight）、滚动条（scroalbar）、图标（icon）等很多不同的元素。不同层级的界面包含的元素是不同的，需要依据具

3、体情况合理搭配运用。4）公共导航区：）公共导航区：也称之为软键盘区域，它是对软件操作进行宏观操控的区域，随时可见，在这里它可以保存当前操作结果、切换当前操作模块、退出软件系统，实现对软件的灵活操控。针对于嵌入式软件，界面版式的设定，在很大程度上需要借鉴相关手机系统界面的版式，以确保样式的相对统一，利于系统与软件的整合。当然也要考虑软件本身的应用特性，结合操作的可用性和可实施性，对版式进行合理的调整，使呈现信息的区域与区域之间协调统一，主次得当。确保用户可以方便快捷地进行功能操作。对于整个手机的操作系统界面，需要根据不同的设计需求进行成体系的风格设计。3界面元素的分解与组合界面元素的分解与组合界

4、面的版式构成依赖于界面的点线面的构成，手机软件由于自身运行环境小，那就决定了必须控制自身的大小。因此我们的界面图形必须根据需要进行切分，能够用程序实现的效果尽量用程序实现，如单色的线和面。复杂的图标就保留用图片方式来呈现，因此我们在界面版式的设计稿完成后，必须和程序员进行密切的沟通，对需要分解的图形元素进行分解后优化，然后交付程序员进行版式的第二次组合。严格来说我们需要提交几个部分的东西：1）界面三个信息区的图形切片）界面三个信息区的图形切片标题区：命名为Title01、Title02、主信息操作区:其命名可根据不同栏目（应用）主信息区为标准，如：电子地图主信息操作区，map_main01、m

5、ap_main02公共导航区：mapbar01、mapbar022）提供相关提供相关bgcolor的的16进制色值及配色方案进制色值及配色方案在photoshop软件中提取16进制色值：#c0c0c0。3）提供数据准确的界面版式分割图及关键提供数据准确的界面版式分割图及关键切片的坐标位置图示切片的坐标位置图示根据程序员提供的坐标定位规则来确定图形切片的位置，一般都是以界面的左上角的顶点为原点来标示相对坐标。三、视觉效果三、视觉效果手机界面的视觉效果，应该遵循给用户舒适、生机与活力的原则，通过视觉感官的刺激，增加用户的亲和力，适应不同用户的不同心理特征。1简约明快型简约明快型（适合色彩支持数量较

6、少的彩屏手机）基于大块颜色和线条组合的构成方式，不乏大气、简约且精到、精彩。点线面基本元素的形状构成结合色彩的纯净搭配，干净利落，给用户的操作带来轻松的感受。在设计的过程中基于上述风格设计的思路，在视觉效果的设计上需要参考如下方法：a、结合界面图形设计的隐喻性，图标图形尽量使用简洁的平面图形，尽量使用像素化的表现形式。b、展现图形界面的精到之处，合理的使用线条和色彩渐变,以确保细节的完美体现。c、把握界面整体色调的同时注意在图标和线条的色彩配置上下功夫，以活跃整个画面，避免整个界面色彩单一，黯淡无光.2趣味与独创型趣味与独创型 手机界面设计中的趣味性，主要是指形式的情趣。这是一种活泼性的版面视

7、觉语言。如果版面本无多少精彩的内容，就要靠制造趣味取胜，这也是在构思中调动了艺术手段所起的作用。版面充满趣味性，使传媒信息如虎添翼，起到了画龙点睛的传神功力,从而更吸引人，打动人。在手机界面设计中，可以考虑使用个性的图标或者有趣味性的版面造型等手法去表现界面的趣味性。独创性原则实质上是突出个性化特征的原则。鲜明的个性，是排版设计的创意灵魂。试想，一个版面多是单一化与概念化的大同小异，人云亦云，可想而知，它的记忆度有多少？更谈不上出奇制胜。因此，要敢于思考，敢于别出心裁，敢于独树一帜，在排版设计中多一点个性而少一些共性，多一点独创性而少一点一般性，才能羸得用户的青睐。3高贵华丽型高贵华丽型（适合

8、支持色彩数量较多的彩屏手机，最好支持带8位Alpha通道的png透明图）基于饱和的色彩和华丽的质感，塑造超酷、超眩的视觉感受，利用羽化了的像素对图形图像进行仿真设计，不仅塑造界面色彩、形状，还进一步在元素的质感和体积感上下功夫。给用户一种高贵华丽的视觉享受。在设计的过程中基于上述风格设计的思路，在视觉效果的设计上需要参考如下方法：a、塑造界面的体积感和质感，根据需要表现透明、半透明、粗燥、光滑等不同的视觉效果。b、图标的制作中尽量避免生硬的边缘轮廓，提倡渐变、羽化加强图形的仿真性能，使设计更加趋于人性化。c、考虑界面的整体色调，最好使用邻近色或同类色进行色彩构成，采用色彩的弱对比，因为界面图形

9、本身就结合了体积感和质感的塑造，如果整体色调对比太强，很容易给用户造成眼睛疲劳。四、视觉元素的设计四、视觉元素的设计1图形元素设计原则：图形元素设计原则：风格统一、简洁、直观、隐喻、2图形元素设计流程：图形元素设计流程：确定风格确定图标的功能确定图标的造型进行制作1)确定风格：确定风格：就是根据界面的总体风格的策划思路，结合界面其他元素的需要，对图标的整体风格进行考虑，以保证图标和整体效果的融合。明确意义的图标，风格鲜明的版面设计是手机界面设计的重要工作，目前较为流行的是以MOTOROLA，NOKIA等为代表的欧洲简单风格，以及韩国以samsung，lg为代表的时尚绚丽的风格，日本的shapp

10、手机也很有特色，iphone则是无数手机厂商跟风和膜拜的对象掀起了tuch狂潮。在更新颖的交互操作和与手机ID设计的整体 结 合 上，韩 系 手 机 比 较 突 出（samsungf488），而在可用性和体验难度上，欧系手机则比较优秀（nokia）。2)确定图标功能：确定图标功能：在设计图形之前这一点显得特别重要，我们设计图标的目的是实用又美观，也就是说要考虑图标的隐喻性，他代表的意思必须是用户可知的、熟知的。所以图标的功能是我们进行图标造型设计的标准和依托。3)确定图标的造型：确定图标的造型：确定造型的方法多种多样，只要不违背图标表达的主题。图标的造型设计我们提倡原创，先用illustrat

11、or进行绘制，然后photoshop做图标设计的后期效果处理。所有界面上同级、同类的图标我们还要保证表现形式的统一，避免用户视觉上的紊乱。4)进行界面设计制作：进行界面设计制作：利用photoshop中最好多采用路径工具进行绘制界面图形元素（以方便后期的版本定制），根据总体风格对图标和界面细节进行细节美化。转换成程序所需要的相应格式。3设计注意事项设计注意事项 1）色彩问题：）色彩问题：由于手机LCD本身的限制，在色彩的还原程度上没有PC如此完善，因此在选用色彩时要根据使用的屏幕进行调节，方法就是将设计好的效果图导入相应的手机中，用该手机自带的图片浏览软件进行全屏效果查看或者请求开发人员帮助。

12、2）可实现性问题：）可实现性问题：受到硬件运算速度和内存的影响，以及不可预计的后台程序开发难度，过于复杂的效果将很难进行实现，与程序工程师和UI工程师，硬件工程师的沟通显得尤为重要。手机软件界面设计在界面设计领域是一项新兴的设计领地，在相对狭小的版面我们要设计出精美实用的界面，需要我们界面设计人员在象素化的图形世界需找更多的细节表现。在制作过程中更需要我们深入了解手机及其相关软件，密切地和程序员沟通、交流共同打造这片新土地。在遵循手机软件界面设计规范的基础上，符合用户操作习惯的基础上，增加界面设计的趣味性十分重要。目前国内手机界面设计的趣味性不强。感觉大多数手机界面设计师做的大多数界面过于程式

13、化，图标也缺乏原创和新意。希望我们的ui设计团队能够独树一帜，出类拔萃。A.手机基本类别：国际上，通常将目前的手机分为三个基本类别顶级手机（High-endphonesorsmarterphones）,或称为智能手机，拥有一个多家硬件生产商认可的“开放”的操作系统（Symbian,PalmOS,Microsoft，等）。单手操作高端手机（single-handoperated）：比如N7650手写输入手机（pen-based）:SonyEricssonP800,Dopda键盘输入高端手机(keyboardentry):Nokia9210c功能手机(Featurephones)在核心功能（芯片）

14、的基础上，加入附加功能（芯片）：FM,MP3,摄像头,数据存贮卡，数码录音，可视电话，K-JAVA、小额账户银行业务，网络游戏，定位等等等各样的功能。低端手机(valuephone/vanillavoice）只具有基本的通话和数据功能（短信），没有MMS，MP3，FM，和弦，Java,Brew，数码相机等功能。随着市场的发展，可以包含彩屏。单芯片B.根据当前手机功能：基本功能1.彩屏2.和弦铃音3.彩信彩4.中文输入：T9输入；连笔手写输入5.中文短信、短信群发6.通讯录7.通话记录8.闹钟9.计算器10.录音11.多方通话12.语音识别13.来电防火墙14.IP拨号15.电子名片16.电话簿

15、快速查询17.屏幕背光18.键盘背光19.键盘按键音20.免提接听21.来电指示22.语音拨号23.内置IP娱乐类1.FM收音机2.MP3播放3.数码照相4.数码录像5.数码录音（类似于录音笔）6.JAVA7.内置小型手持游戏机功能8.动画屏保9.移动QQ10.七彩来电指示11.来电大头贴12.幻彩墙纸13.戒指耳机14.可旋转摄像头15.一键开功能16.星座配对17.幸运数字18.会跳舞的手机19.语音短信20.卡拉OK点唱机21.超长短信22.来电的图片显示23.和弦铃声下载、编辑24.铃声下载、编辑25.图片电话簿科技工作类1.蓝牙2.无线局域网3.无线下载4.红外接口5.数据线接口6.

16、数据交换(可以将PC和手机上的email、日历和日程安排等个人信息相互传送)7.数据交换(可以将PC和手机上的MP3,图片和铃音等相互传送)8.数据存储卡（如SD卡，它可以使你在手机、PC机之间相互存储传输文件）9.动态内存10.BREW11.PDA12.Linux操作系统13.GPRS、WAP14.UTK增值业务15.一键上网16.支持三频17.手写输入生活类1.GPS（全球定位系统）2.外屏时钟3.自动开、关机4.世界时钟5.货币换算6.阴阳历转换7.STK服务（证券服务系统）8.区号查询9.万年历10.日程表11.记事本12.单位换算13.周历14.来电中文地名显示（固话）性别类1.内置

17、生理时钟、体脂肪、卡路里计算可供女性族群使用2.待机的镜面设计3.手机饰牌，镶钻设计学习类1.电子词典（四、六级、TOFEL、GRE英语词典）2.电子图书3.阅读、编辑文档C.图标格式：1手机图标支持位图格式分为不透明和透明两种：不透明：*.bmp*.jpg*.gif(动态和非动态)*.mjpg透明：*.ico*.png2手机图标支持矢量图格式：*.svg（ScalableVectorGraphics）D.图标大小：10 x10，14x14，16x16，32x32，64x64，128x128（手机图标的大小要求不如软件图标那样要求严格，主要因为手机图标的格式较多）E.色彩级别256色(即8位色)4096色(即12位色)65536色(即16位色)262144色(即18位色)16777216色(即24位色)F.常见手机显示屏分辨率96x65，96x96，128x96，128x128，160 x128，160 x160，176x144，220 x176，240 x176，320 x240