2项目的创建_Axure RP 9萌新修炼手册第二章创建项目（2）

第二节 原型尺寸

原型的页面尺寸对于很多新手来说也是一个常见的问题。

这个问题在AxureRP9部分得以解决。

一、移动端

AxureRP9提供了部分移动设备的标准原型页面尺寸。(图2-16)

在页面样式中，我们可以通过选择设备类型的列表完成【页面尺寸】的设置。

但是，这个列表并不能满足所有移动设备尺寸的设定，比如这个列表中没有包含任何国产移动设备。

那么，怎么才能知道任何一个移动设备的原型页面尺寸应该是多少呢？

实际上Axure RP 9所给出的原型页面尺寸是设备的逻辑分辨率。

如果我们能够获得一个设备的逻辑分辨率，就能够知道原型尺寸是多少。

注意，逻辑分辨率不同于物理分辨率。

物理分辨率代表设备物理像素(DP，Device Pixel)。

设备物理像素就是我们通常在移动设备屏幕参数中所看到的屏幕分辨率的单位，它与屏幕中的像素密度有关。

例如，红米Note 5A的屏幕尺寸是5.5英寸，分辨率是1280*720像素，而小米Note 3屏幕尺寸也是5.5英寸，但分辨率是1920*1080像素。

很显然，这两款手机具有相同的屏幕尺寸，但分辨率却不一样，所以它们屏幕中像素的密度是不同的。

从这个例子也能看出，物理像素并没有固定的尺寸。

逻辑分辨率代表设备独立像素或设备无关像素(DIP，Device Independent Pixels)，设备独立像素是一个长度单位，它与屏幕中像素的密度无关。

我们可以将设备独立像素理解为是设备坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，它可以由程序转换为物理像素。转换的比例叫独立像素比(DPR)。

例如，红米Note 5A的独立像素比是2，小米Note 3的独立像素比是3。所以这两个设备的逻辑分辨率都是360*640像素(独立像素)。

以上内容只是说明了原型页面尺寸一些相关的概念，但具体到每一个设备的原型页面尺寸，还需要借助工具来获取。

产品班网站提供了获取原型页面尺寸的功能，地址是http://chanpinban.com/get_dp/。

使用浏览原型的移动设备打开这个网址，就能够看到该设备的逻辑分辨率，也就是原型的页面尺寸。

二、Web端

我们所说的Web端是指在电脑设备打开的Web网站。

电脑设备的独立像素比通常是1，也就是说物理分辨率与逻辑分辨率相同。

只是在设计Web端原型时，因为页面高度往往是不固定的，一般我们只需考虑原型的宽度尺寸。

电脑设备也有很多不同的分辨率，目前主流的分辨率有1920、1366、1440、1536、1600、1280六种(按使用量排序)。

那么，这么多种设备分辨率，原型页面的宽度尺寸如何界定呢？
如果是制作水平方向全屏的页面，原型的宽度尺寸不超过设备分辨率宽度减去浏览器滚动条宽度之后的尺寸即可。

但是，不同的浏览器滚动条的宽度也是不一样的，通常只能取一个最大值，即21像素。

如果不是制作水平方向全屏的页面，一般来说网页的主要内容宽度不要超过1200像素。

有些读者可能会有顾虑，像分辨率宽度为1920像素的设备中，页面主要内容只有1200像素，会不会显得太窄了？

目前的情况来看，在这种高分辨率的设备中，为了能够有比较好的显示效果，通常会对显示内容有一定比例的放大(DPI适配)。

例如，Windows10系统中推荐将文本和应用的缩放比例设置为125%。

这样缩放之后1200像素就会变为1500像素，显示效果也非常不错。

图2-17中是网易云课堂未放大的浏览效果，主题内容宽度是1200像素。

图2-18中是网易云课堂放大125%的浏览效果，主题内容宽度是1500像素。

第三节 页面结构

页面结构是基于原型结构图进行搭建的。

在Axure RP 9的页面模块中，我们通过新建页面、调整层级等操作，让整个原型的页面结构与原型结构图保持一致。

仍以“AI研习社”为例，我们结合之前的原型结构图，搭建原型页面结构。(图2-19)

大家能够看到左侧原型结构图和右侧页面结构数量、顺序以及层级都是一一对应的。

不过，名称上有了区别。

左侧的原型结构图中使用的中文名称，而右侧的页面结构中使用了英文名称。

并不是说英文名称是必须的，而是和原型的发布有关。

AxureRP可以生成静态的HTML页面文件，发布到服务器中，供他人通过URL进行访问。

在Linux服务器中发布的静态网页(未经过技术处理)，如果页面名称是中文，会发生无法找到页面的“404”错误。

所以，如果有将原型内容在线发布的需求时，需要考虑到服务器类型，使用中文或英文的页面名称。

【建议】当使用英文命名页面时，建议采用下划线命名法。单词为全小写，多个单词之间以下划线连接，以增强名称易读性。

第四节 页面布局

一、页面布局

完成页面结构的搭建之后，我们就可以开始页面内容的构建了。

首先要考虑的就是页面如何布局。

页面布局实际上是我们对功能模块以及所包含的子模块在页面上区域的划分。

对于页面中的区域，不管是整体区域还是局部区域，都可以划分为上、中、下、左和右5个部分。(图2-20)

当然，如果你喜欢也可以换个划分方式。(图2-21)

不过，实际上我们很少能完全用到所有5个部分。
先来看一个艾瑞网报告页面的例子。

图2-22中我们能够看到页面被分为4个部分。

然后，我们再细分来看。

顶部导航布局：(图2-23)

左侧主要内容：(图2-24)

右侧次要内容：(图2-25)

底部导航内容：(图2-26)

通过上方的例子大家不难看出，页面的布局其实就是整体布局中嵌套功能模块布局，功能模块布局中嵌套子模块布局。

实际上，上面的例子我们还能够继续细分，直到将所有的模块和子模块完全独立出来。

一般来说，同一个网站或应用的页面都会采取相近的布局，以便风格的统一，但也不排除某些页面根据需求有局部调整。

例如，艾瑞网的专题页面(图2-27)。这个页面整体布局只有上、中、下三个部分，中间部分不像报告页分为左右两个部分，因为除了主要内容就没有其他内容了。

以上就是关于页面布局的介绍，使用了一个Web端的网站示例。

移动端界面的布局，我们也可以采用这样的方式进行划分。

只不过，移动端界面的整体布局，往往都是上、中、下三个部分，当存在左右两部分时，往往是隐藏状态，需要通过用户的操作才会呈现。

二、功能分布

当我们确定了整体的布局，就可以进一步确定功能的分布。

例如，我们确定了使用图2-28中的布局，那么接下来我们就可以进行每一块内容的细化。

在细化过程中，能够直接完成的部分就直接完成，而不能完成的部分，我们可以先占位，确定后再进一步细化。

【提示】图2-29就是制作中的线框草图，关于绘制线框草图需要使用的元件以及相关操作在下一章中进行详细的讲解。