網(wǎng)店美工案例教程第1章電商美工設(shè)計基礎(chǔ)課件

1、網(wǎng)店美工案例教程第1章電商美工設(shè)計基礎(chǔ)目錄 Contents1.1 網(wǎng)店裝修的設(shè)計基礎(chǔ)與要求1.2 網(wǎng)店裝修色彩的搭配1.1.1 店標(biāo)設(shè)計基礎(chǔ)與要求常見的店標(biāo)有文字店標(biāo)、圖形店標(biāo)和圖文組合店標(biāo)：文字店標(biāo)表達(dá)比較準(zhǔn)確；圖形店標(biāo)形象生動，不受語言限制，易于識別；圖文組合店標(biāo)同時兼具了文字及圖形店標(biāo)的優(yōu)點，圖文并茂，形象生動，又易于識別，因此使用更加廣泛。如圖所示為圖文組合類店標(biāo)，名稱和精美的圖案相互呼應(yīng)，既直接又美觀。1.1.1 店標(biāo)設(shè)計基礎(chǔ)與要求優(yōu)秀的店標(biāo)設(shè)計應(yīng)具備以下特點。1. 店標(biāo)設(shè)計的特點010203040506設(shè)計特點有領(lǐng)導(dǎo)性造型新穎、識別性強有統(tǒng)一性要與時俱進(jìn)有延伸性有系統(tǒng)性1.1.1

2、 店標(biāo)設(shè)計基礎(chǔ)與要求不同平臺對店標(biāo)尺寸的要求通常有所不同：PC端和跨境端電商店鋪店標(biāo)尺寸為230像素70像素，大小不超過150KB；移動端電商店鋪店標(biāo)尺寸為100像素100像素，大小不超過80KB。店鋪店標(biāo)上傳的圖片文件格式通常要求為GIF、JPG、JPEG、PNG等。2. 店標(biāo)設(shè)計規(guī)范與要求1.1.1 店標(biāo)設(shè)計基礎(chǔ)與要求店標(biāo)采用的文字和圖形必須遵守相關(guān)的法律法規(guī)，重要的規(guī)范要求如下。2. 店標(biāo)設(shè)計規(guī)范與要求未經(jīng)許可，嚴(yán)禁使用電商平臺專用文字和圖形作為店鋪宣傳的文字和圖形。店標(biāo)禁止使用帶有種族歧視、仇恨、性和淫穢信息的語言，或不良言辭；店標(biāo)禁止使用與國家名稱、國旗、國徽、軍旗相同或者近似的文字

3、或圖形。店標(biāo)禁止使用同政府間國際組織的旗幟、徽記、名稱相同或者近似的文字或圖形。店標(biāo)禁止使用同第三方標(biāo)志相同或者近似的文字或圖形，如中國郵政、中國電信、中國移動、中國聯(lián)通、中國網(wǎng)通和中國鐵通、“紅十字”標(biāo)志、“紅新月”標(biāo)志等。如用戶或店鋪不具有相關(guān)資質(zhì)或未參加相關(guān)活動，不允許使用與特定資質(zhì)或活動相關(guān)的特定含義的詞匯，如消費者保障計劃、先行賠付等。店標(biāo)禁止使用帶有民族歧視性的、有害于社會主義道德風(fēng)尚或者有其他不良影響的、或夸大宣傳并帶有欺騙性的文字。店標(biāo)禁止使用縣級以上行政區(qū)劃的地名或者公眾知曉的外國地名，地名具有其他含義的除外，已經(jīng)注冊的使用地名的店標(biāo)繼續(xù)有效。1.1.2 店招設(shè)計基礎(chǔ)與要求不

4、同平臺對店標(biāo)尺寸的要求有所不同，通常淘寶PC端和跨境端電商店鋪默認(rèn)店招尺寸為950像素120像素，移動端電商店鋪店招尺寸為642像素200像素，大小不超過200KB。PC端店招案例1.1.2 店招設(shè)計基礎(chǔ)與要求隨著電商移動化趨勢的加強，移動端的店招在品牌宣傳、提升視覺形象方面發(fā)揮著日益重要的作用。在設(shè)計店招時，要求其應(yīng)具有新穎別致、易于傳播的特點，這就必須遵循兩個基本的原則。移動端店招案例品牌形象的植入：品牌形象的植入可以通過店鋪名稱、標(biāo)志來展示品牌形象，可從品牌專屬顏色、Logo顏色、字體等體現(xiàn)品牌氣質(zhì)，還可以利用廣告語傳遞品牌理念。抓住產(chǎn)品定位：精準(zhǔn)的產(chǎn)品定位可以讓消費者很容易清楚店鋪商品

5、是否適合自己，快速吸引目標(biāo)消費者進(jìn)入店鋪。1.1.2 店招設(shè)計基礎(chǔ)與要求店招的視覺設(shè)計應(yīng)遵守以下規(guī)范。01020304店招顏色盡量少于3種色彩，保持店招的簡潔、明了。 店招設(shè)計要做到與眾不同、標(biāo)新立異。店招的視覺重點不宜過多，有12個就夠了。相應(yīng)地使用設(shè)計素材、造型形式以及流行色彩進(jìn)行搭配。1.1.3 Banner設(shè)計基礎(chǔ)與要求1. 了解Banner設(shè)計需求后續(xù)案例中會要求根據(jù)素材和商品信息制作淘寶PC端、移動端、跨境端3個端口的商品Banner。PC端Banner尺寸為727像素416像素移動端Banner尺寸為608像素304像素（文字簡潔）跨境端Banner尺寸為980像素300像素（要

6、求采用英文進(jìn)行制作）1.1.3 Banner設(shè)計基礎(chǔ)與要求2. 確定Banner風(fēng)格下面對電商常見的幾種Banner風(fēng)格進(jìn)行介紹。科技炫酷風(fēng)格Banner喜慶節(jié)日、產(chǎn)品促銷風(fēng)格Banner青春、活力風(fēng)格Banner1.1.3 Banner設(shè)計基礎(chǔ)與要求2. 確定Banner風(fēng)格復(fù)古風(fēng)格Banner 簡約時尚風(fēng)格Banner趣味、可愛風(fēng)格Banner文藝、小清新風(fēng)格Banner1.1.3 Banner設(shè)計基礎(chǔ)與要求3. 進(jìn)行Banner排版設(shè)計排版是指將文字、圖片、圖形等可視化信息元素進(jìn)行位置、大小、外觀的調(diào)整，使之達(dá)到美觀的視覺效果。在Banner排版過程中，常用到以下排版原則。相關(guān)內(nèi)容對齊、

7、聚攏適當(dāng)留白保持畫面的和諧統(tǒng)一使用對比突出原則把握節(jié)奏韻律把握畫面的平衡性排版原則1.1.3 Banner設(shè)計基礎(chǔ)與要求3. 進(jìn)行Banner排版設(shè)計在Banner排版過程中，文案與商品（模特）的排版尤為重要，一般呈現(xiàn)為以下幾種模式。兩欄式Banner三欄式Banner上下式Banner 1.1.3 Banner設(shè)計基礎(chǔ)與要求3. 進(jìn)行Banner排版設(shè)計組合模式Banner 滿版式Banner 1.1.3 Banner設(shè)計基礎(chǔ)與要求3. 進(jìn)行Banner排版設(shè)計中心式Banner 1.1.4 主圖設(shè)計基礎(chǔ)與要求不同平臺對主圖尺寸的要求有所不同，通常淘寶PC端和跨境端電商店鋪主圖尺寸為800像

8、素800像素，移動端主圖尺寸為600像素600像素。主圖一般由背景、商品和文案組成，下面從這3個方面分析主圖設(shè)計的要求。背景：背景顏色常使用可以烘托商品的純色背景，切記不要用過于繁雜的顏色。純色背景主圖場景圖主圖1.1.4 主圖設(shè)計基礎(chǔ)與要求文案：在編輯促銷信息時，內(nèi)容要盡量簡單、字體統(tǒng)一，做到簡短、清晰有力，避免出現(xiàn)促銷信息混亂、喧賓奪主等情況。文案精簡的主圖商品：需要控制主圖中商品的大小，商品太小不方便查看，商品太大又不易放置文案，一般商品高度應(yīng)控制在背景高度的2/3到4/5為宜。1.1.5 詳情頁設(shè)計基礎(chǔ)與要求1. 明確詳情頁展示的內(nèi)容在設(shè)計商品詳情頁模塊時，首先應(yīng)通過焦點圖展示商品，然

9、后將商品的賣點描述清楚，對商品品質(zhì)進(jìn)行展示，并給出優(yōu)惠讓消費者心動，最后通過樹立品牌和服務(wù)形象，促進(jìn)信任，達(dá)成交易，下面分別進(jìn)行介紹。 商品品質(zhì)展示是對商品信息的詳細(xì)展示。 樹立品牌和服務(wù)形象消除消費者的疑慮和對相應(yīng)疑慮的解答。 焦點圖通過場景圖或海報對商品的特點進(jìn)行展示。 商品賣點展示增加商品競爭力，吸引消費者。1.1.5 詳情頁設(shè)計基礎(chǔ)與要求1. 明確詳情頁展示的內(nèi)容工藝細(xì)節(jié)展示品質(zhì)保障展示1.1.5 詳情頁設(shè)計基礎(chǔ)與要求2. 確定詳情頁規(guī)格與風(fēng)格通常淘寶PC端和跨境端電商店鋪詳情頁寬度為750像素、移動端詳情頁寬度為480像素，詳情頁高度通常會根據(jù)商品需要展示的內(nèi)容進(jìn)行調(diào)節(jié)。詳情頁可呈現(xiàn)

10、多種風(fēng)格，設(shè)計前可參考該商品的Banner風(fēng)格進(jìn)行確定。為了保持風(fēng)格的統(tǒng)一，商品詳情頁的用色、字體、排版方式等應(yīng)具有協(xié)調(diào)統(tǒng)一性，各個模塊之間的版式分割要統(tǒng)一。1.1.5 詳情頁設(shè)計基礎(chǔ)與要求3. 進(jìn)行詳情頁設(shè)計在進(jìn)行詳情頁文案和圖片的編輯時，為了使詳情頁更加具有吸引力，需要注意以下3點。020103詳情頁選擇的圖片要清晰、美觀，盡量從多角度展示商品。 保持圖片的精美編寫商品文案時需要有創(chuàng)意。 差異化文案都必須真實地反應(yīng)或介紹出商品的真實屬性。 實事求是原則目錄 Contents1.1 網(wǎng)店裝修的設(shè)計基礎(chǔ)與要求1.2 網(wǎng)店裝修色彩的搭配1.2.1 色彩搭配的原理鮮明紅色復(fù)古紅色色彩是有情感的，不

11、同的色彩會帶給人不同的心里感受，具體影響如下。紅色系：紅色是強有力、喜慶的色彩，具有刺激效果，容易使人產(chǎn)生憤怒、熱情、活力等感覺。鮮明的紅色極容易吸引目光，在店鋪裝飾中常用于突出表現(xiàn)某些內(nèi)容。白色系：純白色會帶給人光明、嚴(yán)寒的感覺，在使用白色時，一般會摻一些其他的色彩。1.2.1 色彩搭配的原理堅果海報男士皮鞋主圖橙色系：橙色給人溫暖、朝氣活潑、華麗、健康、興奮、歡樂、輝煌、有食欲的感覺。黃色系：明亮的黃色給人甜美幸福、喜慶、富饒的感覺。綠色系：綠色是大自然中最常見的顏色，淺綠色給人文藝清新的感覺，深綠色給人天然、健康、生命、青春、希望的感覺。黃色系綠色系1.2.1 色彩搭配的原理藍(lán)色系紫色系

12、藍(lán)色系：高純度的藍(lán)色給人整齊輕快的感覺，低純度的藍(lán)色給人都市化的感覺。紫色系：紫色給人神秘、高貴、優(yōu)雅、浪漫的感覺。較暗色調(diào)的紫色給人成熟的感覺，適用于以女性為目標(biāo)消費群體的或攝影、繪畫等藝術(shù)類的店鋪裝修。黑色系：黑色是一種百搭潮流的色彩，而在網(wǎng)店裝修設(shè)計中，偏黑的顏色給人高貴、穩(wěn)重、高科技的感覺。黑色系1.2.2 色彩搭配的技巧1. 同色系色彩搭配同色系色彩搭配是指使用一種色系中的不同純度或明度的色彩進(jìn)行搭配，這樣搭配出的效果畫面和諧、平衡性強，是比較安全的色彩搭配方式。如主色調(diào)為紅色，在頁面中搭配深淺不一的紅色，如圖所示，用白色或黑色作為點綴色，突出文案或商品細(xì)節(jié)。 1.2.2 色彩搭配的

13、技巧2. 不同色相的色彩搭配在12色相環(huán)中，將色彩分為紅、橙、黃、綠、藍(lán)、紫等12個區(qū)域，離得近的幾種色彩搭配起來更柔和，離得遠(yuǎn)的幾種色彩搭配起來則會更強烈，如圖所示。相鄰色搭配間隔色搭配互補色搭配分散的互補色搭配常見的搭配方式分別如下1.2.2 色彩搭配的技巧2. 不同色相的色彩搭配相鄰色搭配互補色搭配間隔色搭配1.2.2 色彩搭配的技巧3. 不同純度、明度的色彩搭配在色彩搭配中，除了色相的搭配，純度、明度也直接影響色彩搭配效果，以Photoshop的拾色器為例，拖動左側(cè)的顏色條，可以改變色相，將左側(cè)的顏色選擇區(qū)域中的色彩純度分為高純度、中純度、低純度，色彩明度分為高明度、中明度、低明度，有以下常見的搭配。色彩明度與純度劃分1.2.2 色彩搭配的技巧3. 不同純度、明