18 UI界面版式设计.pptx

UI界面设计与制作教程;项目引导

同学A：前面学到的内容都是关于界面中的局部内容设计，想不想知道整体的界面包含哪些内容呢？

同学B：想啊，我想知道界面设计到底包含哪些内容，一般版式都是如何设计的呢？

同学A：是的，你说到了版式，其实与书本排版一样，UI界面设计中一样涉及到排版的问题，比如状态栏一般是在什么位置，导航栏一般是做什么用的，放在什么位置等等。这次的项目学习中将会给我吗解答以上问题。

同学B：好的呀，那我们开始吧！;任务1认识移动端界面结构;6.1.1栏

1、状态栏

状态栏：展示了设备及其周围环境的重要信息;2、导航栏

导航栏能够实现应用不同信息层级间的导航。;4、标签栏

标签栏让用户在不同的子视图、任务和模式中切换;6.1.2导航结构

一、导航模型纲要

首先，我们将导航模型概括为三种导航模式：

1.平铺页面

平铺页面就像一叠卡片，页面通过滑动切换，通常视觉精美，没有滚屏。这种导航方式主要适用于只有一个主屏的简单应用。

2.标签栏

标签栏是我们最常见的导航模式，这类导航的最大优势就是让应用的主要功能一目了然。我们根据应用的功能类型和信息类型进行标签分类，每个标签对应的页面应该有自己独特的功能和内容。

3.树形结构

树形结构就是将层级信息分类到一颗倒置的树的树枝上，展示起来就像是流程图（类似家谱）。对于组织大量信息内容，同时又能让每个内容触手可及，树形结构是一个高效的方法。;6.1.3内容视图

1、活动

每个活动表示一个系统提供的或自定义的服务——通过访问活动视图来作用于某些特定的内容

（1）活动是一种可定制对象，代表着某个可以让用户在APP中执行操作的服务;（2）用户通过点击活动视图中的某样图标来启动某项活动;2、活动视图控制器

活动视图控制器是一个临时视图，当中罗列了一系列可以针对页面特定内容的系统服务和定制服务;2、活动视图控制器

活动视图控制器是一个临时视图，当中罗列了一系列可以针对页面特定内容的系统服务和定制服务;（1）显示了让用户可以针对当前内容执行操作的一系列的可配置服务;（2）根据所处的场景不同???可能出现在操作列表或浮出层中;（3）使用活动视图控制器来为用户提供一些列针对当前内容的服务。这些服务可以系统自带的，例如：复制、转发到邮件等，也可以是自定义的;（4）确保活动视图控制器中的操作是针对当前内容的;3、集合视图

集合视图用户管理一些列有序的项，并以一种自定义的视图来呈现它们;（1）由于集合视图的布局不是一个严格的线性布局，因此适合用来展示一些尺寸不一致的项

（2）表格视图更适合的时候，不要使用集合视图;4、图片视图

图片视图用来展示一张单独的图片或者一系列动态图片

（1）确保图片视图中的每一张图片相同的尺寸或比例。如果你的图片尺寸不一致，图片视图会逐一对它们进行调整

（2）可以检测图片本身及父视图的属性，并决定这个图片是否应该被拉伸、缩放、调整到适合屏幕的大小;5、页面视图

页面视图控制器通过滚动或翻页两种方式来处理长度超过一页的内容;6、浮出层

浮出层是当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图;7、滚动视图

使用滚动视图允许用户在固定的空间内浏览大尺寸或大量的视图（例：尺寸超越滚动视图边界的图片）;8、表格视图

表格视图以一个可滚动的单列多行的形式来展示数据

（1）用户可以通过点击来选中某行，或通过控件来添加、移除、多选、查看详情或展开另一个表格视图;（2）表格视图的类型：

平铺型（表格右侧可以出现垂直的表格索引）;9、文本视图

文本视图可以接受和展示多行文本;6.1.4临时视图

1、警告框

警告框用于告知用户一些会影响到他们使用APP或设备的重要信息。;2、操作列表

操作列表展示了与用户触发的操作直接相关的一些列选项。;3、模态视图

模态视图为当前的任务或当前工作流程提供了一种独立的功能，为用户提供了一种不脱离主任务的方式去完成一个任务或者获得信息。;谢谢