- 美工思維：寫給淘寶天貓美工看的設計書
- 顧領中
- 3997字
- 2020-10-23 10:55:33
1.4 淘寶海報的各模塊尺寸
淘寶店鋪的裝修體現著一家店鋪的形象、氣質、檔次。在淘寶店鋪中，不同的頁面、不同的模塊用到的海報尺寸是不同的，有淘寶網規定的標準規范。
1.4.1 設計小白如何理解像素？
像素（Pixel）是由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，而這些小方格的顏色和位置決定了該圖像所呈現出來的樣子。可以將像素視為整個圖像中不可分割的單位或者元素，不可分割的意思是它不能夠再切割成更小單位抑或元素，它是以一個單一顏色的小格存在的。每一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上呈現的大小。
如果將圖片放大到最大會出現一個個方格，這些方格稱為像素點，下面來看看一個像素點究竟有多大。
1 新建一個寬度為1像素、高度為1像素、分辨率為72像素/英寸的文檔，單擊【創建】按鈕，如下圖所示。
提示：和屏幕相關的設計的像素都是72像素。
2 屏幕中只有一個小亮點，很難看清，按住【Alt】+鼠標滾輪將圖像放大至最大，如下圖所示。
提示：像素的本質就是一個像素點，這個像素點可以對應任意一種顏色。如果一個圖像有1000萬像素，就代表這個圖像有1000萬種顏色點，它的顏色既可以相同也可以不同，相當于我們拿顯微鏡看到的像素點。
3 另外新建一個1萬像素的文檔，在1∶1情況下它的大小如下圖所示。
下面通過實際圖像來感受一下像素和像素點的大小。
1 在PS中打開“素材\ ch01\像素配套圖.jpg”，我們看到的物理大小是不算大的，如下圖所示。
2 我們將視圖比例調為1∶1，如下圖所示。
提示：用戶可以按【Ctrl+1】組合鍵將圖像放大至1∶1。
3 選擇【圖像】→【圖像大小】選項，可以查看圖像真正的大小和像素大小，如下圖所示。
提示：一般顯示屏容納最多的像素是1440×900，大概可以容納140萬個像素點，可見我們的素材圖片有多大。
為了鞏固大家對像素的理解，我們可以打開淘寶網，讓大家用猜的方式加強對像素的理解。比如在鉆展圖的區域，憑肉眼看像素大概的大小，前文我們介紹了100萬的像素大概是多大，也介紹了整個屏幕的寬度是1440像素，那我們就可以拿這張圖來做對比，它大概占整個屏的寬度是多少，就可以算出圖像的大概尺寸了，公式就是用1440像素除以圖像占滿全屏的個數。
下面看幾個在設計中比較常用的尺寸1∶1情況下的大小，依次是700×700和950×400像素，如下圖所示。
1.4.2 全屏1920海報設計規范
主流的計算機分辨率為1024×600像素、1366×768像素、1024×800像素及1400×900像素、1920×1080像素等，在做設計時需要考慮屏幕顯示問題，并對不同的分辨率做適配。
1 打開“素材\ch01\1920海報規范用圖1和圖2.jpg”，選擇【圖像】→【圖像大小】選項，查看圖像大小是否是1920×650像素，如下圖所示。
2 從“素材\ch01\1920海報規范用圖1和圖2.jpg”可以看出，設計的主題只在整個海報的中心，如下圖所示。
提示：將主題放在頁面中間，是為了能夠適配所有分辨率的顯示屏。
1. C店（直系店鋪賣家）的設計規范
1 新建一個1920×400像素的文檔，如下圖所示。
2 C店的中心尺寸是950像素，選擇【視圖】→【新建參考線】選項，在彈出的【新建參考線】對話框的【位置】中依次輸入“485px”和“1435px”添加參考線，單擊【確定】按鈕，如下圖所示。
提示：如何得出參考線值，（1920－950）÷2=485就是第一個參考線的像素值，485+950=1435就是第二個參考線的像素值。
3 添加參考線后的效果如下圖所示。
提示：在做設計時，重要內容凸顯在區域框內即可。
2. B店（天貓店）的設計規范
B店的中心尺寸是990像素，依照C店參考線的操作，添加參考線，像素值為465像素和1455像素。C店的中心尺寸用紅色表示，B店用黑色表示，對比圖如下圖所示。
提示：兩邊區域是用來做搭配的，重要文案切記不要放在兩邊區域內。
1.4.3 基礎950&990模塊
通常的店鋪裝修主要應用的是950模塊，下面我們來學習如何進行950模塊的設計。
1．進入950模塊的編輯
1 進入淘寶賬號中的賣家中心，在左側的列表【店鋪管理】欄中單擊【查看淘寶店鋪】鏈接，可以看到店鋪的首頁如下圖所示。
2 返回【店鋪管理】欄中單擊【裝修店鋪】鏈接，會彈出一個頁面，單擊【立即升級】按鈕，如下圖所示。
提示：淘寶一鉆以下的商家可免費使用智能版，但需要按照提示立即升級，而一鉆以上的商家，每個月需要繳99元旺鋪智能版使用服務費。
3 在【服務市場】頁面，單擊【一鉆以下賣家可免費使用智能版，請點擊這里立即使用】打開淘寶旺鋪的智能版，如下圖所示。
4 進入PC端，單擊【首頁】后的【裝修頁面】按鈕，如下圖所示。
提示：在彈出的新手引導頁面中，選中【老司機不需要引導】即可。
5 再次進入PC端，單擊【首頁】后的【裝修頁面】按鈕，進入店面編輯頁面，如下圖所示。
提示：950模塊主要應用于首頁。
6 選擇【950】模塊，先將【圖片輪播】【SALE特價】【本店搜索】等區域刪除，如下圖所示。
7 將所有模塊刪除后，單擊【預覽】按鈕，可以看到店鋪就只剩一個導航條，如下圖所示。
8 放置店鋪招牌時會出現【松開鼠標模塊會放到這里】的提示，如下圖所示。
提示：店鋪招牌只能放在固定位置。
9 導航條的位置可以通過上下箭頭來調整，如下圖所示。
提示：某些模塊不能添加時，可以選擇布局管理，并添加布局單元，再返回頁面編輯就可以添加相應的模塊了。當在布局管理中把布局單元刪除后，在頁面編輯中無法添加相應的模塊。
2．自定義模塊的編輯
頁面編輯是直接從基礎模塊中拖曳出來的，950模塊中出現的紅包、滿返、購物券、滿減等，都需要配合營銷來制作。最常用的就是自定義模塊，自定義模塊的編輯方法如下。
1 在左側【基礎模塊】區域選擇【自定義區】模塊，按住鼠標左鍵，將其拖曳至右側1920的【可添加模塊】區域，之后單擊【編輯】按鈕，如下圖所示。
2 單擊【插入圖片空間圖片】按鈕
，如下圖所示。
提示：店鋪裝修時，可以通過代碼或圖片兩種形式上傳圖片。
3 選擇【上傳新圖片】選項，單擊【添加圖片】鏈接，如下圖所示。
4 在彈出的上傳圖片頁面中單擊【點擊上傳】，如下圖所示。
5 選中要上傳的圖片，單擊【上傳圖片】按鈕，如下圖所示。
6 從圖片空間中選中一張圖片，單擊【插入】按鈕，再單擊【確定】按鈕，預覽效果如下圖所示。
提示：因為我們使用的圖片是1920圖片，所以沒有完全顯示出來，無法看到主題內容。
3．圖片的適配方法
可以通過裁剪的方式將主題部分完全顯示出來，具體操作步驟如下。
1 在PS中打開“素材\ch01\1920海報規范用圖1.jpg”圖片，使用【裁剪工具】按鈕
，選擇寬為950像素、高為650像素的分辨率進行裁剪，效果如下圖所示。
2 單擊【文件】→【儲存為】選項，將其保存到桌面。在彈出的【JPEG選項】對話框中，將【圖像選項】的【品質】設置為“10”，單擊【確定】按鈕，如下圖所示。
3 重復自定義模塊編輯的操作步驟第3～5步上傳修剪好的圖片，預覽的最終效果如下圖所示。
4 通過復制鏈接的方式載入圖片，將鼠標指針放在載入圖片上，會出現【復制鏈接】按鈕，如下圖所示。
5 單擊【復制鏈接】按鈕，在彈出的對話框中復制鏈接，如下圖所示。
6 返回自定義內容區，單擊【插入圖片】按鈕
，在彈出的圖片對話框中粘貼鏈接，單擊【確定】按鈕，如下圖所示。
7 滾動滑輪條至底部，單擊【確定】按鈕，再單擊【預覽】按鈕，即可看到效果圖，如下圖所示。
提示：載入圖片的方式有多種，本節我們只講了兩種。
8 添加圖片鏈接，在PC端頁面裝修頁面，單擊需要添加鏈接區域的【編輯】按鈕，如下圖所示。
9 單擊【插入圖片】按鈕
，雙擊圖片彈出【圖片】對話框，如下圖所示。
10 在淘寶中找一個頁面，復制鏈接，如下圖所示。
11 返回【圖片】對話框，將鏈接粘貼到鏈接網址中，單擊【確定】按鈕，如下圖所示。
12 在自定義內容區，單擊【確定】按鈕，如下圖所示。
13 在預覽模式下，單擊該圖片任意位置都會跳轉至步驟10的頁面。
4．添加圖片輪播模板
下面介紹添加圖片輪播模板的方法，具體操作步驟如下。
1 拖曳圖片輪播模板至合適區域，單擊【編輯】按鈕，打開【圖片輪播】對話框，如下圖所示。
2 在圖片空間中復制圖片鏈接，粘貼至圖片地址文本框中，單擊【添加】按鈕，可以添加一張新的輪播圖片，如下圖所示。
提示：重復此操作可以添加多個輪播圖片。
3 再復制粘貼一個圖片鏈接，單擊【保存】按鈕，即可得到效果圖，如下圖所示。
提示：如果不想要圖片輪播藍條框，單擊【編輯】，在【圖片輪播】對話框中單擊【顯示設置】選項，選中顯示標題中的【不顯示】選項，單擊【保存】按鈕，如下圖所示。
1.4.4 基礎750&790模塊
本節介紹750和790模塊的設計方法，750模塊是淘寶店鋪中使用的模塊，而790模塊是天貓店鋪中使用的模塊，應用模塊的具體操作步驟如下。
1 進入“店鋪裝修”界面，選擇【PC端】，進入店鋪首頁的裝修頁面，在【布局管理】區域中添加相應的750模塊，如下圖所示。
2 選擇左寬右窄的模式，返回編輯頁面，選擇750區域中的任意模塊拖曳至此即可，如下圖所示。
提示：若頁面出現卡頓現象，可以單擊【刷新】按鈕，或返回頁面管理頁面重新進入即可。
790模塊的圖片添加過程和750模塊相同，在此不作詳細介紹。下面介紹有關首頁部分750模塊的知識。
1 首頁部分包括基礎頁、寶貝詳情頁和寶貝列表頁，更細的劃分如下圖所示。
2 默認寶貝詳情頁使用的是750模塊，單擊進入默認寶貝詳情頁查看，如下圖所示。
提示：默認寶貝詳情頁是所有寶貝都可以應用的部分，是750模塊的第2個入口。
3 第3個入口在寶貝分類頁，點擊進入，如下圖所示。
4 以海瀾之家天貓旗艦店為例，在分類頁面點擊【夏季新品】，其模式就是默認寶貝分類頁的布局，如下圖所示。
5 單擊任意一個寶貝，進入寶貝詳情頁，該圖就是利用默認寶貝詳情頁做的，如下圖所示。
1.4.5 基礎190模塊
190模塊一般在店鋪網頁的左側部分，在以往的設計中，190模塊往往只會簡單地做一些客服、價格搜索和手機店鋪等模塊，但現在無論是首頁、默認寶貝詳情頁還是默認寶貝分類頁都更加重視190模塊的設計。
當搜索進入某家店鋪時，最重要的是詳情頁，瀏覽詳情頁的時候很容易會注意到左側的190模塊，所以190模塊的設計比首頁設計更為重要，僅次于詳情頁的重要性。下面打開一個寶貝詳情頁作為參考，如下圖所示。
190模塊可以用到首頁、默認寶貝詳情頁和默認寶貝分類頁的設計當中，與750模塊的功能一樣。