網(wǎng)店店招與導(dǎo)航的設(shè)計(jì)ppt課件

1、店招與導(dǎo)航的設(shè)計(jì)店招與導(dǎo)航的設(shè)計(jì)CHAPTER FOUR店招與導(dǎo)航位于網(wǎng)店首頁的最頂端，是買家進(jìn)入店鋪首頁后看到的第一個(gè)模塊，因此是網(wǎng)店首頁設(shè)計(jì)的重中之重。它們的主要作用是向買家展示店鋪的店名、所銷售商品等，并提供訪問店鋪各個(gè)功能模塊的快速通道。 了解網(wǎng)店店招與導(dǎo)航的作用與設(shè)計(jì)思路。 能夠通過添加修飾元素、圖層樣式等方式對(duì)店招進(jìn)行修飾。 根據(jù)店鋪商品圖片及店鋪風(fēng)格來確定店鋪店招和導(dǎo)航的風(fēng)格及配色。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)Contents目錄目錄了解網(wǎng)店店招與導(dǎo)航了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3綜合實(shí)訓(xùn)4技能拓展5一、了解網(wǎng)店店招與導(dǎo)航一、了

2、解網(wǎng)店店招與導(dǎo)航0102一、了解網(wǎng)店店招與導(dǎo)航一、了解網(wǎng)店店招與導(dǎo)航n 店招和導(dǎo)航位于網(wǎng)店的最頂端，成功的店招通常采用標(biāo)準(zhǔn)的顏色和字體、簡潔的設(shè)計(jì)版面。此外，店招一般包含精煉、吸引力強(qiáng)的廣告語，畫面還要具備強(qiáng)烈的視覺沖擊力，清晰地告訴買家店鋪在賣什么，而且通過店招也可以對(duì)店鋪的裝修風(fēng)格進(jìn)行定位。一、了解網(wǎng)店店招與導(dǎo)航一、了解網(wǎng)店店招與導(dǎo)航n 了讓店招有特點(diǎn)且便于記憶，在設(shè)計(jì)過程中都會(huì)采用簡短、醒目的廣告語等輔助內(nèi)容，并通過適當(dāng)?shù)呐鋱D來增強(qiáng)店鋪的認(rèn)知度。店招所包含的主要內(nèi)容包括店鋪Logo、店鋪名稱、品牌名稱、簡短的廣告語和廣告商品等。一、了解網(wǎng)店店招與導(dǎo)航一、了解網(wǎng)店店招與導(dǎo)航n 設(shè)計(jì)者在對(duì)店

3、招與導(dǎo)航的設(shè)計(jì)中，使用了與店鋪商品風(fēng)格一致的色彩和圖片，同時(shí)添加了具有吸引力的廣告信息和收藏信息來吸引買家的興趣和喜愛。一、了解網(wǎng)店店招與導(dǎo)航一、了解網(wǎng)店店招與導(dǎo)航n 橘紅色象征著太陽的色彩，所以使用橘紅色能讓色彩與商品的特點(diǎn)更加吻合。為了突顯店鋪的品質(zhì)感，讓買家給予店鋪更多的信任，在設(shè)計(jì)制作過程中還使用了不同的字體及顏色等，以此打造精致的畫質(zhì)感。Contents目錄目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3綜合實(shí)訓(xùn)4技能拓展5二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招

4、與導(dǎo)航設(shè)計(jì)1n 以淺粉色為主，表現(xiàn)出溫暖、明亮的感覺。使用明度較高的幾種色彩來修飾畫面，烘托出嬰兒嬌柔、稚嫩的肌膚質(zhì)感，讓店鋪形象更加活潑、可愛。n 使用淺色的蕾絲圖案作為店招背景，營造出漂亮、靈動(dòng)的視覺效果。n 采用俏皮可愛且圓潤的字體來突出文字，使整個(gè)畫面風(fēng)格更加統(tǒng)一。二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2n 使用素材制作店招中所需的背景和修飾元素，通過圖層蒙版和不透明度來調(diào)整編輯的效果。n 利用“描邊”樣式對(duì)繪制的形狀進(jìn)行修飾，使其邊緣清晰可見。n 使用自動(dòng)形狀工具中的“搜索”形狀來添加搜索框中的圖形。二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航

5、設(shè)計(jì)二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3Contents目錄目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3綜合實(shí)訓(xùn)4技能拓展5三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)1n 本案例在色彩搭配上通過使用明亮的色彩來營造時(shí)尚、甜美的感覺，整個(gè)畫面以粉色和黃色為主，女性青春感十足，整個(gè)畫面色彩和諧而統(tǒng)一。n 店標(biāo)文字經(jīng)過適當(dāng)?shù)乃囆g(shù)化處理，增添了畫質(zhì)的精致度和可愛感；n 在導(dǎo)航上對(duì)重點(diǎn)欄目做不同的顏色處理，突出重點(diǎn)，吸引買家眼球。三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)三、實(shí)操案例：女

6、裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2n 利用剪貼蒙版對(duì)模特圖像進(jìn)行處理。n 利用矩形選框工具繪制選區(qū)并填充顏色。n 使用圓角矩形工具繪制修飾形狀。三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3Contents目錄目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3綜合實(shí)訓(xùn)綜合實(shí)訓(xùn)4技能拓展5四、綜合實(shí)訓(xùn)四、綜合實(shí)訓(xùn)Contents目錄目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)3綜合實(shí)訓(xùn)4技能拓展技能拓展5五、技能拓展五、技能拓展n 不同的電商平臺(tái)上，網(wǎng)店的店招與導(dǎo)航設(shè)計(jì)的內(nèi)容都是相

7、似的。在京東上也可以自由地設(shè)計(jì)店鋪的店招和導(dǎo)航，如圖所示為京東上某店鋪的店招和導(dǎo)航，可以看到店招中都會(huì)標(biāo)明店鋪的名稱、品牌、廣告語、店鋪或品牌Logo等，這些內(nèi)容與淘寶網(wǎng)上的設(shè)計(jì)是非常相似的。五、技能拓展五、技能拓展n 值得一提的是，在京東上對(duì)店招進(jìn)行裝修，可以通過添加模塊來進(jìn)行操作，這樣編輯可以對(duì)店招與導(dǎo)航的尺寸進(jìn)行自由的定制，可將模塊布局編輯完成后，再根據(jù)布局中模塊的尺寸來設(shè)計(jì)對(duì)象即可。n 此外，每個(gè)店鋪首頁的最頂部會(huì)有一個(gè)通欄布局。如圖所示為“通欄”模塊裝修編輯過程中的效果，該布局中放置的模塊會(huì)自動(dòng)強(qiáng)制顯示在店鋪所有頁面中。建議在該布局內(nèi)僅放置店鋪招牌、店內(nèi)導(dǎo)航和主推活動(dòng)的Banner等內(nèi)容。課后習(xí)題課后習(xí)題以不同款式的鞋子圖片為素材，設(shè)計(jì)一個(gè)鞋類網(wǎng)店的店