42個移動端啟動頁面優化技巧

我們都聽過這句話，“你只會有一次機會去打造第一印象”, 當涉及到移動端的啟動頁面時，這句話會更加令人信服. 在最基本的層面上，啟動頁面將會是消費者同你網站的第一次接觸.

擁有好的第一印象是很重要的. 今年早些時候我們釋出了這篇文章， 《響應式設計不是一種移動端優化策略》 ，它專門講為你的行動通訊媒介打造專用移動端啟動頁面來將訪問者轉換成消費者的重要性.

 移動端統計資料:

• 今年美國智慧手機的移動商務收入為148億美元. (Statista)
• 到 2016, 移動端本地搜尋有望創造32億美元的收入，相比之下，桌面端為102億美元. (Kelsey 報告)
• 50%的智慧手機使用者曾通過他們的手機進行過消費(Prosper Mobile Insights).
• 73% 的智慧手機使用者聲稱他們曾使用移動端 web 而不是 app 來進行購買(JumpTap.com).

下面是42個移動端啟動介面的優化建議，它們能幫助你將更多的移動端訪問者轉換成付費顧客，這些建議分為如下類別:

•  策略
•  基礎
•  AB 測試

策略

1. 知道從哪裡開始 —— 建立一個完整的移動端 web 是昂貴的，且會耽誤許多的時間。所以起步的最好方式是通過跟蹤分析，瞭解轉型中的痛點和漏洞。一旦你瞭解了這些，你就會明白從哪裡開始了。你所要在轉型中關注的應該是流量，使用者量和購買模式.

2. 瞭解你的顧客的目標 —— 確保你能瞭解移動端和桌面端使用者的目標有何不同。你是不是想要他們擁有完全一樣的體驗呢？我們使用 web 和移動端相比有所不同，其體驗是不同的，而且又是我們因為完全不同的原因同時使用兩種或者三種設別.。要考慮到你的訪問者會在你的移動端站點上做些什麼，理解他們嘗試要達成的目標是什麼，並且建立一個使用者導遊來幫助他們更快跟敏捷的達成其目標。

3. 定義你的目標 —— 一旦你瞭解並且也定義好了訪問者的目標，那你就要定義好啟動頁面的目標並在心裡針對那個目標設計一種體驗。扔掉那些不重要的資訊、針對過個呼叫的動作按鈕以及其它的噱頭。要專注於啟動頁面最重要的元素，以及如何讓它們幫助你的訪問者完成你的目標。

4. 改變他們的生活：有無數的公司在做同樣的事情。人們在移動端的站點上花費的時間很少，並且需要在幾秒中之內理解你（頁面上）最有價值的部分。記得要關注客戶和他們的利益。至少要說明：“我們是世界上最好的”，多一些可以說：“這將會改變你的生活”。

5. 定義所需的操作 –  你希望訪問者在你的移動登入頁上，知道一個他所需要的操作，那就要制定一個清晰的行為召喚（call to action），最好是明顯的，具有邏輯性的，這能讓訪問者明確地移動到下一步。

6. 在重要的位置表述 – 一個訪問者應該能夠很快就區分他們，而不是去閱讀複雜的文字和故事。確保你有價值的位置是在頁面的頂部。你的標題和行為召喚（call to action）應該在摺頁（fold）（當訪問者登入到頁面的時候就能看到的部分）之上，這樣能更快速地讓訪問者取其所需。

7. 清晰地知道後果 – 重要地是讓訪問者能清晰地理解，如果他們提供資訊，你將會如何使用收集到的資訊。

基礎

8. 忘記滾動 —— 要建立出適合一個移動端螢幕邊界的頁面，並且這樣的頁面不需要滾動。這一點同時適用於橫屏和豎屏模式.

9. 同時為橫向和縱向的螢幕做設計 —— 大多數人在設計移動端啟動介面時都會考慮到縱向檢視, 但是有賴於訪問者會橫著拿他們的手機，所以他們也可能會在橫屏模式下瀏覽你的移動端網站。要確保你的移動端啟動介面針對這兩種情況都能進行縮放.

10. 使用本地化設定 —— 啟用了 GPS 的裝置可以運用特殊的本地化內容來減少文化差異的摩擦，提高轉換率。 在你的登錄檔單中你可以通過他們輸入的郵編偵測到訪問者的國別和城市。 可以讓“郵編”作為你的第一個地址資訊輸入項，並好好利用這一項資訊來做點事情。

11. 移除外部連結 —— 通過移除連線到網站其它部分的外部連結，你可以控制訪問者的瀏覽過程，使其更專注於你需要他們做出的動作。記住，移動端瀏覽器新的tab —— 開啟立即就會是訪問者原理你所設定的目標位置。要使其程式設計一次快速輕鬆的瀏覽過程，而別讓他們跑到別的地方去了。

12. 去掉雜七雜八的東西 —— 集中在重點上，儘可能保持頁面整潔，減少摩擦，保證按鈕之間的間距足夠大。雜七雜八的東西以及文字和顏色越少，訪問者越願意完成這項渠道。

13. 保持流程和設計的一致性——不要使訪問者感到驚訝或被愚弄，在手機登入介面上使用他們在廣告上看到的相同資訊和設計。與資訊保持一致，將有助於使頁面的訪問變現，同時提供廣告品質。

14.別讓使用者縮放——登入頁面的焦點由你決定。登入頁面的設計方式將決定使用者在網站上的操作。如果讓使用者縮放，他們將選擇網站的焦點，而不是你。

15.點選呼叫——很多移動搜尋使用者的目標都是立刻獲取聯絡。相比複製粘帖號碼，直接使用“點選呼叫”按鈕將更容易讓使用者快速開始對話。在開始前，設定好你的電話追蹤器以便跟蹤來電。

16. 調整鍵盤 — 確保在每個表格區域中使用合適的鍵盤。訪問者可以不用改變鍵盤輸出而快速的插入數字或者郵件。

17. 保持表格最小化 — 所有裝置上的登錄檔單都讓人沮喪，手機上的登錄檔單更是如此。由於在手機上輸入非常費勁，所以在可能的情況下儘量避免開啟文字域。確保表格夠大夠清楚，可使用全屏，並使欄位和提交按鈕大的可以用拇指點選（忽略右邊區域，因為它太小不能拖拽）。

18. 簡化搜尋—讓訪問者可以很容易的快速找到他們需要的內容。將搜尋元素放在核心位置，可以保證使用者可以快速的找到他們所需要的。（記住，這並不是最重要的因素，所以不要讓它反超其他元素）

20. 允許“稍後購買”—— 有時候我們沒有足夠的實際或精力來完成註冊或購買流程。可以在其他裝置上通過 email 或加到購物車的簡單方式，讓使用者可以很容易的在其他裝置上稍後完成購買流程。

21. QA，QA，再QA —— 因為手機網站在你自己的手機上測試通過，並不意味著它可以在別人的手機上也可以。在開始前，在谷歌 Analytics上核查，以找出訪問者最常使用的的手機螢幕。確保在多種裝置上檢查你的登入介面，並在一段時間內進行跟蹤。

22. 要求少一些 —— 為了減少摩擦、提高轉化率，可對訪問者要求少一些。在開始時，只獲取所需要的最重要的資訊，稍後再獲取額外的資訊。手機螢幕很小、時間寶貴，如果難以操作，人們將不會逗留。

23.使副本最小化 —— 大多數訪問者不想通讀文章的好幾個段落。將最重要的資訊放在登入頁面上，使訪問者快速移動到下一步。

24. 強調你的行動引導 – 行動的引導是一個訪問者在啟動頁面看到的第一樣東西。提供一個快速的方式讓使用者跟著你的行動引導，完成整個流程。讓你的行動引導按鈕可視，並且容易通過觸控式螢幕點選。

通過 Naked Wines 檢驗以下示例：

• 大量文字
• 行動引導按鈕被切斷

25. 優化你的表單 – 讓的的表單儘可能的簡單，讓訪問者快速完成你的表單，嘗試著分離成多個簡單的步驟。

26. 標題儘量短 – 標題長度不要超過 3-4 詞，儘量一行顯示。

27. 構建限制資料大小 – 移動資料連線會比家庭寬頻連線慢，使用者並沒有那麼多耐心等待移動網站的載入。確保符合移動使用者的需求，更輕量級。

28. 遠離 Flash –也許在 Web 上看著不錯(無法轉換)，但在移動端並不合適。使用 HTML5，GIFs 和 JPEGs 會更好一些。

29. 將導航位置考慮進來 – 我們使用智慧手機來看電視，開車，購物和完成各種功能。應使移動端順眼，並使用圖示來進行快速導航（包括短文字說明）。

30. 擁抱第三方社交平臺登入 – 第三方登入有著很高的轉化率，對於鼓勵訪客和你的商品進行社互動動是個極佳的方式。

31. 提供移動獨享 – 大多數人更喜歡使用 PC 螢幕來下單。為了提高轉換率，可嘗試提供移動端獨享，以減少與 PC 端正面競爭，增加銷售。

32. 為動作而設計 – 將所有的可點選元素設計為按鈕(不僅僅是文字連結)， 確保它們足夠大，並留白以突出。

33. 少即是多——儘量使用少一點的文字，去除所有不必要的設計元素，只留下功能要素。

34. 訊息個性化——智慧手機提供了很多重要的使用者資訊。手機為使用者提供瞭如 GPS 和基於位置服務的一體化特性，如：運往華盛頓！

35. 考慮字型因素——讓文字更易讀。使用更大的字型、行間距和字間距讓文字容易閱讀和略讀。

36. 使 SEO優化而不破壞轉換策略——避免在手機登入頁面使用大量文字，或者引入可伸展的 div 而引發混亂。這將縮短頁面，使使用者可以點選他們感興趣的內容。

手機上的 AB 測試

37. 測試關鍵績效指標（KPI）—— 開始測試前，確定你的商業目標，然後把它們轉換為數字化的關鍵績效指標（KPI）（例如註冊數量、購買數量、下載次數）。一旦確定了關鍵績效指標，就要確保建立正確的跟蹤機制。

38.達到顯著效果 —— 當你執行測試時，確保在達到顯著效果前一直執行，你可以使用 Google Experiments 或者 A/B test calculator 來知道何時達到這個效果。達到顯著效果可以確保你儘可能的從測試中瞭解更多，並知道它們的正確性。

39.避開特殊日期——在可以提供最真實的測試結果的環境下開展測試。避免在節假日、特殊活動或者結賬日測試。

40.保持系統性——為了達到清晰並可理解的測試結果，確保在一段時間執行一個測試，或者如果你有足夠的流量來同時執行多個測試組。

41. 測試策略，不是元素 – 當你處理好所有技術性問題和元素之後，可以增加使用者轉換率，但是要確保有測試策略，這樣能更好的理解你的使用者。測試按鈕顏色或者標題只會讓你關注某一個點。為了能獲得最大的勝利，從你的測試中獲取更多有價值的東西，你需要開啟測試情緒化策略。

42. 使用一個清單 – 建議使用一個清單來記住以上講述的所有啟動頁面優化的策略，確保沒有漏掉任何重要的部分。一個清單也可以確保你和你的團隊為每個專案都能按照這些策略去優化。

結束

響應式設計並不是一個移動優化策略。為了得到更多的移動訪問者，建立專用的啟動頁面和啟動頁面的不同使用者體驗是成功的關鍵。

你還有其他的一些移動端啟動頁面的優化建議嗎？可以在評論裡和大家一起分享。