在過去的12個(gè)月里，全球智能手機(jī)用戶預(yù)計(jì)將達(dá)到35億。這是一個(gè)顯著的9.3%的增長。

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

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

理解嘗試設(shè)計(jì)

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

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

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

那么，如何開始呢?

1. 從正確的工具開始

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

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

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

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

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

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

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

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

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

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

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

3.使用響應(yīng)圖像和svg

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

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

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

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

復(fù)雜的插圖是HubSpot品牌的重要組成部分。如果這些圖像被保存為png或其他替代文件，那么加載它們將花費(fèi)很長時(shí)間。因?yàn)樗麄兌际莝vg，所以你可以在桌面和移動(dòng)設(shè)備上享受相同的體驗(yàn)。

4. 排版要正確

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

盡量讓你的內(nèi)容更容易閱讀。看看在各種設(shè)備上看起來最具吸引力的字體。

記住要平衡正文和標(biāo)題字體的大小。你需要確保用戶滾動(dòng)每一頁時(shí)的體驗(yàn)是一致和流暢的。以IMPACT網(wǎng)站的手機(jī)版為例。

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

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

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

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

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

利用智能手機(jī)設(shè)計(jì)可以提供的獨(dú)特功能，讓你有機(jī)會(huì)獲得獨(dú)特的用戶體驗(yàn)。

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

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

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

充分利用移動(dòng)優(yōu)先設(shè)計(jì)

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

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

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