響應(yīng)式網(wǎng)頁設(shè)計面臨的挑戰(zhàn)

響應(yīng)式網(wǎng)頁設(shè)計面臨的挑戰(zhàn)
隨著設(shè)備的數(shù)量和種類的增加，我們訪問互聯(lián)網(wǎng)，新的網(wǎng)頁設(shè)計挑戰(zhàn)自己。
它不再僅僅有一個移動版本和瀏覽器版本?，F(xiàn)在，我們必須考慮是否人訪問我們的網(wǎng)站是從平板電腦訪問，智能手機（無論智能手機有一個高分辨率的屏幕或不），上網(wǎng)本，臺式電腦或全尺寸筆記本電腦（無論是一個具有高分辨率和低分辨率的屏幕），或一些其他的設(shè)備完全。
和所有這些不同的可能性優(yōu)化經(jīng)驗越來越精明的互聯(lián)網(wǎng)用戶之間的預(yù)期。
幾年前，一個設(shè)計師可以通過設(shè)備列表他們設(shè)計并創(chuàng)建為每個設(shè)備的個人網(wǎng)站設(shè)計。但隨著設(shè)備的數(shù)量和種類增加，成為一個不切實際的，費時的事情。
相反，設(shè)計師要設(shè)計出適應(yīng)每個瀏覽器的需要，無論設(shè)備。

屏幕越來越大
臺式機和筆記本電腦的屏幕分辨率越來越大。就在幾年前，一個1280 x 800像素的分辨率似乎很大?，F(xiàn)在，那是相當多的筆記本電腦上常見的屏幕分辨率的底端，它的情況并不少見新顯示器擁有全高清的屏幕分辨率（1920 x 1080像素）。
我們達到了什么對顯示器的實際上限（目前的接口技術(shù)，但未來的發(fā)展可能會改變），但即使設(shè)計1920像素的寬度比的屏幕只有1024像素寬的設(shè)計有很大不同?；蛑辽偈撬鼞?yīng)該的。

增加了潛在的大屏幕的問題是，很多游戲的系統(tǒng)和新的電視現(xiàn)在已經(jīng)可以上網(wǎng)。這些其實都有很好的內(nèi)置瀏覽器，它是完全有可能的，你的一些網(wǎng)站的訪問者將在55″高清電視觀看您的網(wǎng)站。

但在移動設(shè)備
在光譜的另一端是平板電腦的互聯(lián)網(wǎng)用戶正在訪問的網(wǎng)站主要是從他們的智能手機，數(shù)量巨大，或上網(wǎng)本。這些設(shè)備屏幕的范圍可以從240×320像素（在一些低端的老年智能手機）1024 x 600或768（在一些上網(wǎng)本和平板電腦）。

顯然，一個網(wǎng)站設(shè)計一個監(jiān)控的1280像素寬，不去看屏幕上的只有320像素寬。甚至一個600或800像素寬。水平滾動，尤其是在觸摸屏設(shè)備，是惱人的。
一個手機網(wǎng)站使用的是解決方案，不同的屏幕分辨率設(shè)計。但是現(xiàn)在有一個巨大的尺寸范圍，而不僅僅是“正常的”和“小”，這是不是主意了。移動網(wǎng)站設(shè)計為240×320像素的屏幕不會在iPad上看起來很好（或甚至與視網(wǎng)膜顯示新的iPhone）。如果你設(shè)計的視網(wǎng)膜顯示屏分辨率更高的屏幕或類似的裝置，你會疏遠了很多使用其他智能手機，沒有游客有這樣高分辨率的屏幕。

柔性基礎(chǔ)
從一個靈活的基礎(chǔ)是很重要的。單獨的流體網(wǎng)格是不夠的。你還需要一個網(wǎng)格或布局，可以根據(jù)屏幕分辨率和設(shè)備類型的變化。簡單的布局，這可不是一個高階。但如果你想要的東西更復(fù)雜一點，使用不同數(shù)目取決于屏幕寬度的列，有幾件事你必須考慮。
靈活的布局

創(chuàng)建一個流體網(wǎng)格是創(chuàng)建一個更棒的方式響應(yīng)設(shè)計。流體網(wǎng)格將調(diào)整大小和重新定位的內(nèi)容是必要的，因為屏幕寬度的變化

例如，只要你的屏幕分辨率高于800px寬，一個三柱布局會在3列，每列的簡單調(diào)整的服務(wù)內(nèi)容的寬度。但當屏幕寬度低于第三列為，你會放棄你的第二列下，使每一列可以留下一個易讀的寬度。

如果屏幕變得更窄，比方說480px（典型的在許多智能手機），整個設(shè)計滴一列，第二和第三列出現(xiàn)以下主要內(nèi)容。如果導(dǎo)航是包含在其中的一列，它可能會遷移到網(wǎng)頁的頂端，所以它仍然是容易。
使用CSS3媒體查詢，讓我們的目標不只是一個特定的設(shè)備（如移動設(shè)備），而且在這些設(shè)備的特殊規(guī)范。所以我們可以有許多不同的尺寸的設(shè)備獨立的樣式。
雖然在CSS3媒體查詢的美，是他們也可以在CSS的使用權(quán)。所以，如果我們需要改變的是列數(shù)，或類似的東西，我們可以定義一個“媒體在樣式表中的規(guī)則。webdesignerwall有一個偉大的概述如何使用CSS3媒體查詢。

流體圖像
創(chuàng)建圖像調(diào)整到列或div大小，他們是在一個流體布局，創(chuàng)造一個更敏感的設(shè)計的另一個重要方面。為列進行調(diào)整，它們包含的圖像可以調(diào)整使他們?nèi)苑显摿械募s束。

寬屏幕的考慮
根據(jù)statowl在過去的三個月，而非73%的移動互聯(lián)網(wǎng)用戶使用電腦的分辨率高于1024×768。如果你看看數(shù)據(jù)統(tǒng)計為1024 x 768而言，你會發(fā)現(xiàn)它是失去市場份額。很明顯，已經(jīng)有更高的屏幕分辨率，設(shè)計師會忽略不明智的一個巨大的轉(zhuǎn)變。
當然，只是因為有一些用戶有誰已經(jīng)轉(zhuǎn)移到更大的屏幕分辨率并不意味著在每一個設(shè)計師應(yīng)該跳上寬的行列，開始重新設(shè)計他們的客戶。手機采用的是更重要的比此刻更寬的寬度。但由于我們希望說服你現(xiàn)在的反應(yīng)是新網(wǎng)站設(shè)計方法設(shè)計方法和設(shè)計，重要的是要考慮如何讓網(wǎng)站更大的寬度。

誰用更高分辨率的屏幕？
任何人工作的設(shè)計或創(chuàng)意領(lǐng)域可能有一個屏幕分辨率至少為1280像素寬（如果不是更大）。這包括網(wǎng)絡(luò)和圖形設(shè)計師，導(dǎo)演，攝影師，和其他。懂技術(shù)的用戶也更可能使用更高分辨率的屏幕，因為他們更容易升級自己的電腦設(shè)備進行定期。
富有的消費者是另一組可能使用更高分辨率的顯示器。喜歡和精通技術(shù)的用戶，這是因為有更多的可支配收入的人更可能定期購買新電腦。當然，這種影響是增加消費者都是有錢人和技術(shù)嫻熟。

MAC的球迷將是另一組更可能使用更高的屏幕分辨率，由于新的MacBook，iMac，和其他的蘋果電腦都有至少1280 x 800的屏幕分辨率。當然，這不包括他們運行在iOS產(chǎn)品（iPhone，iPod touch和iPad）。

誰不是用更高的分辨率的屏幕？
雖然有很多用戶在使用更高分辨率的屏幕，仍然有很多互聯(lián)網(wǎng)用戶誰沒有這些分為幾個不同的組。
學生可能是一個低分辨率的用戶的大群體。學校經(jīng)常要做五年或十年的電腦，并且在許多情況下，電腦他們甚至不是先進的當他們購買。如果你的網(wǎng)站是針對教育用戶（包括學校的教師和管理人員，除了學生），你可能會看很多的屏幕只有1024像素寬的用戶，甚至有些人還有監(jiān)視器設(shè)置為800像素寬。

企業(yè)用戶往往有較低的屏幕分辨率，太。許多非科技企業(yè)將堅持直到它完全過時的電腦設(shè)備升級之前。這是有道理的，尤其是考慮到升級數(shù)十或數(shù)百臺計算機在一次成本。如果你瞄準的是企業(yè)用戶，你可能要堅持一個基于1024的寬度設(shè)計。
最后一組，可能有較低分辨率的屏幕上人不重視技術(shù)。而這些人用不碰計算機，現(xiàn)在很多人都在家中有電腦看到的價值。但他們也不可能去花費幾百美元的PC上，或者如果你的網(wǎng)站是專注于非技術(shù)用戶從一個家庭成員或分類廣告會使用電腦，特別是在農(nóng)村地區(qū)，你要仔細考慮可能的屏幕分辨率是什么，并據(jù)此設(shè)計。

跟蹤訪問者
上面提到的所有東西給我們帶來了一個采取最重要的步驟，如果你正在考慮一個更大的屏幕分辨率設(shè)計：跟蹤誰來到你的網(wǎng)站，看看他們使用的訪客屏幕分辨率。任何好的分析程序會給你這個信息，這是非常有價值的決策這樣。
如果你發(fā)現(xiàn)你的用戶絕大多數(shù)都是來自更高的屏幕分辨率的電腦，然后你可以設(shè)計你的網(wǎng)站對于用戶沒有看到太多的影響。但如果你發(fā)現(xiàn)大量的訪問者仍然使用1024或更窄的屏幕分辨率，那么你可能要重新考慮。

更寬的寬度是重要的創(chuàng)新
我相信有很多設(shè)計師有誰真的看不見的點在較寬的寬度。他們在960像素的快樂設(shè)計。他們有合適的系統(tǒng)設(shè)計的寬度。他們有前960像素的CSS文件的所有設(shè)置。他們?yōu)槭裁匆邌幔坑绕涫钱敶罅康幕ヂ?lián)網(wǎng)用戶仍然有屏幕，1024像素寬的工作。
簡單的答案是，只要我們堅持設(shè)計1024，沒有激勵對大多數(shù)消費者升級。這意味著沒有激勵制造商創(chuàng)造更高分辨率的產(chǎn)品。
例如，如果1280是標準的，如果大多數(shù)網(wǎng)站有1140像素寬或更寬，很可能會與iPad的分辨率至少1280開發(fā)。但因為1024的標準是，iPad不需要比這更高的分辨率。同樣的原則也適用于上網(wǎng)本。由于網(wǎng)絡(luò)的設(shè)計是圍繞屏幕寬度為1024像素，主要用于網(wǎng)絡(luò)使用的設(shè)備不需要比這更高的分辨率。
通過推動網(wǎng)站設(shè)計更廣泛的寬度，我們鼓勵升級和創(chuàng)新。另外，這些額外的180個像素（960和1140之間的差異）可以開辟新的可能性在用戶界面設(shè)計和用戶體驗的世界。就像160像素獲得了當我們從800到960更可能的事。

廣寬的缺點
雖然有一定的優(yōu)勢，創(chuàng)造更廣闊的設(shè)計，也有一定的缺點的實踐。這些都是很容易克服的，但重要的是要意識到他們是什么如果你想阻止他們。
寬線長度減少的可讀性
這是誘人的創(chuàng)造更廣泛的設(shè)計時，利用額外的屏幕房地產(chǎn)讓你的主要內(nèi)容范圍廣。這并不總是一個好主意，但。較長的線的長度是難以閱讀，因為眼睛有進一步的旅行在一行的末尾到下一行的開始，這意味著讀者可以更容易迷路，上錯線。這是由較小的字號加劇。走線的長度，一個快樂的中等字體很重要，和線高度。
有一對夫婦的不同的方法為適當?shù)木€長度的計算。第一個是alphabet-and-a-half規(guī)則，結(jié)果在一個39個字符的長度（字母表中26個字母x 1.5）。適應(yīng)你的字體大小，大約39字適合你選擇的線的長度（或反之亦然）。
最優(yōu)線路長度計算的第二種方法是“分兩次”規(guī)則的適用。這是從世界絕版的繳稅，但可以適應(yīng)網(wǎng)絡(luò)容易。這條規(guī)則，你花點大小的字體，乘以二，然后讓你的線路長度在活字（其中，打印，12分）。所以，你要計算線的長度以像素為單位，你會把你的字體大小乘以24（12點字體將擁有288像素的線的長度）。
它可以幫助這兩種方法計算你的線的長度，然后進行比較。讓你的最后一行的長度介于兩者之間。

信息過載
廣泛的內(nèi)容可以很容易地使你的網(wǎng)頁看起來很雜亂，像是有太多的事情。這也使得它更容易添加額外的列，部件，或其他內(nèi)容，可能不是真的在頁面中添加任何價值。保持良好的內(nèi)容設(shè)計原則建立你的網(wǎng)站時，它是重要的。寬敞的白色空間也讓你的網(wǎng)站看起來不雜亂的幫助。
更寬的寬度，給你更多的選擇當談到設(shè)計，但它也使你會做出糟糕的設(shè)計決策的機會。太簡約和看起來是乏味和空洞。太多的事情，它只是看起來忙碌和混亂。
注重規(guī)模，白色的空間，在你的設(shè)計和結(jié)構(gòu)比例，確保良好的最終產(chǎn)品。小心你的更廣泛的設(shè)計并不起太多一般。
為什么不是每個人都做了響應(yīng)的設(shè)計嗎？
而響應(yīng)式設(shè)計是解決很多問題的核心設(shè)備被用來訪問Internet的廣泛，它也可以創(chuàng)建一些新的問題。
將移動設(shè)備，例如。如果一個人正在訪問他們的智能手機看電影的網(wǎng)站，這可能是他們最關(guān)心的是演出時間，方向去看戲，或者去劇院的電話號碼。他們希望立即訪問這些信息。裝載了整個網(wǎng)站，也包括像電影評論和其他信息，只有隱藏其中很大一部分來自移動用戶是浪費資源。
所以重要的是要看在個案基礎(chǔ)上響應(yīng)式設(shè)計，找出如果它是一個特定的網(wǎng)站的解決方案。在許多情況下，它是，但仍有一些情況下，一個更傳統(tǒng)的移動網(wǎng)站是可取的。
作為設(shè)計師，雖然，了解響應(yīng)式設(shè)計是很重要的，能夠知道什么時候是你的項目的合適的解決方案。由于大部分響應(yīng)的設(shè)計是建立在創(chuàng)造良好的、靈活的網(wǎng)站，它可以作為設(shè)計師的一種實踐指南作為我們前進與網(wǎng)頁設(shè)計和Web標準。
創(chuàng)建響應(yīng)設(shè)計更多的資源
flurid：flurid是流體網(wǎng)格設(shè)計能適應(yīng)在各種窗口的寬度。雖然不是特別敏感，對自己的（除了調(diào)整列寬），它可以作為骨干創(chuàng)建響應(yīng)式網(wǎng)站。
流體網(wǎng)格：本文從列表分開討論的優(yōu)點和流體網(wǎng)格工作詳情。
流體網(wǎng)格系統(tǒng)：另一種流體網(wǎng)格框架。
硬漢CSS3媒體查詢另一個很好的指南，媒體查詢。
響應(yīng)式網(wǎng)站設(shè)計實例
不是所有下面的設(shè)計適應(yīng)了移動的大小，但有些人，他們都可以給你，你如何使你的網(wǎng)站設(shè)計跨設(shè)備更敏感。

從一個很寬的屏幕，屏幕尺寸為最窄寬度不同的流體一個固定寬度的設(shè)計固定列寬流體寬度設(shè)計局設(shè)計的變化。

創(chuàng)新互聯(lián)設(shè)計文章推薦：

IPv4地址

網(wǎng)站搬家數(shù)據(jù)遷移

域名注冊,中文域名注冊

當前標題：響應(yīng)式網(wǎng)頁設(shè)計面臨的挑戰(zhàn)
標題URL：http://www.bm7419.com/news8/20158.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、面包屑導(dǎo)航、Google、網(wǎng)站設(shè)計公司、標簽優(yōu)化、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)