使用Axure实现响应式网页设计

时间：2023-09-26 00:30:01 | 来源：网站运营

时间：2023-09-26 00:30:01 来源：网站运营

使用Axure实现响应式网页设计：截至2016年6月，我国的网民数达7.1亿，手机网民数达6.56亿，互联网普及率超过一半。因此电脑、平板、手机为代表的智能终端日益成为人们的日常必备电子产品。为了使这些不同尺寸的屏幕有良好的浏览体验，以往设计师需要针对不同的屏幕尺寸设计不同的方案，目前提出了一种新的解决方案：响应式网页设计（Responsive Web Design）。即页面的设计响应用户的行为，能够根据不同设备环境自动响应和调整。下图是谷歌响应式设计的一个demo：

<center>图 0.1谷歌响应式网页设计案例</center>1.设置viewpoint


在响应式网页设计中，viewpoint很重要，第一步需要设置viewpoint：

<center> 图1.1viewpoint设置（谷歌）</center>2.设置断点


谷歌对电脑、平板和手机提供了一套交互式响应方案，定义了不同设备上的断点：

<center>>表2-1 电脑、平板、手机的断点（谷歌）</center>


不同的公司的UI设计规范对不同终端响应式网页设计的宽度定义不同，常见的是以下几个断点：

<center>>表2-2 常见电脑、平板、手机的断点</center>min-width表示屏幕最小宽度的数值，max-width表示屏幕最大宽度的数值。手机竖屏的宽度是320~480，表示手机竖屏时最小宽度是320px，最大宽度是480px。在使用min-width或max-width作为断点时，需要考虑PC优先还是移动优先。如果是PC优先，一般采用max-width作为断点；如果移动优先，一般采用min-width作为断点。

3.常见的布局模式

网站布局主要是对行列在不同尺寸设备上的适应性处理。

(1)最灵活的（MostlyFluid）

最受欢迎的模式或者就是这种最简单的方式：在更大屏幕使用更大margin的多列布局，依赖于灵活的栅格和图片，在小屏幕中某列内容往下排。

<center>图3.1 最灵活布局</center>
（2）列内容往下排（ColumnDrop）

以多列开始，以单列结束，当屏幕尺寸变小，列内容会往下排。不像第一种模式，这种模式的元素大小基本保持不变。

<center>图3.2 列内容往下排</center>（3）布局切换（LayoutShifter）

这种模式尽最大可能地去适应不同的屏幕尺寸。即是，不同的布局应用于的大、中、小屏幕当中。因为这本来就花费更多的工作量，所以相比前面两种模式，这个的受欢迎程度稍低。

<center>图3.3 布局切换</center>（4）最简单（TinyTweaks）


网页上只有单列，直接对网页进行缩放。

<center>图3.4 最简单布局</center>（5）屏幕以外的空间利用（Off Canvas）


以上几种不同的模式，依赖屏幕的空间以调整页面布局。屏幕外的空间也可以利用.通常可以将导航或者目录隐藏起来，在大屏幕或者小屏幕展开显示。

<center>图3.4 屏幕外空间利用</center>除了网站布局，导航列、媒体影音、表格表单资料、文字和模组也形成了一些设计模式，也值得我们继续学习探索。


4.Axure响应式网页设计

以上我们介绍了viewpoint、断点和布局模式，下面就进入了产品原型设计的实战阶段。以Axure7.0为例，采用PC优先方式，进行响应式网页设计。

（1） 打开响应式

初次打开Axure后，点击index左侧的响应式图标，如下图所示。或者再菜单栏按照项目>自适应视图路径打开。这里自适应视图即响应式网页设计的意思。

<center>图4.1 Axure响应式网页设计功能位置</center>（2） 设置断点


根据表2常见电脑、平板、手机的断点的参数,选取max-width作为断点，依次设置平板横屏、平板竖屏/手机横屏和手机竖屏的页面。

<center>图4.2 Axure响应式网页设计设置窗口</center><center>>图4.3 Axure响应式网页设计断点效果</center>
如图4.2、4.3所示，PC优先的响应式网页设计，小宽度的布局可以集成大宽度的布局。

最后，点击Axure的预览按钮（F5）可以在浏览器中预览响应式网页设计效果。



本文首发于http://mp.weixin.qq.com/s?__biz=MzI5MzAzMzYyMw==&mid=2457392684&idx=1&sn=0755199b0d95a252a5b19c9a8b10a37e&chksm=fbf435d4cc83bcc2f8976d13a16ee79869c29ad58189e007c98052aab86eda93a6e3d30e6db0&mpshare=1&scene=1&srcid=1110camlbRQneNOAfWOOljQD#wechat_redirect


微信公众号：一本书的厚度

参考资料：

[1]网页响应式布局及断点设置分析[2016-11-10].[EB/OL].http://www.w3cdream.com/content-sort-7-article-577.html

[2] 多设备的Web布局模式[2016-11-10].[EB/OL].http://zmingcx.com/web-layout-patterns-and-more-devices.html

[3] 移动前端开发之viewport的深入理解[2016-11-10].[EB/OL]. http://www.cnblogs.com/2050/p/3877280.html

[4] 吴姿颖.rwd-experience_FEDay@吴姿颖.pdf

[5] 第38次中国互联网络发展状况统计报告[2016-11-10].[EB/R]. http://www.cnnic.cn/hlwfzyj/hlwxzbg/hlwtjbg/201608/P020160803367337470363.pdf