第1章淘寶美工的崛起

淘寶美工是一個(gè)新興的職業(yè)，是網(wǎng)絡(luò)走進(jìn)生活而發(fā)展起來的職業(yè)，也是時(shí)代發(fā)展的結(jié)果。這樣一個(gè)新興的職業(yè)，就難免有一些不成熟的因素。作為這個(gè)行業(yè)的從業(yè)者，有責(zé)任也有義務(wù)去完善這個(gè)行業(yè)。完善這個(gè)行業(yè)，就需要對(duì)這個(gè)行業(yè)的過去與未來有所了解，才能明白這個(gè)行業(yè)的意義與價(jià)值。讓從業(yè)者在今后的工作中，知道怎樣選擇。01______淘寶美工的崛起-X1.1淘寶美工的前世今生隨著電子商務(wù)（本書中簡(jiǎn)稱為電商）的快速發(fā)展，從事電商行業(yè)的人也越來越多。而網(wǎng)上買賣商品，又不能直接接觸到商品，而是通過圖片等方式間接了解商品的信息。于是出現(xiàn)了以服務(wù)電商視覺傳達(dá)的職業(yè)。01______淘寶美工的崛起-X1.1.1淺談電子商務(wù)電子商務(wù)是指以網(wǎng)絡(luò)技術(shù)為基礎(chǔ)，以商品交換為中心的交易活動(dòng)。當(dāng)前的電子商務(wù)模式有B2C、C2C、B2B、O2O等體系。電商在經(jīng)營(yíng)模式上降低了了傳統(tǒng)商業(yè)的經(jīng)營(yíng)成本，減輕了傳統(tǒng)商業(yè)的庫存壓力。也簡(jiǎn)化了傳統(tǒng)商業(yè)的運(yùn)營(yíng)步驟，用更加簡(jiǎn)單的方式完成商業(yè)交易活動(dòng)。01______淘寶美工的崛起-X提示：了解必要的電商知識(shí)很重要，不僅能讓淘寶美工知道什么樣的圖適合淘寶，還能幫助淘寶美工在工作中把握重點(diǎn)，加強(qiáng)重點(diǎn)部分的設(shè)計(jì)，提高商品的轉(zhuǎn)化率。同時(shí)淘寶美工還應(yīng)該熟悉生產(chǎn)到售后的整個(gè)流程，并對(duì)產(chǎn)品有較深的了解，這樣能讓頁面設(shè)計(jì)和頁面信息適合店鋪的風(fēng)格。01______淘寶美工的崛起-X1.1.2淺談淘寶美工的起源2003年“淘寶網(wǎng)”在杭州成立，一些人通過“淘寶網(wǎng)”的“免費(fèi)開店”等平臺(tái)優(yōu)惠措施入駐淘寶網(wǎng)。淘寶美工是負(fù)責(zé)電商圖片工作的職業(yè)，是設(shè)計(jì)的一個(gè)分支，而設(shè)計(jì)是從藝術(shù)中分離出來形成的一個(gè)獨(dú)立藝術(shù)學(xué)科。設(shè)計(jì)與藝術(shù)不同的是，藝術(shù)注重表達(dá)，設(shè)計(jì)注重方便人們的生活。1.2淘寶美工的崛起淘寶美工在時(shí)代發(fā)展需要的前提下產(chǎn)生，在加上淘寶開店的低門檻和高收益的推動(dòng)，使得淘寶美工的崗位需求越來越多，淘寶美工的職業(yè)人群也越來越大。01______淘寶美工的崛起-X01______淘寶美工的崛起-X1.2.1由業(yè)余從業(yè)者到設(shè)計(jì)師美工從業(yè)者的專業(yè)性變化可分為起步、發(fā)展和主流三個(gè)階段。早期的美工工作大多數(shù)是店主自己制作。中期店主提升設(shè)計(jì)水平或?qū)ふ腋鼘I(yè)的設(shè)計(jì)師以適應(yīng)新的設(shè)計(jì)需求聘請(qǐng)更加專業(yè)的視覺設(shè)計(jì)師來做頁面的視覺效果和頁面的互動(dòng)設(shè)計(jì)。01______淘寶美工的崛起-X1.2.2由簡(jiǎn)單設(shè)計(jì)到個(gè)性化設(shè)計(jì)淘寶美工的發(fā)展可以分為早期的滿足基本工作需要，中期的提高轉(zhuǎn)化和現(xiàn)在的內(nèi)容營(yíng)銷三個(gè)時(shí)期。早期的美工工作是用圖片的形式來表現(xiàn)產(chǎn)品，主要將產(chǎn)品表達(dá)清楚即可。中期以配合運(yùn)營(yíng)思路為主，頁面結(jié)構(gòu)上功能分區(qū)明顯，頁面的營(yíng)銷目的明確。用內(nèi)容抓住賣家，和買家建立穩(wěn)定的商業(yè)聯(lián)系，實(shí)現(xiàn)長(zhǎng)久的經(jīng)營(yíng)與銷售目的。01______淘寶美工的崛起-X1.2.3淘寶美工推動(dòng)電子商務(wù)的發(fā)展電商交易活動(dòng)大多在虛擬的網(wǎng)絡(luò)中進(jìn)行，交易活動(dòng)不像傳統(tǒng)行業(yè)那樣看的見摸的著，而是依賴于可視化信息來傳達(dá)商品的信息。良好的淘寶頁面能提高商品的銷量，能增加店鋪對(duì)顧客的吸引力。能讓商品從眾多的淘寶商品中脫穎而出，贏得更多的關(guān)注。提示：好的店鋪頁面設(shè)計(jì)，不對(duì)淘寶店鋪的“內(nèi)容運(yùn)營(yíng)”有著很好的推動(dòng)作用。同時(shí)店鋪頁面設(shè)計(jì)的風(fēng)格吸引著喜歡同樣風(fēng)格的買家，當(dāng)風(fēng)格發(fā)生變化時(shí)，可能會(huì)引起顧客的流失。在淘寶首頁女裝類目下的腔調(diào)頻道，入駐的商家都有著強(qiáng)烈的風(fēng)格，正是這種強(qiáng)烈的風(fēng)格，讓腔調(diào)頻道成為了女裝類目下的熱門頻道。01______淘寶美工的崛起-X1.3淘寶美工應(yīng)該具備的素質(zhì)作為一個(gè)新興的互聯(lián)網(wǎng)職業(yè)，淘寶美工也有著互聯(lián)網(wǎng)傳播廣、變化快的顯著特征。作為淘寶美工從業(yè)者，要有時(shí)刻學(xué)習(xí)的心，緊追時(shí)代的腳步。用自己的知識(shí)和技能，妝點(diǎn)二十一世紀(jì)的網(wǎng)購環(huán)境。01______淘寶美工的崛起-X1.3.1具備多種職業(yè)的基本知識(shí)繪畫的基本基本知識(shí)平面構(gòu)成的知識(shí)了解消費(fèi)者的消費(fèi)心理了解攝影的相關(guān)知識(shí)知識(shí)對(duì)網(wǎng)頁的知識(shí)有一個(gè)基本的了解學(xué)習(xí)新的知識(shí)，以適應(yīng)不斷發(fā)展的行業(yè)變化01______淘寶美工的崛起-X1.3.2提高審美是提升設(shè)計(jì)的捷徑當(dāng)對(duì)事物美感認(rèn)知不夠深刻時(shí)，所表達(dá)的事物美感也就不會(huì)太強(qiáng)。視覺上的美感是一種感性的思維，美感不是通過理性思維的方法加強(qiáng)，而是通過生活中的觀察和感受來積累。提高審美能力對(duì)美感的表達(dá)有很大的幫助。這對(duì)從事與美感相關(guān)工作的人來說很重要。01______淘寶美工的崛起-X1.3.3創(chuàng)意設(shè)計(jì)帶來的顯著效果創(chuàng)意是指事物在現(xiàn)有的理解和認(rèn)知上，衍生出的新的思維方法。創(chuàng)意往往打破常規(guī)，是舊與新的思維碰撞。創(chuàng)意設(shè)計(jì)是將新奇的想法運(yùn)用到設(shè)計(jì)中，讓設(shè)計(jì)體現(xiàn)出不尋常的感覺或耳目一新的感覺。第2章認(rèn)識(shí)淘寶頁面

淘寶頁面的基礎(chǔ)作用是展示商品，幫助買家了解商品。在網(wǎng)店裝修中滿足這一個(gè)基礎(chǔ)條件的頁面，就能稱為淘寶頁面。在淘寶的發(fā)展中，不斷的開發(fā)頁面的附加價(jià)值，增加頁面與買家的互動(dòng)。使頁面有了更多的功能，讓淘寶頁面在淘寶購物活動(dòng)中越來越重要。02______認(rèn)識(shí)淘寶頁面-X2.1網(wǎng)店首頁的組成部分淘寶首頁具有整體性和時(shí)段性兩個(gè)特征首頁根據(jù)其不同部分的內(nèi)容和功能，分為幾個(gè)獨(dú)立部分，各個(gè)部分之間可以相互關(guān)聯(lián)，也可以毫不影響。02______認(rèn)識(shí)淘寶頁面-X2.1.1店招網(wǎng)店里的店招在形式上相當(dāng)于線下店鋪的招牌，實(shí)際上遠(yuǎn)遠(yuǎn)沒有線下店鋪招牌的作用大。網(wǎng)店的店招會(huì)一直出現(xiàn)在店鋪的各個(gè)頁面里，同時(shí)還具有分類導(dǎo)向的作用。店招的主要內(nèi)容是店鋪的名字或者店鋪標(biāo)語等標(biāo)識(shí)性信息。店招的通用尺寸為1920*150像素，中間藍(lán)色950*120部分為主要信息顯示區(qū)，兩邊的藍(lán)灰色為店招的背景部分。02______認(rèn)識(shí)淘寶頁面-X2.1.2海報(bào)放店鋪重要信息的模塊。通欄海報(bào)像素通常是1920像素的寬，高是500到800像素之間。淘寶基礎(chǔ)模塊的默認(rèn)海報(bào)，其中950像素是海報(bào)的寬，250像素是海報(bào)的高，高可以在200到600像素之間任意設(shè)置。02______認(rèn)識(shí)淘寶頁面-X顯示區(qū)域：顯示區(qū)域是指不同尺寸的電腦屏幕所能看到的頁面大小，寬屏顯示器的顯示區(qū)域比窄屏顯示器的顯示區(qū)域大。通常淘寶頁面的顯示像素為1320像素或1290像素，也就是說重要的信息會(huì)放在這個(gè)像素區(qū)域內(nèi)（藍(lán)色的線中間）。2.1.3

功能區(qū)域功能性板塊是實(shí)現(xiàn)運(yùn)營(yíng)效果或盈利目標(biāo)的板塊。這版塊的尺寸寬為1920像素且主要內(nèi)容要求在顯示區(qū)域內(nèi)，而高沒有限制，可根據(jù)內(nèi)容自由設(shè)定。02______認(rèn)識(shí)淘寶頁面-X2.1.4

商品區(qū)商品區(qū)域是商品展示模塊，相當(dāng)于實(shí)體店鋪中的貨架。早期的美工工作大多數(shù)是店主自己制作。商品區(qū)域是店鋪的核心區(qū)域，買家最終瀏覽的信息就是商品區(qū)域的信息。功能板塊的常用尺寸寬為1920像素，高度自由設(shè)置，圖中的商品區(qū)像素寬為750像素。02______認(rèn)識(shí)淘寶頁面-X2.2產(chǎn)品詳情頁面產(chǎn)品的介紹頁面，該頁面的效果影響訪客對(duì)該產(chǎn)品的下單率。產(chǎn)品詳情頁不僅影響這個(gè)產(chǎn)品的銷量，同時(shí)還影響店鋪的整體瀏覽量。02______認(rèn)識(shí)淘寶頁面-X2.2.1

主圖主圖是商品特寫照片，起到商品展示的作用。主圖的效果影響顧客對(duì)產(chǎn)品的印象，主圖上展現(xiàn)不出產(chǎn)品的優(yōu)勢(shì)，就容易流失買家。主圖為尺寸大于640像素的方形，當(dāng)主圖像素大于等于740像素，淘寶電腦端會(huì)為主圖提供放大鏡功能。02______認(rèn)識(shí)淘寶頁面-X2.2.2詳情頁組成部分詳情頁是商品的詳細(xì)信息介紹，不同類目詳情頁的結(jié)構(gòu)不同。店鋪營(yíng)銷圖是為了提高店鋪的銷量，或者達(dá)到運(yùn)營(yíng)策略計(jì)劃的圖片。店鋪營(yíng)銷圖有多種形式，常見的有活動(dòng)介紹圖和店鋪寶貝推薦圖。場(chǎng)景引導(dǎo)圖也叫商品海報(bào)圖，是商品展示到商品詳細(xì)介紹的過度。產(chǎn)品尺寸圖是產(chǎn)品的尺寸、大小等信息展示。產(chǎn)品信息圖是商品的具體信息介紹，是商品的文字說明。產(chǎn)品展示圖是商品全方位的圖片展示，是作為主圖的補(bǔ)充展示。02______認(rèn)識(shí)淘寶頁面-X2.2.3側(cè)邊欄側(cè)邊欄是寬為190像素，高度不限制的內(nèi)容補(bǔ)充欄，通常有兩種形式的側(cè)邊欄，一種是功能性側(cè)邊欄，另一種是展示性側(cè)邊欄。側(cè)邊欄可以把訪客流量導(dǎo)向店鋪其他的產(chǎn)品，讓訪客流量擴(kuò)散到整個(gè)店鋪。02______認(rèn)識(shí)淘寶頁面-X2.3分類頁的組成部分將商品按照賣家設(shè)置的種類，進(jìn)行分類歸置。不同的商品歸置到不同的種類中，方便顧客的瀏覽。02______認(rèn)識(shí)淘寶頁面-X2.4淘寶的手機(jī)頁面淘寶的手機(jī)頁面與電腦端頁面在結(jié)構(gòu)上沒有太大的變化，主要區(qū)別是顯示尺寸不同。淘寶在2011就推出淘寶的移動(dòng)端界面，并在2015年移動(dòng)端交易數(shù)量超過電腦端交易數(shù)量。移動(dòng)端的頁面設(shè)計(jì)思維與電腦端的頁面設(shè)計(jì)思維一脈相承，在注重營(yíng)銷目的中，把握店鋪的品牌文化，才是店鋪發(fā)展的長(zhǎng)久之路。02______認(rèn)識(shí)淘寶頁面-X第3章

淘寶美工的好幫手

設(shè)計(jì)不僅要有創(chuàng)意的思維，和良好的溝通交流，還需要利用各種工具去實(shí)現(xiàn)腦海里的奇妙創(chuàng)意，利用圖形處理軟件強(qiáng)大的功能，不僅能完成生活中不能實(shí)現(xiàn)的效果，還能節(jié)省更多時(shí)間。而軟件是信息時(shí)代的一大特點(diǎn)，從某種程度上講，軟件像手腳一樣作為人們能力的一種延伸，幫助人們解決問題。善用軟件，能讓工作事半功倍。03______淘寶美工的好幫手-X3.1認(rèn)識(shí)PhotoshopPhotoshop默認(rèn)的界面可以分為頂部、左側(cè)、中間和右側(cè)四個(gè)區(qū)域，每個(gè)區(qū)域有不同的界面規(guī)劃。除菜單欄以外，其他區(qū)域的內(nèi)容可以自由移動(dòng)。03-X______淘寶美工的好幫手3.1.1頂部Photoshop默認(rèn)界面的頂部是【菜單選項(xiàng)欄】和【工具屬性欄】。03-X【菜單選項(xiàng)欄】左邊顯示photoshop的標(biāo)志。中間有Photoshop大多數(shù)的的操作，分為九類九項(xiàng)菜單。如編輯、圖像、圖層、濾鏡等。右邊三個(gè)圖標(biāo)分別是最小化、最大化和關(guān)閉按鈕?！竟ぞ邔傩詸凇渴枪ぞ叩囊恍傩赃x項(xiàng)，不同的工具出現(xiàn)的選項(xiàng)不同。______淘寶美工的好幫手3.1.2左側(cè)左側(cè)主要為【工具箱】，是具備不同功能的選項(xiàng)，工具下有三角標(biāo)記的圖形，表示該工具下還有其它類似的命令。當(dāng)選擇使用某工具時(shí)，【工具屬性欄】會(huì)展示該工具的屬性選項(xiàng)。03-X______淘寶美工的好幫手3.1.3中間中間為【工作區(qū)】，由【窗口】和【畫布】組成，同時(shí)還可以選擇性的添加其他輔助的功能，如尺寸標(biāo)識(shí)等。【窗口】是工作的操作區(qū)域，【畫布】是該工作窗口的顯示區(qū)域。03-X______淘寶美工的好幫手3.1.4右側(cè)右側(cè)由【調(diào)板窗】和【浮動(dòng)調(diào)板】（調(diào)板區(qū)）組成。03-X______淘寶美工的好幫手【調(diào)板窗】存放著不常用的調(diào)板。調(diào)板在【調(diào)板窗】中只顯示名稱，單擊后才出現(xiàn)整個(gè)調(diào)板。【浮動(dòng)調(diào)板】（調(diào)板區(qū)）用來安放常用的調(diào)板。調(diào)板在移動(dòng)過程中有自動(dòng)對(duì)齊其他調(diào)板的功能，這個(gè)功能讓界面整齊有秩序。3.2建立工作區(qū)打開軟件后需要?jiǎng)?chuàng)建工作窗口，才能進(jìn)行其他的操作，本章將講解畫布和圖層的建立。03-X______淘寶美工的好幫手3.2.1畫布的建立畫布是在Photoshop軟件中可觀察可操作的部分。Photoshop中的大部分操作都只作用在畫布上。03-X______淘寶美工的好幫手3.2.2圖層的建立【圖層】是一個(gè)個(gè)的圖形或文字元素，按照順序組合形成畫面。簡(jiǎn)單的說【圖層】是頁面內(nèi)容的組成部分。03-X______淘寶美工的好幫手類型：可以篩選同類的圖層，分別有像素、調(diào)整、文字、形狀和智能對(duì)象圖層。混合模式：圖層像素的混合方式。不透明度：調(diào)節(jié)圖層的透明度。鎖定：鎖定像素或全圖。填充：圖層內(nèi)容的透明程度。3.3商品內(nèi)容的選取選框是在畫布中單獨(dú)選擇一部分的內(nèi)容，選框的表現(xiàn)方式為運(yùn)動(dòng)的虛線也叫螞蟻線。在操作時(shí)可以幫助操作者選取畫面的任意部分；在選框里的操作，只會(huì)影響選框中的內(nèi)容，不會(huì)影響選框外的內(nèi)容。03-X______淘寶美工的好幫手3.3.1位置的移動(dòng)【移動(dòng)工具】是移動(dòng)圖層在畫布中的位置。淘寶設(shè)計(jì)中用來移動(dòng)商品的位置。03-X______淘寶美工的好幫手3.3.2幾何物品的選取【矩形選框工具】中還有一些其他幾何形狀的選框工具，這些幾何形狀的選框工具常用于淘寶設(shè)計(jì)中的幾何形狀的相關(guān)運(yùn)用。03-X______淘寶美工的好幫手【矩形選框工具】

的選框?yàn)榫匦?，在淘寶中常用于方形?guī)則物體的選取摳圖?！緳E圓選框工具】

的選框?yàn)閳A，在淘寶中常用于圓形規(guī)則物體的選取摳圖。03-X______淘寶美工的好幫手3.3.3復(fù)雜商品的選取這里主要指的是利用【套索工具】來選取并扣出一些復(fù)雜的形狀。【套索選框工具】會(huì)隨著鼠標(biāo)的運(yùn)行軌跡建立選框?！径噙呅翁姿鞴ぞ摺?/p>

的特征是用直線構(gòu)成選框?！敬判蕴姿鞴ぞ摺繒?huì)隨著鼠標(biāo)軌跡自動(dòng)吸附在相近顏色上形成選框。03-X______淘寶美工的好幫手3.3.4商品快速選取這里主要指的是利用【套索工具】來選取并扣出一些復(fù)雜的形狀。【快速選擇工具】會(huì)在兩種顏色或多種顏色中選擇同一顏色的區(qū)域?！灸О艄ぞ摺窟x擇一種顏色中相同明度的顏色建立選框。3.4圖片的繪制調(diào)整Photoshop擁有強(qiáng)大的圖片繪制和調(diào)整功能，圖片繪制可以實(shí)現(xiàn)網(wǎng)店頁面的各種奇妙創(chuàng)意，圖片調(diào)整則可以優(yōu)化產(chǎn)品圖片，增強(qiáng)店鋪的風(fēng)格和提高店鋪設(shè)計(jì)的檔次。03-X______淘寶美工的好幫手3.4.1淘寶設(shè)計(jì)中的畫筆這些畫筆類工具模擬現(xiàn)實(shí)中畫筆的使用方式，在Photoshop中運(yùn)用。03-X______淘寶美工的好幫手【畫筆工具】

通過調(diào)整筆尖、大小、硬度和壓力等數(shù)據(jù)畫出理想的畫面?！绢伾鎿Q工具】可以用一種顏色替換另一種顏色?！練v史記錄畫筆】是在現(xiàn)有的效果下，去修改前面步驟中的操作3.4.2圖片的修復(fù)圖片的修復(fù)主要指的是圖片局部色彩和局部紋理的修復(fù)和補(bǔ)充。03-X______淘寶美工的好幫手【污點(diǎn)修復(fù)工具】是將周圍的顏色替換到污點(diǎn)修復(fù)區(qū)內(nèi)?！拘扪a(bǔ)工具】是將選定區(qū)域的機(jī)理替換到到要修補(bǔ)的區(qū)域。3.4.3創(chuàng)意形狀的繪制淘寶設(shè)計(jì)工作中經(jīng)常涉及到圖形繪制，通常美工繪制矢量圖形豐富頁面，矢量圖形無論放大縮小，都不會(huì)影響該商品的清晰度。03-X______淘寶美工的好幫手【鋼筆工具】是建立路徑的工具，常用來勾勒曲線?！韭窂竭x擇工具】

用來選擇路徑和錨點(diǎn)并輔助路徑操作。形狀工具是用來繪制矢量形狀的工具。3.4.4頁面圖片效果的調(diào)整圖像不同的表現(xiàn)方式對(duì)商品效果有巨大的影響。如模糊給人朦朧的感覺，黑白讓人理性等。對(duì)商品效果的調(diào)整，影響著人們對(duì)圖的感覺。03-X______淘寶美工的好幫手【模糊工具】

是把像素間的差別降小。【減淡工具】是改變顏色的明度，飽和度和色相。3.5淘寶設(shè)計(jì)中的其他工具Photoshop針對(duì)不同的運(yùn)用，開發(fā)出一些針對(duì)性高的功能，淘寶設(shè)計(jì)中這些功能簡(jiǎn)單而實(shí)用。03-X______淘寶美工的好幫手3.5.1淘寶設(shè)計(jì)中的輔助工具輔助工具是PS開發(fā)的一些輔助其他功能的工具，輔助工具使用簡(jiǎn)單，功能單一，卻是操作中不可缺少的一部分。03-X______淘寶美工的好幫手【吸管工具】主要用于顏色的吸取?！緲?biāo)尺工具】可以標(biāo)識(shí)頁面中的距離參數(shù)?！咀ナ止ぞ摺渴怯脕硪晥D的一種輔助工具?！究s放工具】用來放大縮小畫面。3.5.2創(chuàng)意形狀的繪制橡皮擦工具是一種去除畫面像素信息的工具。03-X______淘寶美工的好幫手【橡皮檫工具】可以擦掉頁面的像素，并填充為白色或者將擦掉的地方變?yōu)橥该?。【背景橡皮檫工具】是擦除與背景色相似的顏色，并形成透明背景?！灸g(shù)橡皮檫工具】會(huì)自動(dòng)選擇所選區(qū)域相同的顏色，并自動(dòng)擦掉形成透明背景。3.5.3仿制圖章工具【仿制圖章工具】是將仿制源區(qū)域的顏色圖像復(fù)制到仿制區(qū)。03-X______淘寶美工的好幫手3.5.4文字工具【文字工具】

是用來添加文字的工具。當(dāng)然也是文字排版運(yùn)用最多的工具。03-X______淘寶美工的好幫手3.5.5漸變工具這里的漸變工具主要指控制畫面顏色的工具。03-X______淘寶美工的好幫手漸變工具能夠在兩種或多種顏色相接的地方做一個(gè)顏色色的混合，這會(huì)讓顏色呈現(xiàn)出更多更自然的變化?！居推嵬肮ぞ摺渴翘畛漕伾墓ぞ?3.5.6圖片的存儲(chǔ)設(shè)計(jì)不同用處的作品，需要用不同的保存方式保存圖片，在淘寶設(shè)計(jì)中通常用WED網(wǎng)頁格式保存圖片。03-X______淘寶美工的好幫手【存儲(chǔ)】是保存相同的格式覆蓋原本的文件?！緝?chǔ)存為】是以原文件為基礎(chǔ)創(chuàng)建一個(gè)新的文件?！敬鎯?chǔ)為Wed所用格式】就是適用于網(wǎng)頁顏色的圖片格式，這個(gè)格式能夠減少顏色在網(wǎng)頁在顯示器上的誤差。第3章

淘寶美工的提升技能

本章講解Photoshop操作中的重點(diǎn)，這些重點(diǎn)的實(shí)用性很強(qiáng)，能夠解決工作中的很多問題。同時(shí)，這些內(nèi)容也相對(duì)復(fù)雜，需要大量練習(xí)才能掌握這些知識(shí)點(diǎn)，才能在工作中熟練的運(yùn)用。04______淘寶美工的提升技能-X4.1美工畫筆詳解【畫筆工具】

模擬生活中的畫筆，可以在軟件中自由的繪制形狀。04______淘寶美工的提升技能-X4.1.1畫筆預(yù)設(shè)【畫筆工具】的精髓是畫筆預(yù)設(shè)里的筆尖，筆尖能記錄顏色的明暗，因此能清晰的展示筆尖原型的形狀。筆尖顏色通常為單色。04______淘寶美工的提升技能-X4.1.2畫筆【形狀動(dòng)態(tài)】是自動(dòng)將筆尖的大小角度進(jìn)行一些調(diào)整，運(yùn)用該功能可以讓筆尖排列不單調(diào)，讓筆尖組合更加靈動(dòng)自然?！旧⒉肌渴怯脕碚{(diào)節(jié)筆尖的數(shù)量和筆尖間距。散布通常和形狀動(dòng)態(tài)結(jié)合使用，讓筆尖組合更加自然豐富。【紋理】加強(qiáng)形狀筆尖的細(xì)節(jié)，讓筆尖的細(xì)節(jié)更清晰。但是原本清晰的細(xì)節(jié)再加強(qiáng)，就會(huì)加深畫面，影響畫面的效果。04______淘寶美工的提升技能-X4.2強(qiáng)大的圖層蒙版【圖層蒙版】是在需要進(jìn)行局部操作的圖層上添加一個(gè)虛擬的遮擋面，通過對(duì)虛擬遮擋面的黑白填充來選擇畫面需要的部分，在圖層蒙版中填充黑色，圖片中對(duì)應(yīng)部分就會(huì)被隱藏，圖層蒙版中填充白色，圖片中對(duì)應(yīng)部分就會(huì)顯示，在圖層蒙版中填充灰色，圖片中對(duì)應(yīng)部分就會(huì)透明。04______淘寶美工的提升技能-X4.3淘寶特殊效果制作【圖層樣式】主要用來制作特殊效果的字體，通過對(duì)圖層陰影、斜面浮雕等添加，讓該圖層的內(nèi)容呈現(xiàn)出不同的效果。04______淘寶美工的提升技能-X4.3.1樣式【樣式】里的效果是已經(jīng)存儲(chǔ)好的【圖層樣式】信息，樣還可以從網(wǎng)絡(luò)上下載其他的【樣式】。這些【樣式】效果可以直接運(yùn)用，節(jié)省大量的工作時(shí)間。04______淘寶美工的提升技能-X4.3.2斜面和浮雕【斜面和浮雕】是給圖層添加一個(gè)斜面讓圖層有一個(gè)微微的立體效果，在淘寶中常用來做字體效果，讓字體內(nèi)容更飽滿。04______淘寶美工的提升技能-X外斜面：在圖層所選的方向外部增加一個(gè)斜面。內(nèi)斜面：在圖層所選的方向內(nèi)部增加一個(gè)斜面。浮雕斜面：在所選方向模擬浮雕的斜面。枕邊浮雕：在所選方向的一側(cè)增加斜面。描邊浮雕：在所選方向的描邊上增加一個(gè)斜面，前提是所選對(duì)象處在描邊狀態(tài)下。4.4.3描邊【描邊】是根據(jù)圖層形狀然后在圖層的邊緣添加邊框。大?。嚎刂七吙虻膶挾?，單位為像素。位置：可選擇邊框處于文字的內(nèi)部、外部和居中?；旌夏Ｊ剑哼@里不多講，后面會(huì)詳細(xì)講。不透明度：控制邊框的透明程度。顏色：控制邊框的顏色。04______淘寶美工的提升技能-X4.3.4內(nèi)陰影【內(nèi)陰影】是在圖層的內(nèi)部添加一道陰影。混合模式：這里不多講，后面會(huì)詳細(xì)講。不透明度：控制陰影的透明程度。角度：選擇陰影在圖層中的角度，（通常勾選全局光，將不會(huì)有出現(xiàn)角度方向）。距離：控制陰影與物體的距離。阻塞：控制陰影的濃密程度。大?。嚎刂脐幱暗拇笮　５雀呔€：控制陰影的形狀變化。04______淘寶美工的提升技能-X4.3.5內(nèi)發(fā)光【內(nèi)發(fā)光】是在圖層的內(nèi)部添加一道光。04______淘寶美工的提升技能-X混合模式：這里不多講，后面會(huì)詳細(xì)講。不透明度：控制內(nèi)發(fā)光的透明程度。雜色：給內(nèi)發(fā)光添加其他色。阻塞：控制內(nèi)發(fā)光的明亮程度。大?。嚎刂苾?nèi)發(fā)光的大小。等高線：控制內(nèi)發(fā)光的形態(tài)變化。4.3.6光澤【光澤】是在圖層上添加一道光。04______淘寶美工的提升技能-X混合模式：這里不多講，后面會(huì)詳細(xì)講。不透明度：控制光澤的透明程度。角度：選擇光澤在圖層中的角度方向，（通常勾選全局光，將不會(huì)有出現(xiàn)角度方向）。距離：控制光澤與物體的距離。大小：控制光澤的大小。等高線：控制光澤的形態(tài)變化。4.3.7顏色疊加【顏色疊加】是在圖層上用一種顏色覆蓋原本的顏色。04______淘寶美工的提升技能-X4.3.8陰影【陰影】是給圖層加上一個(gè)影子。04______淘寶美工的提升技能-X混合模式：圖層間像素的疊加方式。用鼠標(biāo)左鍵單擊【混合模式】后面的小方框，可以選擇陰影的顏色。不透明度：控制陰影的透明程度。角度：選擇陰影在圖層中的角度方向，（通常勾選全局光，將不會(huì)有出現(xiàn)角度方向）。距離：控制陰影與物體的距離。擴(kuò)展：控制陰影的濃淡程度。大小：控制陰影的大小。等高線：控制陰影的形態(tài)變化。4.4美工的后期修圖默認(rèn)界面懸浮欄的【調(diào)整】板塊，主要是對(duì)照片記錄的顏色、明暗等信息進(jìn)行修改。【調(diào)整】是后期修圖操作的主要部分。04______淘寶美工的提升技能-X4.4.1亮度/對(duì)比度調(diào)整圖層【亮度/對(duì)比度】調(diào)整是對(duì)圖片的亮度和對(duì)比度信息進(jìn)行修改。04______淘寶美工的提升技能-X亮度：是圖片的明亮程度。對(duì)比度：是圖片亮與暗的對(duì)比程度。4.4.2色階調(diào)整圖層【色階】調(diào)整是對(duì)圖片的色階信息進(jìn)行修改?！旧A】是圖像亮度強(qiáng)弱的指數(shù)，指數(shù)為0-255。處于0的部分為亮，255的部分為暗。將操作桿從零到255，圖像會(huì)逐漸變暗。操作桿從255到0圖像會(huì)逐漸變亮。04______淘寶美工的提升技能-X4.4.3曲線調(diào)整圖層【曲線】調(diào)整是對(duì)圖片的顏色信息進(jìn)行修改。04______淘寶美工的提升技能-X自定：預(yù)設(shè)的各種效果曲線。RGB：可以選擇調(diào)整紅、綠和藍(lán)的顏色信息曲線。4.4.4自然飽和度調(diào)整圖層【自然飽和度】調(diào)整圖層是調(diào)整顏色的鮮艷度04______淘寶美工的提升技能-X自然飽和度：通常情況下是改變背景或遠(yuǎn)景的顏色飽和度。飽和度：整個(gè)畫面的顏色飽和度。4.4.5色相/飽和度調(diào)整圖層【色相/飽和度】主要對(duì)顏色信息進(jìn)行修改調(diào)整，【色相/飽和度】能對(duì)所選顏色進(jìn)行加強(qiáng)、減弱甚至改變顏色，并且這些操作不會(huì)影響圖像中其他的顏色04______淘寶美工的提升技能-X預(yù)設(shè)：事先設(shè)置的色彩調(diào)整方式。色相：通過調(diào)節(jié)操作桿，改變顏色的色相。飽和度：通過調(diào)節(jié)操作桿，改變顏色的鮮艷度。明度：通過調(diào)節(jié)操作桿，改變顏色的明暗。4.4.6色彩平衡調(diào)整圖層【色彩平衡】也是對(duì)顏色的修改調(diào)整，【色彩平衡】在色彩由三原色組合而成的定律上，把一個(gè)混合色中的組合色減弱，另外的一個(gè)組合色就會(huì)凸現(xiàn)增強(qiáng)。04______淘寶美工的提升技能-X色調(diào)：即圖像中的高光部分，中間調(diào)部分和陰影部分。青色-紅色：操作桿向左移動(dòng)青色會(huì)增加，青色的對(duì)應(yīng)色紅色就會(huì)減弱。操作桿向右移動(dòng)，紅色增加，青色減弱。洋紅-綠色：操作桿向左移動(dòng)洋紅色會(huì)增加，洋紅色的對(duì)應(yīng)色綠色就會(huì)減弱。操作桿向右移動(dòng)，綠色增加，洋紅色就會(huì)減弱。黃色-藍(lán)色：操作桿向左移動(dòng)黃色會(huì)增加，黃色的對(duì)應(yīng)色藍(lán)色就會(huì)減弱。操作桿向右移動(dòng)，藍(lán)色增加，黃色就會(huì)減弱。4.4.8可選顏色調(diào)整圖層【可選顏色】

是選擇圖像中的所有單一對(duì)應(yīng)得顏色，并加以調(diào)整。04______淘寶美工的提升技能-X預(yù)設(shè)：事先設(shè)置的色彩調(diào)整方式。紅色：能夠控制紅色轉(zhuǎn)成黑白后的明度。黃色：能夠控制黃色轉(zhuǎn)成黑白后的明度。綠色：能夠控制綠色轉(zhuǎn)成黑白后的明度。青色：能夠控制青色轉(zhuǎn)成黑白后的明度。藍(lán)色：能夠控制藍(lán)色轉(zhuǎn)成黑白后的明度。4.5強(qiáng)大的濾鏡【濾鏡】是用來做特殊效果的，【濾鏡】預(yù)設(shè)有各種不同的效果，同時(shí)還可以添加新的濾鏡插件。Photoshop能成為圖形制作的主流軟件，濾鏡的插件添加功能起到了很大的推動(dòng)作用。04______淘寶美工的提升技能-X4.5.1濾鏡庫【濾鏡庫】是軟件中預(yù)設(shè)好的一些圖像特殊效果，可以直接運(yùn)用到圖像中。04______淘寶美工的提升技能-X4.5.2液化【液化】能夠擠壓或擴(kuò)張像素，可以調(diào)整圖像中的像素位置。04______淘寶美工的提升技能-X

4.5.3模糊模糊指的是減少像素里的圖像信息，使最終呈現(xiàn)出的圖像不清晰。光圈模糊】是模擬相機(jī)中的虛焦效果，用遠(yuǎn)處物體的虛化來強(qiáng)化近處物體的視覺展現(xiàn)力。【動(dòng)感模糊】是模擬運(yùn)動(dòng)時(shí)出現(xiàn)的模糊效果?！靖咚鼓：渴前凑找欢ū壤郎p少像素里的圖像信息，【高斯模糊】能夠保留輪廓降低細(xì)節(jié)。04______淘寶美工的提升技能-X04______淘寶美工的提升技能-X4.5.4扭曲【扭曲】是將圖像做扭曲效果，如波浪、波紋、擠壓等。04______淘寶美工的提升技能-X4.5.5像素化【像素化】是一種減少圖像細(xì)節(jié)的處理方式，主要有馬賽克、晶格化等。04______淘寶美工的提升技能-X4.6顏色通道【通道】是根據(jù)顏色的明度來顯示圖像的顏色信息值，不同的顏色模式有不同的通道。04______淘寶美工的提升技能-X4.7神奇的混合模式【混合模式】是兩個(gè)或多個(gè)圖層的混合方式，可以將兩個(gè)或多個(gè)圖層按照一定的規(guī)則進(jìn)行融合。04______淘寶美工的提升技能-X4.7.1溶解【溶解】是基色和混合色在像素不透明度的前提上進(jìn)行隨機(jī)替換。04______淘寶美工的提升技能-X4.7.2變暗【變暗】是把兩個(gè)圖層中較暗的顏色作為最終的顏色。04______淘寶美工的提升技能-X4.7.3線性光【線性光】將圖層中明度亮的部分提亮并作為結(jié)果色。第5章

圖片的后期美化

對(duì)圖片的后期美化，絕不是夸大產(chǎn)品的虛假宣傳。一個(gè)店鋪的良久發(fā)展，是不能靠虛假宣傳的。后期修圖原本是對(duì)攝影的一些后期補(bǔ)充，在淘寶工作中，更多的是為了讓攝影的產(chǎn)品圖片與實(shí)物保持相同的特征。以減少圖片與實(shí)物不符合所帶來的顧客投訴。對(duì)產(chǎn)品的適當(dāng)美化，可以增強(qiáng)產(chǎn)品的視覺效果。05______圖片的后期美化-X05______圖片的后期美化-X5.1顏色的基本知識(shí)顏色是物體反射的光在人眼中的感受，而人眼所能看見的光（可見光）可以由三種光混合而成，而這三種光稱為光的三基色。這三種光混合在一起會(huì)形成白色的光；生活中的顏色，也可以由三種顏色形成，這三種顏色稱為顏料的三原色，這三種顏色混合在一起會(huì)形成黑色。05______圖片的后期美化-X5.1.1色彩的基本要素生活中的顏色可以由顏料的三原色混合而成，不同的混合有不同的特征。由任意兩個(gè)原色混合成的顏色，稱為間色。除兩個(gè)原色生成的顏色外，由其他的顏色混合生成的顏色，稱為復(fù)色。色相指得是顏色的具體表現(xiàn)。飽和度是顏色的鮮艷程度除兩個(gè)原色生成的顏色外，由其他的顏色混合生成的顏色，稱為復(fù)色。光源色是光源所發(fā)出光的顏色。固有色是物體給人直觀感受的顏色，是物體反射的光，這個(gè)光受光源顏色的影響。環(huán)境色是周圍顏色對(duì)物體顏色的影響，環(huán)境色的強(qiáng)弱受物體材質(zhì)的影響。05______圖片的后期美化-X5.1.2色彩的冷暖和情感受文化地域的影響，不同的顏色象征了不同的自然事物，也就有了不同的感覺。比如，紅黃象征了溫暖的太陽，藍(lán)色象征了冰冷的大海，綠色象征了森林。通常將紅色系、黃色系為主的顏色稱為暖色，暖色并不具備溫度，只是心理感覺上的溫暖。藍(lán)色系為主的顏色稱為冷色調(diào)，冷色同樣不具備溫度，只是心理感覺上的寒冷。綠色系和紫色系為主的顏色稱為中性色。沒有太多的溫度直觀感受，更多的是綠色或其他事物的感受。藍(lán)色系為主的顏色稱為冷色調(diào)，冷色同樣不具備溫度，只是心理感覺上的寒冷。05______圖片的后期美化-X5.2頁面圖片調(diào)整一張圖片放在頁面上不同的位置，就需要對(duì)圖片進(jìn)行相應(yīng)的調(diào)整。05______圖片的后期美化-X5.2.1修改圖像大小頁面對(duì)圖片的大小往往有所限制，為了方便顧客的瀏覽，就需要將拍攝圖片的大小進(jìn)行修改調(diào)整。05______圖片的后期美化-X5.2.2裁剪圖片淘寶中起到重要作用的主圖，尺寸通常為740以上的正方形圖，而照片的尺寸通常為3：2的方形圖，這就需要對(duì)照片進(jìn)行裁剪。05______圖片的后期美化-X5.2.3圖像調(diào)正在淘寶產(chǎn)品的拍攝過程中，有時(shí)候產(chǎn)品圖像因?yàn)閿z影構(gòu)圖的原因而傾斜，制作主圖時(shí)，需要將這種傾斜調(diào)正。05______圖片的后期美化-X5.3圖片的美化修圖現(xiàn)在的淘寶攝影在產(chǎn)品圖片拍攝后，需要進(jìn)行美化修圖。05______圖片的后期美化-X5.3.1產(chǎn)品修圖產(chǎn)品修圖這里主要指非服裝類的產(chǎn)品修圖，這類產(chǎn)品多為室內(nèi)的靜物拍攝，修圖相對(duì)簡(jiǎn)單。05______圖片的后期美化-X5.3.2服裝修圖影棚服裝模特拍攝光線較為統(tǒng)一，修圖就相對(duì)簡(jiǎn)單，街拍服裝模特的光線比較復(fù)雜，修圖也相對(duì)復(fù)雜。05______圖片的后期美化-X5.4淘寶模特實(shí)拍修圖首先去除服裝上的污點(diǎn)和不必要的褶皺，避免這些因素對(duì)服裝的影響。接著對(duì)服裝模特進(jìn)行美化，以凸顯服裝的美感。然后是對(duì)環(huán)境以及服裝進(jìn)行調(diào)色，使圖片風(fēng)格適合店鋪的定位。05______圖片的后期美化-X5.4.1模特圖修形主要為模特圖本身瑕疵的處理，如鏡頭上的臟點(diǎn)，衣服上的污漬，然后是模特自身不足的補(bǔ)充，如高矮，胖瘦等。05______圖片的后期美化-X5.4.2模特圖調(diào)色主要為畫面色調(diào)，環(huán)境色調(diào)以及服裝色調(diào)的調(diào)整。第6章

淘寶摳圖實(shí)用技巧

淘寶官方頁面上的大多數(shù)產(chǎn)品圖片都是白底圖，再加上白底圖能突出的展現(xiàn)商品的優(yōu)勢(shì)，摳出產(chǎn)品再填充白底就成為了淘寶美工的基本功。摳出產(chǎn)品就是將產(chǎn)品的輪廓裁剪出來。因?yàn)槊靠钌唐范夹枰簧俚陌椎讏D，有的網(wǎng)店甚至招收只負(fù)責(zé)摳圖的美工。06______淘寶摳圖實(shí)用技巧-X6.1簡(jiǎn)單摳圖簡(jiǎn)單摳圖指的是背景不復(fù)雜或者扣取物形狀比較規(guī)則的摳圖，這類圖像的扣取相對(duì)簡(jiǎn)單。在Photoshop中，單個(gè)的工具就能完成。06______淘寶摳圖實(shí)用技巧-X6.1.1幾何物體摳取幾何物體指的是規(guī)則的幾何形狀的產(chǎn)品。Postscript中的幾何選框選擇工具和套索工具就能夠完成這些產(chǎn)品的扣取。06______淘寶摳圖實(shí)用技巧-X6.1.2單色物體摳圖淘寶中的很多商品都是單色的，這些產(chǎn)品的顏色統(tǒng)一，就可以用顏色來選擇區(qū)域，讓產(chǎn)品的摳圖更加方便。06______淘寶摳圖實(shí)用技巧-X6.1.3漸變背景摳圖淘寶產(chǎn)品大多是在簡(jiǎn)易拍攝臺(tái)上拍攝的，其背景通常是單色的塑料板。在拍攝的過程中，受燈光等因素的影響，背景塑料板會(huì)出現(xiàn)明暗深淺等顏色變化。在Photoshop中可以根據(jù)這種明暗深淺的顏色變化進(jìn)行摳圖。06______淘寶摳圖實(shí)用技巧-X6.2復(fù)雜摳圖淘寶中的復(fù)雜摳圖，首先是人像和毛絨玩具的摳圖處理；這類圖像因?yàn)楫a(chǎn)品邊緣細(xì)小而繁多，處理起來十分麻煩；其次是玻璃制品類的透明摳圖，透明摳圖需要較高的處理技巧，摳圖時(shí)保證產(chǎn)品圖像的完整，又要去除圖片的背景紋理，以上兩種摳圖是淘寶中比較難的摳圖處理。06______淘寶摳圖實(shí)用技巧-X6.2.1毛發(fā)摳圖毛發(fā)摳圖的難點(diǎn)在于邊緣毛發(fā)的細(xì)瑣，用一般的形狀摳圖是很難摳出的，因此需要用顏色的明度來區(qū)別邊緣的毛發(fā)。06______淘寶摳圖實(shí)用技巧-X6.2.2透明摳圖根據(jù)玻璃制品自身的透明特點(diǎn)，并在蒙版中涂抹相應(yīng)的黑白灰。來扣取玻璃的半透明。即蒙版上，白色代表完全不透明，灰色代表半透明，黑色代表全透明。06______淘寶摳圖實(shí)用技巧-X6.3寵物用品主圖設(shè)計(jì)主圖要做到信息準(zhǔn)確利于傳播。即一眼能看出商品的主要屬性，同時(shí)擁有一定的視覺表現(xiàn)力。06______淘寶摳圖實(shí)用技巧-X6.3.1小狗素材處理將素材做一定的處理，方便后期主圖的設(shè)計(jì)制作。06______淘寶摳圖實(shí)用技巧-X6.3.2產(chǎn)品素材處理將素材做一定的處理，方便后期主圖的設(shè)計(jì)制作。06______淘寶摳圖實(shí)用技巧-X6.3.3其他素材處理將素材做一定的處理，方便后期主圖的設(shè)計(jì)制作。06______淘寶摳圖實(shí)用技巧-X6.3.4主圖設(shè)計(jì)制作在設(shè)計(jì)制作主圖時(shí)，注重主圖和裝飾之間的排版關(guān)系，這對(duì)主圖的表現(xiàn)力有很大的幫助。06______淘寶摳圖實(shí)用技巧-X謝謝Tnankyou第7章

排版是設(shè)計(jì)的基礎(chǔ)

一個(gè)好的網(wǎng)店頁面，產(chǎn)品展示要合理有秩序，滿足店鋪運(yùn)營(yíng)的需求之余，考慮賣家購買過程中的實(shí)際感受，同時(shí)也要保證頁面的美觀。這需要在排版過程中對(duì)頁面整體有良好的規(guī)劃，良好的版式，讓人耳目一新，給人深刻的印象。排版精美，留白恰當(dāng)，才是理想的淘寶頁面。07______排版是設(shè)計(jì)的基礎(chǔ)-X7.1淘寶頁面的三個(gè)基本要素在大量的商家發(fā)展推動(dòng)下，形成了各種風(fēng)格的頁面。而頁面的基本組成部分，離不開點(diǎn)、線、面的配合。不論多復(fù)雜的頁面，都能在頁面里找出點(diǎn)、線、面元素，無論多簡(jiǎn)單的頁面，也能找出這些元素。07______排版是設(shè)計(jì)的基礎(chǔ)-X7.1.1點(diǎn)什么是點(diǎn)？在頁面里點(diǎn)是一個(gè)有空間位置的痕跡，這個(gè)點(diǎn)可以很大，也可以很小，點(diǎn)的大小是相對(duì)與頁面的其他元素。點(diǎn)的感覺會(huì)隨著點(diǎn)的大小而變化，用放大鏡看點(diǎn)，由小到大，點(diǎn)的感覺就逐漸消失。07______排版是設(shè)計(jì)的基礎(chǔ)-X無序單一的點(diǎn)，有較強(qiáng)的向心力，能夠?qū)⑷藗兊淖⒁饬奂皆擖c(diǎn)上。無序多個(gè)的點(diǎn)，因?yàn)槠洳皇芪恢?、大小、順序的變化，在表現(xiàn)形式上更為自由，可以創(chuàng)造富有想象力的空間，如樹葉上的水滴，白紙上的碎屑，地板上的紙團(tuán)，深邃的星空，此類圖片在淘寶頁面上常用來做背景或底紋。有序的點(diǎn)，以規(guī)律的形式排列、重復(fù)、或者有序漸變形成，通過控制點(diǎn)與點(diǎn)之間的疏密，能使畫面更豐富，更細(xì)膩。7.1.2線點(diǎn)運(yùn)動(dòng)的軌跡就形成了線，線具有很強(qiáng)的表現(xiàn)能力，能準(zhǔn)確的表達(dá)事物。直線平穩(wěn)、剛毅，曲線生動(dòng)精準(zhǔn)。人的視線習(xí)慣性的追隨物體的運(yùn)動(dòng)軌跡，所以線還起到引導(dǎo)視覺的作用。07______排版是設(shè)計(jì)的基礎(chǔ)-X排版中將零散的信息，用線條加以強(qiáng)化，將視覺的重心聚集在線條加強(qiáng)的內(nèi)容上。線條不僅能夠連接頁面的上下文，讓上下文的內(nèi)容過度更自然，還能將線條自身簡(jiǎn)單直接的屬性，融合到頁面中，成為頁面風(fēng)格不可拆分的元素。7.1.3面線的非“線向”（直線中心到兩端的方向）運(yùn)動(dòng)軌跡就形成了面，面的感覺會(huì)隨著面的大小而變化，與點(diǎn)不同的是，面越小面的感覺越弱。07______排版是設(shè)計(jì)的基礎(chǔ)-X1.面的多樣化面是構(gòu)成世界的基本構(gòu)成元素（絕對(duì)的點(diǎn)和線存在于理論中），無論是大自然還是人們的生活，面無處不在。按照其特點(diǎn)，大致分為以下4類。無機(jī)型：就是規(guī)則的幾何形，是一種可以用數(shù)學(xué)的方法得出的圖形。常見的有圓形，方形等。有機(jī)型：指大自然中自然生成的圖形。如楓樹葉、竹葉等圖形。隨機(jī)型：指偶然得到圖形，生活中幾乎不可能用相同的方法得到的圖形。如潑墨，水滴在地上的痕跡等。繪制型：人創(chuàng)造的自由構(gòu)成圖形，具有很強(qiáng)的表達(dá)能力。如剪影，剪紙等。2.面的構(gòu)成方式面豐富的內(nèi)容和較強(qiáng)的表達(dá)能力，在頁面中運(yùn)用比較廣。通過面與面的不同組成方式，達(dá)到相應(yīng)的效果，使頁面形式更加新穎，頁面的內(nèi)容更加豐富，接下來介紹幾種常見的面的組成方式。相離：通過兩個(gè)面或多個(gè)面不相接的組合，給頁面留出空隙，使頁面有呼吸感，方便賣家的瀏覽。相遇：通過面與面的相接，構(gòu)建新的面，使頁面更加整體。相交：通過面與面不同的疊加方式，組合成新的面，使頁面的內(nèi)容富有層次。7.2淘寶頁面的構(gòu)圖原則瀏覽頁面時(shí)，頁面上能吸引眼球的元素，即為視覺點(diǎn)。合理安排視覺點(diǎn)，就是構(gòu)圖。構(gòu)圖影響頁面的結(jié)構(gòu)，也能改變頁面的效果。合理的構(gòu)圖讓頁面靈活而有序，而頁面的構(gòu)圖是否新穎，是否合理，決定頁面信息的傳達(dá)效果。結(jié)構(gòu)鮮明的構(gòu)圖，讓頁面豐富而不臃腫，簡(jiǎn)潔而精彩。07______排版是設(shè)計(jì)的基礎(chǔ)-X7.2.1平衡構(gòu)圖平衡構(gòu)圖是頁面視覺重心相對(duì)平衡的構(gòu)圖方式，平衡構(gòu)圖使頁面更加整體，讓頁面富有節(jié)奏感和秩序感。平衡構(gòu)圖能夠很好的統(tǒng)一頁面各元素，展現(xiàn)頁面的和諧之美。平衡構(gòu)圖在頁面設(shè)計(jì)中占主導(dǎo)地位。是淘寶頁面中常見的構(gòu)圖方式。07______排版是設(shè)計(jì)的基礎(chǔ)-X左右構(gòu)圖在視覺重心上相對(duì)均衡，在視覺上相互補(bǔ)充，使頁面的整體性更好，讓頁面豐富有序。中軸線構(gòu)圖是視覺點(diǎn)以中軸線分布為主的構(gòu)圖方式，中軸線構(gòu)圖能突出中心線上的內(nèi)容。使視覺焦點(diǎn)聚集在中軸線上。對(duì)角線構(gòu)圖是視覺點(diǎn)沿著對(duì)角線分布，對(duì)角線構(gòu)圖打破常規(guī)視覺的靜止，使頁面富有動(dòng)感。7.2.2偏左偏右構(gòu)圖偏左或偏右構(gòu)圖打破了平衡構(gòu)圖的秩序感，在視覺上偏左或偏右，展現(xiàn)出一種不對(duì)稱的美感07______排版是設(shè)計(jì)的基礎(chǔ)-X視覺重心偏右的構(gòu)圖方式，適合于典雅風(fēng)格的塑造。視覺重心偏左的構(gòu)圖方式，適合于人們的閱讀習(xí)慣，方便買家瀏覽信息。7.2.3自由構(gòu)圖自由構(gòu)圖相對(duì)于其他的構(gòu)圖，在形式和結(jié)構(gòu)上更為自由。在構(gòu)圖時(shí)不遵循大多數(shù)的構(gòu)圖法則，所以自由構(gòu)圖有著良好的表現(xiàn)能力，能夠較好地吸引賣家的目光。自由構(gòu)圖在表現(xiàn)形式上，沒有太多的限制，注重視覺重心的過度，無論頁面怎么新穎有創(chuàng)意，在視覺重心的過渡上依舊嚴(yán)格。頁面?zhèn)鬟f的信息，會(huì)根據(jù)其重要程度來做視覺重心的調(diào)整。良好的自由構(gòu)圖能夠做到亂而有序，新穎而不失重點(diǎn)。07______排版是設(shè)計(jì)的基礎(chǔ)-X7.3淘寶頁面的組成部分07______排版是設(shè)計(jì)的基礎(chǔ)-X淘寶頁面不是素材和產(chǎn)品的的堆砌，而是將頁面中的素材和產(chǎn)品以一種合理的方式組合，使頁面能夠展示出產(chǎn)品的優(yōu)點(diǎn)，或傳達(dá)店鋪的品牌理念。7.3.1淘寶頁面的組成部分07______排版是設(shè)計(jì)的基礎(chǔ)-X解析淘寶頁面，可以把頁面的組成分為文字、主體、背景、裝飾四類。文字是主要的信息載體，能清晰的表達(dá)頁面的中心思想。主體是主要展現(xiàn)的物體，是頁面中的重點(diǎn)。背景是頁面的骨骼，支撐整個(gè)頁面。裝飾點(diǎn)綴頁面，讓頁面更豐富、細(xì)膩。7.3.2圖片組成部分的相互關(guān)系07______排版是設(shè)計(jì)的基礎(chǔ)-X主體和背景相輔相成，背景突出主體，主體豐富背景。頁面文字是頁面的核心信息說明。頁面上的裝飾用來彌補(bǔ)頁面的不足。背景通常用來突出主體，讓主題更加明確，主體與背景構(gòu)成了整個(gè)頁面的形態(tài)，是頁面的骨骼和肌肉。沒有背景的主體，是殘缺的意向，沒有主體的背景是空白的陳述。文字通常是淘寶頁面的第二視覺重心，起呼應(yīng)主體的作用，以平衡頁面的視覺點(diǎn)。文字是頁面信息的補(bǔ)充和說明。合理的安排文字，不僅能使頁面擁有良好的信息傳遞，還能裝飾頁面，使頁面的內(nèi)容更豐富。裝飾是對(duì)頁面元素和頁面內(nèi)容的一個(gè)補(bǔ)充，裝飾讓頁面完整而豐富。7.3.3美工文字排版的奧秘07______排版是設(shè)計(jì)的基礎(chǔ)-X文字是頁面很重要的一個(gè)組成部分，文字排版影響著頁面的美觀。利用各種對(duì)比關(guān)系，讓文字排版簡(jiǎn)單而有效。大小對(duì)比是常用的一種對(duì)比方法，即將主要信息放大以加強(qiáng)傳播性。將次要信息縮小，造成強(qiáng)烈的視覺沖擊。疏密對(duì)比是控制文字間的間隙，利用密與疏的視覺沖擊，營(yíng)造一種豐富細(xì)膩的視覺感受。明暗對(duì)比是控制文字的明度，用顏色的深淺對(duì)比，造成視覺上的差異。利用文字的粗細(xì)，形成較大的視覺反差。讓頁面擁有更多變化，同時(shí)豐富頁面的內(nèi)容。將文字做前后遮擋處理，展現(xiàn)文字的層次感。將文字挖空的負(fù)型處理與正常文字形成的陰刻陽刻對(duì)比，是一種較為新穎的文字排版方式。文字按照不同的方向進(jìn)行排版，利用方向上的差異，豐富版面上的內(nèi)容。用顏色來展示文字間的視覺關(guān)系，讓文字信息的傳達(dá)更加準(zhǔn)確。7.4海報(bào)的版面設(shè)計(jì)07______排版是設(shè)計(jì)的基礎(chǔ)-X規(guī)劃頁面的布局方案，選擇或制作合適的背景，接著確定主體的大概位置，然后拆分文案，合理的布局分解開的文案，在添加裝飾點(diǎn)綴畫面，最后調(diào)整細(xì)節(jié)完成設(shè)計(jì)。7.4.1素材的摳圖處理07______排版是設(shè)計(jì)的基礎(chǔ)-X對(duì)素材做一個(gè)常規(guī)的摳圖處理，以方便海報(bào)的設(shè)計(jì)制作。7.4.2左右構(gòu)圖版面的設(shè)計(jì)07______排版是設(shè)計(jì)的基礎(chǔ)-X確定版面的大體布局結(jié)構(gòu)，劃分版面的大概內(nèi)容。7.4.3細(xì)節(jié)刻畫與裝飾的添加07______排版是設(shè)計(jì)的基礎(chǔ)-X添加裝飾和畫面細(xì)節(jié)刻畫，豐富版面的內(nèi)容。謝謝Tnankyou第8章

淘寶店鋪的頁面設(shè)計(jì)

現(xiàn)在的淘寶店鋪越來越重視，店鋪設(shè)計(jì)的品牌辨識(shí)度，不僅要求頁面設(shè)計(jì)滿足頁面的商業(yè)功能，還對(duì)頁面的視覺效果提出更高的要求。要求淘寶頁面設(shè)計(jì)用視覺上的沖擊去吸引買家、留住買家，讓設(shè)計(jì)成為店鋪的一個(gè)營(yíng)銷點(diǎn)。08______淘寶店鋪的頁面設(shè)計(jì)-X8.1電腦端頁面設(shè)計(jì)在淘寶電腦端沒有被淘寶手機(jī)端取代淘寶購物主流地位之前，淘寶電腦端的頁面設(shè)計(jì)尤為重要，實(shí)現(xiàn)美工創(chuàng)意的頁面技術(shù)也很成熟。雖然淘寶手機(jī)端承擔(dān)了淘寶購物的大部分流量，但是電腦端憑借其展示方便和內(nèi)容豐富等因素，依舊是淘寶店鋪品牌理念展示和店鋪品牌文化展示的優(yōu)質(zhì)選擇。08______淘寶店鋪的頁面設(shè)計(jì)-X8.1.1店招的設(shè)計(jì)店招的默認(rèn)尺寸是1920*150像素（這個(gè)尺寸包含了頁面的導(dǎo)航條）店招上的內(nèi)容不會(huì)太多，主要用來展示店鋪的形象。08______淘寶店鋪的頁面設(shè)計(jì)-X8.1.2通欄海報(bào)的設(shè)計(jì)通欄海報(bào)的尺寸是寬1920像素高度是在300像素以上以上，常用的是在500像素到800像素之間的數(shù)值。08______淘寶店鋪的頁面設(shè)計(jì)-X8.1.3功能模塊的設(shè)計(jì)功能模塊的尺寸寬為1920像素而高度自由設(shè)置，功能模塊主要為店鋪的活動(dòng)服務(wù)。接下來做一個(gè)簡(jiǎn)單的優(yōu)惠券板塊。08______淘寶店鋪的頁面設(shè)計(jì)-X8.2手機(jī)頁面設(shè)計(jì)現(xiàn)在手機(jī)移動(dòng)端作為淘寶購物的主要流量來源，手機(jī)端的設(shè)計(jì)也越來越重要，手機(jī)移動(dòng)端相對(duì)于電腦端，更加方便快捷。08______淘寶店鋪的頁面設(shè)計(jì)-X8.2.1手機(jī)海報(bào)的設(shè)計(jì)手機(jī)端海報(bào)與電腦端海報(bào)的作用類似，都是展現(xiàn)淘寶店鋪的活動(dòng)。而手機(jī)端因?yàn)槭謾C(jī)顯示屏幕的限制，與電腦端的設(shè)計(jì)有明顯的區(qū)別。手機(jī)端的尺寸寬為608像素高小于等于960像素。08______淘寶店鋪的頁面設(shè)計(jì)-X8.2.2手機(jī)產(chǎn)品展示頁面的設(shè)計(jì)因?yàn)槠聊淮笮『褪謾C(jī)界面技術(shù)的限制，手機(jī)端的產(chǎn)品展示頁面的設(shè)計(jì)沒有電腦端設(shè)計(jì)那樣自由，通常是分類展示和瀑布流展示。08______淘寶店鋪的頁面設(shè)計(jì)-X8.3自定義頁面設(shè)計(jì)因?yàn)樽远x頁面具有良好的創(chuàng)意表達(dá)能力，現(xiàn)在淘寶的大多數(shù)頁面設(shè)計(jì)，都是自定義頁面。自定義頁面由上幾個(gè)小節(jié)所講的內(nèi)容組合而成?？偟膩碚f就是店招、海報(bào)、功能板塊和產(chǎn)品展示板塊的集合體，這也是淘寶目前的頁面結(jié)構(gòu)組成模式。08______淘寶店鋪的頁面設(shè)計(jì)-X8.3.1電腦端自定義頁面設(shè)計(jì)電腦端自定義頁面設(shè)計(jì)注重頁面的風(fēng)格統(tǒng)一，注重產(chǎn)品的特點(diǎn)展示，和店鋪品牌的建立。自定義頁面的寬是1920像素（圖片的重要信息要在頁面中間1290像素的部分展示），高度可以自由設(shè)置。圖下是上幾節(jié)所做內(nèi)容拼湊的簡(jiǎn)單書店自定義頁面。08______淘寶店鋪的頁面設(shè)計(jì)-X8.3.2手機(jī)自定義頁面設(shè)計(jì)因?yàn)槭謾C(jī)端成為了淘寶購物的主要流量來源，所以淘寶一直在開發(fā)手機(jī)端裝修的新功能，目前手機(jī)端的智能板塊就是新開發(fā)的手機(jī)模塊，但手機(jī)端的自定義裝修模塊仍然是淘寶裝修的主流模塊，手機(jī)端自定義頁面的尺寸寬為608像素，高可以自由設(shè)置，手機(jī)端也分為店招、海報(bào)、功能板塊和產(chǎn)品展示板塊。圖下是前幾節(jié)所做的手機(jī)頁面的各個(gè)板塊。08______淘寶店鋪的頁面設(shè)計(jì)-X8.4服飾類手機(jī)頁面設(shè)計(jì)服飾類目注重頁面的設(shè)計(jì)感，不僅要求頁面表現(xiàn)出服裝的風(fēng)格，還要表現(xiàn)出店鋪的風(fēng)格，利用平面構(gòu)成的知識(shí)，結(jié)合服裝的特色，就能做出風(fēng)格迥異的頁面。08______淘寶店鋪的頁面設(shè)計(jì)-X8.4.1服飾類手機(jī)店找設(shè)計(jì)手機(jī)店招的左下部，淘寶官方會(huì)自動(dòng)放上店鋪信息和店鋪的LOGO，所以店招的左下部，要預(yù)留一塊位置，同時(shí)淘寶官方還會(huì)給店招加上一層黑色的透明色塊，降低店招的明度。08______淘寶店鋪的頁面設(shè)計(jì)-X8.4.2服飾類手機(jī)海報(bào)設(shè)計(jì)海報(bào)的設(shè)計(jì)注重版面信息的傳遞，合理的處理主體、文字、背景、裝飾，就能做出不俗的設(shè)計(jì)。08______淘寶店鋪的頁面設(shè)計(jì)-X8.4.3服飾類手機(jī)頁面設(shè)計(jì)商品展示主要是展示商品的賣點(diǎn)，手機(jī)端因?yàn)轱@示尺寸的限制，就更加注重商品的展示方法，合適的商品展示表現(xiàn)手法，對(duì)手機(jī)頁面的設(shè)計(jì)有很大的幫助。08______淘寶店鋪的頁面設(shè)計(jì)-X謝謝Tnankyou第9章

淘寶頁面的設(shè)計(jì)分析

隨著淘寶的發(fā)展，更多的藝術(shù)系學(xué)生畢業(yè)后加入淘寶大軍，提升了淘寶頁面的整體設(shè)計(jì)水平。而今的淘寶頁面一改從前的務(wù)實(shí)櫥窗風(fēng)格，形成以平面構(gòu)成為主，設(shè)計(jì)風(fēng)格迥異的個(gè)性化頁面。隨著網(wǎng)購從電腦端到移動(dòng)端的轉(zhuǎn)變，頁面設(shè)計(jì)出現(xiàn)了以移動(dòng)端為主和以電腦端為主的爭(zhēng)論，商家應(yīng)根據(jù)自身特點(diǎn)，選擇各自的頁面設(shè)計(jì)方向。09______淘寶頁面的設(shè)計(jì)分析-X9.1服飾頁面設(shè)計(jì)分析服飾類的頁面要求頁面時(shí)尚美觀，以此襯托服裝的時(shí)尚性，在頁面的用色上多選擇純度較高的顏色，因?yàn)槭謾C(jī)和電腦屏幕顯示尺寸的限制，所以在頁面設(shè)計(jì)上，兩者有所區(qū)別，在頁面設(shè)計(jì)中添加服裝上的元素，加強(qiáng)服裝與頁面的聯(lián)系。09______淘寶頁面的設(shè)計(jì)分析-X9.1.1頁面結(jié)構(gòu)解析整個(gè)頁面分為四個(gè)大的板塊，第一個(gè)板塊為店招板塊有店鋪LOGO、店鋪標(biāo)語、關(guān)注和店內(nèi)搜索內(nèi)容，相比于其他類目的店招，服飾類目的店招主要起裝飾作用，從例圖中也可以看出設(shè)計(jì)者對(duì)這一塊的處理很隨意。第二個(gè)版塊是頁頭的前三焦，這三焦是店鋪中點(diǎn)擊率最高的三焦，用來展示店鋪正在進(jìn)行的活動(dòng)以及店鋪的重要信息，如這里的活動(dòng)海報(bào)、活動(dòng)優(yōu)惠券和活動(dòng)說明都是增加活動(dòng)的曝光度，提高活動(dòng)的參與度。第三個(gè)板塊為功能板塊，主要服務(wù)于店鋪，滿足店鋪的營(yíng)銷策略，如這里的頁面導(dǎo)航、分類導(dǎo)航、活動(dòng)頁面導(dǎo)航和店鋪提示等能促進(jìn)店鋪的銷量。第四個(gè)板塊為商品展示板塊，展現(xiàn)商品特點(diǎn)，吸引買家點(diǎn)擊瀏覽商品。09______淘寶頁面的設(shè)計(jì)分析-X9.1.2頁面配色解析主色為#019DE9的高明度高飽和度的藍(lán)色，配上#FCF9CC高明度低飽和度的黃色，點(diǎn)綴高明度#ff5b97中飽和度的紅色，是一個(gè)高明度的間色搭配，高明度的顏色搭配給人陽光，明亮的感受，在顏色的處理過程中，藍(lán)色與黃色的運(yùn)用，造成大面積的撞色，將黃色的飽和度降低，就增加了藍(lán)色的視覺比重，減弱了這種顏色的沖突感。接著點(diǎn)綴少許紅色，使頁面的顏色更加豐富。09______淘寶頁面的設(shè)計(jì)分析-X輔色#FCF9CC主色#01DE9

輔色#ff5b979.1.3頁面排版解析該頁面采用中間對(duì)齊的方式，讓視覺比重集中在中軸線上，是一種視覺中心相對(duì)平衡的排版方式。頁頭大版面的撞色，形成強(qiáng)烈的視覺沖擊，然后是留白的中上部排版，緩解頁頭強(qiáng)烈視覺沖擊帶來的疲勞，接著是中部的通欄大圖，和底部的留白排版。形成視覺重心上的強(qiáng)——弱——強(qiáng)——弱變化，緩解買家頁面瀏覽的視覺疲勞。09______淘寶頁面的設(shè)計(jì)分析-X9.1.4頁面元素解析一個(gè)完整的淘寶頁面，可以拆分為四個(gè)部分，即主體、文字、背景和裝飾。這四個(gè)部分也是頁面的組成元素，本節(jié)分析該頁面的元素，幫助我們對(duì)元素的理解與運(yùn)用。該頁面所用的元素中，點(diǎn)、線、面的運(yùn)用較多，圖片與文字富有現(xiàn)代感，是現(xiàn)代構(gòu)成主義風(fēng)格，在淘寶中，更準(zhǔn)確的名稱為歐美街拍風(fēng)。09______淘寶頁面的設(shè)計(jì)分析-X9.1.5頁面總結(jié)優(yōu)點(diǎn)是：該頁面對(duì)色彩的掌控很細(xì)致，運(yùn)用高明度和高飽和度的色彩做頁面的色調(diào)，并且這些顏色的主次分明，頁面的顏色豐富而秩序。模特圖片的質(zhì)量很高，風(fēng)格性與統(tǒng)一性很好，幫助頁面設(shè)計(jì)者營(yíng)造風(fēng)格氛圍。其次設(shè)計(jì)者的審美很高，頁面整體富有美感。頁面設(shè)計(jì)者對(duì)元素的運(yùn)用很熟悉，使頁面的內(nèi)容豐富而有趣。缺點(diǎn)是：細(xì)節(jié)部分還能繼續(xù)深入刻畫，細(xì)節(jié)處的留白需要斟酌，緊湊的地方呼吸感不夠，服裝展示圖留白太多，讓頁面顯得空曠。修改意見：標(biāo)識(shí)1和標(biāo)識(shí)5的細(xì)節(jié)還需繼續(xù)處理，標(biāo)識(shí)1的標(biāo)語與活動(dòng)時(shí)間通告的排版很怪異。標(biāo)識(shí)5腳的細(xì)節(jié)需要處理干凈。標(biāo)識(shí)2標(biāo)識(shí)3與標(biāo)識(shí)4的排版太緊湊，呼吸感不足。09______淘寶頁面的設(shè)計(jì)分析-X9.2珠寶頁面設(shè)計(jì)分析珠寶類目因?yàn)槠渖唐返母邇r(jià)值，在頁面設(shè)計(jì)中需要展現(xiàn)珠寶的高端大氣，同時(shí)珠寶類的受眾通常為現(xiàn)代女性，所以頁面配色相對(duì)女性化。09______淘寶頁面的設(shè)計(jì)分析-X9.2.1頁面結(jié)構(gòu)解析該頁面沒有用單品大圖的方式展示商品，而用多圖排列的設(shè)計(jì)來展示商品，是以電腦端顯示特點(diǎn)設(shè)計(jì)的頁面。該淘寶頁面可分為店招、海報(bào)、優(yōu)惠券和商品展示四個(gè)內(nèi)容區(qū)。店招上的內(nèi)容有LOGO、店鋪名稱、店鋪標(biāo)語和店鋪優(yōu)惠券，在淘寶網(wǎng)店中購物時(shí)店招會(huì)一直出現(xiàn)在買家的淘寶頁面中。因?yàn)檫@個(gè)特性，店招上常常添加一些活動(dòng)、主推商品和優(yōu)惠券等重要的信息。海報(bào)為1920像素的通欄海報(bào)，小額的優(yōu)惠券可以促進(jìn)買家下單，這里的優(yōu)惠券額度很小，可以認(rèn)為這是一個(gè)長(zhǎng)期存在的優(yōu)惠券。商品展示區(qū)類似畫冊(cè)的形式，能夠展示更多的商品。09______淘寶頁面的設(shè)計(jì)分析-X9.2.2頁面配色解析該頁面主色為#f6e8e5是一個(gè)較高明度和低飽和度的紅色，輔色為較高明度的灰色。整個(gè)頁面是一個(gè)灰色色系的顏色搭配，這種灰色系的顏色搭配，給人以舒適的感覺，并且灰色系的顏色能夠緩解眼睛的疲勞。簡(jiǎn)單的說就是眼睛看灰色系的東西，能看得更久。09______淘寶頁面的設(shè)計(jì)分析-X輔色#f1f1ef主色#f6e8e59.2.3頁面排版解析頁面整體為S形的引導(dǎo)線排版，這種排版方式會(huì)引導(dǎo)視覺重心，讓視覺重心隨著S形的引導(dǎo)線軌跡移動(dòng)。也是一種創(chuàng)新型的排版方式。頁面的商品展示類似于畫冊(cè)的處理方法，是淘寶頁面設(shè)計(jì)中較為創(chuàng)新的方法。商品用不規(guī)則排列的方式排版，新穎不呆板。09______淘寶頁面的設(shè)計(jì)分析-X9.2.4頁面元素解析該頁面依舊是點(diǎn)、線、面的構(gòu)成頁面。并運(yùn)用與商品意向相關(guān)的元素豐富頁面的內(nèi)容。從所選元素來看，該頁面屬于現(xiàn)代風(fēng)。（這些類目對(duì)風(fēng)格的要求沒有服飾類目那樣嚴(yán)苛，只要求頁面精致美觀，能夠展現(xiàn)商品的特點(diǎn)即可）09______淘寶頁面的設(shè)計(jì)分析-X9.2.5頁面總結(jié)優(yōu)點(diǎn)是：頁面的色調(diào)統(tǒng)一，色感舒適，運(yùn)用高明度低飽和度的紅色作為主色，用高明度的灰色為輔色，溫馨不刺眼，能緩解眼睛長(zhǎng)時(shí)間觀看的疲勞；點(diǎn)、線、面的運(yùn)用純熟，頁面排版大膽新穎敢于創(chuàng)新。缺點(diǎn)是：產(chǎn)品排版主次不分明，給人繚亂的感覺，產(chǎn)品的表現(xiàn)力差，展現(xiàn)不出產(chǎn)品的優(yōu)勢(shì)，頁面的細(xì)節(jié)制作粗糙，需要繼續(xù)刻畫細(xì)節(jié)。修改意見：標(biāo)識(shí)1店招的部分，店招的中間文字整體偏大，店招排版不和諧，左中右元素的間距差距不對(duì)等，導(dǎo)致店招排版怪異。標(biāo)識(shí)2的海報(bào)部分，海報(bào)的主次不明顯，文字的排版粗糙，產(chǎn)品的擺放雜亂。（沒有處理好產(chǎn)品的排放關(guān)系）標(biāo)識(shí)3的優(yōu)惠券整體偏大，相對(duì)于整個(gè)頁面不協(xié)調(diào)。標(biāo)識(shí)4與標(biāo)識(shí)5的問題一樣，商品的排版沒有主次，頁面的細(xì)節(jié)太粗糙，標(biāo)識(shí)6的排版沒有主次，但細(xì)節(jié)上明顯比標(biāo)識(shí)4和標(biāo)識(shí)5的細(xì)節(jié)細(xì)致。09______淘寶頁面的設(shè)計(jì)分析-X9.3餐具頁面設(shè)計(jì)分析餐具作為生活中常見的器皿，是人們熟悉的生活物品。因?yàn)檫@種熟悉，使餐具的頁面設(shè)計(jì)，往餐具印花展示和餐具特殊器型展示的方向發(fā)展。09______淘寶頁面的設(shè)計(jì)分析-X9.3.1頁面結(jié)構(gòu)解析整個(gè)頁面以多圖排列的方式進(jìn)行排版，是淘寶中常用的櫥窗排版方式。這種排版因?yàn)榱己玫纳唐氛故拘?，以前一直是淘寶的主流排版方式，但櫥窗式排版處理不好容易使頁面呆板。該淘寶頁面可分為店招、海?bào)、活動(dòng)營(yíng)銷和商品展示四個(gè)內(nèi)容區(qū)，同時(shí)店招上放上了店鋪的優(yōu)惠券，方便買家領(lǐng)取。（淘寶電腦端的各個(gè)頁面都會(huì)出現(xiàn)店招）海報(bào)上也添加了分類導(dǎo)航，對(duì)于餐具這種功能分明的類目，分類導(dǎo)航可以有效的將流量引入到分類產(chǎn)品中，也方便買家的查找。09______淘寶頁面的設(shè)計(jì)分析-X9.3.2頁面色調(diào)解析該淘寶頁面的主色為#000000的黑色，輔色為低明度的灰色，這兩種顏色可以搭配其他任意的顏色。對(duì)于該淘寶頁面復(fù)雜的背景色調(diào)。（餐具因?yàn)榕臄z的背景復(fù)雜，導(dǎo)致在排版時(shí)，很難做到色調(diào)的統(tǒng)一），有一個(gè)很好的協(xié)調(diào)作用，同時(shí)黑色和灰色的配色通常用來彰顯商品的質(zhì)感。09______淘寶頁面的設(shè)計(jì)分析-X輔色#4c4c4c主色#0000009.3.3頁面排版解析頁面整體為櫥窗式的排版，櫥窗式的排版是淘寶發(fā)展以來形成的主流排版方式，在商品的展示上有著很大的優(yōu)勢(shì)。但是櫥窗式的排版比較呆板，需要高明的設(shè)計(jì)方式去減弱這種呆板，該頁面在櫥窗展示區(qū)做了一些不同的變化，以減弱這種呆板的印象。09______淘寶頁面的設(shè)計(jì)分析-X9.3.4頁面元素解析整個(gè)頁面由點(diǎn)、線、面結(jié)構(gòu)組成，加上產(chǎn)品印花與樹葉素材的運(yùn)用。櫥窗式的排版加強(qiáng)了元素的整體性。是一種現(xiàn)代構(gòu)成風(fēng)格的頁面。09______淘寶頁面的設(shè)計(jì)分析-X9.3.5頁面總結(jié)該頁面的優(yōu)點(diǎn)是點(diǎn)、線、面的運(yùn)用較為純熟，產(chǎn)品圖片與線框疊加的方式讓人耳目一新。整個(gè)頁面簡(jiǎn)潔統(tǒng)一，頁面整體性好，同時(shí)櫥窗式傳統(tǒng)排版的頁面，頁面的產(chǎn)品展示效果好。該頁面的缺點(diǎn)是，店招所用樹葉元素與整體不合，頁面的櫥窗排版方式使頁面主次結(jié)構(gòu)不明顯（盡管用特異排版方式增加頁面的多樣性，但頁面依舊顯得呆板)。09______淘寶頁面的設(shè)計(jì)分析-X9.4頁面修改原頁面最大的問題是排版太緊湊，沒有呼吸感；頁面主次不強(qiáng)，使頁面沒有視覺重點(diǎn)。對(duì)此問題的解決方法是將頁面產(chǎn)品減少，留出空白。加強(qiáng)頁面的結(jié)構(gòu)，使頁面的主體更加明顯。對(duì)原圖的修改，總結(jié)起來就是補(bǔ)、修、換、添、刪幾個(gè)字。09______淘寶頁面的設(shè)計(jì)分析-X9.4.1店招的修改原本的店招只留下了優(yōu)惠券的信息，然后取店招的空白部分，覆蓋店招上需要修改的內(nèi)容。然后添加新的店招信息。09______淘寶頁面的設(shè)計(jì)分析-X9.4.2海報(bào)的修改該海報(bào)的結(jié)構(gòu)不明顯，商品排放雜亂，導(dǎo)致海報(bào)的主次不明顯，在信息的傳達(dá)上不明確。不適合海報(bào)快速傳達(dá)信息的特點(diǎn)，這里的修改方式是將海報(bào)從新排版。09______淘寶頁面的設(shè)計(jì)分析-X9.4.4優(yōu)惠券的修改商品展示頁的修改，主要是減少頁面上的商品展示數(shù)量或者縮小頁面上的商品展示，讓頁面有更多的呼吸感。09______淘寶頁面的設(shè)計(jì)分析-X9.4.3商品展示頁的修改商品展示頁的修改，主要是減少頁面上的商品展示數(shù)量或者縮小頁面上的商品展示，讓頁面有更多的呼吸感。09______淘寶頁面的設(shè)計(jì)分析-X謝謝Tnankyou第10章

產(chǎn)品詳情頁設(shè)計(jì)

產(chǎn)品頁面設(shè)計(jì)也叫作詳情頁設(shè)計(jì)，不同平臺(tái)的詳情頁尺寸略有區(qū)別，但是詳情頁的作用類似，為了展示商品的特點(diǎn)，讓顧客了解商品的優(yōu)點(diǎn)，對(duì)商品有全面的認(rèn)識(shí)，才能放心購買商品。10______產(chǎn)品詳情頁設(shè)計(jì)-X10.1服飾頁面設(shè)計(jì)分析主圖是產(chǎn)品最直接的展示，淘寶上搜索抓取的產(chǎn)品展示圖就是主圖，因此主圖是賣家接觸到商品的第一媒介，也就是主圖影響商品的第一視覺印象。主圖是可以自定義設(shè)置尺寸的正方形圖，常用的主圖尺寸有800*800像素(740*740像素以上的圖才能滿足淘寶主圖放大鏡的功能)。10______產(chǎn)品詳情頁設(shè)計(jì)-X10.1.1白底陰影圖白底圖指的是背景以白色為主的主圖，白底圖是淘寶上常用的一種主圖形式。10______產(chǎn)品詳情頁設(shè)計(jì)-X10.1.2個(gè)性化主圖個(gè)性化主圖是自由的主圖設(shè)計(jì)，能夠自由調(diào)節(jié)主圖的設(shè)計(jì)方式，以方便賣家尋找商品。個(gè)性化主圖有利于商品的視覺競(jìng)爭(zhēng)。10______產(chǎn)品詳情頁設(shè)計(jì)-X10.2詳情頁設(shè)計(jì)詳情頁一般分為商品場(chǎng)景圖、商品屬性圖、商品展示圖和商品細(xì)節(jié)圖四個(gè)大的部分，商品場(chǎng)景圖是將買家引入到商品介紹的一個(gè)過渡，商品屬性圖是商品的一些數(shù)據(jù)信息，商品展示圖是商品的實(shí)物拍攝，商品細(xì)節(jié)圖是商品的賣點(diǎn)介紹。10______產(chǎn)品詳情頁設(shè)計(jì)-X10.2.1描述性產(chǎn)品的詳情頁設(shè)計(jì)描述性產(chǎn)品詳情頁是需要大量文字解釋說明的產(chǎn)品介紹頁面，這類商品因?yàn)椴馁|(zhì)或者結(jié)構(gòu)等因素，需要必要的文字解釋說明。在描述性詳情頁的設(shè)計(jì)中，注重文案的表達(dá)效果，要避免因文字太多而使頁面失去訪客。10______產(chǎn)品詳情頁設(shè)計(jì)-X場(chǎng)景展示圖要引導(dǎo)賣家進(jìn)入商品的介紹頁面，要展現(xiàn)產(chǎn)品的主要特點(diǎn)，但場(chǎng)景展示圖上的內(nèi)容不宜過多（場(chǎng)景展示圖可以是一張圖也可以好幾張圖）。產(chǎn)品信息圖是商品的具體屬性的展示，要求這些產(chǎn)品數(shù)據(jù)完整而準(zhǔn)確。產(chǎn)品賣點(diǎn)圖也可以說是產(chǎn)品細(xì)節(jié)圖，是產(chǎn)品的細(xì)節(jié)展現(xiàn)和賣點(diǎn)提煉，這些圖讓買家對(duì)產(chǎn)品有一個(gè)全面的認(rèn)識(shí)，增加買家對(duì)產(chǎn)品的信任。產(chǎn)品展示在描述性產(chǎn)品詳情頁里并不是很重要，因?yàn)槊枋鲂缘倪@類商品對(duì)于賣家來說并不陌生，能在大腦中想象這些商品的形狀和作用，所以描述性商品詳情頁的商品展示圖只需要幾張展示商品圖就足夠了。10.2.2展示性產(chǎn)品的詳情頁設(shè)計(jì)展示性商品詳情頁是將商品的一些特點(diǎn)，通過圖片良好的展示出來，這類商品往往用大量的圖來展示商品的特點(diǎn)，優(yōu)勢(shì)是能借助拍攝或其他方式把產(chǎn)品的優(yōu)點(diǎn)更加具體的傳達(dá)到買家。10______產(chǎn)品詳情頁設(shè)計(jì)-X場(chǎng)景展示圖會(huì)帶給賣家商品的第一印象，并初步展現(xiàn)產(chǎn)品。展示性詳情頁的產(chǎn)品信息圖較為重要，要求商品信息準(zhǔn)確，因?yàn)樯唐沸畔⒉粶?zhǔn)確的原因，而導(dǎo)致退貨的情況時(shí)有發(fā)生。展示性詳情頁的細(xì)節(jié)展示圖也是商品的介紹圖，通過展示產(chǎn)品的亮點(diǎn)，達(dá)到促銷的目的。能夠多方面的展示商品的各個(gè)細(xì)節(jié)，以及商品的具體使用效果。10.2.3產(chǎn)品活動(dòng)促銷詳情頁設(shè)計(jì)在淘寶上做店鋪活動(dòng)時(shí)，為了活動(dòng)的效果，會(huì)最大程度的加強(qiáng)活動(dòng)在頁面上的曝光度，就會(huì)在淘寶的常用頁面上添加活