網(wǎng)店店招與導航的設計ppt課件

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

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

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

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

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

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

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