在前期的分享過程中，我們已經(jīng)提到過外貿(mào)網(wǎng)站之手機移動端網(wǎng)站的設(shè)計和策劃，我們也了解了手機網(wǎng)站對于外貿(mào)宣傳和推廣的重要性，那么北京外貿(mào)網(wǎng)站設(shè)計公司Bontop外貿(mào)建站給大家分享如何優(yōu)化外貿(mào)手機網(wǎng)站？

1、適應(yīng)屏幕的響應(yīng)布局

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

常見的適應(yīng)屏幕的響應(yīng)式布局的思路有：

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

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

2、簡化折疊固定式菜單

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

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

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

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

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

3、極致優(yōu)化的網(wǎng)站速度

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

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

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

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

4、高度提煉的產(chǎn)品頁面

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

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

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

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

5、相關(guān)高清圖片素材

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

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