提升移動(dòng)網(wǎng)站用戶(hù)體驗(yàn)的10種方法

時(shí)間：2024-05-21 18:30:01 | 來(lái)源：建站知識(shí)

時(shí)間：2024-05-21 18:30:01 來(lái)源：建站知識(shí)

您有一個(gè)移動(dòng)網(wǎng)站，對(duì)嗎？是響應(yīng)式的還是您使用插件使其外觀更好？它會(huì)轉(zhuǎn)化客戶(hù)嗎？多年來(lái)，隨著移動(dòng)互聯(lián)網(wǎng)的使用激增，您的移動(dòng)網(wǎng)站的用戶(hù)體驗(yàn)（或移動(dòng)UX）應(yīng)獲得與桌面網(wǎng)站的用戶(hù)體驗(yàn)一樣多的關(guān)注。因?yàn)榘俣葧?huì)越來(lái)越根據(jù)您的移動(dòng)版本來(lái)判斷您的網(wǎng)站。在本文中，我們想分享您可以做的十件事，以增強(qiáng)您的移動(dòng)網(wǎng)站的用戶(hù)體驗(yàn)（UX）。

盡管本文中提到的所有內(nèi)容也適用于平板電腦，但在撰寫(xiě)本文時(shí)，我們會(huì)牢記智能手機(jī)。但是，在2020年，您不僅必須牢記智能手機(jī)，因?yàn)樵S多其他設(shè)備會(huì)消耗您的內(nèi)容?？梢栽谀闹悄苁謾C(jī)上閱讀此文章？當(dāng)然可以，為什么不呢。

1.使用基于任務(wù)的設(shè)計(jì) 在設(shè)計(jì)用戶(hù)時(shí)要牢記用戶(hù)的移動(dòng)網(wǎng)站及其結(jié)構(gòu)，同時(shí)不要忘記移動(dòng)SEO。您的用戶(hù)使用手機(jī)。他們可能會(huì)去任何地方，需要檢查您網(wǎng)站上的內(nèi)容。那會(huì)是什么呢？考慮一下訪(fǎng)客在您的網(wǎng)站上所做的事情（檢查百度統(tǒng)計(jì)，對(duì)您的業(yè)務(wù)使用常識(shí)或進(jìn)行適當(dāng)?shù)臏y(cè)試）。確定您的移動(dòng)網(wǎng)站的首要任務(wù)。



Wijchen.nl具有基于任務(wù)的設(shè)計(jì)

最高任務(wù)是對(duì)客戶(hù)最重要的一小部分任務(wù)（通常少于十個(gè)，通常少于五個(gè)）。這些是用戶(hù)期望在您的網(wǎng)站上快速完成的關(guān)鍵任務(wù)。優(yōu)化您的移動(dòng)網(wǎng)站，使這些任務(wù)可以最輕松地訪(fǎng)問(wèn)。

您需要完成任務(wù)。如果有人找到您的網(wǎng)站并開(kāi)始瀏覽，請(qǐng)確保他們可以輕松找到并完成他們想做的事情。在他們的手機(jī)上，可能有很多他們習(xí)慣使用的應(yīng)用程序。在移動(dòng)設(shè)備上可能會(huì)使用戶(hù)難以集中精力。干擾無(wú)處不在，而不僅僅是在電話(huà)上。在切換到其他應(yīng)用之前，請(qǐng)?jiān)O(shè)計(jì)您的移動(dòng)用戶(hù)體驗(yàn)以確保它們能夠完成任務(wù)。

2.添加清除菜單和搜索選項(xiàng) 移動(dòng)UX的主要元素之一是搜索。您必須能夠立即搜索。閱讀頁(yè)面或單擊另一個(gè)頁(yè)面時(shí)，搜索選項(xiàng)應(yīng)始終可用。事實(shí)是，盡管我們努力提供如上一節(jié)所述的最簡(jiǎn)單的網(wǎng)站，但總會(huì)有一些元素不那么容易。對(duì)于所有這些內(nèi)容，最好使用移動(dòng)搜索選項(xiàng)。

如果您是在線(xiàn)銷(xiāo)售服裝，那么該搜索選項(xiàng)也可能是您的移動(dòng)首頁(yè)上最重要的元素。在這種情況下，請(qǐng)?jiān)趦?nèi)容區(qū)域中顯示該搜索選項(xiàng)，然后通過(guò)其他頁(yè)面上的菜單欄使其可用。

與搜索相關(guān)的移動(dòng)UX的另一件事：擁有選項(xiàng)只是第一步。確保您的內(nèi)部搜索結(jié)果頁(yè)看起來(lái)也很棒。結(jié)果應(yīng)按相關(guān)性排序，例如在臺(tái)式機(jī)和移動(dòng)設(shè)備上。確保可以區(qū)分單個(gè)結(jié)果，從而改善結(jié)果的分離。

3.無(wú)需分隔線(xiàn) 關(guān)于缺乏分離；這并不意味著您應(yīng)該在移動(dòng)網(wǎng)站上使用各種分隔符。分頻器會(huì)占用空間，而這可能會(huì)對(duì)移動(dòng)UX產(chǎn)生負(fù)面影響?？紤]樣式元素的方式，使它們看起來(lái)都像單獨(dú)的部分，而無(wú)需分隔線(xiàn)。使用邊框，空格，標(biāo)題。在不增加僅占用空間的線(xiàn)元素的情況下，可以做很多事情來(lái)改進(jìn)移動(dòng)UX。當(dāng)然，不禁止使用它們。只要確保他們適合并且不要分散用戶(hù)執(zhí)行任務(wù)的注意力即可。

4.使用簡(jiǎn)短表單 與您的桌面網(wǎng)站一樣，您的移動(dòng)網(wǎng)站可能或應(yīng)該針對(duì)轉(zhuǎn)化。購(gòu)買(mǎi)產(chǎn)品或獲取服務(wù)報(bào)價(jià)。填寫(xiě)聯(lián)系表都是需要用戶(hù)輸入的所有操作。在手機(jī)上，過(guò)長(zhǎng)的表單破壞了移動(dòng)用戶(hù)體驗(yàn)。用戶(hù)可能會(huì)填寫(xiě)這些內(nèi)容，但由于它是一個(gè)過(guò)長(zhǎng)的表單，因此功能強(qiáng)大。

為了獲得最佳的移動(dòng)用戶(hù)體驗(yàn)，您希望表格盡可能短。刪除所有您想問(wèn)但不需要的東西。

5.保持網(wǎng)站簡(jiǎn)潔明了 您可能會(huì)認(rèn)為您的桌面網(wǎng)站在所有這些顏色和巨大圖像下看起來(lái)都很棒，但是在移動(dòng)網(wǎng)站上，效果會(huì)有所不同。重點(diǎn)將減少。您的網(wǎng)站不必僅是黑白的，但是一個(gè)不錯(cuò)的白色背景，黑色字母以及一種或兩種以上的支持顏色就足以成為更好的移動(dòng)用戶(hù)體驗(yàn)。

請(qǐng)確保您的移動(dòng)網(wǎng)站和臺(tái)式機(jī)網(wǎng)站具有移動(dòng)奇偶校驗(yàn)功能-它們應(yīng)在移動(dòng)和臺(tái)式機(jī)上提供相同的體驗(yàn)。這不僅適用于內(nèi)容，還應(yīng)適用于設(shè)計(jì)。另外，今天當(dāng)您評(píng)估網(wǎng)站時(shí)，應(yīng)始終從移動(dòng)優(yōu)先的角度來(lái)看待它。因此，如果您要為網(wǎng)站開(kāi)始改版，請(qǐng)首先進(jìn)行移動(dòng)化。

需要淡化事物也適用于網(wǎng)站動(dòng)畫(huà)效果等。您添加到站點(diǎn)的JavaScript的每一個(gè)不必要的部分都使得加載和運(yùn)行變得更加困難。此外，動(dòng)畫(huà)在移動(dòng)網(wǎng)站上并不總是很有意義。保持網(wǎng)站簡(jiǎn)潔明了！

6.按鍵區(qū)域 它是如此明顯，但仍然值得關(guān)注。多數(shù)使用手指和拇指來(lái)瀏覽移動(dòng)網(wǎng)站，而按鈕并不總是提供足夠的空間來(lái)輕松點(diǎn)擊它們。在百度的開(kāi)發(fā)人員文檔中，您可以在“可訪(fǎng)問(wèn)的點(diǎn)擊目標(biāo)”下找到它。我們還需要能夠使用該拇指單擊元素。

在具有正確設(shè)置的移動(dòng)視口的網(wǎng)站上，建議的最小觸摸目標(biāo)大小最小為48個(gè)獨(dú)立于設(shè)備的像素。例如，雖然一個(gè)圖標(biāo)的寬度和高度只能為24px，但是您可以使用其他填充將點(diǎn)按目標(biāo)的尺寸提高到48px。48×48像素區(qū)域?qū)?yīng)于9mm左右，大約相當(dāng)于一個(gè)人的指墊區(qū)域的大小。

此外，移動(dòng)設(shè)備上的觸摸目標(biāo)應(yīng)具有至少1 cm x 1 cm的渲染尺寸，以防止錯(cuò)誤和挫敗感。與按鈕擊中區(qū)域密切相關(guān)的是觸摸元素之間往往過(guò)于靠近。單擊一個(gè)鏈接結(jié)果卻到了其他地方這就很煩人了，只是因?yàn)樗赃叺逆溄犹拷胍c(diǎn)擊的鏈接。

7.不要使用太多的字體 多樣化的字體可以造就或破壞移動(dòng)網(wǎng)站。您不僅會(huì)選擇重要的字體類(lèi)型，而且還會(huì)選擇這些字體的大小。您不能在移動(dòng)網(wǎng)站上只使用桌面字體大小。這有兩個(gè)原因：

1. 手機(jī)屏幕尺寸。您不希望標(biāo)題填滿(mǎn)整個(gè)屏幕。您要確保文章在頁(yè)面的第一個(gè)視圖內(nèi)開(kāi)始。您也不希望基本字體（如您的段落字體）太小而無(wú)需捏和縮放來(lái)閱讀。
2. 當(dāng)使用三種以上的字體大小時(shí)，會(huì)造成混亂。大小差異將更加明顯。這就是為什么您應(yīng)該將字體大小的數(shù)量限制為兩個(gè)，也許是三個(gè)。

Google的移動(dòng)友好測(cè)試甚至可以檢查您的字體大小是否正確。這主要用于正文字體，但仍然適用。

8.優(yōu)化速度 正確的移動(dòng)UX水平的另一個(gè)主要因素是速度。有多種工具可以檢查站點(diǎn)速度。在大多數(shù)情況下，您可以采取幾種措施來(lái)提高性能。第一個(gè)總是顯而易見(jiàn)的：圖像優(yōu)化。您至少應(yīng)使用Squoosh之類(lèi)的工具減小圖像尺寸。除此之外，還應(yīng)該合并并最小化已加載的CSS和JavaScript文件。與服務(wù)器建立的連接越少，您的網(wǎng)站越快，移動(dòng)UX越好。當(dāng)然，您還應(yīng)該使用優(yōu)質(zhì)的托管服務(wù)，因?yàn)閷?duì)于許多站點(diǎn)來(lái)說(shuō)，托管通常是一個(gè)捷徑。

網(wǎng)站速度是搜索引擎的熱門(mén)話(huà)題。在2021年，還將根據(jù)移動(dòng)網(wǎng)站為用戶(hù)提供的體驗(yàn)來(lái)對(duì)其進(jìn)行評(píng)判。當(dāng)然，站點(diǎn)速度是這些因素之一。

9.不要太多廣告 許多網(wǎng)站使用廣告來(lái)賺錢(qián)，這完全可以。但是，您不應(yīng)該做的是用彈出窗口等嚇倒用戶(hù)。當(dāng)您讓用戶(hù)體驗(yàn)到的第一件事是注冊(cè)表單時(shí)，您就不會(huì)真正尊重用戶(hù)。在介紹廣告和CTA之前，請(qǐng)確保適當(dāng)加載內(nèi)容。另外，保持它們的品味并淡化。您正在尋找與用戶(hù)建立聯(lián)系并建立聯(lián)系的方式，當(dāng)他們?cè)谶M(jìn)入您的移動(dòng)網(wǎng)站后第二次閃過(guò)“購(gòu)買(mǎi)我的產(chǎn)品”時(shí)，這種情況就不會(huì)發(fā)生。這是一種糟糕的用戶(hù)體驗(yàn)，甚至可能使搜索引擎不爽。

10.一次又一次測(cè)試您的移動(dòng)用戶(hù)體驗(yàn)。 當(dāng)為訪(fǎng)問(wèn)者提供響應(yīng)式網(wǎng)站時(shí)，您需要確保對(duì)桌面網(wǎng)站上的所有更改都在網(wǎng)站的移動(dòng)版本上進(jìn)行了測(cè)試。這是確保您的移動(dòng)網(wǎng)站始終保持最新?tīng)顟B(tài)的唯一方法。確保一次又一次測(cè)試您的移動(dòng)網(wǎng)站。

因此，總而言之，移動(dòng)UX涉及很多事情。在本文中，我們討論了改善移動(dòng)用戶(hù)體驗(yàn)的以下十種方法：

1. 使用基于任務(wù)的設(shè)計(jì)
2. 提供帶有搜索選項(xiàng)的優(yōu)質(zhì)菜單
3. 當(dāng)區(qū)域分明時(shí)，無(wú)需添加分隔線(xiàn)
4. 表單越短越好
5. 不要在設(shè)計(jì)中添加太多顏色
6. 確?？梢詥螕舭粹o和鏈接
7. 不要過(guò)度使用字體大小變化
8. 使您的網(wǎng)站盡可能快
9. 不要做侵入性廣告和彈出窗口
10. 在移動(dòng)設(shè)備上測(cè)試對(duì)網(wǎng)站的所有更改

期待您的看法！ 這些只是我們認(rèn)為優(yōu)化移動(dòng)用戶(hù)體驗(yàn)時(shí)應(yīng)考慮的許多事情中的十件事。我們確定您可以提出更多建議，并且期待您對(duì)此主題的看法：您認(rèn)為移動(dòng)網(wǎng)站還應(yīng)考慮哪些其他事項(xiàng)？