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

2016-12-14    ui設(shè)計(jì)分享達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,?請(qǐng)點(diǎn)這里 

1.jpg

1. 如何理解響應(yīng)式設(shè)計(jì)(RWD)
學(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.png

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

3.png
響應(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ì)媒體查詢(xún)的斷點(diǎn)
我們知道,我們通過(guò)媒體查詢(xún)(Media Query)的方式改變網(wǎng)頁(yè)的布局,我們?cè)谀男挾认赂淖儾季郑簿褪俏覀兯Q(chēng)作的斷點(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)是不一樣的。我們知道在媒體查詢(xú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è)備做媒體查詢(xún)了。

@media screen and (max-device-width:480px){ selector{ } }
響應(yīng)式設(shè)計(jì)中的界面設(shè)計(jì)

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

5.png

謹(jǐn)慎使用浮層可觸控區(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)用戶(hù),比如簡(jiǎn)單的只面向小屏幕的移動(dòng)用戶(hù)群或者我們要囊括所有的顯示設(shè)備(mobile、pad、pc等等)。

當(dāng)我們確定目標(biāo)用戶(hù)的內(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)用戶(hù)內(nèi)容的消費(fèi)習(xí)慣也在發(fā)生著變化。

6.png

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

當(dāng)我們確定了以上的群體以及習(xí)慣后我們就要針對(duì)這類(lèi)群體對(duì)產(chǎn)品自身做架構(gòu)調(diào)整了。產(chǎn)品架構(gòu)或者內(nèi)容架構(gòu)在不同用戶(hù)不同設(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ù)期有出入的。

7.png
對(duì)我們頁(yè)面制作工程師而言,在只有桌面端的時(shí)候,我們面向的設(shè)計(jì)稿是單一的,但是到了響應(yīng)式設(shè)計(jì),這種情況就改變了,雖然說(shuō)我們可以讓設(shè)計(jì)師根據(jù)我們產(chǎn)品的受眾總結(jié)的屏幕寬度斷點(diǎn)給予幾個(gè)版本的設(shè)計(jì)稿,但是這些設(shè)計(jì)稿并不能覆蓋我們用戶(hù)的所有設(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)期待......

(注:本文轉(zhuǎn)載自新浪UED)

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com?)是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)? 圖標(biāo)定制?、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?平面設(shè)計(jì)服務(wù) 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔