手机界面设计

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