響應式Web設計:通過響應式的設計開發方式

來源:互聯網
上載者:User

文章描述:案例學習 響應式網站的產品需求和設計流程詳解.

今次的譯文中,我們繼續響應式Web設計方面的話題。前面的幾篇相關文章以概念詮釋、方法說明為主,本篇則圍繞一個實際網站案例展開,從需求、流程、步驟細節等方面描述了響應式設計在項目中的實踐方式。

本篇的部分內容要點會與之前幾篇產生交集;我們會在這些地方提供相應文章的入口,便於深入參考閱讀。接下來進入本文。

根據DailyTech的統計,到2015年,移動互連網的使用者數量將會超過案頭使用者。除了智能手機之外,使用平板電腦甚至是電視機進行上網的使用者也在持續增加。在這種形勢下,怎樣讓我們的網站盡量相容各種類型的裝置,並確保優良的使用者體驗,這將是越來越重要的問題。

通過響應式的設計開發方式,我們可以使網站頁面隨瀏覽裝置的不同而自行響應,動態調整布局結構、元素規格樣式,將相同的內容以不同的格式呈現給不同裝置的使用者。

如果你對響應式Web設計還不大瞭解,可以先參考閱讀我們之前的關於響應式設計的概念、組成要素及基本實現思路方面的文章,全方位預熱一下。

什麼情況下適宜採用響應式Web設計的方式

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

你心裡沒譜

設計開發一個全新的移動版本網站或是用戶端應用,整個過程是有很大挑戰性的。除非產品正式上線,否則你無法真正瞭解它是否會成功。與其單純的為了移動化而花費資源打造移動版本網站或是開發用戶端應用,不如先花些心思將原本的網站打造的更具彈性,使其在各種主流行動裝置中都擁有盡量優秀的使用者體驗。

你想節約成本

要打造響應式網站,自然離不開有經驗的互動、視覺設計及前端開發人員。所需的資源,尤其是時間方面,比起普通網站來說大約增加20%到30%的樣子;但比起單獨打造移動版本的網站,或是設計開發用戶端應用的成本來說,卻要低很多。從維護的角度來說,也會輕鬆很多。

你希望網站可以相容未來的新裝置

所謂的移動版本網站,通常是針對某類具體規格的裝置進行單獨打造的,彈性比較差。新的行動裝置層出不窮,傳統的移動版本網站需要不斷的進行更新維護,才能盡量保證在新裝置中工作良好。響應式設計可以根據裝置瀏覽環境的具體規格進行判斷,使用不同的呈現方式來展示內容,無需針對某種特定的規格進行維護,適應性更好。

更多

關於網站移動化的方式選擇,可以參考我們之前的文章“走出移動互連網的迷宮 - 網站移動化的方法策略”。

響應式網站頁面的設計流程

我們將使用一個真實的酒店網站作為範例,來示範響應式Web設計的流程。這個網站是我們在九月份剛剛為Macdonald連鎖酒店建立的。在整個設計開發流程中,有幾個關鍵步驟,是我們接下來要逐一展開學習的:

1.使用者研究與裝置規格預估

2.製作線框原型

3.視覺設計

4.前端構建

使用者研究與裝置規格預估

前期,通過使用者調研,我們可以瞭解到使用者群所使用的裝置類型分布情況,並預估出幾種典型的響應規格,用來規劃不同的呈現方式。有幾個問題需要特別考慮下:

使用者在不同裝置上的目標有多大區別?

過去,我們通常會假設使用者在使用行動裝置訪問網站時,其行為都是高度目標驅動化的,例如在旅途中擷取酒店地址、預訂房間一類。但實際情況不僅如此——智能手機、平板電腦等各類行動裝置的使用者,會越來越多的在相對穩定從容的狀態下使用網路。所以在很多時候,使用者使用不同裝置的目標差別並沒有想象的那麼大,我們不能片面的假設不同類型裝置的使用者對功能的需求差異。

關於功能與內容呈現,從技術的角度出發,需要考慮哪些?

對於功能繁多複雜的網站,需要針對不同的裝置類型進行功能和內容的優先順序排序,以便在開發階段通過CSS定義不同的響應規則,以最合理的樣式規格和布局方式進行呈現;尤其對於手機等小螢幕裝置,需要多花些心思。

製作線框原型

通過線框圖,我們可以對響應式的視覺效果背後的邏輯結構進行規劃和定義。(關於線框原型,可以參考我們之前的“線框原型的本質及實踐應用概述”)

我們根據之前一步的研究和預估結果,規划出幾種比較典型的螢幕尺寸規格。本次案例中,我們選擇了三款具有代表性的主流裝置,包括案頭顯示器、iPad和iPhone,因為根據我們的使用者研究結果,使用這三種裝置的使用者佔了絕大部分。

需要強調一下,響應式設計的目的在於,針對不同裝置的螢幕規格區間,進行功能及內容的輸出格式預設。所以我們只需要選取一些具有代表性的裝置,而不必顧全所有已知的規格類型;我們製作線框原型的主要目標是規劃樣式背後的邏輯。

在這個階段,我們必須清楚,整個網站中有哪些關鍵頁面是在功能和布局方面具有代表性的。對於這次的案例網站,“關鍵頁面”包括首頁、預訂流程中的頁面、酒店詳情頁面等。

[1] [2] [3] [4]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。