網(wǎng)頁(yè)設計中3種響應式設計災禍
響應式設計方法對開(kāi)發(fā)者非常有用，因為它使我們的內容在各種設備上廣為傳播。不用保留幾個(gè)獨立版本的網(wǎng)站，也可以摒除諸如縮放和流式布局這些方法的弊端。
本文重點(diǎn)討論設計師遇到最多的3個(gè)響應式設計問(wèn)題，也會(huì )提供一些規避錯誤的策略。
縮放、流式布局與響應式
這些術(shù)語(yǔ)容易造成混淆，設計師常常錯誤地交替互用。實(shí)際上，每個(gè)都是布局技巧的顯著(zhù)進(jìn)化過(guò)程，像技術(shù)演進(jìn)那樣逐一顯現。
縮放布局，旨在相對縮放每一個(gè)元素。它們會(huì )隨著(zhù)窗口大小變化動(dòng)態(tài)縮放內容，就這方面而言，它們是響應式的。布局本身保持靜止，通過(guò)改變每一個(gè)元素來(lái)保持一致的表現。
上圖：不同分辨率下縮放布局的例子，這種設計為了統一犧牲了易讀性。
流式布局就不一樣，因為它們隨著(zhù)窗口尺寸縮放容器元素。通過(guò)em這類(lèi)相對單位可以做到這點(diǎn)，克服了縮小文字的問(wèn)題。用戶(hù)主動(dòng)縮放時(shí)，設計就被破壞了。
上圖：不同分辨率下流式布局的例子，這種設計為了易讀性犧牲了統一。
響應式設計不會(huì )縮放任何東西。相反，它會(huì )根據窗口尺寸決定顯示哪些內容。
上圖：不同分辨率下響應式布局的例子。
災禍1：菜單折行
如果在頁(yè)面頂部使用了導航欄，當頁(yè)面展現在小屏幕上時(shí)，響應式設計通常會(huì )把它“掰”成更緊湊的格式，但這并非總是有效，如果顯示區域比斷點(diǎn)更寬，又不足以在一行顯示所有菜單項的話(huà)。結果會(huì )導致菜單的折行。
有些方法可以解決這個(gè)問(wèn)題。其一，減少導航欄中橫排菜單項的數量，將它們分門(mén)別類(lèi)。然后選中某類(lèi)時(shí)，你可以通過(guò)下拉菜單來(lái)顯示子類(lèi)。
其二，減少斷點(diǎn)的數值。應該以導航欄開(kāi)始出問(wèn)題的實(shí)際數值為準，而非具體設備尺寸。
其三，不同設備使用不同方式，例如滑動(dòng)抽屜。
災禍2：使用固定寬度圖片
內容區域通常都隨窗口尺寸變化。所以當固定寬度圖片超出顯示區域時(shí)，圖片就被裁剪了。
上圖：糟糕的固定寬度圖片例子，它太大了。于是出現了滾動(dòng)條，內容被推到屏幕之外。
通過(guò)給圖片設定相對單位，可以避免這個(gè)問(wèn)題。或者使用支持響應式的框架(比如Bootstrap)，使用響應式圖片class名來(lái)控制(例如class="img-responsive")。
上圖：同樣的元素，用響應式圖片class名的方式，滾動(dòng)條就不見(jiàn)了。
災禍3：元素的扭曲
這有點(diǎn)晦澀難懂，但本質(zhì)上，布局顯示在小窗口上的時(shí)候，所有未經(jīng)處理的列都會(huì )以行的形式呈現。這是個(gè)問(wèn)題，因為內容的扭曲會(huì )不經(jīng)意地改變設計的層級。
上圖：列變成了行，扭曲了內容。
解決方法顯而易見(jiàn)，但令人驚奇的是，仍有很多人在糾結它：只要明確地設定元素的寬度、高度、內邊距。如果它移出所處位置，蓋住了其他元素，可以通過(guò)將它包裹在div容器中，設置外邊距，迫使它回到原本的地方。
規劃有助于避免問(wèn)題
本文只討論了3種最普遍遇到的響應式設計災禍，還有很多其他途徑會(huì )毀了一個(gè)好的設計。預防錯誤并不難。現代瀏覽器都有內置的響應式布局測試，好好規劃設計，多做測試。
| << 上一篇：網(wǎng)頁(yè)設計中的安全配色指南 | >> 下一篇：網(wǎng)頁(yè)設計中移動(dòng)端字體7大準則 |
- 2017-01-13網(wǎng)頁(yè)設計中的安全配色指南
- 2017-01-13網(wǎng)頁(yè)設計為什么要堅持好的設計？
- 2017-01-05鄭州網(wǎng)頁(yè)設計培訓清新怎么樣？
- 2016-12-21鄭州網(wǎng)頁(yè)設計培訓班哪里找？
- 2016-12-15鄭州網(wǎng)頁(yè)設計培訓多少錢(qián)？
- 2016-11-20移動(dòng)端網(wǎng)頁(yè)設計規范原則有哪些？
- 2016-11-20網(wǎng)頁(yè)設計中的搜索框該怎么設計？
- 2016-11-20交互設計在網(wǎng)頁(yè)設計中的體現在哪里？
- 2016-11-20網(wǎng)頁(yè)設計中如何選擇正確的圖片格式
- 2016-11-04網(wǎng)頁(yè)設計與平面設計之間的關(guān)系和差別
- 2016-10-11網(wǎng)頁(yè)設計中div和span的區別是什么？
- 2016-10-11網(wǎng)頁(yè)設計中DIV超出部分怎么隱藏呢？
- 2016-09-23網(wǎng)頁(yè)設計中的總結經(jīng)驗和心得
- 2016-09-23網(wǎng)頁(yè)設計中的Banner要做到傳情達意
- 2016-09-17網(wǎng)頁(yè)元素在網(wǎng)頁(yè)設計風(fēng)格的作用
- 求學(xué)問(wèn)答專(zhuān)業(yè)答復，快速響應
- 電話(huà)：0371-63218905
- 手機：13613841515
-
QQ：
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16
