手机界面设计教程

手机软界面设计——基础篇一、界面设计的原则 (1)二、定制界面版式 (1)1界面层级 (1)2界面构成的基本单位 (2)1）状态区： (2)2）标题区： (2)3）功能操作区： (2)4）公共导航区： (2)3界面元素的分解与组合 (3)1）界面三个信息区的图形切片 (3)2）提供相关bgcolor的16进制色值及配色方案 (3)3）提供数据准确的界面版式分割图及关键切片的坐标位置图示 (3)三、视觉效果 (3)1简约明快型 (3)2趣味与独创型 (4)3高贵华丽型 (4)四、视觉元素的设计 (5)1图形元素设计原则： (5)2图形元素设计流程： (5)1) 确定风格： (5)2) 确定图标功能： (5)3) 确定图标的造型： (6)4) 进行界面设计制作： (6)3设计注意事项 (7)1）色彩问题： (7)2）可实现性问题： (7)一、界面设计的原则手机软界面是置身于手机操作系统中的人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解，例如：手机所支持的最多色彩数量、手机所支持的图像格式，其次应该对软件的功能详细了解熟悉每个模块的应用模式。

从而做到最大限度的利用现有资源进行用户界面的开发。

二、定制界面版式1界面层级idle（待机界面）-- mainmenu（主菜单）-- submenu（二级菜单）-- third level menu （三级菜单）2界面构成的基本单位主要界面的构成被分为几个标准的信息区域（主要针对于按键手机，触屏手机相对灵活）：状态区、标题区、功能操作区、公共导航区Sony Ericsson1）状态区：标示手机目前运行状态及事件的区域，可以包含电池电量、信号强度、运营商名称、未处理事件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设计团队能够独树一帜，出类拔萃。