界面元素（interface element）是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列元素。

界面元素不管是在软件开发，人机交互等方面都是必不可少的。人机界面的开发是用选定的界面支持系统所能支持的界面元素来构造系统的人机界面。在设计阶段，要根据人机交互的需求分析，选择可满足交互需求的界面元素，并策划如何用这些元素构成人机界面。下面列举了在当前流行的窗口系统和GUI中常见界面元素。

屏幕上得以独立显示，操作的区域称为窗口。这些区域可由系统或不同应用程序使用。窗口可以打开、关闭、移动或改变大小等。

用来收集用户的输入信息或向用户提供反馈的区域。输入信息包括由用户选择yes或no的选择钮、输入文件名的正文框，或其他设置各种参数的输出入框。输出包括各种提示，可选项及错误消息等。

显示一组操作或命令的清单，每一菜单项可以是文字或图符。菜单可用移动光标或鼠标键来选取。其分为固定或活动（如弹出型或下拉型）菜单。

用以移动窗口区域中显示位置的指示条。

是系统或用户定义的对象的符号图形表示，诸如文件、文件夹、光驱等。

此外，包括各种控制板（Panel）、剪辑板（Clipboard）、光标按钮等元素。但是各种窗口系统，GUI和可视化编程环境所支持的界面元素并不完全相同。对应的界面元素的具体功能也有或多或少的差异。

下面将具体列举几个软件或系统的界面元素进行进一步说明。

这一章的目的，是让你逐渐学会使用基本的UI Kit用户界面组件来构建程序。而更高级的组件会在第10章涉及。这些基本组件包括下列元素。

窗口、视图和视图控制器

窗口和视图是最基本的类，创建任何类型的用户界面都要用到。窗口表示屏幕上的一块几何区域，而视图类则用其自身的功能将这片空白填满。更小型的UI组件，如导航栏、按钮和文本框等，都是附着在视图类之上的，而一个视图则链接到一个窗口。

视图控制器是一种控制器类，对视图进行封装与控制。控制器对视图进行管理，控制视图如何在屏幕上呈现。这为视图增添了额外的功能，比如内建的对旋转屏幕、转场（transition）以及其他屏幕事件的支持。

文本视图（text view）

文本视图是专门用于呈现编辑器窗口、对文字进行查看或编辑的视图类。记事本应用程序就是一个很好的简单文本视图的例子。文本视图在UI Kit中很不起眼，被掩盖于大量更惹眼的类的绚丽光芒之下，很少被使用，但是对于熟悉UI Kit来讲却是一个良好的开端。

导航栏（navigation bar）和控制器

iPhone的UI对待不同屏幕画面的方式，就像书里面的“页”一样。导航栏经常被用来作为一种视觉上的提醒，让用户可以“翻回”到前一个视图，它可以提供一些按钮来修改当前屏幕页面上的元素，也可以用来显示多个控件，如分段控件和工具栏等。几乎在所有预装的iPhone应用程序中都可以见到导航栏。

导航控制器则可以管理多个视图控制器之间的切换，管理方式是在一个视图栈中压入和弹出视图控制器，而一切关于导航栏变化的工作则交给了视图控制器。每个视图控制器都有一组自己的导航栏属性，当该视图成为活动视图时，会由导航控制器将这些属性显示出来。

转场（transition）

为了与苹果公司用户友好的界面精神保持一致，窗口转场效果也被引入到iPhone中，这样当应用程序在画面之间进行切换时，用户看到的效果就像翻书一样。在实现这种从一个视图到另一个视图之间的视觉转换时，使用了动画效果，而不是简单地闪动到下一幅画面。

警告视图（alert view）和操作表单（action sheet）

在iPhone上对应于警告式弹出窗口的，是警告视图和操作表单。这些视图是模态窗口，可以在某个操作需要用户注意时，弹出或者滑动到屏幕的最前端。在预置的iPhone应用程序中经常可以见到它们，一般是在用户收到一个提醒时（比如文字短消息）或者试图删除某些项目（如语音邮件）时出现。你可以编程令操作表单向用户显示一个问题，并提供几个按钮用作不同的回应。在一个应用程序中需要即刻给予关注的部分，这些功能颇有效用。

表格视图和控制器

表格视图是一种列表，你可以用它来显示文件、消息或者其他类型的成组信息。它常用来在一种类似列表的形式中选择一个或多个项目。表格对象非常灵活，开发者可以定义表格单元的外观与行为。你可以对表格进行裁剪，来显示各种不同的内容，比如简单的列表、分组的偏好设置以及名片盒式的分段列表。本章会涵盖简单表格，更高级的表格使用方式可以在第10章中学到。

表格视图控制器管理表格视图对象，并能够为表格视图集成对添加的视图控制器的支持。表格视图控制器提供了对屏幕旋转以及其他事件的自动处理，而且你可以像对其他视图控制器一样，将表格视图控制器压入导航栈中，这样就可以轻松地对其实现导航功能。表格视图控制器还可以作为数据源，将信息传递给表格来显示。

状态栏操控

状态栏是出现在iPhone屏幕顶端的一个小工具栏，可以显示时间、电池电量以及信号强度等信息。你可以定制状态栏的风格、透明度以及其他属性。

应用程序徽章（application badge）

有些应用程序需要通知用户一些紧急的信息，它们具有在iPhone的主屏幕（springboard）上显示徽章的能力。这会警示用户，你的应用程序需要得到关注，存在未读消息或者其他新信息有待查看。一些通过EDGE或者3G网络递送消息的应用程序，大量地使用这种功能。

应用程序服务

当应用程序退出活动状态、恢复活动或者终止运行时，会有不同的方法收到通知，好让应用程序来立刻进行清理或者保存状态。这些通知被发送到应用程序的代理，代理就可以做出响应，进行清理工作或保存重要信息。

ios界面元素分为：条栏、内容视图、控件、临时视图

1、状态栏 status bar

状态栏用来显示设备的信息、时间、网络等重要信息。默认是白底黑字与黑底白字。

#状态栏是透明背景

#位置总是处于顶部

注意事项：1、状态栏可以在整个app中采用一个样式，也可以单独为某个视图设计样式。2、状态栏背后不要放其他内容，不要有滚动内容，防止干扰用户阅读状态栏信息。3、尽量不要隐藏状态栏，除非特殊情况，例如全屏看视频可以隐藏状态栏，但是保证轻点屏幕时可以重新恢复状态栏。

2、导航栏 navigation bar

导航栏主要作用是在不同的层级的信息结构之间导航，有时候可以管理屏幕内容。

导航栏上面可以放标题或者控件。

3、工具栏 Toolbar

包含了对页面或者视图中对象进行操作的控件。

4、标签栏 tab bar

标签栏赋予了用户在不同任务、视图和模态的切换的能力。

5、搜索栏 search bar

搜索栏可以接受用户输入的文本，并把它作为一次性搜索输入。

我们可以把视图是用来承载页面信息的一个容器，iOS系统为我们提供一些比较优秀的视图模式。在视图部分主要列举几种比较常用的视图模式。

1、精选视图 collection view

可以管理项目的有序集合，比如相册。

2、图像视图 image view

可以理解为装载图像的容器，用来定义图像是否可以拉伸、缩放、位置的调整等。

3、地图视图 map view

可以呈现地理数据，并支持地图app的大部分功能。

4、滚动视图 scroll view

该视图的作用是可以让用户浏览比视图更大区域的内容。例如放大图片后，用滑动或者拖拽查看。

5、表格视图 table view

以不同的行来显示信息。该视图提供了控件让用户添加、删除或者多选，查看某行的更多信息。

6、文本视图 text view

可以容纳并显示多行文本。并且支持编辑文本。

7、web 视图

该视图可以显示富Html 内容。比如ios内置的邮件功能。

1、活动指示器 activity indicator

表示某个任务或进程正在进行中。任务进行时旋转，任务完成时小时，不允许用户与之交互。

2、日期选择器 date picker

3、标签 label

用于显示静态文本。

4、网络活动指示器 network activity indicator

出现在状态栏，表示网络活动正在进行。

5、页码控件 page control

表示打开了多少视图以及当前视图是哪一个。不允许用户不按照顺序访问视图。

6、选择器 picker

用来显示一组数值，用户可以从中选择一个。

7、进度视图 progress view

用于展示已知持续时间的任务或者进度。

8、刷新控件 refresh control

用于执行用户发起的刷新，通常用在表格视图中。

9、分段控件 segmented control

每一个分段控件相当于一个显示不同视图的按钮

10、滑块 slider

允许用户在一定范围里调整数值或进度。

11、步进器 stepper

以常数量来增加或者减少某个数值。支持自定义图像。

12、开关 switch

表现两种互斥的状态，只用于表格视图。

13、系统按钮 system button

支持自定义样式，可以包含图片或者文字。默认情况下没有边框和背景。

14、文本框 text field

支持用户输入单行文本。可以在文本框左侧或者右侧显示自定义图像，或者添加系统按钮，例如书签按钮。还可以在文本框的右侧显示清楚按钮。

1、警告框 alert

包含一条必要的标题和可选信息。

包含一个或多个按钮。 双按钮的情况下，按钮排布规则：1、操作不会造成严重后果，而且是用户最有可能的操作，我们把它放在右边，取消按钮放在左边。2、如果按钮具有破环性，则放在左边，取消按钮在右边。

2、操作菜单 action sheet

显示用户所发起操作的相关选项。用红色的字来显示具有破坏的选项按钮。

3、模态视图 modal view

以模态的形式展现的视图，为当前任务或者情景提供功能。通常包含一个完成按钮，一个取消按钮。比如评论功能，点击评论的图标进入模态视图，弹出键盘、文本视图、完成和取消按钮。

窗口停靠

窗口停靠功能与 Visual Studio 图形用户界面使用的窗口停靠。

控件条

控件条现在称为窗格并从派生。CBasePane Class在 MFC 中，早期版本控件条基类是CControlBar。

应用程序主框架窗口由CFrameWndEx Class或CMDIFrameWndEx 类通常表示。 主框架调用停靠站点。 窗格可以具有父级的三种类型之一：停靠站点、停靠或栏微型框窗口。

窗格中有两种类型：不可重新调整和可调整大小。 使用拆分或滑块，可调整大小中，如状态栏和工具栏)，它可以调整大小。 可重新调整的窗格中窗体容器 (一窗格可以停靠到其他窗格，创建在它们之间进行拆分。) 但是，可调整大小的栏停靠窗格不能附加（停靠）。

如果应用程序使用不可重新调整的窗格，请从CPane Class派生它们。如果应用程序使用可重新调整的窗格，请从CDockablePane Class派生它们。

停靠站点

停靠站点（或主框架窗口）拥有所有窗格和要框应用程序。停靠站点包含一个成员。CDockingManager此成员保留属于固定站点所有窗格的列表。列表排序，以便创建在站点的停靠窗格外边缘在列表的开始位置。当框架重新停靠站点内循环时，该列表对包含停靠网站的当前范围矩形调整每个窗格布局。您可以调用AdjustDockingLayout或RecalcLayout，则您必须调整停靠布局时，而框架重定向此调用向停靠管理器。

条停靠

每个主框架窗口可以沿其边界的Dock条。 停靠栏是属于CDockSite Class的窗格。停靠条可以接受从CPane派生的对象，如工具栏。 若要创建一条停靠，在主框架窗口初始化时，请调用EnableDocking。若要启用自动隐藏条，请调用EnableAutoHideBars。EnableAutoHideBars创建对象，并在CAutoHideDockSite每个停靠条旁边确定它们。

每个停靠栏分为停靠行。停靠行已被CDockingPanesRow Class表示。每个行包含停靠工具栏列表。如果用户停靠工具栏移动或从一行的工具栏为另一种。同一个停靠栏中，框架或创建新行并相应地调整停靠条，或者在现有行确定工具栏。

微型框窗口

浮动窗格位于微型框窗口。微型框窗口。表示两类：只能包含一窗格) 可以包含多窗格) 中的CMDITabInfo Class() 和CMultiPaneFrameWnd Class(。浮动代码中的一个窗格，调用CBasePane::FloatPane。在浮动窗格之后，框架会自动创建要框窗口中，该窗口浮动窗格微型框变为的父级。在浮动窗格停靠时，框架将重置其父，并且，浮动窗格变成条停靠工具栏（对于）或停靠站点（为大小可调的窗格）。

窗格分隔符

分隔符窗格（也称为滑块或拆分器）。CPaneDivider Class表示。当用户窗格停靠时，框架创建窗格分隔符，而不管窗格是停靠在停靠站点或在另一个窗格。如果窗格停靠到停靠窗格的调用站点时，默认窗格分隔线。默认窗格分隔对所有停靠在停靠窗格布局运行站点。停靠管理器保持默认窗格的列表和窗格的列表。停靠管理器运行所有停靠窗格布局。

容器

所有可调整大小中，当容器中停靠，彼此进行维护。容器通过CPaneContainer Class表示。每个容器包含指向其左窗格、右、子窗格左侧容器、正确的子容器和拆分。和部件之间。（不引用实际端，而标识树结构所始于的分支。）这样就可以生成和拆分窗格树并实现可以一起调整窗格的复杂的布局。CPaneContainer类维护容器树；位于此树中还维护窗格两个列表和滑块。容器通常窗格管理器嵌入具有多个窗格的默认和滑块微型框窗口。

自动隐藏控件条

默认情况下，每个CDockablePane都支持自动隐藏功能。当用户单击CDockablePane控件上的标题时固定按钮切换窗格，框架自动隐藏模式。若要处理单击框架创建，并与CMFCAutoHideBar ClassCMFCAutoHideButton ClassCMFCAutoHideBar对象。框架上CAutoHideDockSite将新的CMFCAutoHideBar。框架还将CMFCAutoHideButton附加到工具栏。CDockingManager Class维护CDockablePane。

选项卡式控件条Outlook

CMFCBaseTabCtrl Class一个选项卡式窗口的基本功能。可拆的选项卡中。为了使用CMFCBaseTabCtrl对象，初始化在的应用程序CBaseTabbedPane类。CBaseTabbedPane从CDockablePane派生并维护指向CMFCBaseTabCtrl对象的指针。CBaseTabbedPane允许用户调整停靠和选项卡式控件条。使用CDockablePane::AttachToTabWnd动态创建停靠和选项卡式控件条。

Outlook栏控件基于选项卡式栏也。CMFCOutlookBar类从CBaseTabbedPane派生。 有关如何使用Outlook栏的更多信息，请参见CMFCOutlookBar类。

界面元素设计是为了满足软件专业化和标准化的需求而产生的对软件的使用界面进行美化、优化和规范化的设计分支。具体包括软件启动封面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条及状态栏设计、安装过程设计和包装及商品化。而基于网络化的软件界面设计可以忽略软件启动、安装过程设计和包装及商品化等过程的界面元素设计。针对设计过程中应注意的关键问题，确定所需的界面元素。

软件启动封面设计

应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全色①。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目地标注制作或支持的公司标志、产品商标、软件名称、版本号、网址、版权声明、序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的、象征性强的、识别性高的、视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征。

软件框架

软件的框架设计较为复杂，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，快速地学习软件产品，并且和软件产品的程序员及程序使用对象进行共同沟通，以设计出友好的、独特的、符合程序开发原则的软件框架。

软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置。根据人的视觉注意的分布程度，习惯上将比较重要的信息集中于左下至右上的敏感区域显示。所以，在整体界面的色彩组合合理搭配后，将软件商标放在人们首先注意到的左上方，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。

软件按钮

软件按钮设计应该具有交互性，即应该有多种状态效果，最好能达到：点击时状态；鼠标放在上面，但处于未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时状态；独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。

菜单

菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割完成，相同或相近功能的菜单用横线隔开放在同一位置。

菜单通常采用“常用 主要一次要 工具 帮助”的顺序排列，符合流行的Windows风格。下拉菜单要根据菜单选项的含义进行分组，并按照一定的规则进行排列，用横线隔开。如果菜单选项较多，应该采用加长菜单的长度而降低深度的原则排列，菜单深度一般要求最多控制在3层以内。对常用的菜单要有快捷命令方式。与操作无关的菜单要用屏蔽的方式加以处理，最好采用动态加载方式，即只有需要的菜单才显示。菜单前的图标不宜太大，最好与字的高度保持一致。主菜单数目不应太多，最好为单排布置。主菜单的宽带要接近，字数不应多于4个，每个菜单字数最好能相同

图标

图标设计色彩不宜超过64位色①，且边缘非常平滑大小为16×16，32×32两种，图标设计是方寸艺术，应着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。

滚动条及状态栏

滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头、滚动标等，有些还有翻页标，如果需要的话。滚动条的长度要根据显示信息的长度或宽度来计算变换，以利于用户了解显示信息的位置和百分比。滚动条的宽度比状态条的略窄。

状态栏则是为了对软件当前状态的显示和提示。状态栏要能显示用户需要的信息、常用的有目的的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进度提示等状态。状态条的高度以能放置五号字为宜。

软件面板

软件面板设计应具有缩放功能，面板应该对功能区间划分清晰，应该和对话框、弹出框等风格匹配，尽量节省空间，切换方便。

警告框和窗体

对于不同的应用需求，可能会涉及软件应用引导性的界面元素，如警告框、弹出窗体等。

警告框通常是以对话框的形式出现，所含一种或多种表现形式：一个标题、一段信息、一个图标、一个或多个按钮，需注意在贯穿软件中的警告框的格式必须达到一致性。从提醒用户的信息内容的角度分以下多种。

（1）消息：可向用户提供某种信息。例如，某操作没有准备完成，又或没有错误发生。

（2）确认：向用户提出一个问题，希望用户对某个操作进行确认，或者进行可能的选择。

（3）警告：向用户询问某个操作是否是有意的。因为该操作可能造成数据丢失。备忘录软件常用这个对话框来确认是否要删除一条备忘录记录，因为用户还可以选择在PC机上保留备份（这样就不会造成数据丢失）。但是，系统也会在用户选择删除一个软件时，出现此警告框，因为一旦进行了该删除操作之后，该软件将完全不复存在。

（4）错误：框提醒用户，上一次的操作在执行过程中出现了错误。一个窗体通常被用来作为一个或者多个用户界面元素的容器，可以包含按钮、列表、表格、控件、图标等元素。它同样可以拥有与之相对应的菜单条。从一个对话框到列表、表格数据的容器，都可以被当作窗体。窗体可以很小，也可以大到填满整个掌上设备的显示屏。