網(wǎng)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性

2014-07-18    分類: 網(wǎng)站建設(shè)

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


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


通過響應(yīng)式網(wǎng)頁設(shè)計(jì)的機(jī)會(huì)
響應(yīng)網(wǎng)頁設(shè)計(jì)是所有關(guān)于保持簡單。這個(gè)想法是創(chuàng)建一個(gè)網(wǎng)站,適合幾乎所有的屏幕尺寸,無論是臺(tái)式機(jī)或筆記本電腦的屏幕,平板電腦或智能手機(jī)在橫向或縱向模式。響應(yīng)式網(wǎng)站設(shè)計(jì)靈活的網(wǎng)格。他們使用媒體查詢來確定每一個(gè)人網(wǎng)站訪問的屏幕大小和縮放內(nè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)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性

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


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

網(wǎng)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性

外觀和感覺一個(gè)響應(yīng)式網(wǎng)站將在所有的屏幕尺寸是一致的。spigotdesign.com 保持獨(dú)特的品牌體驗(yàn)對(duì)所有設(shè)備。這使人們認(rèn)識(shí)到網(wǎng)站很容易,不管他們在哪里以及如何訪問。


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

網(wǎng)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性

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


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


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

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


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


1。開發(fā)時(shí)間
可能最明顯的負(fù)一點(diǎn)關(guān)于建立一個(gè)響應(yīng)式網(wǎng)站,它需要更多的時(shí)間。顯然,對(duì)于普通的桌面網(wǎng)站,你需要較少的準(zhǔn)備時(shí)間,更少的資源來構(gòu)建,并測試它需要較少的努力。
它通常需要更長的時(shí)間來將一個(gè)現(xiàn)有的網(wǎng)站為響應(yīng)比從頭開始構(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īng)
設(shè)計(jì)師從choiceresponse.com 顯然優(yōu)先考慮的內(nèi)容為移動(dòng)使用。而桌面版本可以顯示很多內(nèi)容時(shí),對(duì)于較小的屏幕,你需要知道什么事情。

網(wǎng)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性
想象一下,你正在負(fù)責(zé)一個(gè)公共交通網(wǎng)站。一個(gè)用戶可能會(huì)訪問桌面版,瀏覽的耐心,希望找到他的周末旅行特價(jià)商品。與此同時(shí),其他人可能會(huì)檢查手機(jī)版,希望能找出他應(yīng)該運(yùn)行在不到一分鐘他的火車前的平臺(tái)。
一個(gè)網(wǎng)站,兩種情況,和完全不同的兩個(gè)用戶場景。為了您的所有用戶創(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)我們使用鍵盤快捷鍵和一個(gè)定義鼠標(biāo)指針來瀏覽一個(gè)網(wǎng)站的一個(gè)裝置,我們沒有什么比我們的手指在其他。

而桌面版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)站與媒體查詢來確定每個(gè)訪問者的屏幕大小并顯示正確的布局。
這里的問題是,舊的瀏覽器,特別是Internet Explorer版本8及以上的,不承認(rèn)媒體查詢。目前全球14%網(wǎng)絡(luò)用戶仍然使用IE8。14%是你的觀眾的很大一部分,取決于你的目標(biāo)人口的數(shù)字可能會(huì)更高。
這并不意味著沒有辦法在這些老的瀏覽器中顯示你的網(wǎng)站。你只需要知道這個(gè)工作與媒體查詢時(shí)。有避免問題的幾種方法,如使用一個(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ù)屏幕大小而不是上下文。
奧利弗羅素
打開(放)oliverrussell.com這個(gè)問題解決得很好 。圖像的重新安排使他們可以橫跨整個(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)容類別出現(xiàn)手指友好的按鈕。
在任何設(shè)備上,經(jīng)驗(yàn)法則是打擊容易獲得信息和一個(gè)不顯眼的設(shè)計(jì)之間的平衡。不要重新發(fā)明輪子,如果你沒有。
需要考慮的事情
是否去響應(yīng)最終到你,但是如果你決定給它一個(gè)嘗試,這里有一些你應(yīng)該在你開始之前考慮的事情。


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

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

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

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

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

網(wǎng)站欄目:網(wǎng)頁設(shè)計(jì)機(jī)遇和挑戰(zhàn)性
本文網(wǎng)址:http://www.bm7419.com/news43/20143.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、服務(wù)器托管搜索引擎優(yōu)化、外貿(mào)建站、Google

廣告

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

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)