第二章界面模式与基本组件

• 启动界面
• 顶层界面
• 一览界面
• 详细信息界面
•
输入/操作界面
•
跳转界面
2.基本 的UI组件 • 页眉
• 页脚 • 模态窗口 • 其他
3.界面与图标常用尺寸
•
IOS
•
Andriod
•
启动界面
•
顶层界面
•
源自文库一览界面
•
详细信息界面
•
输入/操作界面
•
跳转界面
启动界面
启动页面是智能手机启动时所显示的界面，一款应用程序会 在准备时显示该界面。
标签式 界面1 界面2 界面3 界面4
工具式
模态窗口 模态的意思是该窗口具有某种触控状态，并且这种状态限定了用户的操 作，模态窗口用于显示新界面的一种窗口，模态窗口出现时用户无法对 之前的界面进行操作，模态窗口可用于请求用户操作、显示警告信息或 进行界面导航等
模态窗口
常见的模态窗口：
添加书签 添加到阅读列表
一览界面往往有列表、表单或者深入式等几种视觉表现形式的。比 如，图库界面用于显示照片或者视频信息等，因此图库界面常常用 到大面积的网格列表，而时间轴界面常用时间顺序来显示内容，它 常常用到刷新控件、操作面板等功能来显示当前或过往的信息内容。
例如：视频类界面、通知界面、搜索界面等等
详细信息界面
详细信息界面用于显示特定条目的详细信息，在界面层级当中的位置比 较深，实际上它是大部分用户希望访问的目标界面，因此在设计详细信 息界面的时候需要突出主体，界面必须精心布置。
• IOS • Andriod
• IOS尺寸与分辨率
• IOS
或者640*1136的尺寸 设计
常用尺寸
界面基本组成元素
• Iphone图标尺寸
• Iphone界面组件尺寸要求
• Andriod
界面基本组成元素
• 按钮不同状态下的输出
THANKS!
页眉
智能手机应用的页眉往往位于状态栏的正下方，而智能手机 站点的页眉往往位于地址栏的正下方。页眉是一种重要的布 局，大部分应用界面都会用到页眉。
中国移动
11:20
4G
页眉
内 容 区 域
状态栏：显示时间、运营商等信息
注意：IOS和Andriod对于应用页眉的命名方式也不同， IOS一般命名 为导航栏，而Andriod将其命名为操作栏（action bar），其次不同 参考资料对其命名也不同，但是页眉的作用都是为了说明当前页面的标 题、名称、或者设置为返回、主屏幕按钮等等。
注册/登陆、短信息、照片拍摄均属于此类界面，在设计输入/操 作界面时一定要注意操作的结果，比如如何显示提示信息，如何 确认信息等方面。
例如，照片拍摄、短讯、设计、管理界面等等
跳转界面（难点）
与PC端相比较，智能手机额屏幕尺寸较小，因此在设计的时候要考虑到用户 的体验，考虑到各个界面的不同分工，以及如何实现跳转，因而跳转界面关注 的是功能与整体结构之间的跳转。
组件是构成一个物体正常运行过程中不可缺少的部分。
如同网页一样，手机应用也会采用一些基本的界面布局与UI组件，这 些UI组件对于界面来说是不可或缺的，IOS 与Andriod的设计规范分别 对各自平台中的UI组件有不同的要求。
UI组件的概念：组件即将一段或几段完成各自功能的代码段封装为一个或几个 独立的部分。用户界面组件包含了这样一个或几个具有各自功能的代码段，最 终完成了用户界面的表示。UI组件可以用于设计网页、APP和软件的用户界面
门户网站界面、电商界面、用户信息界面、企业界面大都属 于顶层界面的范畴，这类界面往往通过诸多的UI组件为用户 提供方便的服务和所需要的各类信息。
例如：电商界面、门户界面、微博界面等等
一览界面
一览界面用于连续显示所有相关内容，是一种常用的界面模式，用 户往往需要在一览界面中搜索需要的相关信息，因此该界面往往包 含列表类的UI组件。
圈子
标题名称
Family
IOS应用
标题名称
Family
Andriod应用
Ios应用通常将标题设置在页眉的中央，andriod一般将标题放在页眉左侧。
以微信为例：
内 容 区 域
状态栏（40px）
导航栏（页眉） （88px）
主菜单栏/标签 栏（页脚） （98px）
IOS应用的页眉设计，如右 图所示
页脚
添加到主屏幕 邮寄此网页链接
取消
操作模式
美图秀秀想要访问您 的照片
不允许
允许
模态窗口
信息类
消息发布、登 陆窗口等
其他
对于界面组成来说这些组件是不可或缺的，不仅能够独立发挥作用，还与其他组 件关系密切，并且在不同操作系统中设计理念各不相同，在后期的界面设计课程 会依次涉及到不同的组件。
1.常用的几种界面模式
启动界面一般有两种使用模式，一种是显示应用程序的图标 或者服务名称，用来增强该产品的品牌认知度；另外一种则 会显示一个与应用程序首页相类似的界面，这样做的目的是 为了减少用户的等待时间。
又叫过场界 面
启动界面表现形式多种多样，有的是在启动时叠加一个临时 教程界面，用来介绍界面的功能以及如何操作；有的则在用 户首次使用时对其服务的特点进行简要的说明，特别是服务 规模较大、功能较多的应用。
案例：
1 顶层界面
3
搜索框
搜索结果 2
一览界面
（垂直列表式）
产品界面 详细信息
如上图所示，标注为 1 的矩形表示一个界面，设计师可以使用相连直 线来表示界面之间的跳转，当上一个界面含有多种导航时，设计师应该 在直线上添加UI组件，表明如何能够到达标注为 2 的的界面，因此 在这个案例中设计师通过标注为3的界面来实现功能和整体结构的跳转。 可以理解为标注 3 表示顶层界面通过搜索框条状到搜索界面。
智能手机应用的页眉位于界面的正下方，页脚能够轻松触及页脚并且轻 松操作，页脚通常用于显示重要的导航控件以及操作控件
内
容
区
域
根据IOS的设计规范将页脚的控件成为标签栏
或主菜单栏；而Andriod的设计规范将页脚的
控件称之为底边栏或操作栏，在部分
Andriod应用中页脚也用硬件按钮代替
页脚
注意：IOS的页脚能够显示多个工具栏，分别告诉用户每个页脚分 别属于哪个界面，IOS的页脚有多种模式，如下图：
照片、视频、地图、新闻报道大都属于这一类界面，比如在视频播放界 面，往往向全屏向用户展示媒体内容，因此在设计时应当避免多余的UI组 件，突出主题。
例如：阅览器、地图、产品信息等等
输入/操作界面
用户可以在输入/操作界面中执行特定的操作，该界面常需要支 持文本输入等复杂的操作，因此再设计该界面的时候应该考虑到 易用性，降低操作的错误。
注：UI组件是代码，外在的表现形式是视觉化的设计，内在的表现形式是代码 功能。
思考：列举我们手机上的组件有哪些？
（例如：状态栏（信号）、页眉（导航栏）、页脚（菜单栏）、内容栏等常规组件 以及音乐、视频播、图片播放、天气预报等功能开发性组件等，组件是构成整个手机 运行必备部分
一个智能手机组件一般包括：页眉、页脚、模态窗口等组件， 常见的还有菜单、操作面板、各类导航控件与控制按钮、滚动条、列表等等。
例如：壁纸启动界面，墨迹天气启动界面等等
过场界面
顶层界面
顶层界面用于显示各种各样的信息，并通过导航功能将其与 其他界面关联起来。由于顶层界面往往包含各种各样不同的 UI组件，因此在设计时应当合理考虑界面的布局，确保空间 使用效率，除此之外，在设计顶层界面时还要考虑到如何通 过该界面传递服务的品牌形象
界面基本组成元素 软件工程系数字媒体教研室
1.基本的UI组件
•
页眉
•
页脚
•
模态窗口
•
其他
宏观概念： 组件：组成系统能够正常运行的各个小部件，例如人是一个整体，那他的组件 包括：骨骼、肌肉、皮肤、血液、水、矿物质、钙物质等等。
计算机是一个整体，他的组件包括：硬件以及软件 硬件为：主机、键盘、 CPU等硬件以及构成整个系统运行的软件XP系统以及各种软件系统，视觉设计