Godzilla. 2016-10-24
網(wǎng)站建設
深圳建設網(wǎng)頁:響應性網(wǎng)頁設計注意事項
移動平臺的網(wǎng)頁設計不是將您網(wǎng)站的所有內容都擠到一個較小的屏幕上。目標不是縮小當前網(wǎng)站,而是為移動平臺重新設計。本文說說深圳建設網(wǎng)頁:響應性網(wǎng)頁設計注意事項。
要:了解響應式網(wǎng)頁設計
響應式網(wǎng)頁設計旨在為各種設備的用戶創(chuàng)造最佳體驗。從簡單的閱讀到導航控制,響應式網(wǎng)頁設計應該響應用戶的行為。用戶期望響應式網(wǎng)站提供互動體驗,其尺寸,布局和方向與他們正在使用的設備相匹配,并響應觸摸。
由于移動用戶數(shù)量繼續(xù)超過桌面用戶數(shù)量,我們需要充分了解響應式網(wǎng)頁設計,以保持相關性。
要掌握響應式網(wǎng)頁設計,您需要重新調整您的優(yōu)先級。目標是向網(wǎng)站訪問者展示他們想要查看的內容,而不是網(wǎng)站上的所有內容 - 至少不是首先。您需要提供適合用戶觸摸的針對移動設備優(yōu)化的內容。用戶應該能夠輕松瀏覽您的網(wǎng)站,打開他們想要的內容,例如您的“與我聯(lián)系”頁面,他們的購物車或您的服務列表。移動優(yōu)化是關于將正確的內容放在正確的地方。
不要:埋葬或放棄您的內容
丟棄或隱藏網(wǎng)站內容,使其適合在較小的屏幕上不是一個好主意。您的用戶希望在桌面版網(wǎng)站上看到與您提供的內容相同的內容,只是格式不同。許多響應性網(wǎng)站選擇在漢堡菜單中隱藏內容 - 通常在屏幕頂部顯示的三層菜單圖標。漢堡菜單有效地保持您的網(wǎng)站干凈和最小,但它不是你唯一的選擇。
漢堡菜單圖標
你不希望你的響應式網(wǎng)站顯得雜亂,但你也不想讓導航比它更難。您可能只有幾秒鐘時間才能在用戶決定點擊之前向他們提供他們想要的內容。不要浪費它通過讓他們尋找信息。目標是實現(xiàn)內容和功能的平衡 - 響應式網(wǎng)站在每個設備上提供相同的內容和功能。丟失大部分屏幕空間會迫使您縮小內容的焦點,但它不應該損害質量。
做:提供自適應圖像
查看產品圖片的能力至關重要,但更重要的是優(yōu)化響應式網(wǎng)站的圖片。一旦您實現(xiàn)了移動使用的網(wǎng)站可擴展性,您就必須專注于調整圖像。在您的響應式網(wǎng)頁設計策略中加入圖片管理,例如自動檢測并適應用戶屏幕尺寸的技術。
自適應映像使用一行Javascript,一個PHP文件和一個.htaccess文件,允許您將文件拖放到根目錄中。您的響應式網(wǎng)站的圖片需要根據(jù)屏幕尺寸進行自動替換,這將導致更少的工作量和更快的加載時間。你可以自定義你的圖片,圖像應具有最高分辨率,以實現(xiàn)理想的優(yōu)化。
不要:忽略觸摸設計
大多數(shù)移動用戶都使用觸摸屏設備,并希望您的網(wǎng)站能夠輕松地從鼠標和鍵盤適應手指和拇指。這超出了響應設計和觸摸設計。您需要為移動用戶提供完全功能,就像他們在桌面上一樣。
移動分辨率圖表
完全取消觸摸會使用戶失望,因為他們不想從桌面返回到您的網(wǎng)站。在移動網(wǎng)站中創(chuàng)建鏈接更簡單,更大,更容易推送。使用觸摸目標來解釋人類手指的不精確觸摸與鼠標的更精確的點擊。手指友好的移動設計應該適合于普通人的手指。太小會使您看起來沒有針對移動設備優(yōu)化您的網(wǎng)站,但過大會使他們無意中點擊另一個目標。
通過創(chuàng)建流暢的布局,充分利用您的響應式網(wǎng)站。您無法控制消費者使用哪些設備訪問您的網(wǎng)站。因此,設計將根據(jù)設備自動更改布局。使用以百分比而不是以像素為單位的尺寸,確保您的布局靈活。通過切換像素,您不必考慮屏幕寬度或設備大小,并可以找到一個解決方案為每個設備。
不要:膨脹文件大小
我們了解您希望將內容設置為較大,以便用戶可以在較小的屏幕上看到它,但這并不意味著您的文件大小會變大。您需要包含與您的常規(guī)網(wǎng)站相同的內容,但減少它適合在移動網(wǎng)站上。如果您的響應式網(wǎng)站的文件大小較大,加載時間會緩慢,導致大多數(shù)用戶在看到您的網(wǎng)站之前點擊了。加載網(wǎng)站需要5秒鐘以內 - 速度越快越好。
移動網(wǎng)站設計可能首先出現(xiàn)限制性,因為您必須對舊的網(wǎng)頁設計應用許多新規(guī)則。然而,一旦你了解響應式網(wǎng)頁設計的基礎知識,你就有更多的創(chuàng)造力空間比典型的桌面。您可以使用觸摸,GPS和用戶只能在移動設備上使用的無數(shù)其他工具。這打開了一個機會,為用戶提供獨特的東西。在框之外思考,并為用戶提供他們會記住的移動體驗。
文章標簽:
移動網(wǎng)站 響應性設計
文章評論: