網(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)格的作用
- 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