在前期的分享過程中，我們已經提到過外貿網站之手機移動端網站的設計和策劃，我們也了解了手機網站對于外貿宣傳和推廣的重要性，那么北京外貿網站設計公司Bontop外貿建站給大家分享如何優化外貿手機網站？

1、適應屏幕的響應布局

說到這里大家一定聽說過這些名詞自適應布局、響應式設計、移動端適配，實際上都是一個意思，就是外貿網站的設計要能非常好的適配移動端的訪問。其實這些概念和技術早在多年前就已經提出并且開始應用，但根據Google的統計數據，截止2019年底，全球僅有50%的網站使用這些技術對網站進行了布局適配與優化。這恰恰是個好消息，因為這個時候，僅僅是開始使用自適應布局這一個更改，就能讓你的網站在移動端的表現立即產生質的不同。

常見的適應屏幕的響應式布局的思路有：

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

在同一個頁面中寫入多種不同布局，通過CSS和其他前端框架，自動識別當前設備尺寸寬度，進而自動調整元素布局；不同平臺，設計完全不同的網站，訪問的時候域名都是不同的，比如電腦上的域名是www.abcd.com，而在手機上則會變成m.abcd.com。這是常見的思路，而具體實現的方法，這因為網站使用的語言、程序、架構等的不同，各有不同。有的網站程序后臺直接就支持生成桌面端和手機端兩個不同的網站。優勢是原生支持，不會出現排版錯亂，缺點是需要制作兩個網站，要求付出額外的管理時間和成本。不論是哪種方法，最終目的是為了讓網站在手機和平板等移動設備上，也都能獲得精美的展示。如上文所說，只要做到這一步，就能讓用戶對網站的使用體驗，產生極大的提升。

2、簡化折疊固定式菜單

手機屏幕的空間本來就小，如果還要像桌面端那樣將所有的菜單展示出來，不僅擁擠難看，而且就是給可憐的手指出難題，往往無法精確點中。面對這樣的菜單系統，用戶只好在反復斗爭之后，原地崩潰，然后累覺不愛。所以在移動端，網站的菜單需要重新考慮與設計簡化。僅僅保留必要的和重要的菜單項，比如原始的菜單包括：Home、About、Products、News、Contact這幾個最常見的菜單項。很明顯在手機上是無法在一行內將這些內容全部展示出來的。這時就可以將菜單簡化，根據需求保留最重要的選項，如：Products和Contact兩項。其他的選項可以放在頁腳，或者頁面中的其他位置；

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

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

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

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

3、極致優化的網站速度

第一印象十分重要，尤其是面對耐性越來越少的客戶。用戶愿意在手機上打開一個網站， 說明對這個網站感興趣。但是如果在3秒鐘之內，整個頁面還沒有完成載入，47%的用戶就會選擇關閉當前頁面。這是因為手機端用戶對于網站速度的要求，對標的不是其他網站，而是手機上各種APP。由于這些APP的資源，大部分都是預先載入的，所以用戶在使用APP的間隙使用網站，就總會覺得網站好慢。

要優化移動端網站的速度，除了必做的常規操作之外，還應包括：移除不必要的組件。如幻燈片和視頻。雖然網站首頁放一組幻燈片已經是行業標準，但除非經過特別優化，否則幻燈片在手機端的表現并不好：不好看，不好用，影響速度；

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

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

4、高度提煉的產品頁面

每個網站上都有產品頁，如何排布產品頁的信息，自然大有講究。桌面端網站的產品頁面，位于最上方的是菜單，然后是面包屑導航，有的還有一些Banner之類的元素。但是在移動端，應該直奔主題，移除頂部的無用元素，對產品頁面進行重新設計。突出展示產品圖片與標題。這應該是產品頁面最引人注目的兩個元素；

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

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

產品的屬性選項，比如顏色、材質、尺寸等，最好使用較大的元素進行平鋪展示，避免折疊，更加便于用戶選擇以及進行其他操作；推薦產品數量不應過多，3個為最佳。這主要是因為移動端下方的空間很小，不利于放置太多干擾元素。總之，移動端的產品頁面信息邏輯，和桌面端的頁面有很大差異，在設計的時候，一定要花心思進行重新思考與設計。

5、相關高清圖片素材

雖然手機屏幕的尺寸較小，但是分辨率卻一點兒也不小。就拿2020年秋季的主流旗艦機來說，普遍都是2K屏，甚至3K、4K屏幕也不稀奇。從屏幕的質感上來說，電腦上普遍還是60Hz的刷新率，手機上已經有120Hz+的刷新頻率了。所以，手機屏幕雖小的，但是對素材的要求卻一點兒也不低?？匆恍┐笈频木W站，經常會感覺手機上的站點更加清晰精致，就是這個原因了。

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