深圳建設(shè)網(wǎng)頁(yè):響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)

2015-10-29    分類: 網(wǎng)站建設(shè)

移動(dòng)平臺(tái)的網(wǎng)頁(yè)設(shè)計(jì)不是將您網(wǎng)站的所有內(nèi)容都擠到一個(gè)較小的屏幕上。目標(biāo)不是縮小當(dāng)前網(wǎng)站,而是為移動(dòng)平臺(tái)重新設(shè)計(jì)。本文說(shuō)說(shuō)深圳建設(shè)網(wǎng)頁(yè):響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)。
要:了解響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)旨在為各種設(shè)備的用戶創(chuàng)造好體驗(yàn)。從簡(jiǎn)單的閱讀到導(dǎo)航控制,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該響應(yīng)用戶的行為。用戶期望響應(yīng)式網(wǎng)站提供互動(dòng)體驗(yàn),其尺寸,布局和方向與他們正在使用的設(shè)備相匹配,并響應(yīng)觸摸。

由于移動(dòng)用戶數(shù)量繼續(xù)超過(guò)桌面用戶數(shù)量,我們需要充分了解響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),以保持相關(guān)性。

要掌握響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),您需要重新調(diào)整您的優(yōu)先級(jí)。目標(biāo)是向網(wǎng)站訪問(wèn)者展示他們想要查看的內(nèi)容,而不是網(wǎng)站上的所有內(nèi)容 - 至少不是首先。您需要提供適合用戶觸摸的針對(duì)移動(dòng)設(shè)備優(yōu)化的內(nèi)容。用戶應(yīng)該能夠輕松瀏覽您的網(wǎng)站,打開(kāi)他們想要的內(nèi)容,例如您的“與我聯(lián)系”頁(yè)面,他們的購(gòu)物車或您的服務(wù)列表。移動(dòng)優(yōu)化是關(guān)于將正確的內(nèi)容放在正確的地方。

不要:埋葬或放棄您的內(nèi)容

丟棄或隱藏網(wǎng)站內(nèi)容,使其適合在較小的屏幕上不是一個(gè)好主意。您的用戶希望在桌面版網(wǎng)站上看到與您提供的內(nèi)容相同的內(nèi)容,只是格式不同。許多響應(yīng)性網(wǎng)站選擇在漢堡菜單中隱藏內(nèi)容 - 通常在屏幕頂部顯示的三層菜單圖標(biāo)。漢堡菜單有效地保持您的網(wǎng)站干凈和最小,但它不是你唯一的選擇。

漢堡菜單圖標(biāo)
響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)
你不希望你的響應(yīng)式網(wǎng)站顯得雜亂,但你也不想讓導(dǎo)航比它更難。您可能只有幾秒鐘時(shí)間才能在用戶決定點(diǎn)擊之前向他們提供他們想要的內(nèi)容。不要浪費(fèi)它通過(guò)讓他們尋找信息。目標(biāo)是實(shí)現(xiàn)內(nèi)容和功能的平衡 - 響應(yīng)式網(wǎng)站在每個(gè)設(shè)備上提供相同的內(nèi)容和功能。丟失大部分屏幕空間會(huì)迫使您縮小內(nèi)容的焦點(diǎn),但它不應(yīng)該損害質(zhì)量。

做:提供自適應(yīng)圖像

查看產(chǎn)品圖片的能力至關(guān)重要,但更重要的是優(yōu)化響應(yīng)式網(wǎng)站的圖片。一旦您實(shí)現(xiàn)了移動(dòng)使用的網(wǎng)站可擴(kuò)展性,您就必須專注于調(diào)整圖像。在您的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)策略中加入圖片管理,例如自動(dòng)檢測(cè)并適應(yīng)用戶屏幕尺寸的技術(shù)。

自適應(yīng)映像使用一行Javascript,一個(gè)PHP文件和一個(gè).htaccess文件,允許您將文件拖放到根目錄中。您的響應(yīng)式網(wǎng)站的圖片需要根據(jù)屏幕尺寸進(jìn)行自動(dòng)替換,這將導(dǎo)致更少的工作量和更快的加載時(shí)間。你可以自定義你的圖片,圖像應(yīng)具有高分辨率,以實(shí)現(xiàn)理想的優(yōu)化。
響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)
不要:忽略觸摸設(shè)計(jì)

大多數(shù)移動(dòng)用戶都使用觸摸屏設(shè)備,并希望您的網(wǎng)站能夠輕松地從鼠標(biāo)和鍵盤(pán)適應(yīng)手指和拇指。這超出了響應(yīng)設(shè)計(jì)和觸摸設(shè)計(jì)。您需要為移動(dòng)用戶提供完全功能,就像他們?cè)谧烂嫔弦粯印?/div>
移動(dòng)分辨率圖表

完全取消觸摸會(huì)使用戶失望,因?yàn)樗麄儾幌霃淖烂娣祷氐侥木W(wǎng)站。在移動(dòng)網(wǎng)站中創(chuàng)建鏈接更簡(jiǎn)單,更大,更容易推送。使用觸摸目標(biāo)來(lái)解釋人類手指的不精確觸摸與鼠標(biāo)的更精確的點(diǎn)擊。手指友好的移動(dòng)設(shè)計(jì)應(yīng)該適合于普通人的手指。太小會(huì)使您看起來(lái)沒(méi)有針對(duì)移動(dòng)設(shè)備優(yōu)化您的網(wǎng)站,但過(guò)大會(huì)使他們無(wú)意中點(diǎn)擊另一個(gè)目標(biāo)。

通過(guò)創(chuàng)建流暢的布局,充分利用您的響應(yīng)式網(wǎng)站。您無(wú)法控制消費(fèi)者使用哪些設(shè)備訪問(wèn)您的網(wǎng)站。因此,設(shè)計(jì)將根據(jù)設(shè)備自動(dòng)更改布局。使用以百分比而不是以像素為單位的尺寸,確保您的布局靈活。通過(guò)切換像素,您不必考慮屏幕寬度或設(shè)備大小,并可以找到一個(gè)解決方案為每個(gè)設(shè)備。

不要:膨脹文件大小

我們了解您希望將內(nèi)容設(shè)置為較大,以便用戶可以在較小的屏幕上看到它,但這并不意味著您的文件大小會(huì)變大。您需要包含與您的常規(guī)網(wǎng)站相同的內(nèi)容,但減少它適合在移動(dòng)網(wǎng)站上。如果您的響應(yīng)式網(wǎng)站的文件大小較大,加載時(shí)間會(huì)緩慢,導(dǎo)致大多數(shù)用戶在看到您的網(wǎng)站之前點(diǎn)擊了。加載網(wǎng)站需要5秒鐘以內(nèi) - 速度越快越好。

移動(dòng)網(wǎng)站設(shè)計(jì)可能首先出現(xiàn)限制性,因?yàn)槟仨殞?duì)舊的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用許多新規(guī)則。然而,一旦你了解響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí),你就有更多的創(chuàng)造力空間比典型的桌面。您可以使用觸摸,GPS和用戶只能在移動(dòng)設(shè)備上使用的無(wú)數(shù)其他工具。這打開(kāi)了一個(gè)機(jī)會(huì),為用戶提供獨(dú)特的東西。在框之外思考,并為用戶提供他們會(huì)記住的移動(dòng)體驗(yàn)。

文章名稱:深圳建設(shè)網(wǎng)頁(yè):響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)
URL標(biāo)題:http://www.bm7419.com/news/33091.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站設(shè)計(jì)、網(wǎng)站改版

廣告

聲明:本網(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)