響應(yīng)式網(wǎng)站的產(chǎn)品需求和設(shè)計(jì)流程詳解

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

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

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

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

你心里沒(méi)譜

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

你想節(jié)約成本

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

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

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

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

　　我們將使用一個(gè)真實(shí)的酒店網(wǎng)站作為范例，來(lái)演示響應(yīng)式Web設(shè)計(jì)的流程。這個(gè)網(wǎng)站是我們?cè)诰旁路輨倓倿镸acdonald連鎖酒店創(chuàng)建的。在整個(gè)設(shè)計(jì)開(kāi)發(fā)流程中，有幾個(gè)關(guān)鍵步驟，是我們接下來(lái)要逐一展開(kāi)學(xué)習(xí)的：

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

　　2、制作線框原型

　　3、視覺(jué)設(shè)計(jì)

　　4、前端構(gòu)建

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

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

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

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

制作線框原型

　　通過(guò)線框圖，我們可以對(duì)響應(yīng)式的視覺(jué)效果背后的邏輯結(jié)構(gòu)進(jìn)行規(guī)劃和定義。

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

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

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

1、開(kāi)始規(guī)劃

　　首先來(lái)定義每種關(guān)鍵規(guī)格中的結(jié)構(gòu)網(wǎng)格。我們創(chuàng)建了三個(gè)頁(yè)面模板，寬度分別為1024像素(桌面顯示器)、768像素(iPad豎屏寬度)、320像素(iPhone豎屏寬度)。

　　如上圖所示，從每列等寬的情況入手，可以讓規(guī)劃工作相對(duì)簡(jiǎn)單一些，幫助我們將注意力放在響應(yīng)式的布局改變上。

2、溝通與評(píng)審

　　接下來(lái)我們需要考慮的是，每一列中的模塊組件應(yīng)該以怎樣的方式隨著頁(yè)面的寬度縮放而響應(yīng)式的適應(yīng)和調(diào)整。在這個(gè)過(guò)程里，保持團(tuán)隊(duì)成員之間的溝通是非常重要的，包括視覺(jué)設(shè)計(jì)師、前端開(kāi)發(fā)人員等;使用初步的線框原型，與大家交流模塊組件在布局和樣式方面的調(diào)整計(jì)劃，盡量在初期就讓相關(guān)成員對(duì)整個(gè)規(guī)劃做到心中有數(shù)，并盡早發(fā)現(xiàn)前端實(shí)現(xiàn)等方面的潛在的問(wèn)題。

3、首頁(yè)

　　也許對(duì)于你自己的實(shí)際項(xiàng)目來(lái)說(shuō)，其他頁(yè)面的重要程度或代表性是超過(guò)首頁(yè)的。這不是問(wèn)題，你可以調(diào)整具體的頁(yè)面規(guī)劃次序;我們的這個(gè)項(xiàng)目案例是從首頁(yè)開(kāi)始入手的。下圖中展示的，就是我們?yōu)槭醉?yè)制作的三種響應(yīng)規(guī)格的線框原型。

4、全局導(dǎo)航

　　我們創(chuàng)建了一個(gè)簡(jiǎn)單的橫向?qū)Ш綏l，其寬度可以隨著屏幕寬度的變化而調(diào)整;在最后一種規(guī)格的范圍里(320像素以下)，導(dǎo)航條會(huì)折行顯示，以保證導(dǎo)航元素的可讀性。

　　頭部中其他元素的調(diào)整方式與全局導(dǎo)航的類(lèi)似。

　　在這一步中，最好提前考慮一下關(guān)于組件元素的樣式問(wèn)題，做好與視覺(jué)設(shè)計(jì)師的交流溝通。比如，對(duì)于導(dǎo)航元素，如果使用復(fù)雜的tab式背景，就很有可能在小屏幕設(shè)備中、特別是導(dǎo)航條折行的情況下產(chǎn)生樣式問(wèn)題。

5、頁(yè)腳

　　默認(rèn)尺寸下，頁(yè)腳由四列內(nèi)容組成;另外兩個(gè)規(guī)格范圍中，布局分別為三列和一列;內(nèi)容模塊隨文檔流向下依次擴(kuò)展即可。

6、其他模塊組件

　　全局的四列等寬網(wǎng)格布局使其他組件的規(guī)劃也非常輕松。在首頁(yè)中有一個(gè)組件，其中包含若干內(nèi)容模塊。默認(rèn)尺寸下，可以并排顯示四個(gè)模塊;左右兩邊各有一個(gè)觸發(fā)滾動(dòng)的按鈕，以點(diǎn)擊之后模塊列表會(huì)前后滾動(dòng)，以顯示更多內(nèi)容。在平板電腦類(lèi)型的布局中，默認(rèn)顯示的數(shù)量變?yōu)槿齻€(gè);而在手機(jī)的小尺寸屏幕中，內(nèi)容模塊列表會(huì)變?yōu)閱瘟?，并去掉了用于左右滾動(dòng)的按鈕，用戶可以上下滾動(dòng)頁(yè)面，依次查看不同的模塊。

　　類(lèi)似的，其他涉及到多列顯示的組件和模塊都需要做這樣的考慮。要了解不同設(shè)備的用戶所習(xí)慣的操作方式，同時(shí)結(jié)合該設(shè)備的屏幕寬度規(guī)格，設(shè)計(jì)出最合理的布局及交互方式。

　　測(cè)試線框原型我們可以在線框原型的初稿完成之后，將其圖片導(dǎo)入對(duì)應(yīng)的設(shè)備中，進(jìn)行一些簡(jiǎn)單的初步測(cè)試。試著上下或左右滾動(dòng)原型界面，感受導(dǎo)航與功能、內(nèi)容的布局，完成一些假設(shè)的獲取信息的目標(biāo)。這樣的測(cè)試可以幫助我們盡早的檢驗(yàn)頁(yè)面在可訪問(wèn)性及可讀性等方面的潛在問(wèn)題。

　　對(duì)于手機(jī)用戶來(lái)說(shuō)，有一個(gè)問(wèn)題：多數(shù)頁(yè)面在首屏中只能顯示網(wǎng)站名、全局導(dǎo)航和搜索等功能;用戶點(diǎn)擊全局導(dǎo)航中的鏈接之后，即使頁(yè)面正常的進(jìn)行了跳轉(zhuǎn)，也會(huì)給人一種錯(cuò)覺(jué)，好像頁(yè)面并沒(méi)有發(fā)生變化;除非滾動(dòng)頁(yè)面，通過(guò)查看頁(yè)面的主要內(nèi)容部分，來(lái)判斷當(dāng)前是否處于自己的目標(biāo)頁(yè)面。一個(gè)常見(jiàn)的解決方法是，對(duì)于小屏幕設(shè)備，將全局導(dǎo)航與主要內(nèi)容之間的部分設(shè)計(jì)為可以展開(kāi)或收起的容器，默認(rèn)狀態(tài)為收起，這樣即能使主要內(nèi)容可以呈現(xiàn)在首屏中，也可以保證功能的可用性。

網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)

　　相比于傳統(tǒng)的Web視覺(jué)設(shè)計(jì)過(guò)程，在這里我們不僅要打造出風(fēng)格恰當(dāng)?shù)腢I元素，而且要根據(jù)前面制定下來(lái)的幾種規(guī)格方案，對(duì)某些關(guān)鍵性的UI元素進(jìn)行樣式擴(kuò)展或改造。例如下圖所示的酒店搜索模塊，正如我們前面提到的，在小屏幕版本中，實(shí)踐方式是做成可展開(kāi)和收起的模式，而這種交互方式在平板電腦或桌面設(shè)備中是不需要的。類(lèi)似這樣情況，在視覺(jué)設(shè)計(jì)方面需要花些額外的功夫。

在視覺(jué)設(shè)計(jì)過(guò)程中，有一些很實(shí)際的經(jīng)驗(yàn)和原則：

　　● 盡量保持小屏幕規(guī)格樣式的簡(jiǎn)潔;在UI元素風(fēng)格方面，可以多與前端開(kāi)發(fā)人員交流，盡量采用可以通過(guò)CSS3實(shí)現(xiàn)的常規(guī)風(fēng)格樣式，減少背景圖片的使用。

　　● 要保證內(nèi)容的字體字號(hào)在所有設(shè)備中都足夠可讀，尤其是在手機(jī)上。

　　● 與傳統(tǒng)Web設(shè)計(jì)開(kāi)發(fā)相似，最終產(chǎn)出的頁(yè)面必定會(huì)與視覺(jué)稿有所出入;尤其對(duì)于響應(yīng)式站點(diǎn)來(lái)說(shuō)，由于在布局結(jié)構(gòu)和細(xì)節(jié)樣式等方面都需要有調(diào)整變化的能力，所以在開(kāi)發(fā)過(guò)程中產(chǎn)生設(shè)計(jì)還原度方面問(wèn)題的幾率會(huì)更大。仍然要強(qiáng)調(diào)一點(diǎn)，就是在項(xiàng)目前期和中期保持設(shè)計(jì)師與開(kāi)發(fā)者之間的交流與溝通，盡可能早的發(fā)現(xiàn)各類(lèi)潛在問(wèn)題。

　　下圖就是針對(duì)三種設(shè)備規(guī)格的首頁(yè)最終視覺(jué)稿。

前端構(gòu)建

　　來(lái)看一些在前端構(gòu)建的過(guò)程中需要注意的問(wèn)題;關(guān)于技術(shù)性的細(xì)節(jié)問(wèn)題，仍不會(huì)在這里過(guò)多討論。

　　關(guān)于圖片尺寸對(duì)于小屏幕規(guī)格的設(shè)計(jì)方案，即使我們通過(guò)CSS縮小其顯示尺寸，在文件資源方面仍然是要加載完整的大圖的。所以我們?cè)趦?yōu)化保存文件圖片的時(shí)候要盡可能的讓文件更小。不過(guò)另外有些方法，可以幫助我們真正實(shí)現(xiàn)圖片文件的響應(yīng)化。大致思路是，通過(guò)JavaScript判斷當(dāng)前設(shè)備的分辨率規(guī)格范圍，并根據(jù)預(yù)設(shè)的規(guī)則加載不同尺寸的圖片文件。詳情可以參考我們之前文章中關(guān)于響應(yīng)式圖片的部分。

　　使用高級(jí)CSS讓客戶或需求方理解“漸進(jìn)增強(qiáng)，平穩(wěn)退化”的思路是很重要的，對(duì)于傳統(tǒng)Web設(shè)計(jì)開(kāi)發(fā)也是如此。對(duì)響應(yīng)式站點(diǎn)來(lái)說(shuō)，CSS3在降低資源消耗、提高頁(yè)面加載速度等方面的作用尤為重要。

　　及時(shí)溝通正如我們?cè)谇拔闹卸啻螐?qiáng)調(diào)的，保持設(shè)計(jì)師與開(kāi)發(fā)者之間的密切溝通和交流，對(duì)于項(xiàng)目的順利進(jìn)展會(huì)起到不可估量的作用;換個(gè)角度說(shuō)，如果這方面做的不好，很多致命的潛在問(wèn)題則有可能在項(xiàng)目后期集中爆發(fā)出來(lái)。

當(dāng)前名稱(chēng)：響應(yīng)式網(wǎng)站的產(chǎn)品需求和設(shè)計(jì)流程詳解
瀏覽地址：http://www.bm7419.com/news/165233.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)