網(wǎng)頁(yè)設(shè)計(jì)機(jī)遇和挑戰(zhàn)性
2011八月7.12%全球所有網(wǎng)站點(diǎn)擊量來(lái)自手持移動(dòng)設(shè)備。由8月的2012，這個(gè)數(shù)字已經(jīng)上升到11.78%。
我們可以從字面上看平板電腦和智能手機(jī)成為連接到互聯(lián)網(wǎng)的默認(rèn)的選擇。人們?cè)缫蚜?xí)慣了網(wǎng)絡(luò)作為他們生活中不可缺少的一部分，不愿意多活一天，甚至一刻沒(méi)有在不斷的聯(lián)系。

這種轉(zhuǎn)變，從桌面到移動(dòng)需要設(shè)計(jì)師重新。不一定要遠(yuǎn)離桌面的設(shè)計(jì)，但肯定對(duì)手機(jī)設(shè)計(jì)。有接近移動(dòng)網(wǎng)絡(luò)存在的幾種方式，如一個(gè)獨(dú)立的移動(dòng)網(wǎng)站或移動(dòng)應(yīng)用程序。最新的和日益流行的方法是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

響應(yīng)式設(shè)計(jì)解決了網(wǎng)頁(yè)設(shè)計(jì)師，失去的事實(shí)，它拋出了自己的問(wèn)題，很容易看到一個(gè)巨大的問(wèn)題。
在這篇文章中我想討論的機(jī)遇和挑戰(zhàn)，來(lái)響應(yīng)設(shè)計(jì)。我將揭示一些新的思維方式，幫助你為你的下一個(gè)項(xiàng)目做一個(gè)明智的選擇。

通過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的機(jī)會(huì)
響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是所有關(guān)于保持簡(jiǎn)單。這個(gè)想法是創(chuàng)建一個(gè)網(wǎng)站，適合幾乎所有的屏幕尺寸，無(wú)論是臺(tái)式機(jī)或筆記本電腦的屏幕，平板電腦或智能手機(jī)在橫向或縱向模式。響應(yīng)式網(wǎng)站設(shè)計(jì)靈活的網(wǎng)格。他們使用媒體查詢來(lái)確定每一個(gè)人網(wǎng)站訪問(wèn)的屏幕大小和縮放內(nèi)容。
讓我們來(lái)響應(yīng)的設(shè)計(jì)方法的優(yōu)點(diǎn)，一看。

1。低維護(hù)
一個(gè)響應(yīng)式設(shè)計(jì)，你只需要維護(hù)一個(gè)網(wǎng)站。而布局的變化，內(nèi)容不變，在不同設(shè)備。你可以同時(shí)更新內(nèi)容或修正錯(cuò)誤的所有設(shè)備。

例如，新聞網(wǎng)站 如breakingnews.com這是一個(gè)很大的優(yōu)點(diǎn)。快速變化的內(nèi)容和頻繁的更新，需要很高的維護(hù)。一個(gè)響應(yīng)式設(shè)計(jì)不僅節(jié)省時(shí)間，也沒(méi)錢(qián)。
你可以集中在一個(gè)單一的網(wǎng)站，把你所有的資源轉(zhuǎn)化為該網(wǎng)站的優(yōu)化與維護(hù)。不再需要優(yōu)先考慮或處理您的網(wǎng)站 分別不同的版本。

2。品牌的一致性
有一個(gè)網(wǎng)站，在桌面和移動(dòng)屏幕上的作品，你會(huì)發(fā)現(xiàn)它保持一致的品牌形象更容易。沒(méi)有更多的風(fēng)格指南，需要多個(gè)參與方之間的溝通，如不同的機(jī)構(gòu)為桌面和移動(dòng)版本網(wǎng)站。

外觀和感覺(jué)一個(gè)響應(yīng)式網(wǎng)站將在所有的屏幕尺寸是一致的。spigotdesign.com 保持獨(dú)特的品牌體驗(yàn)對(duì)所有設(shè)備。這使人們認(rèn)識(shí)到網(wǎng)站很容易，不管他們?cè)谀睦镆约叭绾卧L問(wèn)。

3?？捎眯?br/>響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是非常用戶友好的。不僅可以瀏覽者更好地與你的品牌如果他們認(rèn)識(shí)到移動(dòng)你的網(wǎng)站，他們也知道如何更好的使用它。風(fēng)格的一致和一致的內(nèi)容重要是因?yàn)橛脩舨幌Ｍ遣煌囊驗(yàn)樗麄兪褂貌煌脑O(shè)備。

好的可用性的一個(gè)重要方面是滿足用戶的期望。如果你做到了這一點(diǎn)，他們會(huì)更容易瀏覽你的網(wǎng)站。smashingmagazine.com 使得他們的讀者瀏覽網(wǎng)站上的所有設(shè)備很容易，保持一個(gè)積極的用戶體驗(yàn)。一個(gè)很好的經(jīng)驗(yàn)，增加了重復(fù)訪問(wèn)的機(jī)會(huì)。

4。沒(méi)有重定向
你只有一個(gè)網(wǎng)站的所有設(shè)備也意味著你有相同的頁(yè)面的URL的內(nèi)容提供給你所有的用戶。你不需要擔(dān)心不同設(shè)備之間的重定向或不兼容。
在推動(dòng)一個(gè)鏈接，你可以肯定的是，人們可以直接訪問(wèn)它，無(wú)論他們?cè)谀睦?，或者他們?nèi)绾卧L問(wèn)你的網(wǎng)站。
例如，當(dāng)發(fā)送簡(jiǎn)訊，機(jī)率很高，你的讀者會(huì)在移動(dòng)設(shè)備上打開(kāi)你的郵件。你不想讓他們必須切換到臺(tái)式電腦或筆記本電腦才可以打開(kāi)你的鏈接。
任何內(nèi)容，你推廣也應(yīng)該可以，無(wú)論是在移動(dòng)或不。

5。加載時(shí)間
那些游客，誰(shuí)訪問(wèn)您的網(wǎng)站有一個(gè)穩(wěn)定的無(wú)線或有線連接會(huì)有點(diǎn)小麻煩下載數(shù)據(jù)比較大的塊，如特殊的動(dòng)畫(huà)或圖片。另一方面，移動(dòng)用戶，誰(shuí)使用3G或4G連接，將感激盡可能小的數(shù)據(jù)。
波士頓環(huán)球報(bào)

再次，新聞網(wǎng)站，如BostonGlobe.com 經(jīng)常在去，比如每天上下班。響應(yīng)式設(shè)計(jì)允許他們選擇為每個(gè)設(shè)備特定的內(nèi)容，或預(yù)壓縮圖像。

通過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)提出的挑戰(zhàn)
響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)相對(duì)較新的移動(dòng)網(wǎng)站設(shè)計(jì)方法。有人說(shuō)這只是一種趨勢(shì)，也有人說(shuō)這是一種新的思維方式。就我個(gè)人而言，我相信在快速和不斷變化的Web框架，一切都可以被視作一個(gè)趨勢(shì)。讓我們不要去太深。相反，讓我們來(lái)看看這個(gè)挑戰(zhàn)需要我們?nèi)タ朔⒊晒Φ木W(wǎng)站響應(yīng)。

1。開(kāi)發(fā)時(shí)間
可能最明顯的負(fù)一點(diǎn)關(guān)于建立一個(gè)響應(yīng)式網(wǎng)站，它需要更多的時(shí)間。顯然，對(duì)于普通的桌面網(wǎng)站，你需要較少的準(zhǔn)備時(shí)間，更少的資源來(lái)構(gòu)建，并測(cè)試它需要較少的努力。
它通常需要更長(zhǎng)的時(shí)間來(lái)將一個(gè)現(xiàn)有的網(wǎng)站為響應(yīng)比從頭開(kāi)始構(gòu)建一個(gè)。如果你要移動(dòng)的思維，這樣做使你的網(wǎng)站的響應(yīng)，不要低估你的工作也會(huì)給你現(xiàn)有的桌面版。

2。不同的設(shè)備是不同的
的想法，你可以建立一個(gè)網(wǎng)站，同樣適用于任何裝置是一個(gè)神話。當(dāng)然，只有一套代碼，你的網(wǎng)站仍然是相同的有關(guān)內(nèi)容和結(jié)構(gòu)，但不同的設(shè)備需要不同的思維方式。
人們會(huì)瀏覽您的網(wǎng)站根據(jù)自己的特定需要和目標(biāo)，而不提獨(dú)特的使用語(yǔ)境。
選擇反應(yīng)
設(shè)計(jì)師從choiceresponse.com 顯然優(yōu)先考慮的內(nèi)容為移動(dòng)使用。而桌面版本可以顯示很多內(nèi)容時(shí)，對(duì)于較小的屏幕，你需要知道什么事情。

想象一下，你正在負(fù)責(zé)一個(gè)公共交通網(wǎng)站。一個(gè)用戶可能會(huì)訪問(wèn)桌面版，瀏覽的耐心，希望找到他的周末旅行特價(jià)商品。與此同時(shí)，其他人可能會(huì)檢查手機(jī)版，希望能找出他應(yīng)該運(yùn)行在不到一分鐘他的火車(chē)前的平臺(tái)。
一個(gè)網(wǎng)站，兩種情況，和完全不同的兩個(gè)用戶場(chǎng)景。為了您的所有用戶創(chuàng)建出色的用戶體驗(yàn)，你需要考慮的人會(huì)用不同的情況和不同的目標(biāo)，不同的設(shè)備。

3。不同的設(shè)備提供不同的相互作用
你的桌面版本不僅不同于在一個(gè)假設(shè)的移動(dòng)版，而且在一個(gè)非常實(shí)際的方式?；?dòng)裝置作品的一個(gè)很可能是另一個(gè)不相干的。這主要是因?yàn)槲覀兣c桌面和移動(dòng)設(shè)備的交互方式不同。
當(dāng)我們使用鍵盤(pán)快捷鍵和一個(gè)定義鼠標(biāo)指針來(lái)瀏覽一個(gè)網(wǎng)站的一個(gè)裝置，我們沒(méi)有什么比我們的手指在其他。

而桌面版forefathersgroup.com 包括一個(gè)懸停效果的幾個(gè)環(huán)節(jié)，設(shè)計(jì)師運(yùn)用了這些影響的內(nèi)容，不讓它移動(dòng)版。再次，要優(yōu)先考慮內(nèi)容是非常重要的在響應(yīng)式設(shè)計(jì)。

4。媒體查詢支持有限
響應(yīng)式網(wǎng)站與媒體查詢來(lái)確定每個(gè)訪問(wèn)者的屏幕大小并顯示正確的布局。
這里的問(wèn)題是，舊的瀏覽器，特別是Internet Explorer版本8及以上的，不承認(rèn)媒體查詢。目前全球14%網(wǎng)絡(luò)用戶仍然使用IE8。14%是你的觀眾的很大一部分，取決于你的目標(biāo)人口的數(shù)字可能會(huì)更高。
這并不意味著沒(méi)有辦法在這些老的瀏覽器中顯示你的網(wǎng)站。你只需要知道這個(gè)工作與媒體查詢時(shí)。有避免問(wèn)題的幾種方法，如使用一個(gè)完全獨(dú)立的樣式表的瀏覽器，或者你的網(wǎng)站設(shè)計(jì)的移動(dòng)第一。
沼澤
以移動(dòng)第一種方法意味著只有風(fēng)格，應(yīng)該適用于更廣泛的布局的版本是一個(gè)媒體查詢里面，不是那些為移動(dòng)版。這樣，不支持媒體查詢的瀏覽器只會(huì)看到移動(dòng)版。

5?？蓴U(kuò)展的圖像細(xì)節(jié)丟失
另一個(gè)限制響應(yīng)式設(shè)計(jì)是圖像縮放?？s放圖像的細(xì)節(jié)，從而迅速失去其意義?；旧?，這里真正的限制是不結(jié)垢，但事實(shí)上結(jié)垢發(fā)生嚴(yán)格根據(jù)屏幕大小而不是上下文。
奧利弗羅素
打開(kāi)（放）oliverrussell.com這個(gè)問(wèn)題解決得很好 。圖像的重新安排使他們可以橫跨整個(gè)屏幕，如果有必要的話。這創(chuàng)造了足夠的空間讓大多數(shù)圖像被調(diào)整在所有。
另一種可能是作物的縮放圖像。還是他們的意義和經(jīng)驗(yàn)，它最終會(huì)被改變。

6。導(dǎo)航菜單
最后但并非最不重要的，導(dǎo)航菜單彌補(bǔ)任何網(wǎng)站的重要組成部分。特別是在比較復(fù)雜的桌面網(wǎng)站我們用于多層下拉菜單。在較小的設(shè)備，你總是會(huì)遇到有限的屏幕房地產(chǎn)，這使得設(shè)計(jì)直觀的導(dǎo)航菜單的一個(gè)挑戰(zhàn)。

星巴克
設(shè)計(jì)師Starbucks.com 決定默認(rèn)隱藏在小尺寸屏幕的導(dǎo)航菜單。只有當(dāng)跨欄小圖標(biāo)左上角的不同內(nèi)容類(lèi)別出現(xiàn)手指友好的按鈕。
在任何設(shè)備上，經(jīng)驗(yàn)法則是打擊容易獲得信息和一個(gè)不顯眼的設(shè)計(jì)之間的平衡。不要重新發(fā)明輪子，如果你沒(méi)有。
需要考慮的事情
是否去響應(yīng)最終到你，但是如果你決定給它一個(gè)嘗試，這里有一些你應(yīng)該在你開(kāi)始之前考慮的事情。

準(zhǔn)備是關(guān)鍵
徹底的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)之前，你的第一個(gè)PS圖象處理軟件模型開(kāi)始。在你的第一個(gè)線框還長(zhǎng)。好的準(zhǔn)備是成功設(shè)計(jì)的關(guān)鍵。你越是有準(zhǔn)備的，更多的時(shí)間和金錢(qián)你會(huì)拯救到底。

因?yàn)槟愕木W(wǎng)站會(huì)有所不同，在不同的設(shè)備上，你需要有一個(gè)如何組織您的內(nèi)容，這些設(shè)備在頭腦清晰的畫(huà)面。較小的裝置，你擁有越多的選擇做出關(guān)于你的內(nèi)容優(yōu)先。

從零開(kāi)始
如果你已經(jīng)有一個(gè)現(xiàn)有的臺(tái)式設(shè)計(jì)，你考慮的第一次移動(dòng)的存在，仔細(xì)想想。
你可以從你的舊桌面網(wǎng)站回收的設(shè)計(jì)，但修改代碼可能要比從頭開(kāi)始再。

不要重新發(fā)明輪子
有大量的在線工具和資源來(lái)幫助你開(kāi)發(fā)一個(gè)響應(yīng)式網(wǎng)站。
不要試圖另起爐灶創(chuàng)建一個(gè)新的方法。從別人的錯(cuò)誤中學(xué)習(xí)，會(huì)加快你的開(kāi)發(fā)時(shí)間。

測(cè)試，測(cè)試，再測(cè)試
這完全是新的，而不應(yīng)該是一個(gè)驚喜。早期的和重復(fù)的用戶測(cè)試，任何成功的設(shè)計(jì)是必不可少的，或是不。
并在同一時(shí)間兩個(gè)觸摸和普通屏幕設(shè)計(jì)的挑戰(zhàn)不同的行為需要一些過(guò)度測(cè)試。開(kāi)始對(duì)所有你擁有的設(shè)備的試驗(yàn)。如果一切順利，借朋友和家人的設(shè)備和測(cè)試這些。最后但并非最不重要的，訪問(wèn)一個(gè)電器店試試你的網(wǎng)站在他們的設(shè)備。

網(wǎng)頁(yè)題目：網(wǎng)頁(yè)設(shè)計(jì)機(jī)遇和挑戰(zhàn)性
標(biāo)題URL：http://redsoil1982.com.cn/news/20143.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、外貿(mào)建站、商城網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航

廣告

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