淘寶移動端頁面去設計問題

無線裝修一直被關注，官方也不斷推出更豐富的無線裝修功能和營銷玩法，這都是需要我們不斷去開拓與研究的，自定義模塊與以往的操作習慣可能會有所不同，多去嘗試與瀏覽大店的手法，對於店鋪的視覺提升也會有很大的參考意義與幫助。

　　一、理解無線自定義模塊

1、每增加一行格子，高度增加76px;

無線自定義模塊的寬度固定為608px，高度可以根據自己的需要進行規劃，最小規劃為四個小框才可以獨立一個子模塊，尺寸是152*152px，之後每增加一行(或列)格子，便是增加76px。所以我們的高度就很好控制不用時時打開後台去拉一拉格子才能知道尺寸了。

2、自定義模塊每張圖片上傳後為無縫拼接;

明白這一道理之後，對於我們的版塊規劃是很有意義的，無縫的好處在於，不管頁面設計怎麼做，只要大部分內容區是處於這個尺寸裏面的，方便點擊添加鏈接，那 麼切圖出來上傳的時候，不會影響圖片與圖片之間會存在空隙，換句話説，可以拓寬設計師在設計頁面的時候，進行疊加每個設計內容，而對產品真正做到“自定 義”的展示。

如上圖，三個產品需要切三張圖片，但是自定義上傳的尺寸寬度只有228px+152px+228px(排列順序可以自調)，這個時候我們不必將產品限定在這三個尺寸裏，只需將產品按照想要的排版方式排列好，做到圖片大部分內容處於尺寸之內，如有部分圖片溢出問題也不大。

因自定義模塊的拉動相對其他圖文模塊自由，所以其可設計的自由度也就更大。

　　二、將無線端當成頁面去設計，而不是作為容器去填充內容

要擺脱真正的自定義設計，那麼就需要跳脱格子限制，正確的方式應該是以格子尺寸為骨架，對應去增加設計頁面的`內容，以上圖的案例為參考，按照常規做法是， 海報應用焦點圖模塊，優惠券應用多圖模塊，公告應用左圖右文模塊，而我們可以嘗試的是突破使用習慣，用自定義模塊去做佔屏比較多的設計版面，這樣手機用户 在瀏覽店鋪的時候，海報帶來的衝擊感會更強烈，與下面的內容進行疊加或者是做背景的處理，整體感也會更強。

　　可優化的實操做法可以分幾步來做：

①分析頁面的策劃內容，將自定義模塊當成頁面設計，規劃每個內容應給予的篇幅大小，在草稿紙上規劃頁面大概的排版佈局;

②知道每個內容的大概佈局之後，可以將內容初步進行排版，拉好參考線;

③由於上傳圖片時，圖片的尺寸大小至關緊要，所以在參考線一步需要多注意尺寸不要有誤，可以用選區工具拉出規定的尺寸，再拉上參考線，熟悉尺寸會對頁面的規劃有很大的幫助。