淘寶美工教程

Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[情境導(dǎo)入]小麗自己在家經(jīng)營了一個(gè)服裝網(wǎng)店，為了提高店鋪的收藏量和客服區(qū)的醒目度，小麗需要對(duì)網(wǎng)店首頁的店鋪收藏區(qū)和客服區(qū)進(jìn)行重新的設(shè)計(jì)，以此來增加店鋪的訪問量和服務(wù)機(jī)會(huì)，此時(shí)，店鋪收藏及客服區(qū)的設(shè)計(jì)和創(chuàng)作就顯得非常重要了。[技能要求]客服區(qū)和店鋪收藏中都會(huì)包含必要的文字，在“字符”面板中調(diào)整設(shè)置來改變文字的外觀，使其更加的獨(dú)特，并使用形狀工具來制作畫面中的修飾形狀，通過圖層樣式進(jìn)行美化。根據(jù)店鋪的風(fēng)格，或者設(shè)計(jì)畫面的尺寸來對(duì)店鋪收藏和客服區(qū)進(jìn)行合理的布局，接著使用風(fēng)格和色彩一致的修飾元素進(jìn)行點(diǎn)綴。[效果展示]Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)古典風(fēng)格收藏區(qū)設(shè)計(jì)冷酷風(fēng)格客服區(qū)設(shè)計(jì)6.1了解店鋪收藏及客服區(qū)6.1.1店鋪收藏及客服區(qū)的概述店鋪收藏就是顧客將感興趣的店鋪添加到收藏夾中，以便在再次訪問時(shí)可以輕松的找到相應(yīng)的商品。店鋪收藏的設(shè)計(jì)較為靈活，它可以直接設(shè)計(jì)在網(wǎng)店的店招中，也可以單獨(dú)的顯示在首頁的某個(gè)區(qū)域，如圖6-1和6-2所示。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)為了吸引顧客的注意，也會(huì)將一些寶貝圖片、素材圖片等添加到其中，達(dá)到推銷商品和提高收藏量的雙重目的。還可以使用GIF格式的圖片，即使用幀動(dòng)畫制作的動(dòng)態(tài)圖片，這種閃爍的圖片效果可以使其更容易引起顧客的注意，提高網(wǎng)店的收藏?cái)?shù)量。網(wǎng)店中的客服與實(shí)體店中的售貨員具有相同的作用，但是在網(wǎng)店中如何快速的尋找到客服并進(jìn)行詢問，是客服區(qū)位置擺放和設(shè)計(jì)的關(guān)鍵。默認(rèn)情況下，網(wǎng)店的客服與商品分類相鄰，如圖6-3所示，而隨著網(wǎng)店裝修的不斷提升，越來越多的商家將客服放在了網(wǎng)店首頁的中間或者底部位置，如圖6-4所示。因?yàn)楫?dāng)顧客對(duì)網(wǎng)店首頁瀏覽到一定程度時(shí)，客服區(qū)的及時(shí)顯示會(huì)增加顧客詢問的概率，從而提高網(wǎng)店的銷售量。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)在客服區(qū)的設(shè)計(jì)中，商家會(huì)直接使用網(wǎng)店的聊天圖標(biāo)作為客服頭像的圖片，或者為了讓客服區(qū)的設(shè)計(jì)與整個(gè)店鋪的風(fēng)格一致，會(huì)使用一些卡通的頭像，或者真實(shí)的人物頭像來對(duì)客服的形象進(jìn)行美化，提高顧客對(duì)客服交流的興趣，如圖6-5和6-6所示分別為使用聊天圖標(biāo)和卡通頭像作為客服圖片的設(shè)計(jì)效果。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)在對(duì)網(wǎng)店的店鋪收藏和客服區(qū)進(jìn)行設(shè)計(jì)的時(shí)候，大多數(shù)會(huì)將這兩個(gè)部分結(jié)合起來，因?yàn)榈赇伿詹睾涂头紩?huì)對(duì)網(wǎng)店的日后成交量產(chǎn)生較大的影響，這樣的設(shè)計(jì)會(huì)向顧客展示出網(wǎng)店的完善售前售后服務(wù)，增強(qiáng)顧客對(duì)店鋪的信心和認(rèn)可度，如圖6-7和6-8所示。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)圖6-7圖6-86.1.2賞析店鋪收藏及客服區(qū)店鋪收藏的設(shè)計(jì)要清爽簡單，能夠吸引顧客的注意即可，而客服區(qū)的設(shè)計(jì)中有一點(diǎn)很重要，就是清晰的羅列出客服的圖標(biāo)，讓顧客可以快速地點(diǎn)擊并進(jìn)行咨詢，如圖6-9和6-11所示為店鋪收藏區(qū)和客服區(qū)的設(shè)計(jì)效果。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)6.2古典風(fēng)格收藏區(qū)設(shè)計(jì)本案例是為服裝店鋪所設(shè)計(jì)收藏區(qū)，在如圖6-13所示中可以看到畫面使用了棕色、暗紅色和米色作為主要的色彩，營造出一種古典懷舊的視覺效果。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[設(shè)計(jì)理念]色彩搭配上使用了較為復(fù)古的米色和棕色，采用暗紅色對(duì)重要元素進(jìn)行突出表現(xiàn)；使用米字格來對(duì)“收藏”兩個(gè)字進(jìn)行修飾，帶來一定的歷史感，能提高顧客對(duì)店鋪的信任；使用暗紅色的服裝剪影放在畫左側(cè)，能夠直觀的表現(xiàn)出店鋪的商品信息。[工具使用]使用“圖案疊加”、“顏色疊加”和“描邊”樣式修飾設(shè)計(jì)元素；利用“橫排文字工具”添加文字，并通過“字符”面板設(shè)置文字的屬性；通過“魔棒工具”創(chuàng)建選區(qū)，為選區(qū)創(chuàng)建顏色填充圖層，由此改變圖片的色彩。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[主要操作步驟]一、新建文檔，雙擊“背景”圖層對(duì)其進(jìn)行解鎖，接著為該圖層添加上“顏色疊加”和“圖案疊加”樣式。二、選擇工具箱中的“矩形工具”，繪制出所需的線條。三、添加文字。

Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)四、使用“圓角矩形工具”繪制形狀，再對(duì)“描邊”樣式和“填充”選項(xiàng)進(jìn)行編輯。六、最后添加所需素材。6.3冷酷風(fēng)格客服區(qū)設(shè)計(jì)本案例是為某服飾設(shè)計(jì)的客服區(qū)，根據(jù)店鋪名稱“潮衣”將店鋪風(fēng)格定義為時(shí)尚、潮流的風(fēng)格。使用了色調(diào)較暗的黑色和暗藍(lán)色作為主色調(diào)進(jìn)行創(chuàng)作，如圖6-33所示可以看到畫面中通過漸變色、投影和箭頭元素的應(yīng)用，營造出強(qiáng)烈的品質(zhì)感。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[設(shè)計(jì)理念]使用色調(diào)較暗的黑色和暗藍(lán)色營造一種品質(zhì)感，利用白色來填充文字使其更加突顯；旺旺頭像下方的投影讓畫面層次感增強(qiáng)，同時(shí)給人干凈、利落的視覺感受；畫面文字通過字體、粗細(xì)和大小的變化來進(jìn)行表現(xiàn)，增添設(shè)計(jì)感和精致感。[工具使用]使用“漸變填充”和“畫筆工具”來制作背景中的層次；使用“創(chuàng)建剪貼蒙版”命令來對(duì)圖形的顯示進(jìn)行控制；使用“畫筆工具”對(duì)箭頭形狀的圖層蒙版進(jìn)行編輯，制作出漸隱的效果；Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[操作主要步驟]一、新建文檔，繪制出背景。二、添加適當(dāng)?shù)乃夭?，并?duì)旺旺頭像的大小和位置進(jìn)行調(diào)整。三、使用“鋼筆工具”繪制出所需的箭頭形狀。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)五、使用“矩形工具”繪制所需的矩形，放在畫面的上方。六、使用“橫排文字工具”添加文字。七、最后繪制出旺旺頭像和客服名稱。6.4綜合實(shí)訓(xùn)客服區(qū)與收藏區(qū)結(jié)合的設(shè)計(jì)Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[設(shè)計(jì)要求]使用矩形對(duì)畫面進(jìn)行布局，將網(wǎng)店的客服區(qū)和店鋪收藏區(qū)中的內(nèi)容結(jié)合起來，設(shè)計(jì)一個(gè)服務(wù)性質(zhì)的專屬模塊，要求色彩簡單，大氣簡約。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)[主要操作步驟]在Photoshop中新建文檔，使用素材制作出畫面的背景，并通過創(chuàng)建和編輯“色階”調(diào)整圖層調(diào)整背景的影調(diào)。在Photoshop中新建文檔，使用素材制作出畫面的背景，并通過創(chuàng)建和編輯“色階”調(diào)整圖層調(diào)整背景的影調(diào)。在Photoshop中新建文檔，使用素材制作出畫面的背景，并通過創(chuàng)建和編輯“色階”調(diào)整圖層調(diào)整背景的影調(diào)。在Photoshop中新建文檔，使用素材制作出畫面的背景，并通過創(chuàng)建和編輯“色階”調(diào)整圖層調(diào)整背景的影調(diào)。6.5技能擴(kuò)展Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)京東商城將網(wǎng)店的客服固定在了每個(gè)網(wǎng)店店招的右上方位置，以統(tǒng)一的色彩和外觀進(jìn)行展示，如圖6-65、6-66和6-67所示，可以看到兩個(gè)網(wǎng)店為不同的銷售商品和設(shè)計(jì)風(fēng)格，但是其客服的位置都是相同，這樣做的好處在于可以對(duì)客服進(jìn)行統(tǒng)一，使顧客形成慣性的思維，而缺點(diǎn)在于缺乏創(chuàng)新感，容易給人呆板、單調(diào)的感覺。除了客服區(qū)的差別之外，京東網(wǎng)站上的店鋪收藏也是不同的，在京東網(wǎng)站上是通過添加“關(guān)注”來對(duì)店鋪進(jìn)行收藏的，如圖6-65所示，關(guān)注店鋪和咨詢客服的功能都在相同的區(qū)域，它們都是京東平臺(tái)統(tǒng)一設(shè)計(jì)和規(guī)定的。Chapter06店鋪收藏及客服區(qū)的設(shè)計(jì)在京東上如果要對(duì)客服區(qū)進(jìn)行設(shè)計(jì)，那么可以通過添加懸浮窗的方式來實(shí)現(xiàn)，如圖6-68和6-69所示，可以看到客服區(qū)以懸浮框的方式顯示在網(wǎng)店首頁的左側(cè)，店家可以通過設(shè)計(jì)懸浮窗來對(duì)客服區(qū)的外觀和內(nèi)容進(jìn)行設(shè)計(jì)，但是其制作的寬度不能超過270px。值得注意的是，淘寶上不能使用懸浮窗，而網(wǎng)店兩側(cè)只顯示出了“旺旺”和“后院”。京東上網(wǎng)店的裝修在某些功能性區(qū)域的設(shè)計(jì)上更加的統(tǒng)一和整齊，兩者各有千秋。如圖6-70和6-71分別為京東客服軟件京東咚咚和淘寶旺旺的圖標(biāo)。6.6課后習(xí)