在過去的12個月里，全球智能手機用戶預計將達到35億。這是一個顯著的9.3%的增長。

在一個每個人都與自己的移動設(shè)備不斷連接的世界里，網(wǎng)頁開發(fā)者和設(shè)計師需要考慮如何創(chuàng)造吸引人的體驗的新規(guī)則是有道理的。畢竟，我們大多數(shù)人發(fā)現(xiàn)每天用智能手機瀏覽網(wǎng)頁要比坐在筆記本電腦前方便得多。

如果運氣好的話，你已經(jīng)在采取行動優(yōu)化你的手機網(wǎng)站，但標準一直在變化。為了確保你的網(wǎng)站達到標準，以下是你的指南，讓你的網(wǎng)站優(yōu)先考慮移動設(shè)備，為新的一年做好準備。

理解嘗試設(shè)計

更新網(wǎng)頁設(shè)計和開發(fā)原則的第一步是理解“移動優(yōu)先設(shè)計”的概念，以及它是如何變化的。

有了響應式網(wǎng)站，你可以根據(jù)任何設(shè)備的屏幕大小進行調(diào)整;對于移動優(yōu)先網(wǎng)站，你首先要關(guān)注的是人們在移動設(shè)備上獲得的用戶體驗，以此為起點，然后從那里開始構(gòu)建。你應該先考慮移動設(shè)備，而不是在建立臺式機網(wǎng)站時再考慮移動設(shè)備。

甚至谷歌最近也通過移動優(yōu)先索引算法強調(diào)了這一過程的需求。如果你不能為移動優(yōu)先而設(shè)計，那么你的客戶可能無法在搜索引擎排名中上升。

那么，如何開始呢?

1. 從正確的工具開始

Web開發(fā)人員和設(shè)計人員如果沒有一個很棒的工具包就什么都不是。

好消息是，有一些解決方案可以幫助你掌握適合移動用戶體驗的技能。例如，Skeleton非常適合需要流動網(wǎng)格和最小編譯的小型項目。

另外，Bootstrap可以為移動設(shè)備的前端開發(fā)提供一個通用的解決方案。有一個默認的網(wǎng)格系統(tǒng)，大量的組件和JavaScript插件可以使用。

有了正確的工具，您可以將對您的網(wǎng)站項目最有價值的內(nèi)容最小化并按優(yōu)先級排序。當涉及到內(nèi)容和圖像時，這對于最大化網(wǎng)站速度和創(chuàng)造清晰度是至關(guān)重要的。

例如，看看ESPN的網(wǎng)站;它被分成非常容易理解的內(nèi)容類別，非常適合在智能手機上滾動。這些網(wǎng)格狀的視頻讓你感覺你在使用一個像YouTube這樣的工具。

2. 優(yōu)先考慮嘗試元素

一旦你有了合適的工具來幫助你，是時候開始從頭開始構(gòu)建你的移動優(yōu)先網(wǎng)站了。與其直接考慮最新的設(shè)計趨勢，還不如從基礎(chǔ)入手。

例如，移動頁面中的導航通常隱藏在漢堡按鈕下面。不過，您也可以將這個概念提升到下一個層次。例如，Shojin手機網(wǎng)站只在導航欄中展示了最重要的網(wǎng)站選項，以避免讓用戶不知所措。

這里的關(guān)鍵是讓事情盡可能的簡單，當你的用戶訪問你的網(wǎng)站時，不要限制他們可以做什么。盡管您希望保持站點上的交互元素數(shù)量較少，但您還需要確保這些元素易于發(fā)現(xiàn)和使用。

所有的按鈕和cta應該是清晰的和可點擊的。字體必須足夠大，可以從任何屏幕上讀取，導航系統(tǒng)必須100%簡單，不會減慢速度。

我們建議所有可點擊元素的平均高度至少為48像素。

3.使用響應圖像和svg

圖片是任何網(wǎng)站的重要組成部分。它們?yōu)槟愕脑O(shè)計增加了背景和吸引力。然而，如果你不小心的話，它們也會嚴重降低你的網(wǎng)站速度。

記住，當涉及到意象時，不同的手段有不同的要求。一個桌面頁面可能需要1200px寬的圖像，而一個移動的頁面最多需要400px寬的圖像。讓你的圖像工作的老方法是加載一個大分辨率的圖像，然后在每個平臺上使用相同的文件。不幸的是，這大大降低了下載時間。

相反，最好為移動和桌面解決方案提供至少兩個相同圖像的不同版本。您也可以考慮SVG。

svg具有難以置信的可伸縮性——比位圖更強。使用SVG，您可以確保任何圖標或圖形在所有設(shè)備上都保持清晰和可點擊。因為這些文件通常更小，你的網(wǎng)站加載也更快!Hubspot非常擅長使用svg。

復雜的插圖是HubSpot品牌的重要組成部分。如果這些圖像被保存為png或其他替代文件，那么加載它們將花費很長時間。因為他們都是svg，所以你可以在桌面和移動設(shè)備上享受相同的體驗。

4. 排版要正確

當提到移動優(yōu)先設(shè)計時，不僅僅是大的圖形和圖像對你的網(wǎng)站有很大的影響。你還需要考慮你的網(wǎng)站在所有設(shè)備和平臺上的易讀性和清晰度。如果人們不能讀懂你為之設(shè)計的公司的價值主張，你就會遇到大問題。

盡量讓你的內(nèi)容更容易閱讀?？纯丛诟鞣N設(shè)備上看起來最具吸引力的字體。

記住要平衡正文和標題字體的大小。你需要確保用戶滾動每一頁時的體驗是一致和流暢的。以IMPACT網(wǎng)站的手機版為例。

標題不像桌面版本的網(wǎng)站那么大，而且它們顯示在特色圖片的下面，而不是上面。然而，這有助于為移動用戶提供更吸引眼球和結(jié)構(gòu)化的體驗。

甚至還有一個方便的“搜索引擎優(yōu)化”標簽，如果用戶想找到更多相關(guān)文章，可以點擊它。

說到排版，請記住，重要的不只是大小和清晰度，還有網(wǎng)站的結(jié)構(gòu)。你的類型應該自然地引導你的訪問者沿著頁面。

5. 掌握可用的設(shè)備特性

最后，在智能手機上，你可以完成一系列在臺式設(shè)備上無法完成的令人驚嘆的事情。你的用戶可以在他們的移動瀏覽器中打電話、打開應用程序、發(fā)送消息等等。他們還可以在房間里移動智能手機，利用AR和VR等概念。

利用智能手機設(shè)計可以提供的獨特功能，讓你有機會獲得獨特的用戶體驗。

充分利用手機體驗比你想象的要簡單得多。例如，在桌面網(wǎng)站上，您可以在聯(lián)系頁面上列出您的電話號碼。在手機網(wǎng)站上，點擊該號碼就可以開始呼叫。你也可以用同樣的方法處理電子郵件地址和社交媒體圖標。

根據(jù)你的實驗性程度，你還有很多機會超越手機功能。你可能決定創(chuàng)建一個網(wǎng)站的移動應用程序版本，你的客戶可以下載到他們的手機上。

另外，你也可以研究AR技術(shù)。這可以讓你的用戶練習如何將他們可能正在考慮從網(wǎng)上零售商購買的家具放置到他們的房子里，這樣他們就可以看到他們?nèi)绾闻c其他室內(nèi)設(shè)計選擇工作。

充分利用移動優(yōu)先設(shè)計

最終，在現(xiàn)代世界，擁有一個可在移動和桌面設(shè)備上運行的響應式網(wǎng)站是必須的。然而，超越移動優(yōu)先設(shè)計是超越游戲的好方法。

如果你能夠?qū)Ｗ⒂趧?chuàng)建一個將移動用戶體驗放在首位的網(wǎng)站，那么你就能夠創(chuàng)造出更有可能吸引用戶注意力并傳遞令人驚訝的體驗的內(nèi)容。

如果沒有其他的東西，向你的客戶展示你有能力為手機設(shè)計，這是確保你能獲得盡可能多的新項目機會的好方法。