響應(yīng)性的Web設(shè)計(jì):關(guān)鍵技巧和方法

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

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

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

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

響應(yīng)性的Web設(shè)計(jì)方法

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

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

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

這里有一些其他的設(shè)計(jì)為不同的設(shè)備時使用的方法:

  • 媒體查詢:CSS使頁面樣式(包括隱藏內(nèi)容)的網(wǎng)站上顯示該設(shè)備的特點(diǎn)的基礎(chǔ)上。頁面造型是最常用的基于瀏覽器的寬度。
  • 的流體網(wǎng)格:頁面元素時,在相對 的(%)單位的尺寸和網(wǎng)格的列的數(shù)量的變化取決于上的寬度限制。

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

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

移動設(shè)備的屏幕分辨率(和挑戰(zhàn)時,針對他們)

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

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

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

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

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

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

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

重點(diǎn)提示,同時創(chuàng)建一個具有響應(yīng)性的Web設(shè)計(jì)

記住,創(chuàng)建一個具有響應(yīng)性的Web設(shè)計(jì)時,有一些重要的事情。這里有幾個重要的:

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

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

要知道的CSS約束:設(shè)計(jì)的方式,讓盡可能多的頁面元素的純CSS。這是很重要的原因有二:它允許更多的靈活性,當(dāng)調(diào)整大小的頁面元素,并減少加載時間。大多數(shù)設(shè)計(jì)師,這是不容易的,因?yàn)樗麄兛赡懿皇煜SS。它的意思是避免使用覆蓋模式以外的其他“正?!保ǔ窃搶涌梢院喜ⅲ?,使用簡單的陰影和漸變。

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

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

響應(yīng)網(wǎng)頁設(shè)計(jì)的例子

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

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

“波士頓環(huán)球報”(Boston Globe)網(wǎng)站是一個大的新聞網(wǎng)站,設(shè)計(jì)一個負(fù)責(zé)任的一個罕見的例子。它使用HTML5的樣板框架,它的流體網(wǎng)格,根據(jù)比例尺寸。應(yīng)該指出的是流體網(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。

資源讓你開始!

最后,但并非最不重要的一點(diǎn)是,點(diǎn)擊下面的圖片,并下載一個透明的PNG模板的幾個設(shè)備屏幕上,你可以用它來測試或展示您的設(shè)計(jì)。

在結(jié)論

響應(yīng)性的Web設(shè)計(jì)是一個復(fù)雜的問題,但使網(wǎng)站隨時提供給更廣泛的消費(fèi)者基礎(chǔ)。隨著時間的推移,它會成為一個必須為網(wǎng)站設(shè)計(jì)者知道,并會演變成以上的移動設(shè)備(聽說過智能電視?),所以重要的是要保持你的手指上的脈搏。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!