1.3　網(wǎng)店裝修流程

網(wǎng)店美工在設(shè)計(jì)店鋪之前，先要知道具體的工作流程：定方案——選素材——處理圖片——做初稿——定稿切圖——上傳圖片——加鏈接——發(fā)布首頁(yè)。了解了流程之后，設(shè)計(jì)裝修首頁(yè)時(shí)就很容易了。

所謂優(yōu)秀的店鋪，就是有著明確定位，具有強(qiáng)烈風(fēng)格的店鋪。設(shè)計(jì)這樣的一家店鋪，首先要對(duì)店鋪的產(chǎn)品與目標(biāo)用戶(hù)進(jìn)行分析，然后根據(jù)分析確定店鋪的設(shè)計(jì)風(fēng)格和色調(diào)等，最后對(duì)店鋪進(jìn)行整體的布局。

1.3.1　定方案

定方案是指根據(jù)產(chǎn)品的特性，制訂出一個(gè)可行的方案。可以多參考幾家同行店鋪，分析它們的優(yōu)點(diǎn)，取其精華為己所用。

實(shí)際上，店鋪在整個(gè)消費(fèi)流程中介于產(chǎn)品與用戶(hù)之間，關(guān)系大概是產(chǎn)品——店鋪——用戶(hù)（消費(fèi)者）。店鋪就是這樣的一個(gè)中介，要從總體去分析它，我們需要從它的上家（產(chǎn)品）和它的下家（用戶(hù)）入手。產(chǎn)品是店鋪的根本，對(duì)于產(chǎn)品，我們主要分析的是它的價(jià)格和主要功能，從而確定店鋪的總體方向。

1.3.2　選素材

根據(jù)產(chǎn)品風(fēng)格，選取對(duì)應(yīng)的圖片素材。例如，設(shè)計(jì)母嬰用品的店鋪，可以選擇一些嬰兒和卡通背景等素材。合適的素材對(duì)店鋪風(fēng)格影響非常大，初級(jí)美工一般不太在意背景的選擇，認(rèn)為摳圖后加上背景再做一些效果就可以了，這樣的認(rèn)識(shí)是有失偏頗的。好的設(shè)計(jì)，圖片與文案的搭配都是恰到好處的，都有自己的特色。“增之一分則嫌長(zhǎng)，減之一分則嫌短。”圖1-15所示是一些優(yōu)秀的圖片素材。

1.3.3　處理圖片

一般商家提供的圖片中，很少是經(jīng)過(guò)后期處理的，這就需要美工進(jìn)行修圖、摳圖等處理。買(mǎi)家看不到實(shí)物，只能通過(guò)圖片來(lái)了解產(chǎn)品，產(chǎn)品的圖片質(zhì)量直接影響界面效果。如果產(chǎn)品圖片質(zhì)量一般，一定要修一下圖片，買(mǎi)家看到心儀的產(chǎn)品效果才會(huì)放心下單，如圖1-16所示。

1.3.4　做初稿

美工可以根據(jù)自己的喜好先做出一個(gè)初稿，做好后發(fā)給客戶(hù)，跟客戶(hù)溝通。有的設(shè)計(jì)師會(huì)非常固執(zhí)，自己認(rèn)為滿(mǎn)意的版本不允許別人說(shuō)不好，如果客戶(hù)提出修改意見(jiàn)，就會(huì)認(rèn)為對(duì)方不懂設(shè)計(jì)，非常不情愿與客戶(hù)合作，時(shí)間久了就會(huì)認(rèn)為客戶(hù)不懂得欣賞。

對(duì)于設(shè)計(jì)師的這種做法能夠理解，但是對(duì)于資深的設(shè)計(jì)師來(lái)說(shuō)，這些問(wèn)題還可以有更好的解決方法。有一個(gè)最基本的道理：設(shè)計(jì)行業(yè)也算是服務(wù)行業(yè)，每天面對(duì)不同的客戶(hù)，不可能要求每一個(gè)客戶(hù)都能懂自己的想法，所以要與客戶(hù)充分溝通，做出讓客戶(hù)滿(mǎn)意的設(shè)計(jì)。

遇到比較難纏的客戶(hù)，更要跟他們多溝通，了解他們喜歡的風(fēng)格，設(shè)計(jì)時(shí)盡量向客戶(hù)喜好的風(fēng)格靠攏。雖然最后的成稿可能不是你最滿(mǎn)意的，但是初稿一般是設(shè)計(jì)師們的最?lèi)?ài)，可以把初稿當(dāng)作自己滿(mǎn)意的作品發(fā)布在自己的網(wǎng)站上面展示，一舉兩得。圖1-17為筆者之前做的一個(gè)項(xiàng)目的初稿。

1.3.5　定稿切圖

首頁(yè)的設(shè)計(jì)，在與客戶(hù)反復(fù)溝通定稿后，接下來(lái)就要進(jìn)行切圖了。淘寶首頁(yè)有很多模塊，每個(gè)模塊的尺寸都不一樣，所以切圖的時(shí)候一定要注意。在Photoshop中將導(dǎo)航、店招、輪播海報(bào)、主推產(chǎn)品都進(jìn)行切圖后再導(dǎo)出圖片，如圖1-18所示。

1.3.6　上傳圖片

上傳圖片時(shí)，需要客戶(hù)提供旺旺賬號(hào)和密碼，進(jìn)入淘寶后臺(tái)后，把切好的圖片上傳到圖片空間，放入對(duì)應(yīng)的文件夾，以方便下次查找。

初學(xué)者不太注意圖片空間的使用，認(rèn)為上傳上去就行了，到時(shí)候再找。其實(shí)這個(gè)想法是不對(duì)的，一般店鋪會(huì)有幾十個(gè)或者上百個(gè)產(chǎn)品，加上主圖的切圖，會(huì)有好幾百?gòu)埳踔辽锨垐D片，如果不及時(shí)建立文件夾來(lái)分類(lèi)，到時(shí)候找圖就像大海撈針，大大增加了后期找圖的難度。所以要在制作新產(chǎn)品圖片的時(shí)候，提前在圖片空間建立對(duì)應(yīng)的文件夾，如圖1-19所示。

1.3.7　加鏈接

現(xiàn)在很多店鋪?lái)?yè)面都是全屏顯示的，這需要加代碼才能實(shí)現(xiàn)。不過(guò)市場(chǎng)上也出現(xiàn)了很多輔助工具，做首頁(yè)效果時(shí)，界面全屏、輪播海報(bào)、圖片特效等都可以用輔助工具來(lái)實(shí)現(xiàn)。經(jīng)常用到的軟件有“碼工助手”“小語(yǔ)言工具”等，這些輔助工具給一些不懂代碼的美工帶來(lái)了很大的幫助，如圖1-20所示。

1.3.8　發(fā)布首頁(yè)

加上首頁(yè)鏈接后，預(yù)覽界面，再單擊每一個(gè)產(chǎn)品的鏈接查看是否正確，收藏店鋪功能是否可以使用。各項(xiàng)功能都準(zhǔn)確無(wú)誤后，就可以發(fā)布首頁(yè)了，這樣整個(gè)首頁(yè)就算設(shè)計(jì)成功了，如圖1-21所示。