返回首页

Axure RP7创建响应式原型图文教程

时间:2014-04-29 22:53来源:知行网www.zhixing123.cn 编辑:麦田守望者

自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情。响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品质的可以测试或者验证的功能。不过随着最新Axure RP 7中的适应性视图功能发布后,这个情况开始改变了。

Axure RP 7的适应性视图

Axure RP 7的适应性视图让不借助编码创建响应式原型成为了可能。你可以利用这个功能在Axure RP里创建一个多视图的页面,这个视图能在给定屏幕尺寸的设备里显示。

这无疑是UX专业人士的福音,将他们从HTML中解放了出来。当你不得不在设计过程中思考技术问题时,你很容易就会忽略设计思维。在某些情况下,常常是在大部分项目非常早期的时候,技术可行性和限制的考量是设计过程的必要部分。但是在初期的原型阶段,可以自由的去考虑怎样的界面、信息流和交互能最优解决用户的问题,也许对设计师更有帮助,而这些练习甚至可以暴露你没考虑到的技术限制问题。

适应性视图如何运作

适应性视图是基于在Axure里首先创建的“注册送38 68彩金视图”,由这个视图可以拓展出注册发短信送59视图,但不是必须的。在移动优先的设计中,你的注册送38 68彩金视图应该是智能手机的竖屏界面,从这点出发,你可以创建适应更宽屏的视图,例如智能手机的横屏、平板和桌面。在使用适应性视图时我比较倾向用这个方式。

你也可以采用桌面优先的方式,从宽屏开始设计然后自上向下逐渐到手持设备。这样的好处就是你知道最大屏的所有元素是否需要在逐渐变小的屏幕里是否需要移除或者重新设计。使用哪种方式取决于你的项目和已知或者期望投入的设备的使用模式。

移动优先

我们以一个虚拟的自行车购物网站作为范例,采用移动优先的方法来设计。我们会分别在手机和平板上设计横屏和竖屏的首页视图。

第一步先建立只有一个空白页面的Axure文档,命名为”Bike Shop“。在手机视图里,我们以iPhone 5的屏幕为准,其实还可以应用到任何设备,不管是哪种屏幕大小或操作系统。我还喜欢添加页面辅助线来标记页面的边界和添加内边距。屏幕的辅助线标记在x轴320像素处和y轴568像素处。

我们也在x轴10像素和310像素的地方添加辅助线来标记边距,这样页面内容就不会紧贴在屏幕的左右两边。对于iOS的Retina显示屏,在这篇文章中所使用的屏幕宽度会自动缩放到更高的分辨率。较小的尺寸只是让我们Axure RP的文件体积更小而且在制作原型时更方便调整。

1-adaptive-1-500px

创建一个单一的页面,用页面辅助线标示出屏幕边缘和页面左右两边的边距。

现在我们准备好设计注册送38 68彩金视图的页面了。我们要做的第一件事就是创建一个简单的头部,在彩色条上输入自行车商店的名称。头部创建后,右键单击,然后从菜单中选择“转换为母版”。一旦你命名并保存该头部,就会添加到工作区左栏底部的母版面板中。在Axure RP中,母版可以在一处进行设计,然后复用到原型中的注册发短信送59页面里。

2-adaptive-2-500px

使用“转换为母版”对话框时,你可以对母版进行命名,并设置母版在页面上拖放时的行为。

添加更多的界面元素到页面后,你已经设计好手机竖屏的基本页面。现在我们将利用这个功能创建不同的视图。

adaptive-3-500px

我们项目的基本视图已经完成了。

创建一个新视图

通过点击Axure RP 页面标签左侧的按钮,打开“自适应视图”对话框来创建新视图(下面截图中用红色边框标示)。

adaptive-4-500px

点击按钮打开自适应视图对话框。

使用自适应视图非常简单:

1.单击对话框左上角的绿色“+”图标(如下所示)来添加一个新视图。

2.命名该视图——在这个案例中是“Phone Landscape(手机横屏)”。

3.从两个选项中,选择新视图的显示条件:“大于或等于”还是”小于或等于“一个固定的宽度。

4.最后,填入屏幕宽度的数值后就可以生成视图了。

adaptive-5-500px

给第一个子视图进行设置。

完成后,命名为“Phone Landscape(手机横屏)”的视图会在屏幕大于或等于321像素时触发显示。因为我们是以iPhone 5作为我们移动端设计的载体,所以这个视图会在人们倾斜手机至横向时出现。否则,显示的则是注册送38 68彩金视图(即使iPhone Retina屏幕的实际宽度是640像素,注册送38 68彩金视图还是以纵向显示)。我们新添的视图也会在平板和桌面上显示,除非我们增加了特定的视图。

默认情况下,任何新视图都会继承之前的内容——在这个案例中,继承的是基本视图。当我们为一个页面添加更多的视图时,我们可以继承注册发短信送59任意我们希望作为起始的视图。

下面的屏幕截图显示了我们的两个视图,基本和321。Axure RP根据你在创建时所指定的宽度自动设置视图的名称。321标签是蓝色的,表示当前编辑状态。在右侧的紫色辅助线在x轴321像素处,表示截点。

 

adaptive-6-500px

新视图的内容和布局和基本视图的一样,但随着设计的进行会有所改变。

继承

继承的概念是了解如何有效使用自适应视图的关键。这里有一些需要知道的关键概念:

  • 一个新视图是母本的完整副本,这样方便我们不用在多个视图中重新创建相同的组件。
  • 如果我们要更改基本视图主标题的文本,这个改动会同时在任何直接或者间接的子屏幕中更新。
  • 继承只会从上一级视图到下一级,而不能逆向。因此,在子视图中所做的更改不会传递回上一级视图。
  • 自适应视图中的组件会继承上级视图中该组件的位置、尺寸和样式。如果我们在子视图里加大字号,不会影响到上级视图。但是,如果我们回到基本视图进行更改,把主标题的字号调小,并不会影响到子视图,因为子视图的新文本已经被之前的更改覆盖了。

在你为横屏的设计进行调整前,要先设置新的页面辅助线标示屏幕边缘。横屏的辅助线在x轴的568像素处和y轴的320像素处。

自适应母版

我们将通过更新头部母版来开始手机横屏的设计。在Axure RP 7里,母版和页面一样,也是自适应的,会自动继承注册送38 68彩金视图的页面截点。

在下面的截图中可以看到,我们增加了一条辅助线,并把头部的长度扩展到568像素。

adaptive-7-500px

不同视图中的母版都继承了基本页面中的宽度。

现在我们可以更新手机横屏视图的设计了。在下面的截图中,我们把在竖屏视图中位于页面底部的一组标准清单列表移到了页面主图的右侧。促销标题字号更大了,在它下面的文本也扩展到与屏幕同宽,更多的页面内容会出现在屏幕上(这取决于该页面是否是全屏浏览,还是使用chrome浏览器,或者iPhone的状态栏是否有显示)。

adaptive-8-500px

该页面已经被重新设计过,以更好地利用手机横向屏幕。

平板视图

现在手机上两个方向的视图已经完成,让我们开始设计平板视图。我们会使用iPad的参数,但是重审一下,这个技术是适用任何屏幕尺寸和操作系统的。创建平板视图的方法和手机横屏视图的是一样的。

我们会从平板的竖屏开始设计,因为是下一级宽度的屏幕。我们设置了当屏幕超过569像素时出现这个视图,这使得手机横屏的视图宽度限制在321像素和568像素之间。正如你在下面截图中可以看到的,我们可以选择让平板视图延续手机横屏视图。根据继承的机制,在基本视图或者在手机横屏视图中的任何改动都会同步到平板视图中。

adaptive-9-500px

------分隔线----------------------------
标签(Tag):AxureRP AxureRP教程 AxureRP软件下载 AxureRP序列号
------分隔线----------------------------
推荐内容
猜你感兴趣
博聚网