从0开始的Axure学习(二)Axure页面结构相关知识

2.原型结构

2.1结构设计

在设计原型图前,应先设计出原型结构。

设计原型结构的软件有特别多,脑图、流程图都可,这里用到的软件是Xmind

image

具体的设计思路在我以往的测试学习笔记中有记录,大同小异都是精确的描写出需求

2.2原型尺寸

在AxureRP9 中,提供了部分移动设备的标准原型尺寸。

在页面模式中,可以通过选择设备类型的列表完成【相关页面尺寸】的设置。

2.2.1移动端类型

需要注意的是AxureRP9中提供的原型分辨率均为逻辑分辨率。

逻辑分辨率:指得是软件所支持的分辨率
物理分辨率:指得是硬件所支持的分辨率,也就是物理像素DP

物理像素简而言之就是,我们在手机自带的设置里面分辨率

image

例如 我的手机像素为2460*1080像素 为物理像素

逻辑分辨率代表设备独立像素或设备无关像素DIP,设备独立像素是一个长度单位,与屏幕中的像素密度无关。

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

PPI(像素密度的计算公式)=
$$
√(X2+Y2)/ Z
$$
(X:长度像素数;Y:宽度像素数;Z:屏幕大小)

image

2.2.2Web类型

Web类型指得是用电脑设备打开的Web网站 PS:我工作最主要的类型

电脑设备的独立像素比通常为1,简而言之:物理像素比与逻辑像素比相同。

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

电脑设备也有很多不同的分辨率,目前主流的分辨率有1920、1600、1536、1440、1366、1280等

如果是制作水平方向全屏的页面,原型的宽度尺寸不超过设备分辨率减去浏览器滚动条宽度之后的尺寸即可

通常来说,浏览器的滚动条宽度也是不一样的,通常只能取一个最大值,21px

在高分辨率的设备中,为了能够有较好的显示效果,通常会对显示内容有一定比例的放大(DPI适配)。

缩放比例为125%

1440像素会变为1800像素。

3.页面结构

页面结构是基于圆形结构图进行搭建的

在AxureRP 9的页面模块中,可以通过页面调整层级等操作,让页面结构图与原型结构图保持一致

image

在这里需要注意的是,推荐全部使用英文命名

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

在Linux服务器中发布的静态网页(没有经过处理),若页面名称是中文,则在访问的时候会发生404的错误,

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

【命名规则】当使用英文进行明明时,建议采用下划线命名方法,例如hello_world增强易读性

4.页面布局

4.1页面布局

当完成页面结构搭建之后,要开始进行页面内容的构建。

P1:考虑页面是如何布局

对于功能模块以及子模块都可以引用这两套布局方式

image

image

以拉勾网举例

image

image

基本上,同一个网站或应用软件都会采用相似的布局,为了对风格进行统一化标准,但是也不排除某些二面根据需求有局部调整。

针对于移动端界面,也采用这样的方式进行划分

需要注意的是,移动端如果想呈现左右两个部分,往往是隐藏状态,需要按钮进行引导展开侧边栏进行其他操作

4.2功能分布

当确定了整体的布局,就可以进行一部确定功能的分布。

image

PS:以下图片来源于网络资源

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

image

posted on 2022-09-27 17:59  钢镚芽儿哟  阅读(546)  评论(0编辑  收藏  举报

导航