如何實現手機優先的成功

從上而下的手機設計方法是首選

在移動開發中,需要擁有以手機為先的思維。其中一種適用於這種手機優先思維的方法是頂部向下的方式。這種方法意味著在最終版本的創建過程中需要進行詳細計劃。<br/><br/>每個細節都要仔細計算和衡量,以免你的手機站點看起來像是隨後加上去的東西。而底部向上的方式則完全相反。開發是模塊化進行,過程中沒有太多計劃或思考。<br/><br/>可以想像,使用底部向上方式創建手機站點會造成災難性後果。為了獲得最佳效果,使用頂部向下方式從最小到最大考慮設計中的每一個方面。

手機菜單

手機菜單應該要使用者友善,考慮到較小的設備,並且不應該與桌面上的導覽完全相同。雖然結構不會改變,但視覺元素會有所變化,它們的外觀取決於您的設備。為您的導航創建可識別的設計模式是實現真正以使用者體驗</a>為中心的設計至關重要。<br/><br/>這並不意味著要復制之前所做的所有設計模式。相反,您必須根據您的受眾創建可識別的圖示和元素。不要忘記“為大拇指設計”,即您受眾中最大的手指大小。<br/><br/>確保您的元素根據這些因素進行設計,將產生一種迎合用戶需求、促進更好轉換率</a>和更易於使用的網站體驗。

無縫設計至關重要

創造無縫設計意味著在所有設備上創建設計元素,無論平臺如何</a>。這與我們將在下面介紹的響應式設計是不同的概念,雖然它們有一些重疊之處。如果響應式設計是用於結合桌面和移動設備,那麼無縫設計則指的是移動端的設計元素。<br/><br/>當你擁有無縫的設計元素時,它們在其他螢幕尺寸上不會出現不同。例如,在桌面上的紅色按鈕在移動端不會變成藍色按鈕。或者一個行動呼籲表單在移動裝置上與桌面裝置相比也不會有所不同。<br/><br/>不同的元素只會使用戶感到困惑,如果他們在某些情況下在不同設備之間切換,這只會讓他們更加困惑。

考慮大型任務及其流程

你上次是否曾經使用手機應用程式時,發現</a>其執行某些操作的過程比網站本身還要困難?這種情況可能是因為手機網頁開發被忽略了,而範圍蠕變和判斷失誤也使得完成應用程式的工程路徑變得模糊不清。如果你的手機網站結帳流程對於使用者來說令人困惑,那麼你可以跟轉換率</a>說再見了。不要在手機螢幕上包含細微的操作。<br/><br/>相反,你必須確保主要操作可見且容易完成。如果使用者必須四處尋找信用卡付款或花費很大力氣才能找到其他東西,他們會放棄購物車。同時也要確保他們至少能夠保存進度。<br/><br/>由於移動設備主要在外出時使用,使用者必須以某種方式保存他們的進度。創建一個無法保存位置的移動體驗只會引起惱怒和困擾,沒有其他更多價值。

避免強制註冊

應該避免使用強制註冊的登入牆。這些登入牆會在用戶進入應用程式時立即顯示,迫使用戶註冊。當你強制用戶註冊時,並不能贏得他們的好感。<br/><br/>迫使用戶註冊可能會引起他們的不悅,並導致他們不喜歡你的移動體驗。僅僅做到這一點也會降低可信度,讓人們不想使用你的服務。你第一次因為某個應用程式的登入牆而感到沮喪並選擇不使用它是什麼時候呢?

讓返回首頁變得簡單

在網站上添加一個簡單的圖示,讓用戶可以方便地返回首頁,是創建一個易於連結回首頁的好方法。如果你不為用戶提供回到首頁的方便途徑,他們很可能會放棄你的網站轉而尋找其他能夠提供這種功能的網站。移動設備用戶並不像我們這樣具有智慧SEO技巧</a>,他們需要幫助才能找到移動版網站中各項功能的位置,直到他們對其更加熟悉。<br/><br/>創造模棱兩可只會導致不良使用者介面和減少轉換率</a>,因為你的用戶無法理解物品所在之處。僅憑你對行業的瞭解並不意味著客戶也以相同方式瞭解它。

使用正確的版面配置

在手機設備上建立版面佈局確實具有一些挑戰,但只要你瞭解其中幾個要點,就能夠做到。首先,你必須知道觸控螢幕上的目標要完成什麼功能以及如何運作</a>。設計適合手指大小的目標非常重要,因為這意味著使用者可以使用你的手機網站設計。<br/><br/>Adobe建議將手機觸控目標設計成這個大小:7-10毫米。他們認為這個大小「讓手指能夠輕鬆地瞄準和觸摸目標,不會感到太多挫折」。整個目標是使手機可用性比原本更容易,並且讓使用者更容易使用你的網站。<br/><br/>

不要忘記文字大小!

還有一個設計考慮是文字大小。不僅要考慮導航元素的文字大小,還要注意頁面上常規文本內容</a>的大小。如果沒有清晰可讀的適當字號,你可能會失去讀者,也無法有效地溝通。<br/><br/>在你的移動網站應用中包含合適的文字大小將幫助你保留讀者並使他們停留在你的網站上。別讓像文字大小這樣簡單的事情阻止你吸引觀眾並與他們互動。 文本顏色對比度也是需要考慮的問題。<br/><br/>這涉及到可訪問性,因為對比度越差,就越排斥某些類型的讀者(特別是色盲者)。使用這裡提供的網站顏色對比度檢查工具</a>來確定你所選顏色是否符合所需等級下最低閾值的可訪問性要求。Adobe 建議使用 4.5:1 的對比度比例。<br/><br/>更多關於 W3</a>C 色彩可訪問性指南以瞭解更多關於色彩對比度比例方面的資訊。

Google的移動優先索引只包含移動結果

一度以前,在Google的移動優先指數出現之前,搜索結果會同時包含桌面和移動設備的內容</a>。如果用戶在桌面上進行搜索,他們會得到適用於桌面的篩選結果。如果使用者在移動設備上進行搜索,他們會看到適用於移動設備的結果。<br/><br/>然而,這種情況已經改變了。自從Google推出了移動優先更新以後,所有的搜索結果都是根據索引頁面</a>的移動版本確定的。這個考慮因素</a>非常重要,因為它將影響你如何</a>為你的移動設備創建內容</a>和設計介面。<br/><br/>

Google認為什麼是移動裝置

為了在移動SEO</a>領域中追求正確的策略,我們首先必須明確Google認為什麼是移動設備。他們是否將所有可攜式設備都視為移動設備?在Google的Web開發者指南中提到: "移動:在本文檔中,“移動”或移動設備指的是智能手機,例如運行Android、iPhone或Windows Phone系統的設備。移動瀏覽器與桌面瀏覽器類似,它們可以呈現HTML</a>5規範的廣泛內容</a>,但螢幕尺寸較小,並且幾乎所有情況下它們的默認方向是垂直。<br/><br/> 平板電腦:我們將平板電腦視為一種獨立類別的設備。當我們提到移動設備時,通常不包括平板電腦。平板電腦往往具有較大的螢幕,這意味著除非您提供針對平板電腦進行了優化的內容</a>,否則用戶期望看到的是與桌面瀏覽器相同的網站,而不是智慧手機瀏覽</a>器上的內容</a>。<br/><br/>" 正如您所見,追求響應式設計方法是更可取的,因為它針對所有移動設備並符合Google對於移動友好性的要求。這就是為什麼從頂部開始的方法非常重要。它考慮了所有可能的設備,而不僅僅是一兩個設備。<br/><br/>

確保你的內容一致性

根據這個案例研究</a>,你的桌面和行動裝置上的內容</a>必須相同。也許你會想知道長篇內容</a>在哪一種平臺上更適合,但令人驚訝的是,根據這個案例研究</a>,人們實際上會閱讀行動裝置上的長篇內容</a>。 這個案例研究</a>還指出了以下情況:“數據也顯示,雖然短篇新聞比長篇新聞更常見且吸引更多流量,但長篇文章的訪問率幾乎相同。<br/><br/>76% 的文章長度都少於 1,000 字。不過根據每篇文章來看,長篇故事吸引的訪問者幾乎與短篇相同:每篇長篇文章有 1,53</a>0 次完整互動,每篇短篇則有 1,576 次。” 如果你在桌面和行動裝置上的內容</a>不一致,可能會被指控使用偽裝或其他操控性 SEO</a> 策略。<br/><br/>當有疑問時,請始終在兩個平臺上使用相同的內容</a>。

確保 Google 能夠爬取所有資料

對於某些網站來說,你的robots.txt檔可能會有很多被封鎖的資源。這些資源包括JavaScript、CSS和其他類型的檔案,你可能不希望它們被索引。如果沒有適當的開發監督,你很快就會忽視這些類型的檔案。<br/><br/>請對你的robots.txt檔進行分析,確保它沒有阻止太多關鍵資源。這些資源都會影響渲染、爬行和索引。為了充分利用</a>你的移動網站,你必須確保你的網站能被Google移動版完全爬取並訪問到。<br/><br/>就像Google的Gary Illyes所說:“讓那個該死的網站可爬取!”

在被處罰前處理煩人的彈出式視窗

你是否知道interstitials?如果你只是偶爾遇到它們,可能不知道它們是什麼。我們說的是那些在移動設備上阻擋網頁的廣告。這些廣告似乎永遠不想停止,或者讓你從中消失?這就是所謂的interstitials,或者模塊彈出廣告突然出現在你手機螢幕上。<br/><br/>它們阻礙了你的瀏覽體驗,有時甚至迫使你點擊廣告。Google在2017年推出了對interstitials的處罰措施。為了確保你不會觸犯Google關於此類問題的指南,你必須確保:站點沒有用廣告藏起內容</a>;彈出視窗</a>有其目的;使用WordPress外掛程式符合Google對interstitials的指南要求。<br/><br/>

測試您的手機設計並根據需要進行調整

一旦你的設計完成,使用像Browser Stack這樣的測試程式來進行測試是一個很好的主意。這個程式可以讓你在盡可能多的不同平臺上查看你的移動網站,提供直接的反饋,而這些反饋是傳統分析所無法得到的。建立一個測試方法論將使你能夠提高效率,在成為客戶問題之前就發現</a>設計問題。<br/><br/>你還可以使用Chrome和Firefox的Web Developer Toolbar擴展,在瀏覽器中直接測試您的移動設計。

頁面速度至關重要

在移動設備上,更快的網站應該是您最終的目標。現在比以往任何時候都更需要優化頁面</a>速度,這應成為您優化策略的重要部分。有多種方法可以實現網站極低的頁面速度</a>。<br/><br/>Adobe Photoshop 的無失真圖像壓縮</a>功能非常適合用於調整和壓縮圖形。物理調整和壓縮之間有什麼區別呢?當您對圖像進行物理調整時,只會調整寬度和高度尺寸,圖元密度保持不變。因此,您會得到一張較小的圖片,但由於那張3</a>00 MB 的圖片而使頁面大小仍然是3</a>00 MB。<br/><br/>壓縮圖片則指減少圖像的物理圖元密度。Adobe Photoshop 的無失真圖像壓縮</a>可以同時處理兩者,您必須選擇適當的設置來實現此目的。如果您使用 WordPress 網站,可以使用一個名為 SMUSH 的外掛程式來同時完成這兩個步驟,從而得到一張在移動設備上加載速度足夠快的最終圖片。<br/><br/>

相關數據:

• 全球智慧手機用戶數預測於2022年將達到55.4億人 來源: statista
• 美國2020年行動購物銷售額達到1.03兆美元 來源: emarketer
• 英國2019年行動支付交易金額佔整體消費的22.2% 來源: statista
• 日本2020年智慧手機用戶佔總人口的68.7% 來源: statcounter
• 法國2018年移動應用程式下載量達到36.9億次 來源: app annie
• 台灣2020年智慧手機普及率達到79.5% 來源: 行政院研究發展考核委員會

對你的站點進行頁面速度測試

在優化過程中,評估您網站的頁面速度</a>並進行必要的調整是另一個關鍵點。使用這裡的工具</a>,您可以測試您的頁面速度</a>並進行必要的更改以滿足它們的建議。定期測試您的網站可以讓您瞭解您的網站開發人員或團隊中其他成員最近所做的任何更改。<br/><br/>同時,它也有助於掌握和解決頁面速度</a>上可能存在的問題。當有疑問時,始終進行測試!