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

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

如果運(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)頁(yè)設(shè)計(jì)和開(kāi)發(fā)原則的第一步是理解“移動(dòng)優(yōu)先設(shè)計(jì)”的概念，以及它是如何變化的。

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

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

那么，如何開(kāi)始呢?

1. 從正確的工具開(kāi)始

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 排版要正確

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

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

記住要平衡正文和標(biāo)題字體的大小。你需要確保用戶滾動(dòng)每一頁(yè)時(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)擊它。

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

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

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

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

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

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

另外，你也可以研究AR技術(shù)。這可以讓你的用戶練習(xí)如何將他們可能正在考慮從網(wǎng)上零售商購(gòu)買的家具放置到他們的房子里，這樣他們就可以看到他們?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)容。

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