手机GUI二级菜单设计说明

  随着移动通信类产品的发展，手机从以前的罕有用品快速发展到大众消费类用品。手机所提供的服务内容模式也在深刻地变化当中，手机的人机交互界面也随之不断升级发展变化中。手机的GUI也渐渐形成了自己特有的不成文的标准和设计习惯。

  手机GUI的二级菜单的设计是MMI过程当中较为特殊的一个设计子项。二级的菜单的设计不同于主菜单和其它大副面的GUI设计一样，它必需要严格考虑到MMI的可实现性、用户的使用习惯，以及确保美观实用。目前最为流行的解决方案是以列表式为基础所恒生出来的菜单，这种方案的好处是保证用户在使用上不会产生陌生感，也增强了二级菜单的内容表现力。

  下面就128*160的LCD显示屏为例做一个二级菜单的设计。

  首先我们要确定基本的整体布局框架，一般情况下，根据我们上面的分析，二级菜单应该的大致框架应该是：标题栏（title bar）、列表内容栏（list content）、功能键栏(soft key)。

框架结构组合方式如下图：

  标题栏（title bar） 用来显示和说明当前所处的二级菜单的功能与作用，流行的常用表达方式为小图标+文字说明+数字序列号。比如说电话本就是这种表达方式

  二菜单要实现功能的选择项，包含有背景、序列小图标、菜单文字。GUI设计部分一般有背景、序列小图标、选中状态图片、确定状态图片、滚动条等。

 

  功能键栏(soft key)  用来定义手机键盘功能键的用法。大部分是使用：确定键、方向键、取消键的组合方式。GUI设计部分为：确定键按下状态、方向键、取消键按下状态。建议三个部件排列起来的宽度为128 pix 。

 

  下面把一些要注意的数字参数的定义讲一下。

    功能键栏的区域大小为 128 pix * 20 pix

    列表内容栏 行高为20 pix

    序列小图标大小为 18 pix * 18 pix 或 16 pix * 16 pix

    滚动条 宽度为4  pix

  二级菜单的设计更关键的部分应该是如何把握标题栏与列表内容栏。功能键栏的长宽大小基本上是比较传统的设计方法。标题栏与列表内容栏则可以提供创意设计更大的部分，标题栏与列表内容栏的框架搭配组合如何可以直接关系到美观程度，也就是说，二级菜单的GUI美观基本上是通过这两个部分来表现出来的，当然也包括功能键栏在内的整体效果。

 

  通常下，标题栏与列表内容栏的组合设计应该是这样子。

  为了最大地显示出二级菜单的列表内容，目前主流都是显示6行列表。列表内容栏的高度定义在120 pix 。

  标题栏根据屏的分辩率就只能定义在20 pix

 

  列表内容栏应该有背景、序列小图标、菜单文字、选中状态图片。

  标题栏给设计师留下来发挥的空间不是很大，但是我们可以用从列表内容栏借空间的方案来弥补设计空间不足的问题，这样可以促使设计师多从如何把标题栏与列表内容栏更好地融洽在一起这个方面去思考。

 

  最后来说，其实在手机GUI的设计过程中，如何根据MMI的需求来更融洽、更适当的表达出设计出的GUI，才是设计GUI的根本道理。