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

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

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

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

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

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

2、簡(jiǎn)化折疊固定式菜單

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

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

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

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

不論哪種方式，都是為了移動(dòng)端的菜單系統(tǒng)看起來(lái)美觀、用起來(lái)簡(jiǎn)便、設(shè)計(jì)起來(lái)方便。

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

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

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

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

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

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

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

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

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

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

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

雖然手機(jī)屏幕的尺寸較小，但是分辨率卻一點(diǎn)兒也不小。就拿2020年秋季的主流旗艦機(jī)來(lái)說(shuō)，普遍都是2K屏，甚至3K、4K屏幕也不稀奇。從屏幕的質(zhì)感上來(lái)說(shuō)，電腦上普遍還是60Hz的刷新率，手機(jī)上已經(jīng)有120Hz+的刷新頻率了。所以，手機(jī)屏幕雖小的，但是對(duì)素材的要求卻一點(diǎn)兒也不低。看一些大牌的網(wǎng)站，經(jīng)常會(huì)感覺(jué)手機(jī)上的站點(diǎn)更加清晰精致，就是這個(gè)原因了。

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