本篇文章希望能通過(guò)簡(jiǎn)單明了的文字及圖文介紹，對(duì)我們?cè)O(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)經(jīng)常會(huì)出現(xiàn)的問(wèn)題進(jìn)行清晰的說(shuō)明。

場(chǎng)景一

 

1. 自適應(yīng)與響應(yīng)式都是什么，又有什么區(qū)別？

 

很多人會(huì)對(duì)響應(yīng)式布局和自適應(yīng)式布局產(chǎn)生混淆，確實(shí)他們的原理是非常相似的，都是檢測(cè)設(shè)備，根據(jù)不同的設(shè)備采用不同的 css。

 

至于他們的區(qū)別，有個(gè)很簡(jiǎn)單的方法：同一個(gè)頁(yè)面在不同尺寸的屏幕上訪問(wèn)時(shí)，看網(wǎng)址是否一樣，只有一個(gè)網(wǎng)址為響應(yīng)式，有多個(gè)不同的網(wǎng)址為自適應(yīng)。另外的區(qū)分點(diǎn)是：是否需要一對(duì)一的設(shè)計(jì)界面，是則為自適應(yīng)。例如下圖：

△ 響應(yīng)式與自適應(yīng)的區(qū)別

2. 自適應(yīng)與響應(yīng)式選擇用哪個(gè)？

 

如果頁(yè)面功能不多，用戶(hù)交互少，不需要經(jīng)常升級(jí)，響應(yīng)式設(shè)計(jì)從運(yùn)營(yíng)的難易和維護(hù)的便利性考慮會(huì)更好，只要搞定網(wǎng)頁(yè)端，其他的也都搞定了。如果從頁(yè)面?zhèn)€性化多功能方面考慮，自適應(yīng)設(shè)計(jì)更合適，因?yàn)檫@樣可以更好地為用戶(hù)提供功能全面，體驗(yàn)更好的界面。例如功能復(fù)雜、用戶(hù)交互頻繁的網(wǎng)站、電商類(lèi)網(wǎng)站，用戶(hù)量較大的網(wǎng)站選擇自適應(yīng)更合適。

場(chǎng)景二

1. 做響應(yīng)式頁(yè)面的條件是什么？

 

響應(yīng)式可以響應(yīng)的前提有兩點(diǎn)：

• 頁(yè)面布局具有規(guī)律性，必須建立靈活的網(wǎng)格基礎(chǔ)，元素寬高可用百分比代替固定數(shù)值；
• 網(wǎng)頁(yè)圖片必須是可伸縮的（頁(yè)面中圖片不固定寬/高）。
•  

這兩點(diǎn)也是柵格系統(tǒng)本身的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)是順理成章的，也比較高效快捷，所以響應(yīng)式與柵格化天生一對(duì)好搭檔。

 

網(wǎng)格是創(chuàng)建一個(gè)設(shè)計(jì)精良網(wǎng)站的關(guān)鍵。在《秩序之美-網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)》一書(shū)中，他解釋成功設(shè)計(jì)的目的是「在混沌中創(chuàng)造秩序」。現(xiàn)在比較流行的 8 點(diǎn)柵格，就是結(jié)合基準(zhǔn)網(wǎng)格（8pt）和縱向柵格進(jìn)行設(shè)計(jì)的。

2. 使用8點(diǎn)柵格進(jìn)行設(shè)計(jì)的價(jià)值是什么？

 

• 對(duì)于設(shè)計(jì)師：提升效率、減少?zèng)Q策，同時(shí)讓元素之間保持一種協(xié)調(diào)的節(jié)奏。
• 對(duì)于團(tuán)隊(duì)：設(shè)計(jì)師和前端工程師之間更容易達(dá)成默契，前端可以較輕松地用肉眼丈量 8 的倍數(shù)。
• 對(duì)于用戶(hù)：同一品牌的產(chǎn)品保持高質(zhì)量的一致性體驗(yàn)，并且在自己的設(shè)備上也不會(huì)出現(xiàn)模糊的半像素偏移。

場(chǎng)景三

1. 常見(jiàn)的動(dòng)態(tài)布局方式有哪些？

 

A：包括固定布局、流體布局、混合布局、響應(yīng)式布局。

布局響應(yīng)式時(shí)，模塊結(jié)構(gòu)如何變化呢？簡(jiǎn)單介紹幾種常見(jiàn)的變化形式。

 

布局不變，模塊內(nèi)容左右伸縮

這個(gè)頁(yè)面的響應(yīng)效果比較簡(jiǎn)單，等比縮放就好。

 

布局不變，模塊內(nèi)容換行平鋪

有的時(shí)候?yàn)榱斯?jié)省頁(yè)面空間，將模塊進(jìn)行了平鋪設(shè)計(jì)。

 

布局不變，模塊內(nèi)容增加減少

這是最常見(jiàn)的響應(yīng)效果。

 

布局改變，模塊位置變換

本身為左右布局的頁(yè)面，發(fā)生響應(yīng)時(shí)左邊的導(dǎo)航挪到了上部，位置發(fā)生了變化。

 

布局改變，模塊內(nèi)容數(shù)量改變

這是一個(gè)比較特殊的靈活布局的網(wǎng)站，發(fā)生響應(yīng)時(shí)，模塊進(jìn)行了隱藏刪減處理。

場(chǎng)景四

1. 什么是媒體查詢(xún)？什么是斷點(diǎn)？

 

這里有一個(gè)新名詞，媒體查詢(xún)（media query），其實(shí)是實(shí)現(xiàn)斷點(diǎn)的一種方法，是前端工程師用簡(jiǎn)單的方法，來(lái)獲取不同設(shè)備的特征，例如設(shè)備的寬度/高度，窗口的寬度/高度，設(shè)備的手持方向，分辨率等。

這里又一個(gè)名詞來(lái)了：斷點(diǎn)，用瀏覽器打開(kāi)一個(gè)響應(yīng)式網(wǎng)站，檢查元素，右上角會(huì)顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁(yè)面布局的變化點(diǎn)，就是我們上面說(shuō)到的斷點(diǎn)或者次斷點(diǎn)。

△ 上圖中每條線(xiàn)代表一個(gè)斷點(diǎn)

 

2. 應(yīng)該如何選擇斷點(diǎn)？

 

斷點(diǎn)的設(shè)置一定是基于頁(yè)面具體內(nèi)容，并參考網(wǎng)站用戶(hù)的設(shè)備分辨率數(shù)據(jù)。設(shè)計(jì)過(guò)程中在一定區(qū)間內(nèi)拉升或壓縮，已經(jīng)無(wú)法用相同的布局內(nèi)容時(shí)，必須改變內(nèi)容展現(xiàn)方式時(shí)，而產(chǎn)生的關(guān)鍵尺寸的節(jié)點(diǎn)。

需要注意的是，在選擇斷點(diǎn)時(shí)，不應(yīng)選擇將斷點(diǎn)設(shè)置為與某些常見(jiàn)設(shè)備寬度相同，而是應(yīng)該確保常見(jiàn)設(shè)備寬度能夠很簡(jiǎn)單地落入到某一設(shè)計(jì)范圍之內(nèi)。可以在各類(lèi)設(shè)備上對(duì)設(shè)計(jì)進(jìn)行測(cè)試并以此來(lái)調(diào)整斷點(diǎn)。

那么完全不考慮設(shè)備嗎？不是的，設(shè)備仍然很重要，只是不應(yīng)首先考慮它們。在一開(kāi)始最好是不要只考慮頁(yè)面設(shè)計(jì)在特定設(shè)備上的顯示效果，而是應(yīng)該從更通用的訪問(wèn)設(shè)備，比如手機(jī)尺寸、平板電腦尺寸及桌面顯示器尺寸去考慮它。

 

在設(shè)計(jì)中遇到的其他問(wèn)題

如何解決icon放大造成的變形及模糊問(wèn)題？

 

當(dāng)你的產(chǎn)品做成響應(yīng)式設(shè)計(jì)的時(shí)候，可能會(huì)遇到圖標(biāo)在適應(yīng)屏幕尺寸的時(shí)候拉伸或擠壓變形導(dǎo)致模糊，這個(gè)時(shí)候可以將圖標(biāo)做成字體。

它的優(yōu)點(diǎn)在于：

• icon 是矢量的，可以自由適應(yīng)各種尺寸大小，不會(huì)模糊；
• 占用空間很小，250 個(gè)圖標(biāo)的字體只有不到 300K；
• icon font 可控性更高，可以用代碼去控制大小、顏色、透明度、特效等；
• 兼容性高，甚至是低版本IE瀏覽器。

 

設(shè)計(jì)稿要怎么設(shè)計(jì)，要做幾套？

 

設(shè)計(jì)幾套取決于這個(gè)網(wǎng)站你會(huì)設(shè)置幾個(gè)斷點(diǎn)，而設(shè)置多少個(gè)斷點(diǎn)，由網(wǎng)站的內(nèi)容決定，設(shè)計(jì)師需要根據(jù)網(wǎng)站的實(shí)際內(nèi)容找到合適的斷點(diǎn)，設(shè)法避免列間空白太寬或太窄的情況。

 

本文轉(zhuǎn)自：https://www.uisdc.com/responsive-design-science