第Android用户界面

1、Page 24.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 3丰富的可视化用户界面组件。包括菜单、对话框、按钮、下拉列表框等等，应有尽有所有UI类的祖宗是View 其中又能够放其他View的是ViewGroup，称为布局容器-Layout。如LinearLayout等等 不能够再放其他View的称为组件Widget。如Button 这种设计是“23种设计模式中的组合模式” 类似于文件和文件夹的关系。 文件夹和普通文件都是文件。 普通文件中不能再放文件. 文件夹中可以放普通文

2、件，也可以再放文件夹Page 4Android.widgetAndroid.viewPage 5组合模式（又叫部分与整体模式）-类图Page 6View和ViewGroup树Page 7UI组件概览-非类图Page 8D:androidsdkdocsreferencepackages.htmlPage 9控制组件行为的两种方式： 在XML布局文件中通过XML属性进行控制 在Java程序代码中通过调用方式进行控制Page 10View类的XML属性、相关方法及说明（见文档）： view类的XML属性相关方法.docPage 11项目例子（CodeView）：Page 12项目例子（MixView

3、）：Page 13onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) 确定所有子元素的大小 onLayout(boolean, int, int, int, int) 当View分配所有的子元素的大小和位置时触发 onSizeChanged(int, int, int, int) 当view的大小发生变化时触发 onDraw(Canvas) 当该组件将要绘制它的内容时回调该方法进行绘制onKeyDown(int, KeyEvent) 有按键按下后触发 onKeyUp(int, KeyEvent) 有按键按下后弹起时触发 o

4、nTrackballEvent(MotionEvent) 轨迹球事件 onTouchEvent(MotionEvent) 触屏事件 onFocusChanged(boolean, int, Rect) 当View获取或失去焦点时触发 onWindowFocusChanged(boolean) 当窗口包含的view获取或失去焦点时触发 onAttachedToWindow() 当view被附着到一个窗口时触发 onDetachedFromWindow() 当view离开附着的窗口时触发onWindowVisibilityChanged(int) 当窗口中包含的可见的view发生变化时触发Page

5、 14项目例子（CustomView）Page 154.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 16RegisterPage 17HTML中控件如何布局？ *Page 18Java程序中(swing)控件如何布局？ *Page 19Page 20常见布局方式: 线性布局LinearLayout 按照垂直或水平方向布局组件 帧布局FrameLayout 从屏幕的左上角坐标布局组件 表格布局TableLayout 类似于 相对布局RelativeLayout 可以指定组件之

6、间的相对位置关系 绝对布局AbsoluteLayout 按照绝对坐标来布局组件 不推荐使用Page 21线性布局LinearLayout 实例（LinearLayout4）Page 22线性布局LinearLayout 常用XML属性及相关方法XML属性相关方法说明Android:gravitysetGravity(int)设置布局管理器内组件的对齐方式。该属性支持top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical、clip

7、_horizontal几个属性值。也可以同时指定多种对齐方式的组合，例如left|center_vertical表示出现在屏幕左边，且垂直居中。Android:orientationsetOrientation(int)设置布局管理内组件的排列方式，可以设置为horizontal（水平排列）、vertical（垂直排列）Page 23线性布局LinearLayout 实例-知识 属性orientation用来设置线性布局的方向vertical -竖直方向horizontal水平方向 可结合html标签记忆 属性gravity 用于设置内容的对齐方式 居中center 水平居中center_ h

8、orizontal靠下bottom 属性layout_width和layout_height 布局宽度和高度 match_parent(在android2.2 sdk8中用来取代fill_parent) wrap_content 也可以是具体的数值,如30px, 30pt等Page 24帧布局FrameLayout实例（FrameLayout）Page 25帧布局FrameLayout常用属性及相关方法XML属性相关方法说明Android:foregroundsetForeground(Drawable)设置该帧布局容器的前景图像Android:froegroundGravitysetFore

9、groundGravity(int) 定义绘制前景图像的gravity属性Page 26帧布局FrameLayout实例关键代码Page 27表格布局TableLayout实例（TableLayoutTest）Page 28相对布局RelativeLayout实例（RelativeLayoutTest）Page 29RelativeLayout.LayoutParams只能设为boolean值的属性属性说明android:layout_centerhorizontal控制该子组件是否位于布局容器的水平居中位置android:layout_centerVertical控制该子组件是否位于布局容器

10、的垂直居中位置android:layout_centerInParent控制该子组件是否位于布局容器的中央位置android:layout_alignParentBottom控制该子组件是否位于布局容器底端对齐android:layout_alignParentLeft控制该子组件是否位于布局容器左边对齐android:layout_alignParentRight控制该子组件是否位于布局容器右边对齐android:layout_alignParentTop控制该子组件是否位于布局容器顶端对齐Page 30RelativeLayout.LayoutParams只能设为其他UI组件的ID属性说明

11、android:layout_toRightOf控制该子组件位于给出ID组件的右侧android:layout_toLeftOf控制该子组件位于给出ID组件的左侧android:layout_above控制该子组件位于给出ID组件的上方android:layout_below控制该子组件位于给出ID组件的下方android:layout_alignTop控制该子组件位于给出ID组件的上边界对齐android:layout_alignBottom控制该子组件位于给出ID组件的下边界对齐android:layout_alignLeft控制该子组件位于给出ID组件的左边界对齐android:layo

12、ut_alignRight控制该子组件位于给出ID组件的右边界对齐Page 31绝对布局AbsoluteLayout实例（AbsoluteLayout）Page 32课堂编程实现游戏：猜红心 testgamePage 33综合运用 项目实例： RegisterPage 34综合运用 项目实例： RegisterLinearLayoutTableLayout各种控件FrameLayoutToggleButtonLinearLayout注册取消Page 354.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理

13、4.9手机交互设计Page 36文本框(TextView)和编辑框(TextEdit)按钮(Button)与图片按钮(ImageButton)单选按钮(RadioButton)与复选框(CheckBox)状态开关按钮(ToggleButton)时钟(AnalogClock和DigitalClock)图像视图(ImageView)Page 37Page 38TextView的XML属性说明（大部分适用于EditText） TextView XML属性.docPage 39TextView的项目实例 不同字体、不同颜色的文本、URL(TextView1)Page 40TextView的项目实例 带

14、边框、图片的TextView(TextView2)Page 41TextView的项目实例 用户友好的输入界面(TextView3)Page 42项目实例 按钮、圆形按钮、带文字的图片按钮（ButtonTest）Page 43项目实例 CheckButtonTestPage 44项目实例 ToggleButtonTestPage 45项目实例 ClockTestPage 46计数器组件：Chronometer ChronometerTestPage 47项目实例 ImageViewTestPage 484.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件

15、4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 49自动完成文本框类似于Google网页搜索效果 项目实例演示：AutoCompleteTextViewTestPage 50常见XML属性XML属性相关方法说明android:completionHintsetcompletionHint(charSequence)设置出现在下拉菜单中的提示标题android:compeltionThresholdsetThreshold(int)设置用户至少输入几个字符才会显示提示Android:dropDownHeightsetdropDownHeight(int)设置下拉菜单

16、的高度Android:dropDownHorizontalOffset设置下列菜单与文本框之间的水平偏移Android:dropDownVerticalOffset设置下列菜单与文本框之间的垂直偏移Android:dropDownWidthsetdropDownWidth(int)设置下拉菜单的宽度Android:popupBackgroundsetpopupBackgroundResource(int)设置下拉菜单的高度Page 51适配器(Adapter)(数据和视图之间的桥梁)介绍Page 52适配器(Adapter)(数据和视图之间的桥梁)介绍Page 53适配器(Adapter)(数

17、据和视图之间的桥梁)介绍 ArrayAdapter ListAdapter BaseAdapter SimpleAdapter ExpandableListAdapter .Page 54自动完成文本框类似于Google网页搜索效果 项目代码分析：AutoCompleteTextViewTestPage 55项目实例:简单例子 SpinnerTestPage 56项目实例：自定义 SpinnerTest2Page 57项目实例演示 DatePicker_TimePickerPage 58项目实例代码分析 DatePicker_TimePickerPage 59项目实例 ProgressBarT

18、estPage 60项目实例演示 TabHostTestPage 61项目实例代码分析 TabHostTest(继承TabActivity) 在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容。 Activity继承 TabActivity 调用TabActivity的 getTabHost() 方法获取TabHost对象 通过TabHost对象来创建当前选项卡、添加选项卡Page 62项目实例演示及代码分析 ScrollViewTestPage 63列表视图以垂直列表的方式显示列表项。如：联系人名单等。 实现方式1：使用ListView组建 实现方式2：继承ListActivi

19、ty关键在于适配器Adapter 数据和显示数据的视图之间的桥梁 也指定了视图的单个项的显示样式 如：new ArrayAdapter(context,单项的样式,数据); 如果系统提供的Adapter不够好，可以写个类继承BaseAdapterPage 64实例:改变分割条、基于数组的ListView ArrayAdapterListPage 65实例:基于ListActivity实现列表（如果一个窗口仅需要一个列表） ListActivityTestPage 66如果要显示复杂的列表项，可以重写BaseAdapter时提供的getView方法，但很麻烦！使用SimpleAdapter自定义

20、ListView的列表项。w 项目实例:SimpleAdapterTest SimpleAdapter对象Page 67项目实例 ExpandableListViewTestPage 68项目实例演示 GridViewTestPage 69GridView常用XML属性XML属性相关方法说明android:columnWidthsetcolumnWidth(int)设置列的宽度android:gravitysetGravity设置对齐方式android:horizontalSpacingsethorizontalSpacing(int)设置各元素之间的水平间距android:numColumn

21、ssetNumColumns(int)设置列数android:stretchModesetStretchMode(int)设置拉伸模式android:verticalSpacingsetVerticalSpacing(int)设置各元素之间的垂直间距Page 70图片切换器ImageSwitcher 显示哪张图片 switcher.setImageResource( )。该方法源码中将调用imageView.setImageResource( )。因此，需要提供ImageView给它. 如何提供？-给它一个视图工厂!让工厂来提供 switcher.setFactory(viewFacotry

22、); ViewFactory是一个接口。 实现接口，覆盖makeView( )方法,在该方法中产生ImageViewPage 71项目实例代码分析 GridViewTest（GridView和ImageSwitcher）Page 72项目例子演示 Chapter04_UI_gallaryPage 73水平显示图片图片切换器ImageSwitcherPage 74Gallery常用的XML属性及相关方法XML属性相关方法说明Android:animationDurationsetAnimationDuration(int)设置列表项切换时的动画持续时间Android:gravitysetGrav

23、ity(int)设置对齐方式Android:spacingsetSpacing(int)设置Gallery内列表项的间距Android:unselectedAlphasetUnselectedAlpha(int)设置没有选中的列表项的透明度Page 75画廊Gallery 如何在画廊中显示一些图片?关键在于提供恰当的适配器给它。 class MyImageAdapter extends BaseAdapter getView()方法-设置单个项如何显示 选择了画廊中的某项，如何做处理？-监听器 gallery.setOnItemSelectedListener( )Page 764.1用户界面

24、编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 77对话框程序运行过程中的弹出窗口。分为四种: 警告对话框AlertDialog 进度对话框ProgressDialog 日期选择对话框DatePickerDialog 时间选择对话框TimePickerDialogPage 78支持四种AlertDialog对话框及自定义对话框 带消息、带N个按钮的提示对话框 带列表、带N个按钮的提示对话框 带多个单选列表项， N个按钮的提示对话框 带多个多选列表项， N个按钮的提示对话框Page 79A

25、lertDialog实现方法(建造者模式) 实例化建造者AlertDialog.Builder 利用builder设置对话框的各种属性setTitle(标题)setMessage(消息)setCancelable(boolean b)设置是否可以取消setPositiveButton( )-设置”正面”按钮，及点击该按钮的事件处理setNegativeButton( )-设置“反面”按钮，及点击该按钮的事件处理多项-setItems(CharSequence items, DialogInterface.OnClickListener listener) 多项单选-setSingleChoic

26、eItems (CharSequence items, int checkedItem, DialogInterface.OnClickListener listener) AlertDialog dialog = builder.create( ); 创建(实例化)对话框 dialog.show( ); 显示对话框Page 80创建简单对话框 项目实例：DialogTestPage 81创建普通列表项对话框 项目实例：ListDialogPage 82创建单选列表对话框 项目实例：SingleChoiceDialogPage 83创建多选列表对话框 项目实例： MultiChoiceDial

27、ogPage 84创建自定义对话框项目实例： LoginDialog（自学）Page 85项目实例演示： PopupWindowTestPage 86PopupWindowPopupWindow创建步骤创建步骤： 调用PopupWindow的构造器构建PopupWindow对象； 调用PopupWindow的showAsDropDown(View v)将PopupWindow作为V组件的下拉组件显示出来；或调用PopupWindow的showAtLocation方法将PopupWindow在指定位置显示出来。Page 87项目实例代码分析： PopupWindowTestPage 88项目实例

28、演示和代码分析： ProgressDialogPage 894.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 90提示信息当用户执行某个操作后，自动显示，过一会儿自动消失。实现方法: Toast.makeText(context,显示的内容,时间的长短).show(); context可以是Activity的实例或者用getApplicationContext( )得到 时间的长短为两个常量Toast.LENGTH_LONG或者Toast.LENGTH_SHORTPage 9

29、1项目实例演示及代码分析 ToastTestPage 924.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 93选项菜单Options Memu 单击手机上的菜单键出现上下文菜单ContextMenu 顾名思义，与上下文（环境）有关。思想类似于Windows中的右键单击弹出的快捷菜单。 操作时需要长时间按住某个东东不放。菜单的儿子-子菜单SubMenuPage 94项目实例演示及代码分析 Menu01Page 95选项菜单实现方法 因为是在某个屏幕(Activity)处，点击

30、menu按钮，出现的。 因此实现方式为覆盖Activity的onCreateOptionsMenu(Menu menu)方法。 如果需要响应菜单项被点击（选择），则还需要覆盖onOptionsItemSelected(MenuItem item)方法。 在onCreateOptionsMenu(）方法中产生Menu menu.add(int菜单组编号, int菜单项编号, int菜单项显示次序, 菜单项标题); SubMenu subMenu = menu.addSubMenu(标题); subMenu.add(.) 使用XML菜单资源。菜单充气者MenuInflater将xml菜单资源充入m

31、enu。 inflater.inflate(resId,menu); Page 96项目实例演示及代码分析 Menu02Page 97上下文菜单实现方法 因为是在某个屏幕(Activity)处，长时间点击某个View,而出现的。 因此实现方式为覆盖Activity的onCreateContextMenu(.)方法。 将”某个View”和菜单绑定。在onCreate()方法中，registerForContextMenu(view); 如果需要响应菜单项被点击（选择），则还需要覆盖onContextItemSelected(MenuItem item)方法。 在onCreateContextMe

32、nu(）方法中产生Menu和选项菜单一样 menu.add(int菜单组编号, int菜单项编号, int菜单项显示次序, 菜单标题); SubMenu subMenu = menu.addSubMenu(标题); subMenu.add(.) 使用XML菜单资源。菜单充气者MenuInflater将xml菜单资源冲入menu。 inflater.inflate(resId,menu); Page 98项目实例演示及代码分析 Menu03Page 994.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4

33、.9手机交互设计Page 100Android的事件处理基于监听的事件处理基于回调的事件处理Handler消息传递机制Page 101基于监听的事件处理机制基于回调的事件处理机制Page 102事件处理机制(观察者模式) 事件三要素 事件源（事件发生场所，如各个组件） 事件（通常是用户的一次操作，点击某个按钮） 监听器(事件处理程序) 事件例子 生活中的实例: 张三上课打瞌睡，被陈老师发现，命令他站起来听课。 鼠标点击登录按钮，检测用户名文本框中填写的用户名是否合法。Page 103事件处理流程Page 104简单事件处理例子：EventQs基于监听的事件处理模型的编程步骤（xml文件） xm

34、l中使用android:onClick或者类似的 属性，指定函数名 android:onClick=onClick_Event“ 在activity中加入以下代码：public void onClick_Event(View view) TextView textview = (TextView)findViewById(R.id.textView1);textview.setText(Button);基于监听的事件处理模型的编程步骤（代码） 获取普通界面组件（事件源），也就是被监听的对象 实现事件监听器类，该监听器类是一个特殊的Java类，必须实现一个XxxListener接口 调用事件源的

35、setXxxListener方法将事件监听器对象注册给普通组件。Page 105事件和事件监听器 键盘事件需要获取是哪个键触发的事件 触摸屏事件需要获取事件发生的位置 Android会将事件信息封装成XxxEvent对象，并把该对象作为参数传给事件处理器 项目实例：planePage 106事件监听器接口类型 View.OnclickListener:单击按钮 View.OnCreateContextMenuListener:产生上下文菜单事件接口 View.onFocusChangeListener:焦点改变事件的监听器接口 View.OnkeyListener：按键事件的事件监听器接口 V

36、iew.OnLongClickListener:长单击事件的事件监听器接口 View.OnTouchListener:触摸屏事件的事件监听器接口Page 107事件监听器接口实现 内部类形式：将事件监听器类定义成当前类的内部类 外部类形式：当事件监听器类定义成一个外部类 Activity本身作为事件监听器：让Activity本身实现监听器接口，并实现事件处理方法 匿名内部类形式：使用匿名内部类创建事件监听器对象 直接绑定到标签（bingingTag）Page 108事件监听器接口实现:内部类形式 大部分采用，主要优点是可以自由访问当前外部类内的所有组件。 项目实例：EventQsPage 10

37、9事件监听器接口实现：外部类形式，比较少见 事件监听器通常属于特定的GUI界面，定义成外部类不利于提供程序的内聚性 外部类形式的事件的监听器不能自由访问创建 GUI 界面的类中的组件，编程不够简洁Page 110事件监听器接口实现： Activity本身作为事件监听器 造成程序结构混乱，很少采用public class ActivityListener extends Activity implements OnClickListener EditText show;Button bn;public void onCreate(Bundle savedInstanceState) super.

38、onCreate(savedInstanceState);setContentView(R.layout.main);show = (EditText)findViewById(R.id.show);bn = (Button)findViewById(R.id.bn);/直接使用Activity作为事件监听器bn.setOnClickListener(this);/实现事件处理方法public void onClick(View v) show.setText(bn按钮被单击了！);Page 111事件监听器接口实现：匿名内部类形式 广泛采用public class AnonymousList

39、ener extends Activity EditText show;Button bn;public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState);setContentView(R.layout.main);show = (EditText)findViewById(R.id.show);bn = (Button)findViewById(R.id.bn);/直接使用Activity作为事件监听器bn.setOnClickListener(new OnClickListener() /

40、实现事件处理方法public void onClick(View v) show.setText(bn按钮被单击了！); );匿名类是不能有名称的类，所以没办法引用它们。必须在创建时，作为new语句的一部分来声明它们。Page 112回调机制与监听机制 监听机制一种委托方式（系统监听事件的触发） 回调机制中事件源与事件监听器是一致的，UI组件提供事件处理的回调方法，开发人员重写该方法即可。Page 113View的回调方法 Boolean onKeyDown(int keyCode,KeyEvent e) Boolean onKeyLongPress(int keyCode,KeyEvent

41、e) Boolean onKeyShortcut(int keyCode,keyEvent e) Boolean onKeyUp(int keyEvent event) Boolean onTouchEvent(MotionEvent e) Boolean onTrackballEvent(MotionEvent e)Page 114项目实例演示及代码分析 CallbackHandlerPage 115主要解决多线程问题： Android平台不允许Activity新启动的线程访问该Activity里的界面组件，导致新启动的线程无法改变界面组件的属性。 游戏中经常需要新启动的线程周期性改变界面组

42、件属性 借助Handler的消息机制来实现Page 116多线程基础Thread mThread = new Thread()Overridepublic void run()timeConsumingProcess();mThread.start()Page 117Handler类简介： 主要作用： 在新启动线程中发送消息 在主线程中获取、处理消息 项目实例：HandlerTest1 void handleMessage(Message msg) final boolean hasMessages(int what) final boolean hasMessages(int w,Objec

43、t o) sendEmptyMessage(int w) Final boolean sendEmptyMessageDelayed(int w,long l) Final boolean sendMessageDelayed(Message msg,long l)Page 1184.1用户界面编程与视图(View)组件4.2布局管理器4.3基本界面组件4.4高级界面组件4.5对话框4.6消息提示4.7菜单4.8事件处理4.9手机交互设计Page 119手机交互设计概述手机交互设计出现的问题手机软件导航的交互特点手机软件平台与硬件的关系手机交互规范android手机交互规范设计例子iPhone

44、 App的特点及基本设计方法手机UI设计检测要素手机产品框架层设计优秀手机设计界面欣赏Page 120手机交互设计三部曲： 第一：手机软件导航的交互特点 第二：手机软件平台与硬件的关系 第三：交互规范Page 121手机与web界面交互设计的区别：WebWeb手机手机 输出取决于显示器相对明显更小的屏幕输入鼠标/键盘操作拇指/食指/触摸操作风格受到浏览器和网络性能限制受到硬件和操作平台限制使用场景家中、办公室、咖啡店等室内场所室内、户外、车中、单手、横竖屏Page 122由输出性能牵扯到的问题： 每屏无法显示足够多的内容 没有足够空间放置全局导航条 没有足够空间利用空隙和各种辅助线来表达区块之

45、间的关系Page 123由输入性能牵扯到的问题： 按键机型需要焦点和方向键、OK键以及左右软键、删除键等硬件之间的配合 触摸机型尤其需要注意区分可否点击，并且可点击的部分需要能准确的释义因为缺少web界面中的悬停提示Page 124由使用场景和状态牵扯到的问题： 界面需要能适应比web更多的典型场景，例如光线的强弱与使用者走动等情况，所以设计者需要一定程度脱离自己的角度去尝试包括对比度和字号等能否满足使用需求Page 125总结： 手机的操作比web页面复杂，需了解其所基于的机型的硬键情况才能确定如何控制； 手机软件需要与web不同的导航形式，空间所限； 手机软件在操作步骤的缩减方面需要倾注更

46、多的精力，每屏空间所限； 手机软件需要在控件/组件释义方面倾注更多的精力，硬键和逻辑所限。Page 126Page 127观者可以对比下面几幅图，试图辨别在不同的视觉保真度上，哪个界面属于哪个手机： Page 128Page 129Page 130以硬件区分手机类型： 仅以物理硬键控制操作的机型（后文简称按键机） 主要以触摸方式操作的机型（通常包含主页、挂机等物理键） 物理硬键齐全，但支持触摸操作的机型（外形和按键机型一样）Page 131主流的可安装第3方应用的软件平台： 塞班s60（第3和第5版） Windows Mobile for PPC Android Iphone OS Java（

47、目前有非常巨大的智能和非智能机型群是包含java平台的） 其他还有很多，诸如plam os、UIQ等Page 132从设计第三方应用的角度看，大致可以浓缩成以下几个版本的设计规范： S60第3版有一套比较经典和严谨的规范 。另外S60第5版虽然是触摸屏机型，但是对于交互设计师的工作来说两者区别并不巨大，只是把OK键替换换成了点击，以及零碎的一些变化。 Java版事实上由于左右物理控制键和方向键、OK键是按键机型的普遍配置，S60第3版规范的适用 范围是非常广泛的，稍微修改一点就可以适 用于Java平台。区别在于手机的“删除”和“返回”两个物理硬键的配置不太一致，所以需要统一将右下角的命令默认为

48、“返回”，在编辑文本时，临时变为“ 删除”。这样牺牲了某些机型的某些操作的效率，保证了这个整体的机型都可使用。 Page 133从设计第三方应用的角度看，大致可以浓缩成以下几个版本的设计规范： Iphone OSIphone的出现一举打破了之前若干平台固有的设计定势，硬键和操作模式都精简了许多。 不过其缺少固定的menu模式，这对第三方软件的设计来说是个巨大的挑战，要么需要很大程度上脱离iphone自身的设计规范体系，要么就极端精简功能。 Android跟从了一些iphone中的经典手势，操作和页面布局风格上相对保守一点，保留了menu和back两个硬键，虽然不够独树一帜，但是在功能和设计之间

49、做的了一个不错的平衡，对于第三方应用来说，这是一个可以有宽广发挥空间的平台。Page 134 Page 1351 .硬键和手势控制2.菜单3.焦点4.弹出框5.列表6.其它Page 1361 .硬键和手势控制： S60第3版Page 1371 .硬键和手势控制： AndroidPage 1381 .硬键和手势控制： phonePage 1391 .硬键和手势控制： 以上硬键和手势对于操作的控制，需要我们在设计前有个十分清晰的认识，并且整个团队达成一致，如有精力则需要专门写到设计规范文档中。硬键控制是没有什么改动余地的，两款触摸机型可以对手势适当进行取舍，毕竟有些应用用不到所有的手势，能精简操作

50、最好。Page 1402.菜单 S60第3版Page 1412.菜单 S60第3版的菜单是由左软键或OK键调出，需要定义以下几点： 如何收回 背景是否雾化 每屏最多显示多少条 有无二级菜单，如果有，怎样调出和收回，和一级菜单的位置关系，焦点条的区别 菜单项文字靠左 数字标号，如果整个软件能保证菜单项目均在10位以内，建议加上，这样可以与数字键盘对应 对聚焦项或当前页面不适用的菜单项，是不显示还是文字变灰处理。 OK键菜单只包含针对聚焦内容的操作项，需控制在一屏之内，避免二级项 菜单项的排序规则：针对聚焦项的在上，其他的在下，这两部分中分别按照使用频率从上至下排列Page 1422.菜单 And

51、roid：Page 1432.菜单 Iphone：Page 1442.菜单 三者导航系统进行说明：Page 1452.菜单 各平台对导航系统的规划： 标题显示当前位置，可以是文字、图标+文字、也可以是一系列tab 菜单显示可以做些什么，通常包含两种类型的选项：a只针对选中项/只针对当前页，b全局功能如设置和帮助，也就是说菜单大多数作用是发起针对当前页的操作，或者转到和当前页面没直接关系的页面 返回这个比较复杂一些，也是最需要设计师注意的。鉴于第2条对于菜单形式的描述，如果再加入关联页面的选项，项目数量和类型会使菜单不堪重负。 并且页面标题通常无法准确表达出相应页面的内容，即使放入菜单，也需要用

52、户花时间去理解和回忆。所以“返回”很重要：一个固定的位置，简单机械的一个动 作，一按一看一按一看，不需要刻意寻找和思考。在一个没有全局导航的环境里，一步步后退到自己浏览过的页面，从而了解当前的页面体系，或者重新发起 一系列操作，是个能保证用户找到位置的简单高效的模式。Page 1463.焦点 焦点更大的意义是在按键机型上，用一个带底色的条框衬托出当前选中的项。对焦点的设定和控制应当尽可能的简单，需要定义默认聚焦的位置、是否允许上下左右循环。Page 1473.焦点Page 1483.焦点Page 1494.弹出框 除了菜单功能的以外，弹出框一般出现在屏幕底端，同时其他屏幕其他部分背景雾化，这有

53、利于用户的视线从密密麻麻的小屏幕中快速找到关键： Page 1504.弹出框 弹出框有很多种类型，除了“确定”“取消”等元件的基本布局以外，几个平台区别不是很大，大致可以分成几个类型和对应的处理方式，以下是归纳和建议的一些处理方式，只列最适用于S60第3版的：Page 1514.弹出框Page 1525.列表 列表项的呈现可以集中定义几种模式：常态、编辑/被调用Page 1535.列表 常态Page 1545.列表 编辑/被调用Page 1556.其它 搜索逻辑 事件处理：无信号、低电量提示的形式和时机、来电、来短信、闹钟时间到、缓存已满、发现新版本等。 文本输入：光标的移动、删除和复制粘贴、

54、选中地址/人名等。 复杂逻辑的返回路径Page 1566.其它 复杂逻辑的返回路径Page 157Android_UI设计指南.pdfAndroid手机交互特性.pdf基于Android的DogBook宠物社区交互手机应用Page 1581、iPhone App的特点2、iPhone的使用习惯3、iPhone App的基本设计方法Page 159iPhone App的特点 虚拟键盘：iPhone虽然与Android同为触屏，但没有物理键盘(而Android有可能有物理键盘)，所有的输入操作都需要屏幕中的虚拟键盘来实现，同时需要考虑虚拟键盘的遮挡问题。 目录导航：没有物理按键做为目录菜单的呼出功

55、能，完全不同于Symbian和Android系统，包括导航也需要屏幕中的虚拟按钮来实现。 功能操作：需要把所有的功能集成在App中，比如我们可以用Tab bar来做功能的分类，工具栏来做具体视图的功能操作集合。Page 160iPhone的使用习惯Page 161iPhone的使用习惯 自上而下的操作 减少输入 足够大的按钮面积 多点触控手势Page 162iPhone App的基本设计方法:iPhone应用的分类 1) 高效型 这类应用可以帮助用户快速完成一个任务，注重内容的组织逻辑功能和信息架构的展现，以方便用户快速高效的使用，最终完成任务。此类应用一般包含大量的列表及每个列表中的任务功能

56、。最典型的就是系统自带的“Mail”应用，这是一个非常典型的高效型应用。 此类应用给用户的感觉是层层进入，内容逐步具体化，直到可以完成用户的任务。 另外一个非系统应用且典型的就是QQ，可以看一下是不是也遵循这个特点。 Page 163Page 164iPhone App的基本设计方法:iPhone应用的分类 2)实用工具型应用 此类应用一般交互操作非常少，也没有很深的层次结构，往往都是直接了当的展示信息，一般会在“背面”(通常会有一个翻转的效果)展示设置功能。最常见的就是“天气”和“股票”两个系统自带的应用。Page 165iPhone App的基本设计方法 :iPhone应用的分类 3)浸入

57、式应用 大多指游戏类应用，但也有一些实用工具，比如电子罗盘，所谓浸入式应用一般是全屏模式，专注一个任务或是娱乐的深入体验，没有过多的文字，而将用户的注意力放在如何使用它。Page 166iPhone App的基本设计方法 :设计iPhone应用 1) iPhone应用的基本结构 状态栏：这是ios系统的一部分，除了浸入式应用外，其他应用一般都会保留这个bar。 导航栏：这里包括当前的title，当前的主要操作的控件和返回的导航功能 工具栏：对当前内容区可执行的功能动作。 标签栏：可以理解为全局导航，方便快速切换功能或是导航。工具栏和标签栏在一个视图中只能存在一个。Page 167iPhone

58、App的基本设计方法 :设计iPhone应用 1) iPhone应用的基本结构Page 168iPhone App的基本设计方法 :设计iPhone应用 2)移植应用 考虑这个web端的产品，核心功能是什么，任何一个产品都会有核心功能，以及附加功能，比如QQ，核心功能就是IM，即时通信，可能截屏是一个附加功能，尽管用的人非常多。确定核心功能后，以及围绕核心功能尽可能少的扩展功能和逻辑。如果你的web网站或是你的业务包括很多，可以把他们按不同业务类型拆分成不同的多个应用。Page 169iPhone App的基本设计方法 :设计iPhone应用 2)移植应用 对确认的功能结构考虑在iPhone上的信息架构模型，上文说过，iPhone应用是线性的连贯操作，一层一层进入直到完成最后的任务，所以你要按这个思路去整理信息架构，一般来说，操作的深度不要超过3层，如果超过3层就要对产品形态进行扁平化处理，即由深度改为广度，因为随着深度的增加，每一级别都会有不同的功能，甚至有承载上一级的功能或逻辑，深度