我們都聽過這句話，“你只會有一次機會去打造第一印象”, 當(dāng)涉及到移動端的啟動頁面時，這句話會更加令人信服. 在最基本的層面上，啟動頁面將會是消費者同你網(wǎng)站的第一次接觸.
擁有好的第一印象是很重要的. 今年早些時候我們發(fā)布了這篇文章， 《響應(yīng)式設(shè)計不是一種移動端優(yōu)化策略》 ，它專門講為你的移動通信媒介打造專用移動端啟動頁面來將訪問者轉(zhuǎn)換成消費者的重要性.
移動端統(tǒng)計數(shù)據(jù):
今年美國智能手機的移動商務(wù)收入為148億美元. (Statista)
到 2016, 移動端本地搜索有望創(chuàng)造32億美元的收入，相比之下，桌面端為102億美元. (Kelsey 報告)
50%的智能手機用戶曾通過他們的手機進行過消費(Prosper Mobile Insights).
73% 的智能手機用戶聲稱他們曾使用移動端 web 而不是 app 來進行購買(JumpTap.com).
下面是42個移動端啟動界面的優(yōu)化建議，它們能幫助你將更多的移動端訪問者轉(zhuǎn)換成付費顧客，這些建議分為如下類別:
策略
基礎(chǔ)
AB 測試
策略
1. 知道從哪里開始 —— 創(chuàng)建一個完整的移動端 web 是昂貴的，且會耽誤許多的時間。所以起步的最好方式是通過跟蹤分析，了解轉(zhuǎn)型中的痛點和漏洞。一旦你了解了這些，你就會明白從哪里開始了。你所要在轉(zhuǎn)型中關(guān)注的應(yīng)該是流量，用戶量和購買模式.
2. 了解你的顧客的目標(biāo) —— 確保你能了解移動端和桌面端用戶的目標(biāo)有何不同。你是不是想要他們擁有完全一樣的體驗?zāi)?我們使用 web 和移動端相比有所不同，其體驗是不同的，而且又是我們因為完全不同的原因同時使用兩種或者三種設(shè)別.。要考慮到你的訪問者會在你的移動端站點上做些什么，理解他們嘗試要達(dá)成的目標(biāo)是什么，并且創(chuàng)建一個用戶導(dǎo)游來幫助他們更快跟敏捷的達(dá)成其目標(biāo)。
3. 定義你的目標(biāo) —— 一旦你了解并且也定義好了訪問者的目標(biāo)，那你就要定義好啟動頁面的目標(biāo)并在心里針對那個目標(biāo)設(shè)計一種體驗。扔掉那些不重要的信息、針對過個調(diào)用的動作按鈕以及其它的噱頭。要專注于啟動頁面最重要的元素，以及如何讓它們幫助你的訪問者完成你的目標(biāo)。
4. 改變他們的生活：有無數(shù)的公司在做同樣的事情。人們在移動端的站點上花費的時間很少，并且需要在幾秒中之內(nèi)理解你(頁面上)最有價值的部分。記得要關(guān)注客戶和他們的利益。至少要說明：“我們是世界上最好的”，多一些可以說：“這將會改變你的生活”。
5. 定義所需的操作 – 你希望訪問者在你的移動登錄頁上，知道一個他所需要的操作，那就要制定一個清晰的行為召喚(call to action)，最好是明顯的，具有邏輯性的，這能讓訪問者明確地移動到下一步。
6. 在重要的位置表述 – 一個訪問者應(yīng)該能夠很快就區(qū)分他們，而不是去閱讀復(fù)雜的文本和故事。確保你有價值的位置是在頁面的頂部。你的標(biāo)題和行為召喚(call to action)應(yīng)該在折頁(fold)(當(dāng)訪問者登錄到頁面的時候就能看到的部分)之上，這樣能更快速地讓訪問者取其所需。
7. 清晰地知道后果 – 重要地是讓訪問者能清晰地理解，如果他們提供信息，你將會如何使用收集到的信息。
基礎(chǔ)
8. 忘記滾動 —— 要創(chuàng)建出適合一個移動端屏幕邊界的頁面，并且這樣的頁面不需要滾動。這一點同時適用于橫屏和豎屏模式.
9. 同時為橫向和縱向的屏幕做設(shè)計 —— 大多數(shù)人在設(shè)計移動端啟動界面時都會考慮到縱向視圖, 但是有賴于訪問者會橫著拿他們的手機，所以他們也可能會在橫屏模式下瀏覽你的移動端網(wǎng)站。要確保你的移動端啟動界面針對這兩種情況都能進行縮放.
10. 使用本地化設(shè)置 —— 啟用了 GPS 的設(shè)備可以運用特殊的本地化內(nèi)容來減少文化差異的摩擦，提高轉(zhuǎn)換率。 在你的注冊表單中你可以通過他們輸入的郵編偵測到訪問者的國別和城市。 可以讓“郵編”作為你的第一個地址信息輸入項，并好好利用這一項信息來做點事情。
11. 移除外部鏈接 —— 通過移除連接到網(wǎng)站其它部分的外部鏈接，你可以控制訪問者的瀏覽過程，使其更專注于你需要他們做出的動作。記住，移動端瀏覽器新的tab —— 打開立即就會是訪問者原理你所設(shè)定的目標(biāo)位置。要使其編程一次快速輕松的瀏覽過程，而別讓他們跑到別的地方去了。
12. 去掉雜七雜八的東西 —— 集中在重點上，盡可能保持頁面整潔，減少摩擦，保證按鈕之間的間距足夠大。雜七雜八的東西以及文字和顏色越少，訪問者越愿意完成這項渠道。
13. 保持流程和設(shè)計的一致性——不要使訪問者感到驚訝或被愚弄，在手機登錄界面上使用他們在廣告上看到的相同信息和設(shè)計。與信息保持一致，將有助于使頁面的訪問變現(xiàn)，同時提供廣告品質(zhì)。
14.別讓用戶縮放——登錄頁面的焦點由你決定。登錄頁面的設(shè)計方式將決定用戶在網(wǎng)站上的操作。如果讓用戶縮放，他們將選擇網(wǎng)站的焦點，而不是你。
15.點擊呼叫——很多移動搜索用戶的目標(biāo)都是立刻獲取聯(lián)系。相比復(fù)制粘帖號碼，直接使用“點擊呼叫”按鈕將更容易讓用戶快速開始對話。在開始前，設(shè)置好你的電話追蹤器以便跟蹤來電。
16. 調(diào)整鍵盤 — 確保在每個表格區(qū)域中使用合適的鍵盤。訪問者可以不用改變鍵盤輸出而快速的插入數(shù)字或者郵件。
17. 保持表格最小化 — 所有設(shè)備上的注冊表單都讓人沮喪，手機上的注冊表單更是如此。由于在手機上輸入非常費勁，所以在可能的情況下盡量避免打開文本域。確保表格夠大夠清楚，可使用全屏，并使字段和提交按鈕大的可以用拇指點擊(忽略右邊區(qū)域，因為它太小不能拖拽)。
18. 簡化搜索—讓訪問者可以很容易的快速找到他們需要的內(nèi)容。將搜索元素放在核心位置，可以保證用戶可以快速的找到他們所需要的。(記住，這并不是最重要的因素，所以不要讓它反超其他元素)
20. 允許“稍后購買”—— 有時候我們沒有足夠的實際或精力來完成注冊或購買流程。可以在其他設(shè)備上通過 email 或加到購物車的簡單方式，讓使用者可以很容易的在其他設(shè)備上稍后完成購買流程。
21. QA，QA，再Q(mào)A —— 因為手機網(wǎng)站在你自己的手機上測試通過，并不意味著它可以在別人的手機上也可以。在開始前，在谷歌 Analytics上核查，以找出訪問者最常使用的的手機屏幕。確保在多種設(shè)備上檢查你的登錄界面，并在一段時間內(nèi)進行跟蹤。
22. 要求少一些 —— 為了減少摩擦、提高轉(zhuǎn)化率，可對訪問者要求少一些。在開始時，只獲取所需要的最重要的信息，稍后再獲取額外的信息。手機屏幕很小、時間寶貴，如果難以操作，人們將不會逗留。
23.使副本最小化 —— 大多數(shù)訪問者不想通讀文章的好幾個段落。將最重要的信息放在登錄頁面上，使訪問者快速移動到下一步。
24. 強調(diào)你的行動引導(dǎo) – 行動的引導(dǎo)是一個訪問者在啟動頁面看到的第一樣?xùn)|西。提供一個快速的方式讓用戶跟著你的行動引導(dǎo)，完成整個流程。讓你的行動引導(dǎo)按鈕可視，并且容易通過觸摸屏點擊。
通過 Naked Wines 檢驗以下示例：
大量文本
行動引導(dǎo)按鈕被切斷
25. 優(yōu)化你的表單 – 讓的的表單盡可能的簡單，讓訪問者快速完成你的表單，嘗試著分離成多個簡單的步驟。
26. 標(biāo)題盡量短 – 標(biāo)題長度不要超過 3-4 詞，盡量一行顯示。
27. 構(gòu)建限制數(shù)據(jù)大小 – 移動數(shù)據(jù)連接會比家庭寬帶連接慢，用戶并沒有那么多耐心等待移動網(wǎng)站的加載。確保符合移動用戶的需求，更輕量級。
28. 遠(yuǎn)離 Flash –也許在 Web 上看著不錯(無法轉(zhuǎn)換)，但在移動端并不合適。使用 HTML5，GIFs 和 JPEGs 會更好一些。
29. 將導(dǎo)航位置考慮進來 – 我們使用智能手機來看電視，開車，購物和完成各種功能。應(yīng)使移動端順眼，并使用圖標(biāo)來進行快速導(dǎo)航(包括短文字說明)。
30. 擁抱第三方社交平臺登錄 – 第三方登錄有著很高的轉(zhuǎn)化率，對于鼓勵訪客和你的商品進行社交互動是個極佳的方式。
31. 提供移動獨享 – 大多數(shù)人更喜歡使用 PC 屏幕來下單。為了提高轉(zhuǎn)換率，可嘗試提供移動端獨享，以減少與 PC 端正面競爭，增加銷售。
32. 為動作而設(shè)計 – 將所有的可點擊元素設(shè)計為按鈕(不僅僅是文本鏈接)， 確保它們足夠大，并留白以突出。
33. 少即是多——盡量使用少一點的文字，去除所有不必要的設(shè)計元素，只留下功能要素。
34. 消息個性化——智能手機提供了很多重要的用戶信息。手機為用戶提供了如 GPS 和基于位置服務(wù)的一體化特性，如：運往華盛頓!
35. 考慮字體因素——讓文本更易讀。使用更大的字體、行間距和字間距讓文本容易閱讀和略讀。
36. 使 SEO優(yōu)化而不破壞轉(zhuǎn)換策略——避免在手機登錄頁面使用大量文字，或者引入可伸展的 div 而引發(fā)混亂。這將縮短頁面，使用戶可以點擊他們感興趣的內(nèi)容。
手機上的 AB 測試
37. 測試關(guān)鍵績效指標(biāo)(KPI)—— 開始測試前，確定你的商業(yè)目標(biāo)，然后把它們轉(zhuǎn)換為數(shù)字化的關(guān)鍵績效指標(biāo)(KPI)(例如注冊數(shù)量、購買數(shù)量、下載次數(shù))。一旦確定了關(guān)鍵績效指標(biāo)，就要確保建立正確的跟蹤機制。
38.達(dá)到顯著效果 —— 當(dāng)你運行測試時，確保在達(dá)到顯著效果前一直運行，你可以使用 Google Experiments 或者 A/B test calculator 來知道何時達(dá)到這個效果。達(dá)到顯著效果可以確保你盡可能的從測試中了解更多，并知道它們的正確性。
39.避開特殊日期——在可以提供最真實的測試結(jié)果的環(huán)境下開展測試。避免在節(jié)假日、特殊活動或者結(jié)賬日測試。
40.保持系統(tǒng)性——為了達(dá)到清晰并可理解的測試結(jié)果，確保在一段時間運行一個測試，或者如果你有足夠的流量來同時運行多個測試組。
41. 測試策略，不是元素 – 當(dāng)你處理好所有技術(shù)性問題和元素之后，可以增加用戶轉(zhuǎn)換率，但是要確保有測試策略，這樣能更好的理解你的用戶。測試按鈕顏色或者標(biāo)題只會讓你關(guān)注某一個點。為了能獲得最大的勝利，從你的測試中獲取更多有價值的東西，你需要開啟測試情緒化策略。
42. 使用一個清單 – 建議使用一個清單來記住以上講述的所有啟動頁面優(yōu)化的策略，確保沒有漏掉任何重要的部分。一個清單也可以確保你和你的團隊為每個項目都能按照這些策略去優(yōu)化。
結(jié)束
響應(yīng)式設(shè)計并不是一個移動優(yōu)化策略。為了得到更多的移動訪問者，創(chuàng)建專用的啟動頁面和啟動頁面的不同用戶體驗是成功的關(guān)鍵。
推薦閱讀
不知道各位看官最近有沒有因為愛奇藝的《盜墓筆記》事件而煩惱，小編作為愛奇藝VIP會員之一，被愛奇藝宕機事件搞的夜不能寐。也正因如此，小編突發(fā)奇想，反正閑著也是閑>>>詳細(xì)閱讀
本文標(biāo)題：42個移動端啟動頁面優(yōu)化技巧
地址：http://www.tjyalang.cn/a/blog/20150816/296864.html
網(wǎng)友點評
精彩導(dǎo)讀
科技快報
品牌展示