今次的譯文中，我們繼續(xù)響應(yīng)式Web設(shè)計方面的話題。前面的幾篇相關(guān)文章以概念詮釋、方法說明為主，本篇則圍繞一個實際網(wǎng)站案例展開，從需求、流程、步驟細節(jié)等方面描述了響應(yīng)式設(shè)計在項目中的實踐方式。

本篇的部分內(nèi)容要點會與之前幾篇產(chǎn)生交集；我們會在這些地方提供相應(yīng)文章的入口，便于深入?yún)⒖奸喿x。接下來進入正文。

根據(jù)DailyTech的統(tǒng)計，到2015年，移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶。除了智能手機之外，使用平板電腦甚至是電視機進行上網(wǎng)的用戶也在持續(xù)增加。在這種形勢下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設(shè)備，并確保優(yōu)良的用戶體驗，這將是越來越重要的問題。

通過響應(yīng)式的設(shè)計開發(fā)方式，我們可以使網(wǎng)站頁面隨瀏覽設(shè)備的不同而自行響應(yīng)，動態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。

如果你對響應(yīng)式Web設(shè)計還不大了解，可以先參考閱讀我們之前的關(guān)于響應(yīng)式設(shè)計的概念、組成要素及基本實現(xiàn)思路方面的文章，全方位預(yù)熱一下。

什么情況下適宜采用響應(yīng)式Web設(shè)計的方式

當客戶提出產(chǎn)品功能移動化的需求時，有一些解決方案可供我們選擇，包括原生客戶端應(yīng)用、Web應(yīng)用等；究竟怎樣的方式更合適，還是取決于具體的需求情況。另外也要考慮網(wǎng)站本身是否需要實施移動化。雖然響應(yīng)式站點并不能算是一種純粹的移動化解決方案，但是，在某些情況下，這種方式是非常值得考慮的。

你心里沒譜

設(shè)計開發(fā)一個全新的移動版本站點或是客戶端應(yīng)用，整個過程是有很大挑戰(zhàn)性的。除非產(chǎn)品正式上線，否則你無法真正了解它是否會成功。與其單純的為了移動化而花費資源打造移動版本站點或是開發(fā)客戶端應(yīng)用，不如先花些心思將原本的網(wǎng)站打造的更具彈性，使其在各種主流移動設(shè)備中都擁有盡量優(yōu)秀的用戶體驗。

你想節(jié)約成本

要打造響應(yīng)式站點，自然離不開有經(jīng)驗的交互、視覺設(shè)計及前端開發(fā)人員。所需的資源，尤其是時間方面，比起普通網(wǎng)站來說大約增加20%到30%的樣子；但比起單獨打造移動版本的網(wǎng)站，或是設(shè)計開發(fā)客戶端應(yīng)用的成本來說，卻要低很多。從維護的角度來說，也會輕松很多。

你希望網(wǎng)站可以兼容未來的新設(shè)備

所謂的移動版本站點，通常是針對某類具體規(guī)格的設(shè)備進行單獨打造的，彈性比較差。新的移動設(shè)備層出不窮，傳統(tǒng)的移動版本站點需要不斷的進行更新維護，才能盡量保證在新設(shè)備中工作良好。響應(yīng)式設(shè)計可以根據(jù)設(shè)備瀏覽環(huán)境的具體規(guī)格進行判斷，使用不同的呈現(xiàn)方式來展示內(nèi)容，無需針對某種特定的規(guī)格進行維護，適應(yīng)性更好。

更多

關(guān)于網(wǎng)站移動化的方式選擇，可以參考我們之前的文章“走出移動互聯(lián)網(wǎng)的迷宮 - 網(wǎng)站移動化的方法策略”。

響應(yīng)式網(wǎng)站頁面的設(shè)計流程

我們將使用一個真實的酒店網(wǎng)站作為范例，來演示響應(yīng)式Web設(shè)計的流程。這個網(wǎng)站是我們在九月份剛剛為Macdonald連鎖酒店創(chuàng)建的。在整個設(shè)計開發(fā)流程中，有幾個關(guān)鍵步驟，是我們接下來要逐一展開學(xué)習(xí)的：

1．用戶研究與設(shè)備規(guī)格預(yù)估

2．制作線框原型

3．視覺設(shè)計

4．前端構(gòu)建

用戶研究與設(shè)備規(guī)格預(yù)估

前期，通過用戶調(diào)研，我們可以了解到用戶群所使用的設(shè)備類型分布情況，并預(yù)估出幾種典型的響應(yīng)規(guī)格，用來規(guī)劃不同的呈現(xiàn)方式。有幾個問題需要特別考慮下：

用戶在不同設(shè)備上的目標有多大區(qū)別？

過去，我們通常會假設(shè)用戶在使用移動設(shè)備訪問網(wǎng)站時，其行為都是高度目標驅(qū)動化的，例如在旅途中獲取酒店地址、預(yù)訂房間一類。但實際情況不僅如此——智能手機、平板電腦等各類移動設(shè)備的用戶，會越來越多的在相對穩(wěn)定從容的狀態(tài)下使用網(wǎng)絡(luò)。所以在很多時候，用戶使用不同設(shè)備的目標差別并沒有想象的那么大，我們不能片面的假設(shè)不同類型設(shè)備的用戶對功能的需求差異。

關(guān)于功能與內(nèi)容呈現(xiàn)，從技術(shù)的角度出發(fā)，需要考慮哪些？

對于功能繁多復(fù)雜的網(wǎng)站，需要針對不同的設(shè)備類型進行功能和內(nèi)容的優(yōu)先級排序，以便在開發(fā)階段通過CSS定義不同的響應(yīng)規(guī)則，以最合理的樣式規(guī)格和布局方式進行呈現(xiàn)；尤其對于手機等小屏幕設(shè)備，需要多花些心思。

制作線框原型

通過線框圖，我們可以對響應(yīng)式的視覺效果背后的邏輯結(jié)構(gòu)進行規(guī)劃和定義。（關(guān)于線框原型，可以參考我們之前的“線框原型的本質(zhì)及實踐應(yīng)用概述”）

我們根據(jù)之前一步的研究和預(yù)估結(jié)果，規(guī)劃出幾種比較典型的屏幕尺寸規(guī)格。本次案例中，我們選擇了三款具有代表性的主流設(shè)備，包括桌面顯示器、iPad和iPhone，因為根據(jù)我們的用戶研究結(jié)果，使用這三種設(shè)備的用戶占了絕大部分。

需要強調(diào)一下，響應(yīng)式設(shè)計的目的在于，針對不同設(shè)備的屏幕規(guī)格區(qū)間，進行功能及內(nèi)容的輸出格式預(yù)設(shè)。所以我們只需要選取一些具有代表性的設(shè)備，而不必顧全所有已知的規(guī)格類型；我們制作線框原型的主要目標是規(guī)劃樣式背后的邏輯。

在這個階段，我們必須清楚，整個網(wǎng)站中有哪些關(guān)鍵頁面是在功能和布局方面具有代表性的。對于這次的案例網(wǎng)站，“關(guān)鍵頁面”包括首頁、預(yù)訂流程中的頁面、酒店詳情頁面等。

標簽： 響應(yīng)式Web設(shè)計 交互設(shè)計 CSS3 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。