當(dāng)前的天貓環(huán)境中視覺這一塊重要性程度我覺得不亞于任何一個(gè)環(huán)節(jié),作為天貓的品牌方必須重視起來。
品質(zhì)天貓:呈現(xiàn)給消費(fèi)者的必然與視覺體驗(yàn)有關(guān)系,在我個(gè)人的心目中視覺就像是打仗時(shí)候的先鋒隊(duì),消費(fèi)者觸發(fā)需求等于發(fā)起了戰(zhàn)斗號角,而這時(shí)候視覺的表現(xiàn)力就要首先沖上去引導(dǎo)客戶點(diǎn)擊瀏覽,然后才有進(jìn)一步的可能。
但天貓非常多品牌旗艦店的視覺仍舊停留在非常低的水平,這樣的美工有什么用?于是我要開始寫運(yùn)營的《七宗罪》了:
1:審美Low。
2:對待美工態(tài)度差,好像人家祖?zhèn)骶褪乔纺愕囊粯印?br /> 3:口頭禪:用數(shù)據(jù)說話。
4:以價(jià)格來定位品牌。
5:活動策劃只會打折。
6:沒有提前規(guī)劃一切。
7:推翻原定方案,沒有原則。
對于這樣的運(yùn)營詹姆斯·邦德有過一句經(jīng)典的評價(jià):You are bixch ~
我對設(shè)計(jì)也有《七原則》:
1:提前規(guī)劃好的方案堅(jiān)決不改,即使是錯也得錯到底(這是一種態(tài)度?。?br /> 2:做設(shè)計(jì)方案前我會做好框架規(guī)劃
3:降低無謂的重復(fù)性工作
4:對設(shè)(zi)計(jì)(ji)好點(diǎn)
5:頁面盡量保持簡潔減少更新頻率
6:源文件保證整齊排列
7:對設(shè)計(jì)進(jìn)行數(shù)據(jù)追蹤以便優(yōu)化改進(jìn)
作為一個(gè)以創(chuàng)作為前提的設(shè)計(jì)師要是沒有點(diǎn)態(tài)度其實(shí)更適合做售后,任由運(yùn)營碾壓也是咎由自取,經(jīng)常聽設(shè)計(jì)群里的美工在討論老板/運(yùn)營如何如何,怎么就不想想自身是否做的足夠好呢?
我在做設(shè)計(jì)師的時(shí)候老板和運(yùn)營一直都是對我的工作很尊重,而這種尊重是需要通過堅(jiān)持與熱愛這份職業(yè)換來的,當(dāng)你每天就只懂得拼素材和抄襲的時(shí)候,你這輩子離有房有車奔小康就越來越渺茫了。
正文:
這篇連載我就分享一下自己作為一個(gè)運(yùn)營又要做臨時(shí)設(shè)計(jì)這一職位的那種酸爽。不打沒準(zhǔn)備的仗是作為一個(gè)好將軍必備的條件,所以我們在做事之前首先得知道要怎么做,怎么才能系統(tǒng)有邏輯的做好這件事?這是運(yùn)營首先得站出來想的,而作為一個(gè)設(shè)計(jì)師不想被運(yùn)營碾壓與忽悠我認(rèn)為你想想也無妨,畢竟一個(gè)人的能力有多高環(huán)境就有多好~ 只要愿意付出沒什么不行,我身上所有的技能都是通過自學(xué)的。
這次照樣拿我自己的產(chǎn)品來做栗子。
最近新上了一個(gè)T恤,我就直接拿來當(dāng)經(jīng)驗(yàn)跟大家分享了。
當(dāng)有一個(gè)新產(chǎn)品的系列圖片設(shè)計(jì)要做的時(shí)候,我會先花時(shí)間把這個(gè)產(chǎn)品了解清楚后再進(jìn)一步的規(guī)劃。
我們來進(jìn)行一次完整的規(guī)劃:

(這個(gè)規(guī)劃因?yàn)榕臄z原因而最終延期,在此僅作為一個(gè)規(guī)劃參考的樣本)。實(shí)際上我認(rèn)為最好的詳情制作方式是先有完整規(guī)劃了才開始拍攝到制作。
詳情制作黃金組合為:
產(chǎn)品總監(jiān)>文案>策劃>攝影團(tuán)隊(duì)>設(shè)計(jì)師> 客服>運(yùn)營
1:產(chǎn)品總監(jiān)描述這個(gè)產(chǎn)品的優(yōu)點(diǎn)與一些設(shè)計(jì)或工藝的特點(diǎn)并列出產(chǎn)品的具體參數(shù)。
2:文案負(fù)責(zé)根據(jù)產(chǎn)品總監(jiān)的描述去轉(zhuǎn)換成消費(fèi)者能懂的語言。
3:策劃根據(jù)文案提供的文字去設(shè)計(jì)一個(gè)邏輯框架,然后與攝影團(tuán)隊(duì),設(shè)計(jì)師溝通制作方案。
4:攝影團(tuán)隊(duì)按照這個(gè)邏輯框架并配合設(shè)計(jì)要求去把照片拍攝出來。
5:設(shè)計(jì)師在拿到攝影團(tuán)隊(duì)后期過的圖片根據(jù)文案的文字和策劃的框架開始做制作。
6:客服在產(chǎn)品上線后根據(jù)客戶疑慮整理好FQA提交給運(yùn)營再進(jìn)一步的改進(jìn)優(yōu)化。
7:運(yùn)營這個(gè)時(shí)候最重要的不是指點(diǎn)江山,而是作為一個(gè)服務(wù)員,把上面那幾位大爺照顧好。
一個(gè)運(yùn)營要是連這點(diǎn)配合都做不到,肯定也沒什么人緣,想有一個(gè)女朋友也難!如果團(tuán)隊(duì)沒有策劃、文案、攝影的話,那就需要運(yùn)營一個(gè)人把這些事想好,而我的公司剛好是都沒有,全都是我來干,這種反復(fù)折磨自己的感受我形容不出來,酸菜面一樣。
PS:我首先要做的是海報(bào),因?yàn)槲乙@個(gè)產(chǎn)品的表現(xiàn)方式得先有一個(gè)樣本,以免在做詳情的時(shí)候走偏了。
PART-1:海報(bào)制作思路與個(gè)人觀點(diǎn)(1920600)。
做海報(bào)有一個(gè)重要的思路是先定主題,然后文案寫好,最后才到構(gòu)思整個(gè)海報(bào)去執(zhí)行做出來。
以下是我對這個(gè)T恤了解過后寫的文案:
TA 來到你面前的目的只有一個(gè)
俘虜你的身
一件平凡無奇的商品
被尖端的工藝制造出來
便天生傲嬌
TA此時(shí)就想附上你的身
因?yàn)樘焐翄傻腡A只能依附在天生驕傲的你
不平凡·不想平凡
我根據(jù)文案去做了一個(gè)主題海報(bào),先為這個(gè)詳情定下色調(diào)和風(fēng)格。因?yàn)檫@個(gè)T恤當(dāng)時(shí)并沒有拍好模特的圖片,我也被T恤的舒適度征服,那么聯(lián)想出來的主題配合文案就是主要突出這個(gè)T恤的單品,也算是被迫選擇。
右側(cè)橫旗標(biāo)的促銷信息則是因?yàn)榕浜仙闲禄顒蛹由先サ?,這樣的做法還能起到一個(gè)裝飾的作用。如何優(yōu)雅的就把促銷信息放上去是非常考驗(yàn)一個(gè)設(shè)計(jì)師的用心程度。
我通常是先把需要的元素做上去,然后2個(gè)小時(shí)再回來看一次把不需要的元素全部精簡(間隔兩個(gè)小時(shí)是因?yàn)闀曈X疲勞)。

PS:我當(dāng)前的設(shè)計(jì)風(fēng)格就是走簡約路線,因?yàn)樽隽艘?年設(shè)計(jì)了對堆素材這種做法真的不愛了,還原設(shè)計(jì)本質(zhì)才是我現(xiàn)在做的事。“好的設(shè)計(jì)是耐看的,并讓你深深愛上的”。這個(gè)就是我的設(shè)計(jì)原則,足以保證自己的做的圖看3個(gè)月都不煩。
PART-2:產(chǎn)品主圖制作與篩選圖片(800800)
第一步不做主圖是因?yàn)橹苯幼龇浅H菀拙妥龀烧故绢愋蛨D片而不是一個(gè)優(yōu)秀的作品。在海報(bào)做了的基礎(chǔ)上再轉(zhuǎn)換到主圖上往往有更好的效果。在第二步制作是因?yàn)樵谧鲋谱鞯倪^程中我也在一并的篩選拍攝好的圖片,好在做詳情或者其他廣告圖的時(shí)候自己在心里預(yù)先有個(gè)大概的想法。
主圖需要通過不斷的測試點(diǎn)擊率去更新,好的主圖需要不斷的測試并優(yōu)化,有沒有做到這個(gè)點(diǎn)可以看得出設(shè)計(jì)師是否足夠的負(fù)責(zé)。
手機(jī)端展現(xiàn)的主圖(8001200),因?yàn)槭謾C(jī)端搜索主圖的展現(xiàn)尺寸不同,而在手機(jī)上的效果也不同,所以需要獨(dú)立做出來。
PART-3:其他相關(guān)圖片制作
把有關(guān)這個(gè)產(chǎn)品的一系列不同尺寸的廣告圖片做出來備用。一次性把這些都做出來其實(shí)會非常省設(shè)計(jì)師的時(shí)間,因?yàn)檫\(yùn)營不會在為一些小圖煩你了。以下我這幾個(gè)是必備的。
寶貝關(guān)聯(lián)海報(bào)(790300)
非常多的美工會偷懶直接將首頁海報(bào)縮小成關(guān)聯(lián)海報(bào),但是全屏大海報(bào)跟關(guān)聯(lián)海報(bào)有不同的地方在于所占顯示空間的不同,那么我們就需要有在排版與字體結(jié)構(gòu)上略微調(diào)整,過程也就幾分鐘時(shí)間而已。
PS:如果直接就縮小的話,我來給你們看看會是什么效果。
整個(gè)畫面非常空洞,所需要傳達(dá)的信息無法在3秒內(nèi)看清,而全屏大海報(bào)用寶貝關(guān)聯(lián)海報(bào)的方式制作就會顯得占滿了屏幕的空間而變得無法呼吸,瀏覽的體驗(yàn)非常差,不信你試試!
側(cè)邊關(guān)聯(lián)海報(bào)(190400)

(有效加深訪問深度,難道我會騙你?)
其他的海報(bào)我就不全部展示了因?yàn)閮?nèi)容實(shí)際上沒有太大的改變,我就讓大家知道我做的一系列產(chǎn)品圖片有哪些:
微信海報(bào)(900500),微淘海報(bào)(680680),店鋪推廣海報(bào)(210315),麻吉寶海報(bào)(640280),其他活動圖片和手機(jī)端的因?yàn)槌叽缡亲远x的所以沒必要說了,大家根據(jù)實(shí)際情況去做吧。
PS:為什么我會先把海報(bào)等內(nèi)容先做了,因?yàn)槟阍诓粩嘧龅倪^程中會不斷的加強(qiáng)對這個(gè)產(chǎn)品的認(rèn)知,從而在制作詳情的時(shí)候會更得心應(yīng)手。
那么上面小的做好了現(xiàn)在就可以按照我們策劃好的思維導(dǎo)圖去執(zhí)行了,其實(shí)這樣做下來無比輕松,而運(yùn)營在這一神圣的時(shí)刻應(yīng)該給與設(shè)計(jì)師最大的資源支持,因?yàn)檫@時(shí)候的設(shè)計(jì)師是脆弱的。
詳情與各種圖片制作完了就可以開始交給運(yùn)(zi)營(ji)和客服認(rèn)真審核一遍,并在后三天根據(jù)生意參謀得出的數(shù)據(jù)去不斷的調(diào)整優(yōu)化。
接著我來分享一下我詳情的幾個(gè)關(guān)鍵點(diǎn):
視覺統(tǒng)一:
閱讀字體一般不超過2種,裝飾性字體能少用就不要堆英文,就算你愛堆英文也請使用Google翻譯或歐陸詞典,百度的質(zhì)量連我這個(gè)初中沒畢業(yè)的都看不下去。
留白處理:
內(nèi)容不要把790的寬度全部占滿了,需要適當(dāng)?shù)牧舭卓梢蕴峁┙^佳的瀏覽體驗(yàn)。
元素選擇:
選擇有聯(lián)想性的元素融合進(jìn)去以讓這個(gè)詳情有靈性。
文案描寫:
如果不具備文案這個(gè)職位的可以參考某些大品牌的寫作思路,但是不要直接就抄。在你不斷的借鑒別人的思路的時(shí)候你也能寫得一手好文案,我其實(shí)就是這樣被逼出來的。
排版細(xì)節(jié):
這個(gè)最考驗(yàn)設(shè)計(jì)師對細(xì)節(jié)的追求,也是可以判斷這個(gè)設(shè)計(jì)師是否細(xì)心。
我來舉個(gè)栗子:

這個(gè)是我隨便點(diǎn)開淘寶首頁的一個(gè)鉆展看到的一個(gè)寶貝詳情,我先不討論他設(shè)計(jì)好不好看,我就看他一些排版的細(xì)節(jié)我就可以斷定這個(gè)美工肯定沒女朋友。
Photoshop 的參考線功能對于一件考究的作品來說是非常有用的,如果連這個(gè)參考線都不愿意用,而眼神還不挑剔,這樣的拼圖員是沒前途的。在我們選擇一些間距或者圖形尺寸的時(shí)候最好以5PX為單位去遞增,因?yàn)檫@樣對你計(jì)算整個(gè)詳情的大概數(shù)據(jù)上會非常好用,這個(gè)是好習(xí)慣來的。
我透露下我做設(shè)計(jì)的一些題外話,也許對各位運(yùn)營與設(shè)計(jì)都有點(diǎn)作用。
字體在一般情況下我只用有版權(quán)或者開源的字體,
第一:尊重知識版權(quán),第二:免除后顧之憂,第三:我用正版我自豪。
中文我推薦選擇用:
思源黑體(開源字體,免費(fèi)商用)
這個(gè)是Google與Adobe聯(lián)合開發(fā)的開源字體有非常多的字重可以選擇,平常的設(shè)計(jì)工作完全可以做的很好了。
冬青黑體(已購買商業(yè)使用授權(quán),2600元)
在個(gè)別的情況下會選擇使用,字體的結(jié)構(gòu)比思源黑體更優(yōu)秀但字重可選擇不夠多。
英文我比較經(jīng)常用的是:
HelveticaNeue (已購買授權(quán),800元左右)
DINCond-Bold (找不到版權(quán)方)
PS:生產(chǎn)力軟件購買正版其實(shí)也不貴,建議老板們還是買,這樣你在員工的形象會非常的光輝高大,因?yàn)樽鹬刂R版權(quán)的老板不可能會不尊重設(shè)計(jì)師。我們公司使用的電腦蘋果居多,而Windows我們購買的都是品牌電腦自帶OEM授權(quán),Office之類可以購買Office 365按月算錢,看著沒那么心疼。
接下來分享一些對設(shè)計(jì)師有用的素材與靈感,運(yùn)營把這個(gè)發(fā)給設(shè)計(jì)吧,今天就可以免打一架了。
設(shè)計(jì)素材與教程相關(guān)網(wǎng)站:
ECDC:http://www.taobaops.com/ (嚴(yán)重推薦)
站酷:http://www.zcool.com.cn/
優(yōu)設(shè):http://www.uisdc.com/
黃蜂:http://woofeng.cn/
LOVEUI:http://loveui.cn/
設(shè)計(jì)達(dá)人:http://www.shejidaren.com/
easyicon:http://www.easyicon.net/
靈感庫:
花瓣:http://huaban.com/
熱愛基因:http://www.youlovedna.com/
視覺ME:http://shijue.me/
behance:https://www.behance.net/
Reeoo:http://reeoo.com/
TINGZIE:http://tingzhi.tmall.com/
Awwwards:http://www.awwwards.com/
Cssmania:http://www.cssmania.com/
Dribbble:https://dribbble.com/
csswinner:http://www.csswinner.com/
onepagelove:https://onepagelove.com/
1024:因中國法律暫時(shí)無法提供更多詳細(xì)信息
結(jié)語:設(shè)計(jì)師審美是非常重要的,如果不具備的話我建議轉(zhuǎn)行做客服和運(yùn)營之類的,因?yàn)閯?chuàng)作這類型的工作并不是你努力和花時(shí)間就能做好的,而且:大多數(shù)人努力程度之低根本輪不到拼天賦 - 袁兒
對于一個(gè)設(shè)計(jì)師來說我認(rèn)為還有一個(gè)很重要的點(diǎn)是會吸收別人的好,于是我準(zhǔn)備把這個(gè)產(chǎn)品的PSD源文件公開,讓你們可以自己分析拉參考線看看。
百度網(wǎng)盤地址:http://pan.baidu.com/s/1eQ6IELc
但是你以為這樣就說完設(shè)計(jì)了么?圖樣圖森破~ 這只是初步的設(shè)計(jì)完成。作為一個(gè)優(yōu)秀的設(shè)計(jì)師我們必須要學(xué)會用數(shù)據(jù)去改善我們的設(shè)計(jì)并找出可以優(yōu)化的地方。
首先我們打開【生意參謀】-【專題工具】-【商品溫度計(jì)】拉到最下面看【影響商品轉(zhuǎn)化因素檢測】,我們首先得看看對于這個(gè)詳情客戶的態(tài)度是怎么樣的,因?yàn)榭蛻魹槟阍O(shè)計(jì)買單才是真愛。
可以看到這個(gè)詳情在PC端的的數(shù)據(jù)是:頁面加載時(shí)長4秒,低于最近1天訪客平均停留時(shí)長222秒,客戶瀏覽10屏以上的占比超過同類產(chǎn)品差不多30%,那么這個(gè)詳情是客戶愿意看的,至少設(shè)計(jì)是不錯的。
這時(shí)候我們點(diǎn)擊一下無線來看看這個(gè)數(shù)據(jù):
各方面都是正常的,而停留時(shí)間和加載時(shí)間也沒什么問題。圖片總數(shù)量那里還有1/3的空間沒用,但是我的模特圖沒做出來就只能先放著了,切忌不要濫竽充數(shù)。
然后我們再點(diǎn)擊數(shù)據(jù)魔方的流失顧客分析看看競爭對手都是些什么樣的魂淡。
可以看到這里的數(shù)據(jù)有一些客戶跑去買了其他的產(chǎn)品了,但你不能怪客戶眼瞎。于是你就得去分析下人家的寶貝詳情做的怎么樣了?人家的優(yōu)勢在哪?這個(gè)事得設(shè)計(jì)和運(yùn)營叫上客服主管一起去聊聊客戶的疑問和做的不夠好的地方然后去改善,不要打架就好。
最好上一下自己的數(shù)據(jù):這個(gè)是我們單品剛上線7天的數(shù)據(jù),但還得改進(jìn)!大家可以看到轉(zhuǎn)化率10%其實(shí)非常高了,主要是因?yàn)槲覀兪且龑?dǎo)老客戶購買并且我們上線后在站外做了一些媒體站的粉絲推廣所以來的流量非常的精準(zhǔn),而買二送一的上新活動也引導(dǎo)了很多客戶一次買幾件的。
品質(zhì)天貓:呈現(xiàn)給消費(fèi)者的必然與視覺體驗(yàn)有關(guān)系,在我個(gè)人的心目中視覺就像是打仗時(shí)候的先鋒隊(duì),消費(fèi)者觸發(fā)需求等于發(fā)起了戰(zhàn)斗號角,而這時(shí)候視覺的表現(xiàn)力就要首先沖上去引導(dǎo)客戶點(diǎn)擊瀏覽,然后才有進(jìn)一步的可能。
但天貓非常多品牌旗艦店的視覺仍舊停留在非常低的水平,這樣的美工有什么用?于是我要開始寫運(yùn)營的《七宗罪》了:
1:審美Low。
2:對待美工態(tài)度差,好像人家祖?zhèn)骶褪乔纺愕囊粯印?br /> 3:口頭禪:用數(shù)據(jù)說話。
4:以價(jià)格來定位品牌。
5:活動策劃只會打折。
6:沒有提前規(guī)劃一切。
7:推翻原定方案,沒有原則。
對于這樣的運(yùn)營詹姆斯·邦德有過一句經(jīng)典的評價(jià):You are bixch ~
我對設(shè)計(jì)也有《七原則》:
1:提前規(guī)劃好的方案堅(jiān)決不改,即使是錯也得錯到底(這是一種態(tài)度?。?br /> 2:做設(shè)計(jì)方案前我會做好框架規(guī)劃
3:降低無謂的重復(fù)性工作
4:對設(shè)(zi)計(jì)(ji)好點(diǎn)
5:頁面盡量保持簡潔減少更新頻率
6:源文件保證整齊排列
7:對設(shè)計(jì)進(jìn)行數(shù)據(jù)追蹤以便優(yōu)化改進(jìn)
作為一個(gè)以創(chuàng)作為前提的設(shè)計(jì)師要是沒有點(diǎn)態(tài)度其實(shí)更適合做售后,任由運(yùn)營碾壓也是咎由自取,經(jīng)常聽設(shè)計(jì)群里的美工在討論老板/運(yùn)營如何如何,怎么就不想想自身是否做的足夠好呢?
我在做設(shè)計(jì)師的時(shí)候老板和運(yùn)營一直都是對我的工作很尊重,而這種尊重是需要通過堅(jiān)持與熱愛這份職業(yè)換來的,當(dāng)你每天就只懂得拼素材和抄襲的時(shí)候,你這輩子離有房有車奔小康就越來越渺茫了。
正文:
這篇連載我就分享一下自己作為一個(gè)運(yùn)營又要做臨時(shí)設(shè)計(jì)這一職位的那種酸爽。不打沒準(zhǔn)備的仗是作為一個(gè)好將軍必備的條件,所以我們在做事之前首先得知道要怎么做,怎么才能系統(tǒng)有邏輯的做好這件事?這是運(yùn)營首先得站出來想的,而作為一個(gè)設(shè)計(jì)師不想被運(yùn)營碾壓與忽悠我認(rèn)為你想想也無妨,畢竟一個(gè)人的能力有多高環(huán)境就有多好~ 只要愿意付出沒什么不行,我身上所有的技能都是通過自學(xué)的。
這次照樣拿我自己的產(chǎn)品來做栗子。
最近新上了一個(gè)T恤,我就直接拿來當(dāng)經(jīng)驗(yàn)跟大家分享了。
當(dāng)有一個(gè)新產(chǎn)品的系列圖片設(shè)計(jì)要做的時(shí)候,我會先花時(shí)間把這個(gè)產(chǎn)品了解清楚后再進(jìn)一步的規(guī)劃。
我們來進(jìn)行一次完整的規(guī)劃:

(這個(gè)規(guī)劃因?yàn)榕臄z原因而最終延期,在此僅作為一個(gè)規(guī)劃參考的樣本)。實(shí)際上我認(rèn)為最好的詳情制作方式是先有完整規(guī)劃了才開始拍攝到制作。
詳情制作黃金組合為:
產(chǎn)品總監(jiān)>文案>策劃>攝影團(tuán)隊(duì)>設(shè)計(jì)師> 客服>運(yùn)營
1:產(chǎn)品總監(jiān)描述這個(gè)產(chǎn)品的優(yōu)點(diǎn)與一些設(shè)計(jì)或工藝的特點(diǎn)并列出產(chǎn)品的具體參數(shù)。
2:文案負(fù)責(zé)根據(jù)產(chǎn)品總監(jiān)的描述去轉(zhuǎn)換成消費(fèi)者能懂的語言。
3:策劃根據(jù)文案提供的文字去設(shè)計(jì)一個(gè)邏輯框架,然后與攝影團(tuán)隊(duì),設(shè)計(jì)師溝通制作方案。
4:攝影團(tuán)隊(duì)按照這個(gè)邏輯框架并配合設(shè)計(jì)要求去把照片拍攝出來。
5:設(shè)計(jì)師在拿到攝影團(tuán)隊(duì)后期過的圖片根據(jù)文案的文字和策劃的框架開始做制作。
6:客服在產(chǎn)品上線后根據(jù)客戶疑慮整理好FQA提交給運(yùn)營再進(jìn)一步的改進(jìn)優(yōu)化。
7:運(yùn)營這個(gè)時(shí)候最重要的不是指點(diǎn)江山,而是作為一個(gè)服務(wù)員,把上面那幾位大爺照顧好。
一個(gè)運(yùn)營要是連這點(diǎn)配合都做不到,肯定也沒什么人緣,想有一個(gè)女朋友也難!如果團(tuán)隊(duì)沒有策劃、文案、攝影的話,那就需要運(yùn)營一個(gè)人把這些事想好,而我的公司剛好是都沒有,全都是我來干,這種反復(fù)折磨自己的感受我形容不出來,酸菜面一樣。
PS:我首先要做的是海報(bào),因?yàn)槲乙@個(gè)產(chǎn)品的表現(xiàn)方式得先有一個(gè)樣本,以免在做詳情的時(shí)候走偏了。
PART-1:海報(bào)制作思路與個(gè)人觀點(diǎn)(1920600)。
做海報(bào)有一個(gè)重要的思路是先定主題,然后文案寫好,最后才到構(gòu)思整個(gè)海報(bào)去執(zhí)行做出來。
以下是我對這個(gè)T恤了解過后寫的文案:
TA 來到你面前的目的只有一個(gè)
俘虜你的身
一件平凡無奇的商品
被尖端的工藝制造出來
便天生傲嬌
TA此時(shí)就想附上你的身
因?yàn)樘焐翄傻腡A只能依附在天生驕傲的你
不平凡·不想平凡
我根據(jù)文案去做了一個(gè)主題海報(bào),先為這個(gè)詳情定下色調(diào)和風(fēng)格。因?yàn)檫@個(gè)T恤當(dāng)時(shí)并沒有拍好模特的圖片,我也被T恤的舒適度征服,那么聯(lián)想出來的主題配合文案就是主要突出這個(gè)T恤的單品,也算是被迫選擇。
右側(cè)橫旗標(biāo)的促銷信息則是因?yàn)榕浜仙闲禄顒蛹由先サ?,這樣的做法還能起到一個(gè)裝飾的作用。如何優(yōu)雅的就把促銷信息放上去是非常考驗(yàn)一個(gè)設(shè)計(jì)師的用心程度。
我通常是先把需要的元素做上去,然后2個(gè)小時(shí)再回來看一次把不需要的元素全部精簡(間隔兩個(gè)小時(shí)是因?yàn)闀曈X疲勞)。

PS:我當(dāng)前的設(shè)計(jì)風(fēng)格就是走簡約路線,因?yàn)樽隽艘?年設(shè)計(jì)了對堆素材這種做法真的不愛了,還原設(shè)計(jì)本質(zhì)才是我現(xiàn)在做的事。“好的設(shè)計(jì)是耐看的,并讓你深深愛上的”。這個(gè)就是我的設(shè)計(jì)原則,足以保證自己的做的圖看3個(gè)月都不煩。
PART-2:產(chǎn)品主圖制作與篩選圖片(800800)
第一步不做主圖是因?yàn)橹苯幼龇浅H菀拙妥龀烧故绢愋蛨D片而不是一個(gè)優(yōu)秀的作品。在海報(bào)做了的基礎(chǔ)上再轉(zhuǎn)換到主圖上往往有更好的效果。在第二步制作是因?yàn)樵谧鲋谱鞯倪^程中我也在一并的篩選拍攝好的圖片,好在做詳情或者其他廣告圖的時(shí)候自己在心里預(yù)先有個(gè)大概的想法。
主圖需要通過不斷的測試點(diǎn)擊率去更新,好的主圖需要不斷的測試并優(yōu)化,有沒有做到這個(gè)點(diǎn)可以看得出設(shè)計(jì)師是否足夠的負(fù)責(zé)。

手機(jī)端展現(xiàn)的主圖(8001200),因?yàn)槭謾C(jī)端搜索主圖的展現(xiàn)尺寸不同,而在手機(jī)上的效果也不同,所以需要獨(dú)立做出來。
PART-3:其他相關(guān)圖片制作
把有關(guān)這個(gè)產(chǎn)品的一系列不同尺寸的廣告圖片做出來備用。一次性把這些都做出來其實(shí)會非常省設(shè)計(jì)師的時(shí)間,因?yàn)檫\(yùn)營不會在為一些小圖煩你了。以下我這幾個(gè)是必備的。
寶貝關(guān)聯(lián)海報(bào)(790300)
非常多的美工會偷懶直接將首頁海報(bào)縮小成關(guān)聯(lián)海報(bào),但是全屏大海報(bào)跟關(guān)聯(lián)海報(bào)有不同的地方在于所占顯示空間的不同,那么我們就需要有在排版與字體結(jié)構(gòu)上略微調(diào)整,過程也就幾分鐘時(shí)間而已。

PS:如果直接就縮小的話,我來給你們看看會是什么效果。

整個(gè)畫面非常空洞,所需要傳達(dá)的信息無法在3秒內(nèi)看清,而全屏大海報(bào)用寶貝關(guān)聯(lián)海報(bào)的方式制作就會顯得占滿了屏幕的空間而變得無法呼吸,瀏覽的體驗(yàn)非常差,不信你試試!
側(cè)邊關(guān)聯(lián)海報(bào)(190400)

(有效加深訪問深度,難道我會騙你?)
其他的海報(bào)我就不全部展示了因?yàn)閮?nèi)容實(shí)際上沒有太大的改變,我就讓大家知道我做的一系列產(chǎn)品圖片有哪些:
微信海報(bào)(900500),微淘海報(bào)(680680),店鋪推廣海報(bào)(210315),麻吉寶海報(bào)(640280),其他活動圖片和手機(jī)端的因?yàn)槌叽缡亲远x的所以沒必要說了,大家根據(jù)實(shí)際情況去做吧。
PS:為什么我會先把海報(bào)等內(nèi)容先做了,因?yàn)槟阍诓粩嘧龅倪^程中會不斷的加強(qiáng)對這個(gè)產(chǎn)品的認(rèn)知,從而在制作詳情的時(shí)候會更得心應(yīng)手。
那么上面小的做好了現(xiàn)在就可以按照我們策劃好的思維導(dǎo)圖去執(zhí)行了,其實(shí)這樣做下來無比輕松,而運(yùn)營在這一神圣的時(shí)刻應(yīng)該給與設(shè)計(jì)師最大的資源支持,因?yàn)檫@時(shí)候的設(shè)計(jì)師是脆弱的。
詳情與各種圖片制作完了就可以開始交給運(yùn)(zi)營(ji)和客服認(rèn)真審核一遍,并在后三天根據(jù)生意參謀得出的數(shù)據(jù)去不斷的調(diào)整優(yōu)化。
接著我來分享一下我詳情的幾個(gè)關(guān)鍵點(diǎn):
視覺統(tǒng)一:
閱讀字體一般不超過2種,裝飾性字體能少用就不要堆英文,就算你愛堆英文也請使用Google翻譯或歐陸詞典,百度的質(zhì)量連我這個(gè)初中沒畢業(yè)的都看不下去。
留白處理:
內(nèi)容不要把790的寬度全部占滿了,需要適當(dāng)?shù)牧舭卓梢蕴峁┙^佳的瀏覽體驗(yàn)。
元素選擇:
選擇有聯(lián)想性的元素融合進(jìn)去以讓這個(gè)詳情有靈性。
文案描寫:
如果不具備文案這個(gè)職位的可以參考某些大品牌的寫作思路,但是不要直接就抄。在你不斷的借鑒別人的思路的時(shí)候你也能寫得一手好文案,我其實(shí)就是這樣被逼出來的。
排版細(xì)節(jié):
這個(gè)最考驗(yàn)設(shè)計(jì)師對細(xì)節(jié)的追求,也是可以判斷這個(gè)設(shè)計(jì)師是否細(xì)心。
我來舉個(gè)栗子:

這個(gè)是我隨便點(diǎn)開淘寶首頁的一個(gè)鉆展看到的一個(gè)寶貝詳情,我先不討論他設(shè)計(jì)好不好看,我就看他一些排版的細(xì)節(jié)我就可以斷定這個(gè)美工肯定沒女朋友。
Photoshop 的參考線功能對于一件考究的作品來說是非常有用的,如果連這個(gè)參考線都不愿意用,而眼神還不挑剔,這樣的拼圖員是沒前途的。在我們選擇一些間距或者圖形尺寸的時(shí)候最好以5PX為單位去遞增,因?yàn)檫@樣對你計(jì)算整個(gè)詳情的大概數(shù)據(jù)上會非常好用,這個(gè)是好習(xí)慣來的。
我透露下我做設(shè)計(jì)的一些題外話,也許對各位運(yùn)營與設(shè)計(jì)都有點(diǎn)作用。
字體在一般情況下我只用有版權(quán)或者開源的字體,
第一:尊重知識版權(quán),第二:免除后顧之憂,第三:我用正版我自豪。
中文我推薦選擇用:
思源黑體(開源字體,免費(fèi)商用)
這個(gè)是Google與Adobe聯(lián)合開發(fā)的開源字體有非常多的字重可以選擇,平常的設(shè)計(jì)工作完全可以做的很好了。
冬青黑體(已購買商業(yè)使用授權(quán),2600元)
在個(gè)別的情況下會選擇使用,字體的結(jié)構(gòu)比思源黑體更優(yōu)秀但字重可選擇不夠多。
英文我比較經(jīng)常用的是:
HelveticaNeue (已購買授權(quán),800元左右)
DINCond-Bold (找不到版權(quán)方)
PS:生產(chǎn)力軟件購買正版其實(shí)也不貴,建議老板們還是買,這樣你在員工的形象會非常的光輝高大,因?yàn)樽鹬刂R版權(quán)的老板不可能會不尊重設(shè)計(jì)師。我們公司使用的電腦蘋果居多,而Windows我們購買的都是品牌電腦自帶OEM授權(quán),Office之類可以購買Office 365按月算錢,看著沒那么心疼。
接下來分享一些對設(shè)計(jì)師有用的素材與靈感,運(yùn)營把這個(gè)發(fā)給設(shè)計(jì)吧,今天就可以免打一架了。
設(shè)計(jì)素材與教程相關(guān)網(wǎng)站:
ECDC:http://www.taobaops.com/ (嚴(yán)重推薦)
站酷:http://www.zcool.com.cn/
優(yōu)設(shè):http://www.uisdc.com/
黃蜂:http://woofeng.cn/
LOVEUI:http://loveui.cn/
設(shè)計(jì)達(dá)人:http://www.shejidaren.com/
easyicon:http://www.easyicon.net/
靈感庫:
花瓣:http://huaban.com/
熱愛基因:http://www.youlovedna.com/
視覺ME:http://shijue.me/
behance:https://www.behance.net/
Reeoo:http://reeoo.com/
TINGZIE:http://tingzhi.tmall.com/
Awwwards:http://www.awwwards.com/
Cssmania:http://www.cssmania.com/
Dribbble:https://dribbble.com/
csswinner:http://www.csswinner.com/
onepagelove:https://onepagelove.com/
1024:因中國法律暫時(shí)無法提供更多詳細(xì)信息
結(jié)語:設(shè)計(jì)師審美是非常重要的,如果不具備的話我建議轉(zhuǎn)行做客服和運(yùn)營之類的,因?yàn)閯?chuàng)作這類型的工作并不是你努力和花時(shí)間就能做好的,而且:大多數(shù)人努力程度之低根本輪不到拼天賦 - 袁兒
對于一個(gè)設(shè)計(jì)師來說我認(rèn)為還有一個(gè)很重要的點(diǎn)是會吸收別人的好,于是我準(zhǔn)備把這個(gè)產(chǎn)品的PSD源文件公開,讓你們可以自己分析拉參考線看看。
百度網(wǎng)盤地址:http://pan.baidu.com/s/1eQ6IELc
但是你以為這樣就說完設(shè)計(jì)了么?圖樣圖森破~ 這只是初步的設(shè)計(jì)完成。作為一個(gè)優(yōu)秀的設(shè)計(jì)師我們必須要學(xué)會用數(shù)據(jù)去改善我們的設(shè)計(jì)并找出可以優(yōu)化的地方。
首先我們打開【生意參謀】-【專題工具】-【商品溫度計(jì)】拉到最下面看【影響商品轉(zhuǎn)化因素檢測】,我們首先得看看對于這個(gè)詳情客戶的態(tài)度是怎么樣的,因?yàn)榭蛻魹槟阍O(shè)計(jì)買單才是真愛。

可以看到這個(gè)詳情在PC端的的數(shù)據(jù)是:頁面加載時(shí)長4秒,低于最近1天訪客平均停留時(shí)長222秒,客戶瀏覽10屏以上的占比超過同類產(chǎn)品差不多30%,那么這個(gè)詳情是客戶愿意看的,至少設(shè)計(jì)是不錯的。
這時(shí)候我們點(diǎn)擊一下無線來看看這個(gè)數(shù)據(jù):

各方面都是正常的,而停留時(shí)間和加載時(shí)間也沒什么問題。圖片總數(shù)量那里還有1/3的空間沒用,但是我的模特圖沒做出來就只能先放著了,切忌不要濫竽充數(shù)。
然后我們再點(diǎn)擊數(shù)據(jù)魔方的流失顧客分析看看競爭對手都是些什么樣的魂淡。

可以看到這里的數(shù)據(jù)有一些客戶跑去買了其他的產(chǎn)品了,但你不能怪客戶眼瞎。于是你就得去分析下人家的寶貝詳情做的怎么樣了?人家的優(yōu)勢在哪?這個(gè)事得設(shè)計(jì)和運(yùn)營叫上客服主管一起去聊聊客戶的疑問和做的不夠好的地方然后去改善,不要打架就好。
最好上一下自己的數(shù)據(jù):這個(gè)是我們單品剛上線7天的數(shù)據(jù),但還得改進(jìn)!大家可以看到轉(zhuǎn)化率10%其實(shí)非常高了,主要是因?yàn)槲覀兪且龑?dǎo)老客戶購買并且我們上線后在站外做了一些媒體站的粉絲推廣所以來的流量非常的精準(zhǔn),而買二送一的上新活動也引導(dǎo)了很多客戶一次買幾件的。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺規(guī)則