設計大師漫談響應式網(wǎng)頁(yè)設計心得發(fā)布者：本站     時(shí)間：2021-12-23 10:12:29

1. 如何理解響應式設計(RWD)

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

1.設下計謀。

2.根據一定要求對某項工作預先制定圖樣方案。

3.指搞設計工作的人。

直白的講，設計其實(shí)就是設了一個(gè)計，來(lái)完成我們的需要的工作目標。

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

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

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

2.響應式設計中的界面設計

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

對于界面設計，我們以前針對桌面產(chǎn)品的設計可能就是一個(gè)尺寸的，每個(gè)模塊的位置比較固定，但是在響應式設計中，這些東西就改變了，設計師會(huì )根據產(chǎn)品 的需要設計多個(gè)版本的設計，在這些不同的版本中，模塊A在1024的寬度下，可能會(huì )是黑色背景，但是到了768下面可能會(huì )變成白色背景，實(shí)現了在不同寬度 的不同展現。這里面顏色、背景、寬高等都可改變，但是有一點(diǎn)我們需要注意的是 DOM 節點(diǎn)的順序最好保持一致，因為在響應式的頁(yè)面中，我們會(huì )使用流式布局，在固定版式通過(guò)絕對定位或者外邊距負值的方式改變DOM 順序和視覺(jué)順序的技巧，在這里可能并不適用。

3.針對媒體查詢(xún)的斷點(diǎn)

我們知道，我們通過(guò)媒體查詢(xún)(Media Query)的方式改變網(wǎng)頁(yè)的布局，我們在哪些寬度下改變布局，也就是我們所稱(chēng)作的斷點(diǎn)，我們更習慣的思維是針對某些設備(比如桌面、平板電腦、手機)的 數據來(lái)設置斷點(diǎn)，比如 1024 對應桌面、768對應pad、480 對應手機，但實(shí)際上，這些東西是靠不住的，因為這些屏幕尺寸會(huì )根據時(shí)代的發(fā)展不斷的變化，我們的響應不應該只針對某些設備，我們需要的是一個(gè)區間值，而不 是將某一分辨率對應一種設備。斷點(diǎn)肯定是需要有的，那這些斷點(diǎn)是如何設置的呢?怎么才能不是為了斷點(diǎn)而斷點(diǎn)呢?實(shí)際上，這些斷點(diǎn)的設置都是根據內容的需要 做的，當我們的內容在達到一個(gè)臨界點(diǎn)后，視覺(jué)效果不符合人們的審美或影響了內容獲取時(shí)，這就是我們需要的斷點(diǎn)。但是我們可能無(wú)法在視覺(jué)設計的階段就能覆蓋 其尺寸區間內容所有狀況，這樣我們就需要把它和現有的設備相結合確立斷點(diǎn)。

因此，個(gè)人認為不同的項目，在響應式設計中需要的斷點(diǎn)是不一樣的。我們知道在媒體查詢(xún)中有 width 和 device-width 兩個(gè)特性，因為在手持設備中多數用到的是 webkit 內核的瀏覽器，我們一般會(huì )通過(guò) viewport 的屬性，將設備寬度賦予視窗的寬度

這樣我們就能根據設備的寬度來(lái)對某些設備做媒體查詢(xún)了。

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

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

4.交互上的那些不同

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

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

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

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

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

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

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

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

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

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

5-2. 響應式產(chǎn)品設計

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

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

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

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

設計大師漫談響應式網(wǎng)頁(yè)設計心得,PS教程,

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