使用Axure實現響應式網頁設計

時間：2023-09-26 00:30:01 | 來源：網站運營

時間：2023-09-26 00:30:01 來源：網站運營

使用Axure實現響應式網頁設計：截至2016年6月，我國的網民數達7.1億，手機網民數達6.56億，互聯網普及率超過一半。因此電腦、平板、手機為代表的智能終端日益成為人們的日常必備電子產品。為了使這些不同尺寸的屏幕有良好的瀏覽體驗，以往設計師需要針對不同的屏幕尺寸設計不同的方案，目前提出了一種新的解決方案：響應式網頁設計（Responsive Web Design）。即頁面的設計響應用戶的行為，能夠根據不同設備環(huán)境自動響應和調整。下圖是谷歌響應式設計的一個demo：

<center>圖 0.1谷歌響應式網頁設計案例</center>1.設置viewpoint


在響應式網頁設計中，viewpoint很重要，第一步需要設置viewpoint：

<center> 圖1.1viewpoint設置（谷歌）</center>2.設置斷點


谷歌對電腦、平板和手機提供了一套交互式響應方案，定義了不同設備上的斷點：

<center>>表2-1 電腦、平板、手機的斷點（谷歌）</center>


不同的公司的UI設計規(guī)范對不同終端響應式網頁設計的寬度定義不同，常見的是以下幾個斷點：

<center>>表2-2 常見電腦、平板、手機的斷點</center>min-width表示屏幕最小寬度的數值，max-width表示屏幕最大寬度的數值。手機豎屏的寬度是320~480，表示手機豎屏時最小寬度是320px，最大寬度是480px。在使用min-width或max-width作為斷點時，需要考慮PC優(yōu)先還是移動優(yōu)先。如果是PC優(yōu)先，一般采用max-width作為斷點；如果移動優(yōu)先，一般采用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>除了網站布局，導航列、媒體影音、表格表單資料、文字和模組也形成了一些設計模式，也值得我們繼續(xù)學習探索。


4.Axure響應式網頁設計

以上我們介紹了viewpoint、斷點和布局模式，下面就進入了產品原型設計的實戰(zhàn)階段。以Axure7.0為例，采用PC優(yōu)先方式，進行響應式網頁設計。

（1） 打開響應式

初次打開Axure后，點擊index左側的響應式圖標，如下圖所示?；蛘咴俨藛螜诎凑枕椖?gt;自適應視圖路徑打開。這里自適應視圖即響應式網頁設計的意思。

<center>圖4.1 Axure響應式網頁設計功能位置</center>（2） 設置斷點


根據表2常見電腦、平板、手機的斷點的參數,選取max-width作為斷點，依次設置平板橫屏、平板豎屏/手機橫屏和手機豎屏的頁面。

<center>圖4.2 Axure響應式網頁設計設置窗口</center><center>>圖4.3 Axure響應式網頁設計斷點效果</center>
如圖4.2、4.3所示，PC優(yōu)先的響應式網頁設計，小寬度的布局可以集成大寬度的布局。

最后，點擊Axure的預覽按鈕（F5）可以在瀏覽器中預覽響應式網頁設計效果。



本文首發(fā)于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] 移動前端開發(fā)之viewport的深入理解[2016-11-10].[EB/OL]. http://www.cnblogs.com/2050/p/3877280.html

[4] 吳姿穎.rwd-experience_FEDay@吳姿穎.pdf

[5] 第38次中國互聯網絡發(fā)展狀況統計報告[2016-11-10].[EB/R]. http://www.cnnic.cn/hlwfzyj/hlwxzbg/hlwtjbg/201608/P020160803367337470363.pdf