UI設(shè)計(jì)中響應(yīng)式設(shè)計(jì)技巧

　　響應(yīng)式布局這個(gè)名詞相信大部分設(shè)計(jì)師都不陌生，也能清楚知道它的基本呈現(xiàn)效果。但具體操作及與開(kāi)發(fā)人員協(xié)作時(shí)，可能會(huì)遇到很多問(wèn)題。尋找資料時(shí)發(fā)現(xiàn)大多數(shù)教程都是針對(duì)前端開(kāi)發(fā)工程師打造的，并伴隨著許多晦澀難懂的專業(yè)名詞，讓人難以理解。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中響應(yīng)式設(shè)計(jì)技巧進(jìn)行簡(jiǎn)單的說(shuō)明。

 

　　什么是響應(yīng)式布局
 

　　響應(yīng)式布局常常和自適應(yīng)布局搞混。其實(shí)通過(guò)下面的動(dòng)圖我們很容易能理解兩者的區(qū)別。

 

　　響應(yīng)式布局：容器大小隨窗口大小而變化。
 

　　自適應(yīng)布局：容器大小不隨窗口大小而變化，邊距隨窗口大小而變化。
 

　　響應(yīng)式布局優(yōu)勢(shì)
 

　　調(diào)研中我們發(fā)現(xiàn)，國(guó)外幾個(gè)內(nèi)容網(wǎng)站，YouTube、Spotify、Netflix 和Behance，都使用了「內(nèi)容墻」的設(shè)計(jì)方式，以突出內(nèi)容的豐富度。
 

　　由于這種設(shè)計(jì)通常會(huì)保持容器之間的間距不變，這就需要容器大小變化以適應(yīng)窗口大小變化了。響應(yīng)式的布局思路，很好地幫助完成內(nèi)容墻的設(shè)計(jì)。

 

　　響應(yīng)式布局的設(shè)計(jì)要點(diǎn)
 

　　在以往的開(kāi)發(fā)合作中，設(shè)計(jì)提供切圖和尺寸標(biāo)注給開(kāi)發(fā)就行了。
 

　　而響應(yīng)式頁(yè)面中的容器大小是動(dòng)態(tài)的，我們可以提供一個(gè)表格，告訴開(kāi)發(fā)在不同的頁(yè)面寬度區(qū)間，對(duì)應(yīng)的布局應(yīng)該是怎么樣的。這些區(qū)間的臨界點(diǎn)，就是「斷點(diǎn)」。
 

　　我們以容器多，情況比較復(fù)雜的視頻首頁(yè)模擬一次確定斷點(diǎn)的流程。

 

　　首先，斷點(diǎn)是反映頁(yè)面發(fā)生突變的情況的，如邊距開(kāi)始發(fā)生變化、容器數(shù)量開(kāi)始發(fā)生變化等。本例中，我們固定了側(cè)邊欄a、邊距b、間距d。據(jù)下圖公式，容易得知容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系。因此，尋找斷點(diǎn)，需要我們先確定容器寬度(c)。

 

　　容器數(shù)量和容器寬度有著明確的數(shù)量關(guān)系
 

　　容器寬度和容器內(nèi)容相關(guān)。本例中，我們規(guī)定正常情況下容器寬度最小300px，以保證封面圖和標(biāo)題文字還能被看清。當(dāng)容器寬度被壓到300px時(shí)，容器數(shù)量減少一個(gè)。
 

　　有了容器的最小尺寸，那么我們可以輸出給開(kāi)發(fā)的「頁(yè)面寬度-容器數(shù)量對(duì)應(yīng)表」。從下表可以讀出，瀏覽器寬度在1284-1595px之間時(shí)，側(cè)邊欄展開(kāi)為288px，放3個(gè)容器，瀏覽器會(huì)自動(dòng)把容器寬度算出來(lái)。

 

　　斷點(diǎn)選擇的技巧
 

　　從上面的案例我們知道，確定斷點(diǎn)和容器數(shù)量、容器大小有關(guān)。那么，斷點(diǎn)的選擇其實(shí)是體現(xiàn)了，設(shè)計(jì)師對(duì)頁(yè)面信息呈現(xiàn)方式的理解。
 

　　1. YouTube的小心機(jī)
 

　　調(diào)研的過(guò)程中，我們發(fā)現(xiàn)YouTube 選擇 1143-1966px 作為4個(gè)容器的前后斷點(diǎn)。這個(gè)頁(yè)面寬度區(qū)間很大，達(dá)到了824px(遠(yuǎn)超5個(gè)容器的跨度335px)。
 

　　我們猜想：
 

　　YouTube認(rèn)為1行4個(gè)視頻是用戶瀏覽的最好數(shù)量;
 

　　他們想把這種布局覆蓋主流的(約66.25%)屏幕寬度 1280-1920px。
 

　　2. 關(guān)注高分屏的實(shí)際效果
 

　　需要特別注意的是，橫向分辨率達(dá)到3840px 的PC高分屏中，主流瀏覽器會(huì)按照2倍圖展示內(nèi)容。此外，Windows系統(tǒng)下有系統(tǒng)縮放，推薦的是1.25倍，導(dǎo)致3840px的屏幕寬度，瀏覽器認(rèn)為只有1536px (3840px÷2÷1.25)。所以有時(shí)候會(huì)出現(xiàn)在分辨率很高的屏幕下，響應(yīng)式頁(yè)面展示的內(nèi)容反而更少了的情況。
 

　　總結(jié)
 

　　響應(yīng)式的布局方法能很好地支持越來(lái)越流行的「內(nèi)容墻」的設(shè)計(jì)。找好斷點(diǎn)，設(shè)定好不同屏幕分辨率的布局策略，是響應(yīng)式設(shè)計(jì)的關(guān)鍵。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。