中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

響應(yīng)式布局這個名詞相信大部分設(shè)計師都不陌生，也能清楚知道它的基本呈現(xiàn)效果。但具體操作及與開發(fā)人員協(xié)作時，可能會遇到很多問題。尋找資料時發(fā)現(xiàn)大多數(shù)教程都是針對前端開發(fā)工程師打造的，并伴隨著許多晦澀難懂的專業(yè)名詞，讓人難以理解。

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

場景一提問：自適應(yīng)與響應(yīng)式都是什么，又有什么區(qū)別？

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

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

例如下圖：

上圖中為響應(yīng)式與自適應(yīng)的區(qū)別

那么，自適應(yīng)與響應(yīng)式如何選擇用哪個呢？

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

場景二提問：做響應(yīng)式頁面的條件是什么呢？

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

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

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

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

那么使用8點柵格進(jìn)行設(shè)計的價值是什么呢？

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

場景三提問：常見的動態(tài)布局方式有哪些呢

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

另外，布局響應(yīng)式時，模塊結(jié)構(gòu)如何變化呢，簡單介紹幾種常見的變化形式：

布局不變，模塊內(nèi)容左右伸縮（見下圖）

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

布局不變，模塊內(nèi)容換行平鋪（見下圖）

有的時候為了節(jié)省頁面空間，將模塊進(jìn)行了平鋪設(shè)計。

布局不變，模塊內(nèi)容增加減少（見下圖）

最常見的的響應(yīng)效果：

布局改變，模塊位置變換（見下圖）

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

布局改變，模塊內(nèi)容數(shù)量改變（見下圖）

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

場景四提問：何謂媒體查詢？何謂斷點？

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

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

上圖中每條線代表一個斷點，那么應(yīng)該如何選擇斷點？

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

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

那么完全不考慮設(shè)備嗎？

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

在設(shè)計中遇到的其他問題

Q：如何解決icon放大造成的變形及模糊問題？

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

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

1. Icon是矢量的，可以自由適應(yīng)各種尺寸大小，不會模糊；

2. 占用空間很小，250個圖標(biāo)的字體只有不到300K；

3. Icon Font可控性更高，可以用代碼去控制大小、顏色、透明度、特效等；

4.兼容性高，甚至是低版本ie瀏覽器。

Q：設(shè)計稿要怎么設(shè)計，要做幾套？

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

參考文獻(xiàn)：

• 9 basic principles of responsive web design
• 《學(xué)習(xí)響應(yīng)式設(shè)計》

作者：孫妍，UI設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@孫妍

題圖來自 Unsplash，基于CC0協(xié)議。