漫談響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

 

1. 如何理解響應(yīng)式設(shè)計(jì)（RWD）

zhongfan ：學(xué)究一些，首先大家先了解一下響應(yīng)，然后再講一下設(shè)計(jì)，響應(yīng)就是我發(fā)出的請(qǐng)求能得到什么樣子的回復(fù)，比如我說(shuō) “你好”，你會(huì)很容易的給我回復(fù)”你好”，因?yàn)榇蠹叶际侵袊?guó)人，如果我說(shuō)”hello”，我們這代人如果上過(guò)初中，他也會(huì)給我說(shuō)”Hello”，但是如果 我給對(duì)你說(shuō)”Bonjour”，那可能只有高配的人才可能知道了。這里面，就舉了一個(gè)例子，我的應(yīng)答對(duì)象就相當(dāng)于我們要講的響應(yīng)式的設(shè)備，他必須能夠解析 我發(fā)給他的需求。然后咱們?cè)僦v一下設(shè)計(jì)，設(shè)計(jì)的官方解釋是這樣的：

1.設(shè)下計(jì)謀。
2.根據(jù)一定要求﹐對(duì)某項(xiàng)工作預(yù)先制定圖樣﹑方案。
3.指搞設(shè)計(jì)工作的人。
直白的講，設(shè)計(jì)其實(shí)就是設(shè)了一個(gè)計(jì)，來(lái)完成我們的需要的工作目標(biāo)。

從前面我們講的響應(yīng)可以看到，響應(yīng)是雙方的，是互動(dòng)的過(guò)程，在這個(gè)過(guò)程中我們要考慮雙方的承受能力，比如我們總不能讓小孩子扛大包。在咱們網(wǎng)頁(yè)設(shè)計(jì) 方面就是咱們要考慮設(shè)備的性能，從網(wǎng)速、Dom 節(jié)點(diǎn)數(shù)量、屏幕的大小等等，如果我們從前后端結(jié)合，對(duì)小孩子給糖果，給苦力大包，那樣就做到了響應(yīng)式。

但是，我下面講的響應(yīng)式是狹隘的，我們只是從 Web Builder 這一層做到了響應(yīng)式。

2.響應(yīng)式設(shè)計(jì)中的界面設(shè)計(jì)

對(duì)于界面設(shè)計(jì)，我們以前針對(duì)桌面產(chǎn)品的設(shè)計(jì)可能就是一個(gè)尺寸的，每個(gè)模塊的位置比較固定，但是在響應(yīng)式設(shè)計(jì)中，這些東西就改變了，設(shè)計(jì)師會(huì)根據(jù)產(chǎn)品 的需要設(shè)計(jì)多個(gè)版本的設(shè)計(jì)，在這些不同的版本中，模塊A在1024的寬度下，可能會(huì)是黑色背景，但是到了768下面可能會(huì)變成白色背景，實(shí)現(xiàn)了在不同寬度 的不同展現(xiàn)。這里面顏色、背景、寬高等都可改變，但是有一點(diǎn)我們需要注意的是 DOM 節(jié)點(diǎn)的順序最好保持一致，因?yàn)樵陧憫?yīng)式的頁(yè)面中，我們會(huì)使用流式布局，在固定版式通過(guò)絕對(duì)定位或者外邊距負(fù)值的方式改變DOM 順序和視覺(jué)順序的技巧，在這里可能并不適用。
3.針對(duì)媒體查詢的斷點(diǎn)
我們知道，我們通過(guò)媒體查詢（Media Query）的方式改變網(wǎng)頁(yè)的布局，我們?cè)谀男挾认赂淖儾季郑簿褪俏覀兯Q作的斷點(diǎn)，我們更習(xí)慣的思維是針對(duì)某些設(shè)備（比如桌面、平板電腦、手機(jī)）的 數(shù)據(jù)來(lái)設(shè)置斷點(diǎn)，比如 1024 對(duì)應(yīng)桌面、768對(duì)應(yīng)pad、480 對(duì)應(yīng)手機(jī)，但實(shí)際上，這些東西是靠不住的，因?yàn)檫@些屏幕尺寸會(huì)根據(jù)時(shí)代的發(fā)展不斷的變化，我們的響應(yīng)不應(yīng)該只針對(duì)某些設(shè)備，我們需要的是一個(gè)區(qū)間值，而不 是將某一分辨率對(duì)應(yīng)一種設(shè)備。斷點(diǎn)肯定是需要有的，那這些斷點(diǎn)是如何設(shè)置的呢？怎么才能不是為了斷點(diǎn)而斷點(diǎn)呢？實(shí)際上，這些斷點(diǎn)的設(shè)置都是根據(jù)內(nèi)容的需要 做的，當(dāng)我們的內(nèi)容在達(dá)到一個(gè)臨界點(diǎn)后，視覺(jué)效果不符合人們的審美或影響了內(nèi)容獲取時(shí)，這就是我們需要的斷點(diǎn)。但是我們可能無(wú)法在視覺(jué)設(shè)計(jì)的階段就能覆蓋 其尺寸區(qū)間內(nèi)容所有狀況，這樣我們就需要把它和現(xiàn)有的設(shè)備相結(jié)合確立斷點(diǎn)。

因此，個(gè)人認(rèn)為不同的項(xiàng)目，在響應(yīng)式設(shè)計(jì)中需要的斷點(diǎn)是不一樣的。我們知道在媒體查詢中有 width 和 device-width 兩個(gè)特性，因?yàn)樵谑殖衷O(shè)備中多數(shù)用到的是 webkit 內(nèi)核的瀏覽器，我們一般會(huì)通過(guò) viewport 的屬性，將設(shè)備寬度賦予視窗的寬度

<meta name=”viewport” content=”width=device-width,initial-scale=1, maximum-scale=1″>這樣我們就能根據(jù)設(shè)備的寬度來(lái)對(duì)某些設(shè)備做媒體查詢了。

@media screen and (max-device-width:480px){ selector{ } }

4.交互上的那些不同
在響應(yīng)式設(shè)計(jì)中，我們不僅要考慮以前桌面用戶的使用習(xí)慣，也必須兼顧不同尺寸的手持設(shè)備。比如大家在PC上習(xí)慣使用的浮層在某些小尺寸的設(shè)備上就沒(méi) 法使用了，就像我們下圖中看到的。而且一些響應(yīng)區(qū)域小的鏈接也不方便我們使用手指來(lái)操作，因此我們可以做到”求同存異”。比如我們根據(jù)屏幕的尺寸，來(lái)決定 是否使用浮層、或者增大操作區(qū)域、或者”整齊劃一”。比如在新浪視頻項(xiàng)目區(qū)別設(shè)備來(lái)使用浮層，將所有的鏈接的操作區(qū)域做成方便手指操作的大小。

5. 具體項(xiàng)目開(kāi)發(fā)流程

5-1. 產(chǎn)品策略與信息架構(gòu)

在我們介入具體項(xiàng)目開(kāi)發(fā)流程前，我們應(yīng)該已經(jīng)確認(rèn)了自己產(chǎn)品所面向的內(nèi)容消費(fèi)群體，以及潛在目標(biāo)用戶，比如簡(jiǎn)單的只面向小屏幕的移動(dòng)用戶群或者我們要囊括所有的顯示設(shè)備（mobile、pad、pc等等）。

當(dāng)我們確定目標(biāo)用戶的內(nèi)容消費(fèi)習(xí)慣的同時(shí)，我們應(yīng)該也對(duì)他們的訪問(wèn)習(xí)慣、時(shí)段等等做一些初步分析。這不僅僅面向一個(gè)響應(yīng)式站點(diǎn)，這對(duì)產(chǎn)品定位到開(kāi)發(fā)都有決策作用。

在移動(dòng)博客項(xiàng)目前期的產(chǎn)品分析中我們能看到，隨著時(shí)代的前進(jìn)用戶內(nèi)容的消費(fèi)習(xí)慣也在發(fā)生著變化。

而訂閱設(shè)備的變化是在從PC迅速的向phone、pad進(jìn)化，所以我們更有必要提高移動(dòng)設(shè)備的閱讀體驗(yàn)來(lái)提供面向移動(dòng)用戶的響應(yīng)式站點(diǎn)。

當(dāng)我們確定了以上的群體以及習(xí)慣后我們就要針對(duì)這類群體對(duì)產(chǎn)品自身做架構(gòu)調(diào)整了。產(chǎn)品架構(gòu)或者內(nèi)容架構(gòu)在不同用戶不同設(shè)備間影響著內(nèi)容信息的可用性和可尋性，并且響應(yīng)式一定會(huì)在不同分辨率不同設(shè)備上對(duì)頁(yè)面中的模塊重新調(diào)整，以符合不同模塊在不同設(shè)備中所符合的優(yōu)先級(jí)

5-2. 響應(yīng)式產(chǎn)品設(shè)計(jì)

響應(yīng)式設(shè)計(jì)是從產(chǎn)品角度來(lái)進(jìn)行的設(shè)計(jì)，在這個(gè)階段我們需要產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、設(shè)計(jì)師以及工程師共同介入了。我們需要打破傳統(tǒng)的思維模式去思考設(shè) 計(jì)，從純粹傳統(tǒng)的Web向移動(dòng)應(yīng)用過(guò)度。通過(guò)我們第一步明確的信息架構(gòu)，來(lái)從最小顯示屏的移動(dòng)設(shè)備做產(chǎn)品設(shè)計(jì)，在移動(dòng)設(shè)備中拋棄更多的使用干擾，保證核心 功能的最優(yōu)體驗(yàn)；同時(shí)交互與設(shè)計(jì)師的介入處理如何把模塊設(shè)計(jì)的更小更有彈性，并初步確定設(shè)計(jì)風(fēng)格、設(shè)計(jì)框架等方案；而工程師需要在產(chǎn)品經(jīng)理與設(shè)計(jì)師確定的 方案中進(jìn)行代碼測(cè)試，充分利用不同設(shè)備獨(dú)有的特性并進(jìn)行框架搭建。

5-3. 響應(yīng)式開(kāi)發(fā)

雖然在上一步我們提到從最小顯示屏的移動(dòng)設(shè)備做產(chǎn)品設(shè)計(jì)，但實(shí)際不論是設(shè)計(jì)師還是工程師都是從最復(fù)雜的桌面端開(kāi)始，把表現(xiàn)最豐富最復(fù)雜的功能實(shí)現(xiàn)，做減法對(duì)結(jié)構(gòu)的改動(dòng)會(huì)適當(dāng)?shù)臏p少。

移動(dòng)博客項(xiàng)目的前期開(kāi)發(fā)其實(shí)是一個(gè)與產(chǎn)品、交互和設(shè)計(jì)師邊測(cè)試邊溝通邊確認(rèn)不斷循環(huán)的過(guò)程，因?yàn)樵诓煌脑O(shè)備中內(nèi)容的呈現(xiàn)及某些特性的支持都不同，有些是與我們的預(yù)期有出入的。

對(duì)我們頁(yè)面制作工程師而言，在只有桌面端的時(shí)候，我們面向的設(shè)計(jì)稿是單一的，但是到了響應(yīng)式設(shè)計(jì)，這種情況就改變了，雖然說(shuō)我們可以讓設(shè)計(jì)師根據(jù)我 們產(chǎn)品的受眾總結(jié)的屏幕寬度斷點(diǎn)給予幾個(gè)版本的設(shè)計(jì)稿，但是這些設(shè)計(jì)稿并不能覆蓋我們用戶的所有設(shè)備情況，比如我們縮放瀏覽器的時(shí)候，從1024到320 之間，包含了太多不同分辨率的設(shè)備。因此，在此開(kāi)發(fā)過(guò)程中我們需要不斷的和設(shè)計(jì)師溝通在設(shè)計(jì)稿無(wú)法覆蓋情況下的特殊狀況。

在后面的文章中我們會(huì)具體介紹在新浪視頻項(xiàng)目和移動(dòng)博客項(xiàng)目開(kāi)發(fā)中我們踩過(guò)的坑，以及一些問(wèn)題的解決方法，敬請(qǐng)期待……

本文標(biāo)題：漫談響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
URL鏈接：http://www.muchs.cn/news7/168057.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、App設(shè)計(jì)、微信公眾號(hào)、虛擬主機(jī)

廣告

聲明：本網(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)