網(wǎng)店店招與導(dǎo)航的設(shè)計

網(wǎng)店店招與導(dǎo)航的設(shè)計第一頁，共23頁。店招與導(dǎo)航的設(shè)計CHAPTERFOUR第二頁，共23頁。店招與導(dǎo)航位于網(wǎng)店首頁的最頂端，是買家進(jìn)入店鋪首頁后看到的第一個模塊，因此是網(wǎng)店首頁設(shè)計的重中之重。它們的主要作用是向買家展示店鋪的店名、所銷售商品等，并提供訪問店鋪各個功能模塊的快速通道。了解網(wǎng)店店招與導(dǎo)航的作用與設(shè)計思路。能夠通過添加修飾元素、圖層樣式等方式對店招進(jìn)行修飾。根據(jù)店鋪商品圖片及店鋪風(fēng)格來確定店鋪店招和導(dǎo)航的風(fēng)格及配色。學(xué)習(xí)目標(biāo)第三頁，共23頁。Contents目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3綜合實(shí)訓(xùn)4技能拓展5第四頁，共23頁。一、了解網(wǎng)店店招與導(dǎo)航認(rèn)識店招與導(dǎo)航01店招與導(dǎo)航的設(shè)計思路02第五頁，共23頁。一、了解網(wǎng)店店招與導(dǎo)航1認(rèn)識店招與導(dǎo)航店招和導(dǎo)航位于網(wǎng)店的最頂端，成功的店招通常采用標(biāo)準(zhǔn)的顏色和字體、簡潔的設(shè)計版面。此外，店招一般包含精煉、吸引力強(qiáng)的廣告語，畫面還要具備強(qiáng)烈的視覺沖擊力，清晰地告訴買家店鋪在賣什么，而且通過店招也可以對店鋪的裝修風(fēng)格進(jìn)行定位。第六頁，共23頁。一、了解網(wǎng)店店招與導(dǎo)航1認(rèn)識店招與導(dǎo)航了讓店招有特點(diǎn)且便于記憶，在設(shè)計過程中都會采用簡短、醒目的廣告語等輔助內(nèi)容，并通過適當(dāng)?shù)呐鋱D來增強(qiáng)店鋪的認(rèn)知度。店招所包含的主要內(nèi)容包括店鋪Logo、店鋪名稱、品牌名稱、簡短的廣告語和廣告商品等。第七頁，共23頁。一、了解網(wǎng)店店招與導(dǎo)航2店招與導(dǎo)航的設(shè)計思路設(shè)計者在對店招與導(dǎo)航的設(shè)計中，使用了與店鋪商品風(fēng)格一致的色彩和圖片，同時添加了具有吸引力的廣告信息和收藏信息來吸引買家的興趣和喜愛。第八頁，共23頁。一、了解網(wǎng)店店招與導(dǎo)航2店招與導(dǎo)航的設(shè)計思路橘紅色象征著太陽的色彩，所以使用橘紅色能讓色彩與商品的特點(diǎn)更加吻合。為了突顯店鋪的品質(zhì)感，讓買家給予店鋪更多的信任，在設(shè)計制作過程中還使用了不同的字體及顏色等，以此打造精致的畫質(zhì)感。第九頁，共23頁。Contents目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3綜合實(shí)訓(xùn)4技能拓展5第十頁，共23頁。二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計1設(shè)計理念以淺粉色為主，表現(xiàn)出溫暖、明亮的感覺。使用明度較高的幾種色彩來修飾畫面，烘托出嬰兒嬌柔、稚嫩的肌膚質(zhì)感，讓店鋪形象更加活潑、可愛。使用淺色的蕾絲圖案作為店招背景，營造出漂亮、靈動的視覺效果。采用俏皮可愛且圓潤的字體來突出文字，使整個畫面風(fēng)格更加統(tǒng)一。第十一頁，共23頁。二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2技術(shù)要點(diǎn)使用素材制作店招中所需的背景和修飾元素，通過圖層蒙版和不透明度來調(diào)整編輯的效果。利用“描邊”樣式對繪制的形狀進(jìn)行修飾，使其邊緣清晰可見。使用自動形狀工具中的“搜索”形狀來添加搜索框中的圖形。第十二頁，共23頁。二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計3實(shí)操演練第十三頁，共23頁。Contents目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3綜合實(shí)訓(xùn)4技能拓展5第十四頁，共23頁。三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計1設(shè)計理念本案例在色彩搭配上通過使用明亮的色彩來營造時尚、甜美的感覺，整個畫面以粉色和黃色為主，女性青春感十足，整個畫面色彩和諧而統(tǒng)一。店標(biāo)文字經(jīng)過適當(dāng)?shù)乃囆g(shù)化處理，增添了畫質(zhì)的精致度和可愛感；在導(dǎo)航上對重點(diǎn)欄目做不同的顏色處理，突出重點(diǎn)，吸引買家眼球。第十五頁，共23頁。三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計2技術(shù)要點(diǎn)利用剪貼蒙版對模特圖像進(jìn)行處理。利用矩形選框工具繪制選區(qū)并填充顏色。使用圓角矩形工具繪制修飾形狀。第十六頁，共23頁。三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3實(shí)操演練第十七頁，共23頁。Contents目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3綜合實(shí)訓(xùn)4技能拓展5第十八頁，共23頁。四、綜合實(shí)訓(xùn)第十九頁，共23頁。Contents目錄了解網(wǎng)店店招與導(dǎo)航1實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計2實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計3綜合實(shí)訓(xùn)4技能拓展5第二十頁，共23頁。五、技能拓展不同的電商平臺上，網(wǎng)店的店招與導(dǎo)航設(shè)計的內(nèi)容都是相似的。在京東上也可以自由地設(shè)計店鋪的店招和導(dǎo)航，如圖所示為京東上某店鋪的店招和導(dǎo)航，可以看到店招中都會標(biāo)明店鋪的名稱、品牌、廣告語、店鋪或品牌Logo等，這些內(nèi)容與淘寶網(wǎng)上的設(shè)計是非常相似的。第二十一頁，共23頁。五、技能拓展值得一提的是，在京東上對店招進(jìn)行裝修，可以通過添加模塊來進(jìn)行操作，這樣編輯可以對店招與導(dǎo)航的尺寸進(jìn)行自由的定制，可將模塊布局編輯完成后，再根據(jù)布局中模塊的尺寸來設(shè)計對象即可。此外，每個店鋪首頁的最頂部會有一個通欄布局。如圖所示為“