響應(yīng)式網(wǎng)站設(shè)計(jì)，應(yīng)該按照什么尺寸設(shè)計(jì)網(wǎng)站？
中保特衛(wèi)公司認(rèn)為，并不存在所謂的“標(biāo)準(zhǔn)網(wǎng)站尺寸”。設(shè)備的種類(lèi)那么多，型號(hào)版本和屏幕分辨率一直在變。而每個(gè)網(wǎng)站吸引的用戶(hù)所使用的設(shè)備有各有不同。比如，你很可能（在廚房里做飯時(shí)）選擇在移動(dòng)設(shè)備上查看菜譜，而（在想要用Photoshop做點(diǎn)什么時(shí)）選擇在PC上搜索PS教程。
你借助Google Analytics了解哪些瀏覽器和網(wǎng)頁(yè)大小最適合你的網(wǎng)站。而面對(duì)瀏覽器大小和設(shè)備的無(wú)限組合，你到底應(yīng)該怎么進(jìn)行響應(yīng)式設(shè)計(jì)呢？
嘗試設(shè)計(jì)至少3種布局
響應(yīng)式網(wǎng)站設(shè)計(jì)應(yīng)該針對(duì)不同瀏覽器寬度設(shè)計(jì)至少三種布局。下面的數(shù)字僅限舉例，并不是固定標(biāo)準(zhǔn)。
·小：600px以下。大部分手機(jī)適用。
·中：600px – 900px。大部分平板設(shè)備、部分大屏手機(jī)、部分小型上網(wǎng)本適用。
·大：大于900px。大部分PC適用。
這些布局中的每一個(gè)都應(yīng)包含相同的文本和圖形元素，但每個(gè)布局都應(yīng)設(shè)計(jì)為根據(jù)用戶(hù)的設(shè)備以最佳方式顯示內(nèi)容。縮小頁(yè)面以適應(yīng)小屏幕會(huì)降低內(nèi)容的易讀性，但如果你能將內(nèi)容相應(yīng)地縮小，并變成一欄，那么內(nèi)容將更易于閱讀。
響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理
應(yīng)考慮的問(wèn)題：
·用戶(hù)體驗(yàn)是關(guān)鍵：響應(yīng)式設(shè)計(jì)需要的不僅僅是將PC網(wǎng)站轉(zhuǎn)化為移動(dòng)網(wǎng)站。我們需要考慮用戶(hù)體驗(yàn)，他們的互動(dòng)以及他們?cè)谑褂靡苿?dòng)設(shè)備時(shí)真正想要尋找的內(nèi)容。
·不要為了最新的有特定屏幕尺寸的移動(dòng)設(shè)備專(zhuān)門(mén)設(shè)計(jì)。正確的做法是圍繞內(nèi)容來(lái)做。網(wǎng)站布局和各種元素在PC上如何，同樣的元素應(yīng)該如何在移動(dòng)設(shè)備上互相適應(yīng)？這才是你應(yīng)該關(guān)注的問(wèn)題。
設(shè)計(jì)by Karol Ortyl
·參與：布局的層次結(jié)構(gòu)是非常重要的，特別是在移動(dòng)設(shè)備上。通常情況下我們都秉持著“少即是多”的理念。與桌面PC相比，移動(dòng)端體驗(yàn)集中在有限的空間中，因此用戶(hù)在網(wǎng)站的閱讀和移動(dòng)方式需要非常清晰，以便了解你的主要信息，并了解網(wǎng)站的內(nèi)容。此外還要考慮頁(yè)面的主要?jiǎng)幼鳌Ｈ绻饕繕?biāo)是讓用戶(hù)點(diǎn)擊“聯(lián)系我們”按鈕，那么就不要把它隱藏在頁(yè)面中大量文本之下。一定要圍繞這些經(jīng)驗(yàn)量身定制你的內(nèi)容和設(shè)計(jì)。
·自適應(yīng)圖片對(duì)響應(yīng)式網(wǎng)站設(shè)計(jì)非常重要。你需要考慮圖像的縮放問(wèn)題。它在電腦寬屏、平板、小型移動(dòng)設(shè)備屏幕上看起來(lái)如何？從開(kāi)發(fā)角度來(lái)看，代碼將允許圖像通過(guò)百分比值縮放到瀏覽器窗口的寬度。
·手機(jī)網(wǎng)站的導(dǎo)航是非常重要的。整理大型菜單和內(nèi)容有幾種常用的方法。 可以是常見(jiàn)的漢堡式菜單，可以是簡(jiǎn)單的下拉列表選擇，可以是展開(kāi)/折疊字段，也可以像Youtube那樣使用橫向滾動(dòng)的標(biāo)簽。
響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理
設(shè)計(jì)by UI Garage
·手勢(shì)為設(shè)計(jì)開(kāi)辟了新的可能性。人們喜歡用手讀書(shū)并與內(nèi)容進(jìn)行交互–它賦予了用戶(hù)更多的便利。在手機(jī)和平板電腦上，用戶(hù)可以通過(guò)手指的活動(dòng)在屏幕上放大或滑動(dòng)圖像。互動(dòng)對(duì)設(shè)計(jì)有很大的的影響。例如，如果你有圖像庫(kù)，請(qǐng)避免使用標(biāo)準(zhǔn)輪播（小點(diǎn)）讓人們循環(huán)瀏覽每個(gè)圖像。想想一個(gè)人手指的大小，以及如何將它轉(zhuǎn)化為有用的UI解決方案。據(jù)蘋(píng)果公司稱(chēng)，可觸控的UI元素的最小舒適尺寸是44 x 44px。這個(gè)限制經(jīng)常被打破，真正的最小尺寸其實(shí)在25px左右。復(fù)合桌面設(shè)計(jì)需要能夠適應(yīng)一個(gè)小型移動(dòng)屏幕的簡(jiǎn)單直觀UI。在為不同設(shè)備進(jìn)行設(shè)計(jì)時(shí)，請(qǐng)始終牢記這一點(diǎn)。設(shè)計(jì)必須具有靈活性，這樣才能為用戶(hù)創(chuàng)造對(duì)于所有設(shè)備的良好體驗(yàn)。與開(kāi)發(fā)人員密切合作，了解小屏幕上可能出現(xiàn)的哪些內(nèi)容會(huì)影響設(shè)計(jì)過(guò)程。
·為不同的瀏覽器寬度設(shè)計(jì)至少三個(gè)版本。比如尺寸分別為600px、600-900px以及900px+。在這些寬度之間，你的內(nèi)容可以自由縮放，或者可以保留3個(gè)固定的布局。有3個(gè)（或更多）固定布局并在必要時(shí)添加邊距通常比流體縮放在設(shè)計(jì)和實(shí)現(xiàn)上更容易。然而，流體縮放可以在更多的設(shè)備上提供更好的體驗(yàn)。
工具與資源
·網(wǎng)絡(luò)瀏覽器當(dāng)然是很好的工具，也是預(yù)覽設(shè)計(jì)的最有效資源。你應(yīng)該安裝幾個(gè)不同的瀏覽器來(lái)獲得反饋。然后調(diào)整瀏覽器窗口的大小。
·你的移動(dòng)設(shè)備當(dāng)然也是可用工具，在預(yù)覽設(shè)計(jì)效果時(shí)非常有用，能讓你了解網(wǎng)站在特定條件下的狀況。
·流體網(wǎng)格是基于百分比值而不是設(shè)置像素來(lái)設(shè)計(jì)網(wǎng)站布局。如，PC端網(wǎng)站內(nèi)容的寬度是930px，但你希望在移動(dòng)端的寬度能夠降到320px。這個(gè)縮小比例大約是34.4%。把這個(gè)應(yīng)用到移動(dòng)端，設(shè)計(jì)布局中的元素將相應(yīng)地調(diào)整大小。
響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理
·Google的響應(yīng)式網(wǎng)站測(cè)試工具Resizer是在不同設(shè)備預(yù)覽網(wǎng)站的非常好用的工具。
·媒體查詢(xún)是一種能夠能在網(wǎng)站建設(shè)時(shí)就實(shí)施的代碼。媒體查詢(xún)可以讓網(wǎng)站根據(jù)設(shè)備顯示器的特性為其設(shè)定CSS樣式。比如，“當(dāng)屏幕尺寸為480px或以下，變?yōu)槠桨逶O(shè)計(jì)布局。”試一下，在電腦上把瀏覽器窗口縮小，你會(huì)發(fā)現(xiàn)內(nèi)容也隨之重新自動(dòng)調(diào)整以適應(yīng)窗口的大小。
太原響應(yīng)式企業(yè)網(wǎng)站模板1600起，自動(dòng)適應(yīng)電腦、平板、手機(jī)等設(shè)備，精彩案例請(qǐng)聯(lián)系本站qq獲取。
133 1343 5212