阿里巴巴全球旺鋪裝修教程

互聯網
關注：2.4W次

阿里巴巴全球旺鋪裝修設計思路整合

操作方法

（01）尺寸定格局1. 首先我們來學習的第一步是整個旺鋪首頁究竟是什麼尺寸比較合適，背景和每個板塊之間能夠和諧融合，不會出現錯位。

（02）2. 首頁整個屏幕的寬度為1920像素，比這個像素小的設計，在某些高分辨率的顯示器兩邊會出現不完全不協調現象，首頁高度隨自己做的旺鋪而定。

（03）3. 標題欄寬度為990像素，高度在100-200像素自由設計

（04）4. 導航欄寬度為990像素，高度為33像素，請不要加大減小像素導致版面不協調。

（05）5. 導航下面可以插入自定義內容，寬度仍然為990像素，在這個自定義內容板塊就是我們發揮設計思維的地方了，這裏可以放入代碼和gif圖像使旺鋪效果更佳。

（06）思維定風格1. 知道以上旺鋪的尺寸我們可以開始設計我們的旺鋪了，首先要知道一個旺鋪的色調很重要，直接影響視覺體驗，所以我們務必要去結合自身產品特色和出口國家網站風格去定格自己的色調，日韓的追求細膩、華麗、絢麗網頁風格；歐美追求簡潔明瞭的網站風格，快速的導航設置則對他們比較重要。在這裏我們首先要注意到一個細節,就是外國人和中國人的審美觀念的不一致，外國人講究實在的東西，喜歡講究快速明朗、簡單大方的網頁結構，請忘掉

（07）素材定主體1. 巧婦難為無米之炊，沒有好的素材，再多的想法都是憑空想象，首先，我會去找第一張素材，旺鋪首頁的背景大圖，這張素材務必要高像素、清晰。因為在1920像素下，小圖片無法做清晰。接下來去找相關的一些人物、圖標、banner背景、字體等需要用到的素材.

（08）設計定效果1. 打開photoshop，使用一個1920寬像素的文件進行設計排版，使用已經拉好參考線的模版製作。

（09）2. 製作頂部標題，標題儘可能簡潔整齊，無需放置太多素材，因為頂部標題是第一視覺，太多東西會把下面的主體部分搶佔視覺，一般放置logo、標題、聯繫方式均可。

（10）3. 接下來製作導航條，發揮想象、參考國外網站、結合色調，搭配背景，醒目的導航設置是買家喜歡的。

（11）4. 下面製作第一屏主體大圖，這裏務必突出公司優勢，讓客户第一眼充分了解你，你做什麼產品，其實一般客户進入旺鋪首頁前是在產品頁瀏覽然後進入，既然對產品有興趣，他只有兩個目的，第一查看更多產品，第二瞭解公司實力，我們在首頁一定要把公司的優勢展示出來，。如大圖放置產品圖片，背景則不要太花色、太搶眼，可以用實色適當遮蓋一下或者模糊背景，我們要定格的目光是產品，底部背景只是起到襯托視覺的作用，潛意識會告訴客人我的第一眼是看到產品和文字。如背景直接是效果圖，我們可以適當模糊產品外的地方，把突出的產品搶佔目光。

（12）5. 下面是一個公司的優勢展示，這裏的板塊已經是第二屏了，這裏我們可以用幾個點來放置內容，清晰、明瞭。無需太多圖片素材，儘量以文字和圖標元素為主，當客人看完第一屏產品後，看到第二屏需要適當的歇一下，轉移下思維，先來了解下公司。

（13）6. 下面是第三屏，這裏我們可以放置產品的分類，產品分類儘可能展示我們的所有產品分類，讓客人一目瞭然。

（14）7. 當客人再看完產品分類後，我們再做一個Why choose us?直接告訴客人為什麼要選我，我有什麼不同之處。

（15）8. 接下來做一個公司的展示，當客人看完產品分類，以及你公司的優勢，想必客人已經對你有50%的瞭解，我們這裏開始可以加強客人的信任感，讓客人有再往下看的動作。公司場地，車間，辦公室都可以展示出來，客人看完上面只是文字與產品的圖片，一定會想看下工廠究竟長什麼樣的，這裏直接加分！

（16）9. 公司介紹下面再放置一些客人的合照、展會照片、以表示真實性，讓信任感再度提升。

（17）10. 到這裏，客人瞭解的已經比較多了，下面放置一個多語言國旗和聯繫方式（旺旺、郵箱直接點擊聯繫）讓客人可以變換自己的語言和馬上聯繫你，促進營銷，多語言國旗的代碼以及旺旺在線聯繫的代碼可下載。

（18）11. 這裏放置一個滾動的產品展示，讓簡潔的網站馬上可以生動起來，滾動的產品，每個圖片都有獨自的超鏈接，避免全部產品點擊到一個鏈接。

（19）12. 再下面是產品的展示，結合每個產品單獨配一張banner海報，把產品效果圖和產品圖結合展示。

（20）13. 網站底部，我們需要做一個網站導航以及聯繫方式，增加整個首頁的統一感，更加專業。而且這裏的加的產品圖片可以變動的，大家都知道裝修後台限制了很多格式和代碼，gif是不能上載的，我們怎樣做上去呢，有兩個方法的，第一做好gif圖片，把後綴改成.jpg在裝修後台上載；第二是在阿里外貿圈論壇裏發貼的時候上載gif圖片，複製圖片網址，然後在旺鋪裏面使用。

（21）總結以上設計步驟，整個首頁排版以及設計都完成了，接下來需要用到ps裏面的切片工具，把每一部分都切開來，加入自定義的超鏈接，整個旺鋪就大功告成了。