Godzilla. 2016-10-24 網(wǎng)站建設(shè)

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

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

　　要：了解響應(yīng)式網(wǎng)頁設(shè)計(jì)

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

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

　　要掌握響應(yīng)式網(wǎng)頁設(shè)計(jì)，您需要重新調(diào)整您的優(yōu)先級(jí)。目標(biāo)是向網(wǎng)站訪問者展示他們想要查看的內(nèi)容，而不是網(wǎng)站上的所有內(nèi)容 - 至少不是首先。您需要提供適合用戶觸摸的針對(duì)移動(dòng)設(shè)備優(yōu)化的內(nèi)容。用戶應(yīng)該能夠輕松瀏覽您的網(wǎng)站，打開他們想要的內(nèi)容，例如您的“與我聯(lián)系”頁面，他們的購物車或您的服務(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)站顯得雜亂，但你也不想讓導(dǎo)航比它更難。您可能只有幾秒鐘時(shí)間才能在用戶決定點(diǎn)擊之前向他們提供他們想要的內(nèi)容。不要浪費(fèi)它通過讓他們尋找信息。目標(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)頁設(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)化。

　　不要：忽略觸摸設(shè)計(jì)

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

　　移動(dòng)分辨率圖表

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

　　通過創(chuàng)建流暢的布局，充分利用您的響應(yīng)式網(wǎng)站。您無法控制消費(fèi)者使用哪些設(shè)備訪問您的網(wǎng)站。因此，設(shè)計(jì)將根據(jù)設(shè)備自動(dòng)更改布局。使用以百分比而不是以像素為單位的尺寸，確保您的布局靈活。通過切換像素，您不必考慮屏幕寬度或設(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)頁設(shè)計(jì)應(yīng)用許多新規(guī)則。然而，一旦你了解響應(yīng)式網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識(shí)，你就有更多的創(chuàng)造力空間比典型的桌面。您可以使用觸摸，GPS和用戶只能在移動(dòng)設(shè)備上使用的無數(shù)其他工具。這打開了一個(gè)機(jī)會(huì)，為用戶提供獨(dú)特的東西。在框之外思考，并為用戶提供他們會(huì)記住的移動(dòng)體驗(yàn)。

下一篇：顏色疊加法如何實(shí)現(xiàn)精美的網(wǎng)頁設(shè)計(jì)？ 上一篇：自己建網(wǎng)站：如何創(chuàng)建個(gè)人網(wǎng)站