響應式網頁設計 |資深設計師現身說法

響應式網頁設計 |資深設計師現身說法

響應式網頁設計 要如何排版?教你用最短的時間做完這些瑣碎的事!
響應式網頁設計 |資深設計師現身說法
響應式網頁設計

文章索引

響應式網頁設計 排版須知

由於響應式設計依賴於頁面周圍的隨機元素,因此設計和開發需要密切合作,以確保跨設備的可用體驗。 響應式設計通常會變成解決難題——如何重新組織較大頁面上的元素以適應更瘦、更長的頁面,反之亦然。 要使響應式設計成功,該設計還必須在所有屏幕分辨率和尺寸下都可用。 3 列桌面版本更改為平板電腦上的 2 列設計和移動設備的單列設計。 由於元素需要能夠調整大小和隨機播放,因此在專注於內容的網站上實施響應式設計通常更容易,而不是功能。 複雜的數據或交互可能很難融入易於在頁面中移動的模塊化部分,同時保持清晰性和功能性。

延伸閱讀:行銷公司這樣選、幫你省下50%預算

無需為各種尺寸的寬屏顯示器、桌上型電腦、筆記型電腦、平板電腦和手機創建單獨的站點和相應的代碼庫,單個代碼庫可以支持具有不同大小視口的用戶。 十乘二十是另一種設計,它在某些斷點之後根本不改變佈局結構,而是通過使所有內容完全靈活並自動調整大小來簡化響應式網頁設計,無論屏幕或瀏覽器寬度如何。 一段時間後,設計確實有點壓力,並且可以從內容的重新安排中受益。 但總的來說,圖像大小調整和靈活的內容空間允許一個相當簡單的解決方案,以適應各種屏幕尺寸。 對於極端的尺寸變化,我們可能希望通過單獨的樣式表或更有效地通過 CSS 媒體查詢來完全更改佈局。 大多數樣式可以保持不變,而特定的樣式表可以繼承這些樣式並使用浮動、寬度、高度等移動元素。

響應式網頁設計1
來源:Medium

排版前你需要知道的事

如果您想要一個完全響應的網站,可以滿足市場的所有當前需求和需求,那麼跨多個斷點和預定義字體大小的可擴展、流暢的排版是必不可少的。 它確保內容在所有設備上清晰易讀並具有吸引力,並提高了向所有讀者群體提供信息的可訪問性。 響應式網頁設計背後的理念在於構建一個靈活的網站,其內容和設計就像裝滿容器的水一樣,也就是客戶用來訪問網站的設備。 網站的所有元素都會發生變化,以便在屏幕內感覺舒適。 如果有必要,它們會縮小以完全適合更小的空間,或者相反,拉伸以佔據每一寸空間。

網頁 設計

以用戶的視角來排版

在手機上,用戶會看到以單列視圖顯示的內容;平板電腦可能會在兩列中顯示相同的內容。 例如,您可能希望將媒體查詢全部放在一個樣式表中,用於 iPad 等設備。 因為這樣的設備可以在瞬間從縱向切換到橫向,如果這兩個媒體查詢被放置在單獨的樣式表中,那麼每次用戶切換方向時網站都必須調用每個樣式表文件。 將 iPad 的水平和垂直方向的媒體查詢放在同一個樣式表文件中會更有效。 一些設計師也更願意為某些媒體查詢鏈接到單獨的樣式表,如果組織收益超過效率損失,這是完全可以的。 對於不切換方向的設備或無法手動更改瀏覽器寬度的屏幕,使用單獨的樣式表應該沒問題。

您當前的流量中有多少來自桌面、平板電腦和移動設備? 現在,美國網站中大約 56% 的流量來自移動設備。 今天有大約 26 億智能手機用戶,到 2020 年,這一數字有望超過 60 億。 您將首先探索是什麼使網站具有響應性,以及一些常見的響應式設計模式如何在不同設備上工作。 從那裡,您將學習如何使用視口標籤和 CSS 媒體查詢創建自己的響應式佈局。

響應式網頁設計2
來源:ucamc

手機該怎麼排版?

在移動設備上,網站應該有一個欄目和滑出式導航。 響應式網站的概念是由於處理屏幕尺寸的無效和不合適的方式而出現的。 這種方法意味著為每個響應層創建一系列設計,從而導致同一頁面的不同版本。 然而,隨著移動網絡成為現實,越來越多的非標準分辨率設備出現,這種方法很快就變得無關緊要,因為它不能有效地處理這種多樣性。

例如,雖然客戶徽標在台式機和筆記本電腦上以三列佈局顯示,但在手持設備上以單列佈局顯示。 Smashing Magazine 超越一切,為每台設備提供量身定制的體驗。 他們的網站在桌面上具有兩列佈局、完整菜單和組合標記,在平板電腦和移動設備上轉換為單列佈局和帶有字母標記的精簡菜單。 為了嘗試提供最佳體驗,移動瀏覽器以桌面屏幕寬度呈現頁面,然後嘗試通過增加字體大小和縮放內容以適應屏幕來使內容看起來更好。 這意味著字體大小在用戶看來可能不一致,他們可能必須雙擊或捏合縮放才能查看內容並與之交互。 響應式網頁設計最初由 Ethan Marcotte 在 A List Apart 中定義,響應用戶和他們使用的設備的需求。

響應式網頁設計3
來源:iT邦幫忙

結語

移動瀏覽器會將視口寬度設置為 960 像素,以該寬度呈現頁面,並將結果顯示為桌面佈局的縮小版本。 其他移動瀏覽器(例如在 Google Android 上)做了同樣的事情。 用戶可以放大和平移網站以查看他們感興趣的位,但看起來很糟糕。 如果您不幸遇到沒有響應式設計的網站,您今天仍然會看到這一點。

簽名檔

相關文章