手机UI设计

• 1简约明快型 • （适合色彩支持数量较少的彩屏手机） • 基于大块颜色和线条组合的构成方式，不乏大气 、简约且精到、精彩。点线面基本元素的形状构 成结合色彩的纯净搭配，干净利落，给用户的操 作带来轻松的感受。
• 在设计的过程中基于上述风格设计的思路，在视 觉效果的设计上需要参考如下方法： • a、 结合界面图形设计的隐喻性，图标图形尽量 使用简洁的平面图形，尽量使用像素化的表现形 式。 • b、 展现图形界面的精到之处，合理的使用线条 和色彩渐变,以确保细节的完美体现。 • c、 把握界面整体色调的同时注意在图标和线条 的色彩配置上下功夫，以活跃整个画面，避免整 个界面色彩单一，黯淡无光.
• 在更新颖的交互操作和与手机ID 设计的整体结合 上，韩系手机比较突出（samsungf488 ），而在 可用性和体验难度上，欧系手机则比较优秀（ nokia）。 •
• 2) 确定图标功能： • 在设计图形之前这一点显得特别重要，我们设计 图标的目的是实用又美观，也就是说要考虑图标 的隐喻性，他代表的意思必须是用户可知的、熟 知的。所以图标的功能是我们进行图标造型设计 的标准和依托。
• 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. •
戒指耳机 可旋转摄像头 一键开功能 星座配对 幸运数字 会跳舞的手机 语音短信 卡拉OK点唱机 超长短信 来电的图片显示 和弦铃声下载、编辑 铃声下载、编辑 图片电话簿
• 科技工作类 1. 蓝牙 2. 无线局域网 3. 无线下载 4. 红外接口 5. 数据线接口 6. 数据交换(可以将PC和手机上的email、日历和日程安排 等个人信息相互传送) 7. 数据交换(可以将PC和手机上的MP3, 图片和铃音等相互 传送) 8. 数据存储卡（如SD卡，它可以使你在手机、PC机之间 相互存储传输文件） 9. 动态内存 10. BREW
手机界面设计
一、界面设计的原则
• 手机软界面是置身于手机操作系统中的人 机交互的窗口，设计界面必须基于手机的 物理特性和软件的应用特性进行合理的设 计，界面设计师首先应对手机的系统性能 有所了解，例如：手机所支持的最多色彩 数量、手机所支持的图像格式，其次应该 对软件的功能详细了解熟悉每个模块的应 用模式。从而做到最大限度的利用现有资 源进行用户界面的开发。
• 在设计的过程中基于上述风格设计的思路，在视 觉效果的设计上需要参考如下方法： • a、 塑造界面的体积感和质感，根据需要表现透 明、半透明、粗燥、光滑等不同的视觉效果。 • b、 图标的制作中尽量避免生硬的边缘轮廓，提 倡渐变、羽化加强图形的仿真性能，使设计更加 趋于人性化。 • c、 考虑界面的整体色调，最好使用邻近色或同 类色进行色彩构成，采用色彩的弱对比，因为界 面图形本身就结合了体积感和质感的塑造，如果 整体色调对比太强，很容易给用户造成眼睛疲劳 。
• 11. 12. 13. 14. 15. 16. 17.
PDA Linux操作系统 GPRS、WAP UTK增值业务 一键上网 支持三频 手写输入
• 生活类 1. GPS（全球定位系统） 2. 外屏时钟 3. 自动开、关机 4. 世界时钟 5. 货币换算 6. 阴阳历转换 7. STK服务（证券服务系统） 8. 区号查询 9. 万年历 • 10. 日程表 11. 记事本 12. 单位换算 13. 周历 14. 来电中文地名显示（固话）
• 对于整个手机的操作系统界面，需要根据不同的 设计需求进行成体系的风格设计。
• 3界面元素的分解与组合 • 界面的版式构成依赖于界面的点线面的构成，手 机软件由于自身运行环境小，那就决定了必须控 制自身的大小。因此我们的界面图形必须根据需 要进行切分，能够用程序实现的效果尽量用程序 实现，如单色的线和面。复杂的图标就保留用图 片方式来呈现，因此我们在界面版式的设计稿完 成后，必须和程序员进行密切的沟通，对需要分 解的图形元素进行分解后优化，然后交付程序员 进行版式的第二次组合。
• • • • •
四、视觉元素的设计 1图形元素设计原则： 风格统一、简洁、直观、隐喻、 2图形元素设计流程： 确定风格——确定图标的功能——确定图标的造 型——进行制作
• 1) 确定风格： • 就是根据界面的总体风格的策划思路，结合界面 其他元素的需要，对图标的整体风格进行考虑， 以保证图标和整体效果的融合。明确意义的图标 ，风格鲜明的版面设计是手机界面设计的重要工 作，目前较为流行的是以MOTOROLA，NOKIA等 为代表的欧洲简单风格，以及韩国以samsung， lg为代表的时尚绚丽的风格，日本的shapp手机也 很有特色，iphone则是无数手机厂商跟风和膜拜 的对象掀起了tuch狂潮。
wk.baidu.com
• 3高贵华丽型 • （适合支持色彩数量较多的彩屏手机，最好支持 带8位Alpha通道的png透明图）
• 基于饱和的色彩和华丽的质感，塑造超酷、超眩 的视觉感受，利用羽化了的像素对图形图像进行 仿真设计，不仅塑造界面色彩、形状，还进一步 在元素的质感和体积感上下功夫。给用户一种高 贵华丽的视觉享受。
• 2趣味与独创型 • 手机界面设计中的趣味性，主要是指形式的情趣。这是一 种活泼性的版面视觉语言。如果版面本无多少精彩的内容 ，就要靠制造趣味取胜，这也是在构思中调动了艺术手段 所起的作用。版面充满趣味性，使传媒信息如虎添翼，起 到了画龙点睛的传神功力,从而更吸引人，打动人。在手 机界面设计中，可以考虑使用个性的图标或者有趣味性的 版面造型等手法去表现界面的趣味性。独创性原则实质上 是突出个性化特征的原则。鲜明的个性，是排版设计的创 意灵魂。试想，一个版面多是单一化与概念化的大同小异 ，人云亦云，可想而知，它的记忆度有多少？更谈不上出 奇制胜。因此，要敢于思考，敢于别出心裁，敢于独树一 帜，在排版设计中多一点个性而少一些共性，多一点独创 性而少一点一般性，才能羸得用户的青睐。
• 3设计注意事项 • 1）色彩问题： • 由于手机LCD本身的限制，在色彩的还原程度上 没有PC如此完善，因此在选用色彩时要根据使用 的屏幕进行调节，方法就是将设计好的效果图导 入相应的手机中，用该手机自带的图片浏览软件 进行全屏效果查看或者请求开发人员帮助。
• 2）可实现性问题： • 受到硬件运算速度和内存的影响，以及不可预计 的后台程序开发难度，过于复杂的效果将很难进 行实现，与程序工程师和UI工程师，硬件工程师 的沟通显得尤为重要。 • 手机软件界面设计在界面设计领域是一项新兴的 设计领地，在相对狭小的版面我们要设计出精美 实用的界面，需要我们界面设计人员在象素化的 图形世界需找更多的细节表现。在制作过程中更 需要我们深入了解手机及其相关软件，密切地和 程序员沟通、交流共同打造这片新土地。
二、定制界面版式
• 1界面层级 • idle（待机界面） -- mainmenu（主菜单） -submenu（二级菜单） -- third level menu（三级 菜单）
2界面构成的基本单位
• 主要界面的构成被分为几个标准的信息区域（主 要针对于按键手机，触屏手机相对灵活）： • 状态区、标题区、功能操作区、公共导航区
严格来说我们需要提交几个部分的东西： 1）界面三个信息区的图形切片 标题区：命名为Title01、Title02、… 主信息操作区:其命名可根据不同栏目（应用）主 信息区为标准，如：电子地图主信息操作区， map_main01、map_main02… • 公共导航区：mapbar01、mapbar02… • • • •
• 4）公共导航区： • 也称之为软键盘区域，它是对软件操作进行宏观 操控的区域，随时可见，在这里它可以保存当前 操作结果、切换当前操作模块、退出软件系统， 实现对软件的灵活操控。 • 针对于嵌入式软件，界面版式的设定，在很大程 度上需要借鉴相关手机系统界面的版式，以确保 样式的相对统一，利于系统与软件的整合。当然 也要考虑软件本身的应用特性，结合操作的可用 性和可实施性，对版式进行合理的调整，使呈现 信息的区域与区域之间协调统一，主次得当。确 保用户可以方便快捷地进行功能操作。
• 3) 确定图标的造型： • 确定造型的方法多种多样，只要不违背图标表达 的主题。图标的造型设计我们提倡原创，先用 illustrator进行绘制，然后photoshop做图标设计 的后期效果处理。所有界面上同级、同类的图标 我们还要保证表现形式的统一，避免用户视觉上 的紊乱。
• 4) 进行界面设计制作： • 利用photoshop中最好多采用路径工具进行绘制界 面图形元素（以方便后期的版本定制），根据总 体风格对图标和界面细节进行细节美化。转换成 程序所需要的相应格式。
2） 提供相关bgcolor的16进制色值及配色方案 在photoshop软件中提取16进制色值：#c0c0c0。
• 3） 提供数据准确的界面版式分割图及关键切片 的坐标位置图示 • 根据程序员提供的坐标定位规则来确定图形切片 的位置，一般都是以界面的左上角的顶点为原点 来标示相对坐标。
• 三、视觉效果 • 手机界面的视觉效果，应该遵循给用户舒适、生 机与活力的原则，通过视觉感官的刺激，增加用 户的亲和力，适应不同用户的不同心理特征。
状态区 标题区
功能操作区
公共导航区
• 1）状态区： • 标示手机目前运行状态及事件的区域，可以包含 电池电量、信号强度、运营商名称、未处理事件 icon及数量、时间等。状态区域并不是必须存在 ，可依照交互需求进行取舍。 • 2）标题区： • 主要是LOGO、名称、版本以及相关图文信息。 • 3）功能操作区： • 它是软件的核心部分，也是版面上面积最宽的部 分。包含有列表（list）、焦点（highlight）、滚 动条（scroalbar）、图标（icon）等很多不同的
B. 根据当前手机功能：
基本功能 1. 彩屏 2. 和弦铃音 3. 彩信／彩ｅ 4. 中文输入：T9输入；连笔手写输入 5. 中文短信、短信群发 6. 通讯录 7. 通话记录 8. 闹钟 9. 计算器 10. 录音 11. 多方通话 12. 语音识别
• 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
• 在遵循手机软件界面设计规范的基础上，符合用 户操作习惯的基础上，增加界面设计的趣味性十 分重要。目前国内手机界面设计的趣味性不强。 感觉大多数手机界面设计师做的大多数界面过于 程式化，图标也缺乏原创和新意。希望我们的ui 设计团队能够独树一帜，出类拔萃。
• A. 手机基本类别： 国际上，通常将目前的手机分为三个基本类别 顶级手机（High-end phones or smarter phones）,或称为智能手机， 拥有一个多家硬件生产商认可的“开放”的操作系统（Symbian, Palm OS, Microsoft，等）。 •单手操作高端手机（single-hand operated）：比如N7650 •手写输入手机（pen-based）: Sony Ericsson P800, Dopda •键盘输入高端手机(keyboard entry): Nokia 9210c 功能手机(Feature phones) •在核心功能（芯片）的基础上，加入附加功能（芯片）：FM, MP3, 摄像头, 数据存贮卡，数码录音，可视电话，K-JAVA、小额账户银行 业务，网络游戏，定位等等等各样的功能。 低端手机(value phone/vanilla voice） •只具有基本的通话和数据功能（短信），没有MMS，MP3，FM，和 弦，Java, Brew，数码相机等功能。随着市场的发展，可以包含彩屏 。 •单芯片
来电防火墙 IP拨号 电子名片 电话簿快速查询 屏幕背光 键盘背光 键盘按键音 免提接听 来电指示 语音拨号 内置IP
娱乐类
• 1. FM 收音机 2. MP3播放 3. 数码照相 4. 数码录像 5. 数码录音（类似于录音笔） 6. JAVA 7. 内置小型手持游戏机功能 8. 动画屏保 9. 移动QQ 10. 七彩来电指示 11. 来电大头贴 12. 幻彩墙纸