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