設計教程

響應性的Web設計：關(guān)鍵技巧和方法

1289

前一段時間，設計師的工作，他們委托做的，無論是一本書的封面，海報，報紙，等知道確切的尺寸

然而，智能手機，iPad和其他顯示器不同大小，長寬比和決議的出現(xiàn)，我們已經(jīng)失去了我們的視覺邊界的控制。

這并不奇怪，響應性的Web設計（RWD）已經(jīng)成為新的時髦。這個趨勢是不是關(guān)于時尚美學，而不是試圖解決由于用于瀏覽互聯(lián)網(wǎng)的各種設備的可用性問題。

在這篇文章中，我將介紹的方法使用不同的設備在設計時，應該考慮什么樣的屏幕尺寸和分辨率，以及如何從一個設計師的角度來看，RWD的工作。

響應性的Web設計方法

當創(chuàng)建一個網(wǎng)站，適用于所有的監(jiān)控屏幕上，最常用的方法是在標準屏幕寬度和高度的設計。目前，在監(jiān)視器屏幕的標準尺寸為1024像素×760像素，這意味著網(wǎng)絡安全區(qū)域應該是小于-它是由548px 989px。

99designs基于網(wǎng)絡安全的矩形電流的標準的最小大小的桌面監(jiān)視器內(nèi)的主頁。

如果網(wǎng)站是一個更大的顯示器上，頁面布局會表現(xiàn)出更多的背景。超過90％的設計的網(wǎng)站使用這種方法，但它是不太相關(guān)的，當我們?yōu)橐苿釉O備設計的。你根本不能使用相同的布局320px【2000px屏幕。

這里有一些其他的設計為不同的設備時使用的方法：

媒體查詢：CSS使頁面樣式（包括隱藏內(nèi)容）的網(wǎng)站上顯示該設備的特點的基礎(chǔ)上。頁面造型是最常用的基于瀏覽器的寬度。

的流體網(wǎng)格：頁面元素時，在相對的（％）單位的尺寸和網(wǎng)格的列的數(shù)量的變化取決于上的寬度限制。

最流行的技術(shù)是基于對流體網(wǎng)格 - 它是原來的主張為RWD應該如何工作的，它得到了Adobe的支持。在最新版本的Dreamweaver，你可以使用一個流體的模板，以自動的方式來創(chuàng)建和編輯布局。

蘭開斯特大學的網(wǎng)站沒有內(nèi)容斷面寬度960px擴大，但規(guī)模下降整齊低于400像素。請注意，在上面的內(nèi)容如何逐漸減少，滾動-注意以下420px的頁面寬度的變化。

移動設備的屏幕分辨率（和挑戰(zhàn)時，針對他們）

有幾十個圖形顯示分辨率。下表是網(wǎng)頁設計師的一些最重要的設備：

正如你可以看到，有各種不同的尺寸和分辨率（每英寸的像素定義）。的分辨率（PPI）是一個重要的因素 - 例如，iPhone 5上的圖標的大小將是桌面顯示器上顯示時的4倍大。

有剪裁內(nèi)容，以更小的尺寸時，我們面臨的挑戰(zhàn)。因此，這里有幾件事情要記住：

保持可讀：一個14px的高度2000像素寬屏幕的文本行，將縮減為2px上一個300像素寬屏幕-你就不能讀它。在另一側(cè)，縮放比例為10像素高達7倍的文本將被不合理地大。我們需要保持合理的，可讀的，印刷的比例在每個設備上的可用屏幕寬度調(diào)整我們的布局。

保持可瀏覽：??重要的是要避免過多的滾動-大量的內(nèi)容推入1列，讓網(wǎng)頁很長，使得它很難獲得所需的內(nèi)容。

保持它tappable：??手機屏幕支持觸摸和人的手指通常被用來處理-所以，按鈕不能太小。據(jù)蘋果公司稱：舒適的tappable UI元素的最小尺寸是44×44像素。此限制是經(jīng)常被打破，真正的估計上限大約是25像素。

現(xiàn)在，我們知道如何實現(xiàn)可讀的，可瀏覽和tappable的的接口，讓我們來看看我們需要做的，創(chuàng)建一個具有響應性的設計。

重點提示，同時創(chuàng)建一個具有響應性的Web設計

記住，創(chuàng)建一個具有響應性的Web設計時，有一些重要的事情。這里有幾個重要的：

一個網(wǎng)頁設計應該至少有3個版本，不同的瀏覽器寬度：?320px【480像素，480像素768px，768px +。之間的寬度，你的內(nèi)容可以自由擴展，你可以保持3個固定的布局。有3個（或更多）固定的布局，增加利潤，在必要時通常更容易設計和實現(xiàn)比流體縮放。然而，流體結(jié)垢可能會提供更好的更大范圍內(nèi)的數(shù)量的設備的經(jīng)驗。

在具體決議的內(nèi)容保持可見：例如，你可以選擇隱藏文章的主要部分，降低整個箱子一個按鈕，或者完全隱藏內(nèi)容。

要知道的CSS約束：設計的方式，讓盡可能多的頁面元素的純CSS。這是很重要的原因有二：它允許更多的靈活性，當調(diào)整大小的頁面元素，并減少加載時間。大多數(shù)設計師，這是不容易的，因為他們可能不熟悉CSS。它的意思是避免使用覆蓋模式以外的其他“正?！保ǔ窃搶涌梢院喜ⅲ?，使用簡單的陰影和漸變。

使用相同的內(nèi)容完全一樣的HTML的所有決議：換句話說，我們應該使用和重復使用相同的圖形元素的所有版本的頁面。通常情況下，我們希望創(chuàng)造最大的屏幕，然后減少為較小的決議的元素，如果需要的話。

除了這些關(guān)鍵點，RWD是一個問題，你的想象力和編碼器的技能。在下面的例子中，檢查出RWD可以做不同的方式。

響應網(wǎng)頁設計的例子

叉??是一個驚人的典型混合流體縮放一個固定的布局。有4個固定的布局（塊元素的大小以像素為單位設置）。我們只看到流體波背景的div縮放。你可以看到，當你縮放頁面上方770px。請注意，如何將內(nèi)容隱藏在這里發(fā)生。

丹尼爾葉片的個人網(wǎng)站?-一個很好的使用的流體平方米的模塊化電網(wǎng)。它填補了100％，無論大小的屏幕。在較小的屏幕視圖，如768px，從5列3列布局。低于480像素，它變成1列。

“波士頓環(huán)球報”（Boston Globe）網(wǎng)站是一個大的新聞網(wǎng)站，設計一個負責任的一個罕見的例子。它使用HTML5的樣板框架，它的流體網(wǎng)格，根據(jù)比例尺寸。應該指出的是流體網(wǎng)格并不意味著無限流體縮放。對于本網(wǎng)站的例子中，最大的頁面是1232px，最低為422px的。

列數(shù)更改為620px，800px，但波士頓環(huán)球報“的樣式表定義了以上2個條件（媒體查詢）。更深入的分析表明，此頁面簡單，乍看之下?lián)碛屑s30調(diào)整到了以下決議：1400px，1300px，1220px，1210px，1200px，1150px，1100px，1050px，1024px，980px，960px，950px，931px的變種，900px，860px，809px，810px，800px，788px，768px，760px，640px，639px，620px，600px的，540px，500像素，481px，480像素，380px。