开发高效的Smartphone用户界面

原创 2007年09月25日 11:09:00
Smartphone是一个非常强大的开发平台,由于它的外形非常紧凑,在设计用户界面时你必须小心。Smartphone用户界面优化为易于单手操作,因此它不支持触摸屛。如果你在开发应用程序用户界面,一定要注意单手使用的情况。  

基本需求  

·  eMbedded  Visual  Tools  3.0  

·  eMbedded  Visual  C++  3.0  

·  Smartphone  2002  SDK  

Pocket  PC开发者需了解的信息  

Smartphone屏幕大小为176x220象素——比Pocket  PC的屏幕小。Smartphone优化为单手操作,表现为部分通用窗体控件无效。Smartphone也不支持触摸屛或类似鼠标的行为,将所有的交互限制在使用键盘和光标移动。为此微软提供了一些更适合单手操作的强大的控件。  


为Smartphone优化的控件  


Listview(列表视图)  

Listview用全屏幕代替了原来作为对话框的一部分。没有必要选择列表视图中的项,因为光标键在控件间移动,而不在控件之内。当列表视图有焦点时如果用户点击了Action按钮,列表视图将填满屏幕。  

Combo  and  List  Boxes(复合和列表框)  

Smartphone不支持List和Combo  Boxes,也不支持OpenDialog/SaveDialog和"Commdlg.h"定义的部件。这些通用对话框都是大屏幕环境建立的。此外,在Smartphone上,用户不是直接暴露到文件系统,而是通过应用程序选择文件。作为OpenDialog的代替,你可以使用应用程序提供的所有文件填充一个列表视图,让用户选择一个。  

Tabs和Property  Boxes(页面和属性框)  

使用新自定义功能键(SoftKey),你可以建立看起来象Pocket  PC上的tab相似的用户界面。限制为只有两个键,Smartphone用户界面设计样式指导规定SoftKey  1为“OK”(或者其它正面的选择,例如"Yes"、"Done"或者"New"),SoftKey  2为"Cancel"(或者反面选择,例如"No"或者进一步的操作)。大多数微软应用程序使用它操作主菜单。  

Sliders和Horizontal  Scrollbars(滑动条和垂直滚动条)  

没有输入方法来移动slider或者scrollbar,因为这要求按下按键同时移动它。但是将对话框样式设置为"垂直滚动"将可以操作。而且,如果你在屏幕下方移动光标并且对话框上有控件,屏幕将自动滚动。垂直滚动条更象一个可视屏幕空间的指示器,而不象用户操作控件。  

Treeview(树视图)  

Treeview要求大量的屏幕实际状态,作为层次数据的构造选择器。例如,全屏树视图可用于选择消息应用程序的文件夹。一旦文件夹被选中你能够释放全屏树视图并显示文件内容。  


可用的新控件  


Spinner  Control  

Spinner  control打算代替所有combo  box、list  box和list  view。它基本上是一个通常的带左右按钮的编辑框。  

用户可以左右移动光标在spinner编辑框中选择不同的输入。如果用户按下Action按钮,一个全屏幕列表和所有项将显示出来,用户能够再次使用Action按钮选择一个项。几乎所有Smartphone应用程序使用该控件。  

EVC资源编辑器不能识别该控件,因此你得用文本模式编辑源RC文件。下面的例子显示了控件怎样被插入资源文件:  

LISTBOX    IDC_YOURNAME,5,30,90,10,NOT  LBS_NOTIFY  |  LBS_SORT  |
                  LBS_NOINTEGRALHEIGHT  |  NOT  WS_BORDER  |  WS_TABSTOP
CONTROL    "",IDS_UPDOWN,"msctls_updown32",UDS_SETBUDDYINT  |
                  UDS_ALIGNRIGHT  |  UDS_AUTOBUDDY  |  UDS_ARROWKEYS  |
                  UDS_HORZ  |  0x200,0,0,0,0
  



  



图1.红圈显示为Spinner控件  


Full  screen  Multi  Line  Edit(全屏幕多行编辑框)  

该控件是一个编辑控件,如果被选中时用户点击Action按钮,它激活全屏幕"记事本"。该控件用于长文本,你如电子邮件正文或记录。  


一般指导方针  


为了设计有效的用户界面,你必须遵循一个过程来优化设计结果:  

第一步:检查应用程序或者Pocket  PC的当前用户界面  

·  查找所有不必要的界面元素并删除它们。  

·  查找所有不支持的元素并删除它们或者用Smartphone元素代替。  

·  试图避免可弹出对话框的对话框。  

第二步:一层叠着一层地放置界面元素,代替原来地一个挨着一个。  

·  在顶层元素上方使用说明标签代替在左边或者右边使用(见图2、图3)。  

·  可以有长对话框,因为它们会自动滚动。  


  



图2:  Pocket  PC用户界面  



  



图3:Smartphone用户界面  


第三步:查找所有通用对话框并删除它们。如果应用程序要求用户选择一个文件,通过下面的方法实现:  

·  将文件存储在"/My  Documents"中。  

·  将所有文件的列表载入一个Spinner控件。  

·  显示该Spinner控件而不是通用对话框。  

第四步:将菜单数量减少到一个,菜单项将少到4到8个。  

第五步:定义自定义功能键(SoftKey)。  

如果你有菜单,使用SoftKey  2。否则使用下面的方针:对"OK"或者其它正面选择使用SoftKey  1,对"Cancel"或者其它反面选择、进一步的选择使用SoftKey  2。  

第六步:用单手测试应用程序。  

强迫自己使用单手操作(即使在模拟器上)以确保它符合用户需要。  


结论  


通常在模拟器中测试用户界面。因为模拟器支持触摸,你也许有兴趣为它开发一个应用程序,但是在终端设备中是不支持触摸屛的。如果你为Smartphone优化了应用程序用户界面,应用程序将被广泛的接受,即使在没有经验的用户群中。在设计和建立用户界面时要重点强调使用的简便。
 

图形用户界面(GUI)应用程序开发——菜鸟的第一步

受够DOS的童鞋们,赶快看过来,大大的福利哦!
  • vcx08
  • vcx08
  • 2016年05月02日 21:21
  • 5911

友好用户界面--界面设计技巧

最近看到的关于界面设计的文档,感觉不错,与大家分享!     原英文页面《A good User Interface》,原中文译文页面《好的用户界面-界面设计的一些技巧》     一个友好的用户界...
  • mazhaojuan
  • mazhaojuan
  • 2014年02月18日 14:50
  • 6589

《Python高效开发实战》实战演练——开发Django站点1

Django开发网站需要遵循Django的一套开发流程。本节通过建立一个消息录入页面演示Django的开发流程及相关技术。...
  • kgsew
  • kgsew
  • 2016年11月17日 21:58
  • 3280

CSS高效开发实战 (笔记)

书名: CSS高效开发实战 CSS3 LESS SASS Bootstrap Foundation 作者: 谢郁 编著第十四章 LESS 和 SASS1 CSS 存在重复,需要一种对 CSS进行 ...
  • lllliulin
  • lllliulin
  • 2015年05月17日 16:45
  • 626

java图形用户界面基础

Swing和AWT介绍java的时候,将图形用户界面相关类捆绑在一起,放在一个称为抽象窗口工具箱(Abstract Window Toolkit,AWT)的库中。AWT适合开发简单的图形用户界面,但并...
  • yongchaocsdn
  • yongchaocsdn
  • 2016年11月26日 21:27
  • 6955

五:Windows的图形用户界面

基本概念窗口窗口是 Windows 图形用户界面最重要的元素。任务图形用户界面的应用程序都需要开窗口。一个典型的窗口包括多个组成部分。最上一栏是标题栏,标题栏包括应用程序图标和窗口标题,标题栏的右边是...
  • baidu_17313961
  • baidu_17313961
  • 2016年08月01日 16:36
  • 584

智能手机Smartphone开发导语

Micrsoft的彩色小旗在台式机、笔记本、掌上电脑、平板电脑上四处飘扬,如今,Microsoft又把旗帜插入了手机领域,这就是今天我们要谈的主角,Microsoft的智能手机操作平台Smartpho...
  • boonya
  • boonya
  • 2014年06月23日 14:53
  • 787

黑马程序员——Java GUI(图形用户界面)

-----------android培训、java培训、java学习型技术博客、期待与您交流!------------  GUI(图形用户界面) 一、概述  1....
  • tansuozhe1990
  • tansuozhe1990
  • 2015年08月09日 12:32
  • 867

android用户界面开发

1:XML布局实现界面 第一步在res/layout目录下创建一个layout文件 /* *LinearLayoutb:布局方式为线性布局 *TextView:控件文本 *Button:控件...
  • qq_24331557
  • qq_24331557
  • 2016年03月01日 21:02
  • 87

用户界面开发基础

Activity是Adnroid中唯一可视化的应用程序组件。代码托管 GithubActivity的使用方法Activity是Android中最核心的应用程序组件,也是大多数程序必须使用的用于显示界面...
  • yangshangwei
  • yangshangwei
  • 2016年01月06日 21:05
  • 2372
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发高效的Smartphone用户界面
举报原因:
原因补充:

(最多只允许输入30个字)