关于手机界面设计

• 三、视觉效果 • 手机界面的视觉效果，应该遵循给用户舒
适、生机与活力的原则，通过视觉感官的 刺激，增加用户的亲和力，适应不同用户 的不同心理特征。
14
• 1简约明快型 • （适合色彩支持数量较少的彩屏手机） • 基于大块颜色和线条组合的构成方式，不
乏大气、简约且精到、精彩。点线面基本 元素的形状构成结合色彩的纯净搭配，干 净利落，给用户的操作带来轻松的感受。
18
• 2趣味与独创型 • 手机界面设计中的趣味性，主要是指形式的情趣。这是一
种活泼性的版面视觉语言。如果版面本无多少精彩的内容， 就要靠制造趣味取胜，这也是在构思中调动了艺术手段所 起的作用。版面充满趣味性，使传媒信息如虎添翼，起到 了画龙点睛的传神功力,从而更吸引人，打动人。在手机 界面设计中，可以考虑使用个性的图标或者有趣味性的版 面造型等手法去表现界面的趣味性。独创性原则实质上是 突出个性化特征的原则。鲜明的个性，是排版设计的创意 灵魂。试想，一个版面多是单一化与概念化的大同小异， 人云亦云，可想而知，它的记忆度有多少？更谈不上出奇 制胜。因此，要敢于思考，敢于别出心裁，敢于独树一帜， 在排版设计中多一点个性而少一些共性，多一点独创性而 少一点一般性，才能羸得用户的青睐。
手机界面设计
1
一、界面设计的原则
• 手机软界面是置身于手机操作系统中的人 机交互的窗口，设计界面必须基于手机的 物理特性和软件的应用特性进行合理的设 计，界面设计师首先应对手机的系统性能 有所了解，例如：手机所支持的最多色彩 数量、手机所支持的图像格式，其次应该 对软件的功能详细了解熟悉每个模块的应 用模式。从而做到最大限度的利用现有资 源进行用户界面的开发。
8
• 对于整个手机的操作系统界面பைடு நூலகம்需要根据 不同的设计需求进行成体系的风格设计。
9
• 3界面元素的分解与组合
• 界面的版式构成依赖于界面的点线面的构成，手 机软件由于自身运行环境小，那就决定了必须控 制自身的大小。因此我们的界面图形必须根据需 要进行切分，能够用程序实现的效果尽量用程序 实现，如单色的线和面。复杂的图标就保留用图 片方式来呈现，因此我们在界面版式的设计稿完 成后，必须和程序员进行密切的沟通，对需要分 解的图形元素进行分解后优化，然后交付程序员 进行版式的第二次组合。
15
16
17
• 在设计的过程中基于上述风格设计的思路，在视 觉效果的设计上需要参考如下方法：
• a、 结合界面图形设计的隐喻性，图标图形尽量 使用简洁的平面图形，尽量使用像素化的表现形 式。
• b、 展现图形界面的精到之处，合理的使用线条 和色彩渐变,以确保细节的完美体现。
• c、 把握界面整体色调的同时注意在图标和线条 的色彩配置上下功夫，以活跃整个画面，避免整 个界面色彩单一，黯淡无光.
25
• 在设计的过程中基于上述风格设计的思路，在视 觉效果的设计上需要参考如下方法：
• a、 塑造界面的体积感和质感，根据需要表现透 明、半透明、粗燥、光滑等不同的视觉效果。
• b、 图标的制作中尽量避免生硬的边缘轮廓，提 倡渐变、羽化加强图形的仿真性能，使设计更加 趋于人性化。
• c、 考虑界面的整体色调，最好使用邻近色或同 类色进行色彩构成，采用色彩的弱对比，因为界 面图形本身就结合了体积感和质感的塑造，如果 整体色调对比太强，很容易给用户造成眼睛疲劳。
5
状态区 标题区
功能操作区
公共导航区
6
• 1）状态区： • 标示手机目前运行状态及事件的区域，可以包含电池电量、
信号强度、运营商名称、未处理事件icon及数量、时间等。 状态区域并不是必须存在，可依照交互需求进行取舍。 • 2）标题区： • 主要是LOGO、名称、版本以及相关图文信息。 • 3）功能操作区： • 它是软件的核心部分，也是版面上面积最宽的部分。包含 有列表（list）、焦点（highlight）、滚动条（scroalbar）、 图标（icon）等很多不同的元素。不同层级的界面包含的 元素是不同的，需要依据具体情况合理搭配运用。
2
二、定制界面版式
• 1界面层级 • idle（待机界面） -- mainmenu（主菜单）
-- submenu（二级菜单） -- third level menu（三级菜单）
3
4
2界面构成的基本单位
• 主要界面的构成被分为几个标准的信息区 域（主要针对于按键手机，触屏手机相对 灵活）：
• 状态区、标题区、功能操作区、公共导航 区
7
• 4）公共导航区： • 也称之为软键盘区域，它是对软件操作进行宏观
操控的区域，随时可见，在这里它可以保存当前 操作结果、切换当前操作模块、退出软件系统， 实现对软件的灵活操控。 • 针对于嵌入式软件，界面版式的设定，在很大程 度上需要借鉴相关手机系统界面的版式，以确保 样式的相对统一，利于系统与软件的整合。当然 也要考虑软件本身的应用特性，结合操作的可用 性和可实施性，对版式进行合理的调整，使呈现 信息的区域与区域之间协调统一，主次得当。确 保用户可以方便快捷地进行功能操作。
11
2） 提供相关bgcolor的16进制色值及配色方案 在photoshop软件中提取16进制色值：#c0c0c0。
12
• 3） 提供数据准确的界面版式分割图及关键 切片的坐标位置图示
• 根据程序员提供的坐标定位规则来确定图 形切片的位置，一般都是以界面的左上角 的顶点为原点来标示相对坐标。
13
10
• 严格来说我们需要提交几个部分的东西： • 1）界面三个信息区的图形切片 • 标题区：命名为Title01、Title02、… • 主信息操作区:其命名可根据不同栏目（应
用）主信息区为标准，如：电子地图主信 息操作区，map_main01、map_main02… • 公共导航区：mapbar01、mapbar02…
19
20
21
• 3高贵华丽型 • （适合支持色彩数量较多的彩屏手机，最
好支持带8位Alpha通道的png透明图）
22
23
24
• 基于饱和的色彩和华丽的质感，塑造超酷、 超眩的视觉感受，利用羽化了的像素对图 形图像进行仿真设计，不仅塑造界面色彩、 形状，还进一步在元素的质感和体积感上 下功夫。给用户一种高贵华丽的视觉享受。