app.vue 跳轉頁面_外貿技術流：手把手教你優化移動端頁面！

關于作者：韓席軍，焦點商學院明星講師，商務英語和計算機雙專業，精通外貿銷售、SEO、EDM、社交管道營銷等，屬于技術流的營銷高手，善于鑽研和思考，從業九年來，一直在做業務的同時堅持分享。目前在知名美資公司擔任海外市場總監，從事跨境電商的研究和實踐。

昨天我們講解了有關企業網站在移動端優化的一些基礎概念(回顧：想提高訂單轉化率？這個方法你試過了嗎？)，今天我們來實戰了。

移動端頁面優化最佳實踐

1

适應螢幕的響應布局

在第一部分的術語解釋中，我們就說過這樣三個名詞：自适應布局、響應式設計、移動端适配。

其實這些概念和技術早在多年前就已經提出并且開始應用，但根據Google的統計資料，截止2019年底，全球僅有50%的網站使用這些技術對網站進行了布局适配與優化。這恰恰是個好消息，因為這個時候，僅僅是開始使用自适應布局這一個更改，就能讓你的網站在移動端的表現立即産生質的不同。

常見的适應螢幕的相應式布局的思路有：

如果是原本就比較簡單的布局，可以通過将元素，主要是圖檔、視訊和表格之類的元素的比例由絕對值設定為比例值，比如原來的寬度設定是900px，為了适應各種裝置，新的寬度則可以設定為100%，這樣不論螢幕多寬，該元素總是和螢幕一樣寬；

在同一個頁面中寫入多種不同布局，通過CSS和其他前端架構，自動識别目前裝置尺寸寬度，進而自動調整元素布局；

不同平台，設計完全不同的網站，通路的時候域名都是不同的，比如電腦上的域名是www.abcd.com，而在手機上則會變成m.abcd.com。

這是常見的思路，而具體實作的方法，這因為網站使用的語言、程式、架構等的不同，各有不同，舉例來說：

使用了Bootstrap架構的網站或者網站程式，天然就支援自适應布局；

使用Wordpress建立的網站，可以使用Thrive、Divi等插件和主題，進行子產品化搭建。搭建完成之後，就是自适應的布局。并且可以根據需求，對每個元素的細節進行手動調整；

使用Shopify建立的網站，可以使用Gem Pages等擴充，對頁面上的元素進行設計，并且在設計過程中就可以随時切換到不同的裝置尺寸進行預覽，十分友善；

有的網站程式背景直接就支援生成桌面端和手機端兩個不同的網站。優勢是原生支援，不會出現排版錯亂，缺點是需要制作兩個網站，要求付出額外的管理時間和成本。

不論是哪種方法，最終目的是為了讓網站在手機和平闆等移動裝置上，也都能獲得精美的展示。如上文所說，隻要做到這一步，就能讓使用者對網站的使用體驗，産生極大的提升。

2

簡化折疊固定式菜單

手機螢幕的空間本來就小，如果還要像桌面端那樣将所有的菜單展示出來，不僅擁擠難看，而且就是給可憐的手指出難題，往往無法精确點中。面對這樣的菜單系統，使用者隻好在反複鬥争之後，原地崩潰，然後累覺不愛。

是以在移動端，網站的菜單需要重新考慮與設計：

簡化。僅僅保留必要的和重要的菜單項，比如原始的菜單包括：Home、About、Products、News、Contact這幾個最常見的菜單項。很明顯在手機上是無法在一行内将這些内容全部展示出來的。這時就可以将菜單簡化，根據需求保留最重要的選項，如：Products和Contact兩項。其他的選項可以放在頁腳，或者頁面中的其他位置；

折疊。這是最常見的方式，将原本橫向排布的展開菜單，折疊到頁面的右上角，變為一個按鈕區域，點選這個按鈕，菜單就會縱向展開。這個時候要注意，這樣處理後的菜單，最好不要再添加二級子菜單，否則整個版面又會看起來很亂；

底部固定。顧名思義，這種情況下，菜單會固定在手機浏覽器的下方，不論頁面如何變化，菜單始終固定在下方。其實這是十分符合移動端思維的，就像微信公衆号下面的固定菜單一樣，便捷、直覺。但是這樣的設計需要專門的代碼或者工具來實作，是以雖然是很好的方式，但是實際使用的站點還不多；

移除。有些内容簡單，以高品質資訊展示為主要目的的網站，會采用這種大膽的設計，整個網站看不到菜單的存在，隻需要一直向下滑動即可。這樣網站也被稱為單頁面(One Page Website)站點，在一個頁面中展示所有必要的資訊。

不論哪種方式，都是為了移動端的菜單系統看起來美觀、用起來簡便、設計起來友善。

3

極緻優化的網站速度

第一印象十分重要，尤其是面對耐性越來越少的客戶。使用者願意在手機上打開一個網站， 說明對這個網站感興趣。但是如果在3秒鐘之内，整個頁面還沒有完成載入，47%的使用者就會選擇關閉目前頁面。

這是因為手機端使用者對于網站速度的要求，對标的不是其他網站，而是手機上各種APP。由于這些APP的資源，大部分都是預先載入的，是以使用者在使用APP的間隙使用網站，就總會覺得網站好慢。

要優化移動端網站的速度，除了必做的正常操作之外，還應包括：

移除不必要的元件。如幻燈片和視訊。雖然網站首頁放一組幻燈片已經是行業标準，但除非經過特别優化，否則幻燈片在手機端的表現并不好：不好看，不好用，影響速度；

移除不必要的動畫效果。桌面端由于空間充足 ，是以會在各個區塊(Blocks)之間加入留白和載入動畫。其他元素，如按鈕，也會有一些動畫效果。這主要是為了配合頁面的整體設計風格，為網站加入動态的互動元素，進而降低使用者的枯燥感，無可厚非。但是在移動裝置上，使用者并沒有這樣的需求，太多動态的元素，反而會增加使用者的操作成本，降低好感度；

使用Lazy Load技術，用最快的速度加載第一屏。這裡有兩個術語：Lazy Load和第一屏，兩者不同而又有密切的關聯。Lazy Load指的是在浏覽器加載網站内容的時候，優先加載使用者目前能看到的内容，而使用者還沒有翻到的部分就不着急加載。很久以前的網站，所有的内容都是同時加載的，如果網頁上有很多大體積照片，就會造成整個頁面都遲遲加載不出來。

使用Lazy Load之後，就會“智能地”優先将使用者翻到的部分盡快展示出來。而第一屏指的則是，使用者在打開網站之後，看到的鋪滿目前螢幕的部分。如果所有的帶寬和計算資源都用來支撐第一屏，就會加快載入速度，進而給人“這個網站賊快'的印象。這一點至關重要。

4

高度提煉的産品頁面

每個網站上都有産品頁，如何排布産品頁的資訊，自然大有講究。桌面端網站的産品頁面，位于最上方的是菜單，然後是面包屑導航，有的還有一些Banner之類的元素。但是在移動端，應該直奔主題，移除頂部的無用元素，對産品頁面進行重新設計。

突出展示産品圖檔與标題。這應該是産品頁面最引人注目的兩個元素；

在第一屏展示給使用者的資訊應該包括：首圖、标題、價格、主要賣點、詢盤/購買按鈕。這樣做的目的是在最短的時間内傳遞核心資訊，節省客戶的時間，盡快采取決策；

不要設計過多的跳轉。在桌面端網頁中，從浏覽器打開一個新的視窗是十分自然與平常的事情，但是在移動端中，在多個頁面之間切換卻是一件十分麻煩與不便利的事情。是以移動端的産品頁面(以及其他頁面)都要有意識地減少跳轉，或者盡量隻在本視窗打開跳轉後的頁面，而不是再開一個新的視窗；

産品的屬性選項，比如顔色、材質、尺寸等，最好使用較大的元素進行平鋪展示，避免折疊，更加便于使用者選擇以及進行其他操作；

推薦産品數量不應過多，3個為最佳。這主要是因為移動端下方的空間很小，不利于放置太多幹擾元素。

總之，移動端的産品頁面資訊邏輯，和桌面端的頁面有很大差異，在設計的時候，一定要花心思進行重新思考與設計。

5

高相關高清圖檔素材

雖然手機螢幕的尺寸較小，但是分辨率卻一點兒也不小。就拿2020年秋季的主流旗艦機來說，普遍都是2K屏，甚至3K、4K螢幕也不稀奇。從螢幕的質感上來說，電腦上普遍還是60Hz的重新整理率，手機上已經有120Hz+的重新整理頻率了。

是以，手機螢幕雖小的，但是對素材的要求卻一點兒也不低。看一些大牌的網站，經常會感覺手機上的站點更加清晰精緻，就是這個原因了。

是以，如果是采用了不同素材的管理方式，則在手機上應該優先考慮高清的圖檔素材，更加能夠傳達品質感。

6

多樣化與固定的CTA

在第一部分我們已經說過CTA的概念，簡言之就是通過醒目的元素吸引使用者采取行動。大部分時候，在一個頁面中，會放置2個以上的CTA元素，并且它們的目的是一樣的。

比如在外貿網站産品頁面中，CTA的主要作用就是引導客戶留言或者發送詢盤，那麼在一個頁面中，可能會在産品大圖下方放置一個“Inquiry Now”的按鈕，在産品描述的下方也放置一個同樣功能的按鈕。

如果兩個按鈕的樣式和文案是完全一緻的，則有可能因為客戶忽略了第一個按鈕，也同時忽略了第二個/第三個/第N個按鈕，畢竟它們長得都一模一樣嘛。

是以一個優化後的做法是，将多個目的相同的CTA元素，故意設計地看起來不一樣。資料表明，應用這個政策之後，CTA按鈕的轉化率得到明顯的上升。使用者不喜歡這個按鈕，不代表他不喜歡另一個按鈕，隻要款式多，總有一款适合你！

另一個可以考慮的CTA優化點是，将CTA固定在頁面的某個地方，比如左下角或者正下方。這樣的好處是使用者在需要采取某個行動時，随時随地就能找到入口，而不必要上下翻滾頁面。當然，在這種情況下，CTA按鈕的設計一定要低調，不能太過花裡胡哨，否則隻能起到反作用，讓使用者更快地離開頁面。

7

極度精簡的資訊表格

網站上往往會有很多需要使用者輸入資訊的地方，如：留言框、注冊頁面、訂單、詢盤等等。在電腦上用鍵盤和滑鼠輸入資訊，對大部分使用者來說，都是小事一件。但如果在手機上使用同樣的思路，就絕對行不通。

就拿最簡單的下拉菜單來說，在電腦上從下拉菜單中選擇一個選項是輕而易舉的事情，但在手機上卻會是很糟糕的體驗。

資訊本身也需要精簡。如果原本需要采集使用者的5項資訊(姓名、年齡、國家、郵箱、公司名)，那麼在手機上應該縮減到3項甚至2項，是以我們在很多現代設計的網站上，經常看到非常精簡的表單系統，僅僅需要一個郵件位址，即可訂閱。這就是根據移動裝置的性質而重新思考和設計的結果。

8

彈窗與即時溝通入口

如果花點兒時間浏覽20個以上的外貿網站，就很難忽略一件事情：一多半的外貿網站，都有超過1個彈窗與聊天服務視窗。

這個出發點本來是好的：客戶隻要想聯系，就可以随時随地找到一個資訊入口。但仔細思考一下：當用一種令人反感的方式為客戶提供幫助的時候，他能夠感覺到誠意嗎？如果他感受到的不是誠意，而是一眼可見的企圖心、粗制濫造的設計、不勝其煩的幹擾，心情可想而知。

是以，網站減少彈窗，僅僅保留一個必要的彈窗，不僅僅是移動端的需求，而是對所有站點的要求。

再回到移動端的彈窗中，也要做出優化：

延遲彈出時間，至少要等待10秒鐘再彈出。如果一開始就彈出，因為螢幕尺寸的關系，會嚴重遮擋頁面中的其他内容；

文字要少，最好就一句話，3-6個單詞。字多了字型就需要變小，變小了就看不到。另外，沒人會有耐心讀完20個以上的單詞的；

一個彈窗隻期望使用者完成一個任務。不同的頁面可以使用不同的彈窗，是以可以設計多個彈窗。但是一個彈窗應該隻設計一個任務，任務大于1個之後，就會一個都完不成；

設計風格很重要。彈窗的風格要和主要内容有所區分，同時在素材質感上要和主要内容保持一緻。

9

經常在不同裝置檢視

雖然說了這麼多移動端網站可以優化的點，但這絕對不是全部。要想發現問題，并且保持優化，最好的做法是經常在移動裝置上檢視自己的網站到底是什麼樣子的。當然，也有專業的方法來進行觀察與持續測試。

最簡單的方式就是用Chrome浏覽器。在浏覽網站的時候，按一下鍵盤上的F12，即可打開Chrome的調試模式，在這個模式下，可以通過調試視窗左上角的裝置選項，在不同裝置和尺寸之間切換。重新整理頁面之後，就可以立即看到你的網站在目前尺寸下的排版布局方式；

也可以借助BrowseEmAll這樣的專業工具，更加精細地測試網站在各種分辨率與螢幕尺寸下的表現；

最好的方法，莫過于問問真實的使用者。可以定期給訂閱使用者發郵件參與問卷，也可以在網站的顯眼地方設定一個CTA，文案就是"Help us improve, your suggetions matter!"，讓更多實時浏覽的使用者共享他們的想法。

總結來說，我們衆多的外貿網站都沒有針對移動端進行優化，這讓我們辛辛苦苦得來的流量都流失了，十分可惜。我們的外貿從業人員，尤其是網站建設和運維人員，應該關注新趨勢，應用新技術，為外貿網站帶來更多流量的同時，也将留存率與轉化率提升上去。

(本文刊載于第74期《焦點視界》雜志)