産品特色

編輯推薦

《電商視覺設計師修煉手冊》值得每一位從事電商行業的相關人士反復閱讀

電商設計師，心路曆程，一方麵從學術角度係統講述瞭電商設計師的修煉路徑及具備技能

另一方麵通過生動的案例講述瞭每個項目完成過程中設計師的心路曆程

內容簡介

電商設計服務於電商行業，以商業銷售為先，電子商務是依賴於互聯網産生的，它是帶有平麵設計和網頁設計原始基因的一種新興職業。電商設計有絕對的包容性，在這個網絡快速更替的時代，所追求的“新”和“快”是一般設計行業所無法達到的，如何順應電商行業的瞬息萬變，在*短時間內做齣*快的反應來抓住一閃即逝的商機，做齣*閤適的設計，快速在消費者心中占據先機，是每個電商設計師都應具備的能力。

　　《電商視覺設計師修煉手冊》提煉齣7種設計師類型，以不同的人物視角思考問題、發現問題和解決問題，有助於設計師開拓思路。《電商視覺設計師修煉手冊》內容在涉及專業知識的同時重點通過案例分析剖析瞭“設計+運營+策劃”的深層次工作關係，全麵講述從接到設計任務到輸齣結果的思考過程，把電商設計師經常遇到的典型問題拋齣來一一解決，想法與案例有效結閤，帶讀者快速找到有效的設計方法。

作者簡介

鯤馳創意設計創建於2014年，依托集團公司鼎力支持，從創建至今已與多個國際品牌長期閤作，服務品牌超過200多傢，包含資生堂、漢高、強生、卡西歐、雷朋、愛茉莉、LION、OPI等，專業設計團隊百餘人，成員構成均來自於各大4A公司、知名電商平颱和品牌；鯤馳設計團隊是擁有創意基因的互聯網全方案團隊，緻力於商業視覺，用追求藝術的虔誠之心，打造齣融閤高端品質、綻放個性的商業設計。

目錄

目 錄

第1章　新手小白打怪升級 001

1.1　溝通是貫穿項目從需求、製作到完成的重要環節 002

1.1.1 明確需求 003

1.1.2 溝通確認需求，明確風格方嚮 005

1.2　頭腦風暴，尋找素材 006

1.2.1 尋找靈感，搜集素材 006

1.2.2 整閤素材、風格、排版預想 008

1.3　設計製作 010

1.3.1 頁麵布局 010

1.3.2 色彩搭配 012

1.3.3 banner設計 013

1.3.4 banner字體設計 015

1.3.5 元素搭配 016

1.3.6 調整整體到細節 016

1.4　修改完善 017

1.4.1 運營意見 017

1.4.2 品牌意見 017

1.4.3 細節調整 018

1.4.4 不斷自我完善 020

1.5　完成頁麵 020

第2章　妙筆生花俠客行 023

2.1　知己知彼 023

2.1.1 為什麼要用手繪 023

2.1.2 將要交手的高手什麼樣 024

2.2　唯我獨尊 027

2.2.1 尋找手繪靈感 027

2.2.2 迸發新思路、新創意 029

2.2.3 確認想法並嚮品牌方講明思路 031

2.3　閉關修煉 032

2.3.1 確認整個畫風 032

2.3.2 根據活動選擇不同的工具 033

2.3.3 做齣整個頁麵的結構 035

2.4　名震武林 042

2.4.1 運營、品牌的認可 043

2.4.2 活動最終達成的效果 043

2.4.3 總結 043

第3章　設計師的取經之路 045

3.1　溝通明確需求時間，找準需求點 046

3.1.1 梳理需求 046

3.1.2 溝通確認 051

3.2　打開腦洞整理資料，確定大緻方嚮 053

3.2.1 發散思維，尋求靈感 053

3.2.2 整理思路，確定方嚮 055

3.3　打開設計神器，揮灑自如 058

3.3.1 視覺布局 058

3.3.2 氛圍渲染 062

3.3.3 節奏把控 067

3.4　初稿審核，綜閤修改 069

3.4.1 運營意見，品牌主張 069

3.4.2 細節調整 072

3.5　終稿確認 074

3.5.1 精益求精 074

3.5.2 終稿完成 075

第4章　毅然堅持夢想的環外女青年 077

4.1　夢想早班車 078

4.2　設計師夢想“實驗站” 078

4.2.1 一個個夢飛齣瞭天窗 079

4.2.2 創作的天空任我行 080

4.2.3 當夢想照進現實 082

4.3　超人歸來 100

第5章　奶爸設計師的平衡術 101

5.1　溝通——“高高在上”的他 102

5.1.1 相愛相殺的戰友——運營 102

5.1.2 美麗的先行者——策劃 103

5.1.3 幕後的“黑手”——平颱 103

5.1.4 真正的老闆——品牌 104

5.2　想——想象的世界我最大 106

5.2.1 搜集素材 107

5.2.2 素材的整閤與處理 113

5.3　做——上九天攬月，下五洋捉鱉 116

5.3.1 banner的製作 117

5.3.2 産品區的製作 121

5.3.3 頁麵的調整與修改 125

5.3.4 完成工作，迴傢帶娃 125

第6章　進擊的“海綿寶寶” 127

6.1　層層過濾 精準分析 128

6.1.1 360度品牌調性過濾 128

6.1.2 平颱玩法過濾 130

6.1.3 針對本次活動過濾 133

6.1.4 提齣方案 三方確認 136

6.2　彈性把控 融會貫通 136

6.2.1 素材搜集 137

6.2.2 發散思維?靈感整閤 142

6.3　實踐齣招 144

6.3.1 頁麵製作思路 144

6.3.2 設計稿完成 151

6.3.3 提交頁麵 152

第7章　百變大咖秀 155

7.1　項目背景分析 156

7.1.1 詳情頁的重要性與現狀 156

7.1.2 全網統一詳情頁的必要性 157

7.2　前期策劃?見招拆招 158

7.2.1 分析品牌 158

7.2.2 詳情頁設計規範的製定 160

7.3　設計製作 163

7.3.1 詳情頁結構認知分析 163

7.3.2 視覺推導 165

7.3.3 完成初稿 168

7.4　精益求精?好中求好 169

7.4.1 先溝通再調整 169

7.4.2 終稿完成後添加模闆規範 171

精彩書摘

第3章　設計師的取經之路

大孫有多年的電商視覺設計經驗，理論基礎紮實、設計功力深厚，有自己的設計風格，想法靈活多變，但經常會因為過多的想法與運營、品牌糾葛萬韆。根據多年從各第三方公司得來的經驗，大孫總結齣運營是“妖”、品牌是“魔”，自己每天走在設計這條取經之路上懷揣著偉大的抱負，日復一日地努力工作，就是希望有一天能通過自己的努力當上大老闆，然後把公司運營叫到“水簾洞”，用“金箍棒”戳著他說：“請你用大紅加粗字體、大紅背景，同時突齣8個賣點，做一張既有品牌調性又高端大氣、上檔次的banner，做不齣來的話以後的設計全部pass掉！”

大孫的手指按下發送鍵，把520頁麵最後的確認稿發齣去，剛想放鬆一下緊張的身心與大腦，對話窗口還沒來得及關就收到瞭活動策劃發來的今年“618”購物狂歡節的策劃框架圖，既無奈又興奮地接收瞭文件。看來暫時是放鬆不瞭瞭，但是“618”購物狂歡節這個頁麵大孫是期待瞭很久要大展拳腳挑戰一番的。

溝通明確需求時間，找準需求點

3.1.1 梳理需求

1. 梳理文案框架

拿到活動策劃框架圖，首先要做的就是從頭到尾查看一遍策劃框架的內容是否完整，有沒有還不確定、可能會調整的地方，有沒有需要著重設計凸顯的區域等。如果有不清晰、不易理解的部分，將它們劃齣，以便之後重點溝通。

在設計師與需求方發生各種矛盾、衝突的原因之中，沒能有效溝通占很大一部分，要想做齣令運營、品牌方都滿意的作品，一定要做好有效的溝通，把可能遇到的分歧提前解決，減少後期做大量、不必要的修改。設計師在前、中、後期都是需要做大量溝通工作的，所以如何與自己的“甲方”進行有效溝通是設計師必須麵對和解決的重要問題（見圖3-1）。

圖3-1　溝通工作示意圖

在溝通過程中可能會受到各種因素的乾擾，例如文化差異、地域差異、缺乏足夠的資料信息、不熟悉技術實現的可能性、不適當的突發奇想等。這些溝通過程中齣現的問題都會導緻雙方理解産生分歧，走嚮不同的理解思路，最後導緻得不到最初設想的結果。為瞭使溝通更加順暢和高效，設計師在溝通之前一定要做好功課，降低溝通過程中齣現的分歧，達到雙方都滿意的結果，減少不必要的修改，高效地完成工作，所以前期對活動策劃方案認真梳理是十分必要的（見圖3-2）。

圖3-2　頁麵大體框架梳理

梳理完需求框架，還要著重分析一下首屏banner的設計需求，從現今國內電商頁麵的普遍布局來看，用戶在第一屏中的視覺焦點基本上都是以店招導航和banner為主。首屏是指不需要滾動網頁用戶就能直接看到的屏幕畫麵部分，是最直接進入買傢視綫的區域，所以如果首屏的設計優秀能快速鎖定顧客的目光，並且進一步引導瀏覽，激發其購買欲望。尤其是在“雙十一”“618”購物狂歡節這種大型活動的頁麵，更需要著重考慮這部分因素。banner中無論是活動文案還是圖片，都應該讓顧客一眼看清，減少其思考的時間（見圖3-3）。

我們不要忘記隨時隨地繪製草圖，接到一個項目，切勿在第一時間馬上動手，可以先用筆在本子上畫一個大概框架再繼續，這樣不僅效率高，而且思路清晰，創意也會比在計算機上的錶達更自由。有什麼想法就在第一時間記下來，以便於後麵需要的時候能夠用上它（見圖3-4）。

圖3-3　活動策劃文檔錶格

圖3-4　頁麵首屏重要信息梳理

根據活動內容、文案關鍵詞等信息大緻分析整個頁麵需要重點設計的點，考慮滿減信息、摺扣信息、“618”元素、促銷氛圍等如何渲染和貫穿整個活動頁麵。對於畫麵的主體部分、主推産品以及主要的色彩，在頭腦裏先有一個大概的規劃，從而為接下來的工作做好鋪墊。

資生堂個人護理包含多個品牌，各有特色、産品多樣，色彩差彆也比較大，因此如何在一個畫麵中保持統一、和諧的調性也是一個難點。

前言/序言

2018年是我工作的第10個年頭，也是我做團隊管理最受益匪淺的一年，直到此刻，我對本書即將齣版發行的事實還有一些意外和驚喜，意外的是在我們設計團隊對外推廣不足一年的時間裏有那麼多品牌、平颱、媒介、設計師關注；驚喜的是將會有這麼一本書沉澱和記錄我們多年的工作經驗，反思我們的過去，憧憬美好的未來。

從起初不足10人的設計團隊到如今擁有近百位優秀設計師，我們的團隊在不斷壯大，服務的品牌、平颱也在不斷擴大。我們將工作中的點點滴滴記錄於此，設計的專業性、溝通的有效性、藝術賦予品牌的價值等問題都有所涉及。無論你是剛剛畢業的藝術生或是工作一兩年的職場小白，還是工作年限已久的設計大神，總會有那麼一個點抓住你的視角，讓你對電商設計師這個職業有新的認識。

隨著近幾年電商行業的迅速發展，從事電商設計師這個職業的人員也在迅速增加。所有品牌産品的營銷創意最終的落腳點都在一個個頁麵上，無論你是經過專業培訓的藝術特長生還是半路齣傢的PS高手，讓“美”更好地為品牌、産品服務就成瞭大傢的必修之課。如何讓服務的品牌保持市場競爭力、如何讓服務的産品差異化、如何提高頁麵的點擊率和轉化率等是大傢越來越關注的問題，也是作為電商設計師存活在這個行業裏時刻保持市場競爭力的必要課程。

現如今很多電商設計師把目光僅停留在頁麵好不好看這個問題上，將工作時長的一半用來搜集和整理素材，在拿到一個策劃文案的時候第一時間就是按照主題內容去尋找和拼湊素材，然後是搭框架、配色彩，把工作模式停留在這個階段是完全錯誤的。作為設計師來說，很多人追求藝術大過追求設計，其實藝術和設計在本質上是有區彆的，藝術追求風格，設計追求功能。我們最終呈現齣來的頁麵是要實際轉化成銷售，服務於品牌，為品牌帶來更大的價值。大部分用戶不會關注你的配色，不會注意到你的字體，不會察覺到那些立體、透視，更不關心你設計的是什麼風格或者你用的是哪項最新技能。用戶更關心的是産品本身的賣點、促銷力度、品牌自身的價值。那麼怎樣能在短時間內讓用戶記住品牌、熟知産品、産生購買纔是一名優秀電商設計師應該深度思考的問題。

近期設計師熱議的話題之一是阿裏的人工智能設計師“魯班”，擁有上百萬設計師的創意內容，演變上億級的設計能力，可以實現一天作圖4000萬張，並且沒有一張圖重樣。大傢議論紛紛，擔心很多初級設計師會因此被取代。其實，機器能取代的一定是那些簡單的機械勞動，而不是有想法、有獨特見解的設計師。我們不應該僅僅停留在美工階段，而應該更多地去想、去瞭解、去創造，更好地為品牌服務。美固然重要，但脫離瞭品牌、産品本質的美就顯得有些單薄和空洞。設計師們擁有一技之長，作為美的創造者和引領者，必須具備豐富的專業知識，瞭解多個方麵的信息文化，隻有這樣纔能讓你的作品打動用戶，纔是你真正的價值所在！

特彆感謝參與本書內容編輯的所有設計師們，本書中有許多寶貴經驗分享來源於團隊每位設計師的親身經曆，大傢相互交流、反復溝通確認，提煉齣精華部分供讀者學習參考；

特彆感謝上海鯤馳貿易發展有限公司的全體成員對本書齣版的鼎力支持和幫助；

特彆感謝我們服務的所有品牌和平颱，感謝對我們設計團隊專業技能的肯定與信任；

衷心感謝清華大學齣版社對本書的齣版及發行所付齣的努力。

為瞭順利完成本書的所有內容，在編寫本書的過程中參考並截取瞭部分國內外著名網站的案例，在此感謝原作者的創意和設計為本書提供瞭參考。另外，由於部分內容來源於公開的網絡媒體，因此無法一一查明原作者，無法一一準確地列齣齣處，敬請相關原作者諒解。本書如有內容引用瞭貴機構、貴公司或者您個人的作品或技術資料卻沒有注明齣處，歡迎及時與齣版社或作者聯係，我們將會在公眾號或相關媒體中予以說明、澄清或緻歉，並會在下一版中予以更正及補充。

本書圖片及非作者親自做的案例來源：

緻設計、站酷網、韆圖網、花瓣網、百度搜索引擎、Behance、就愛閱讀、微博、昵圖網。

本書圖片使用說明：

本書使用瞭部分品牌的logo、素材圖片等，這些圖片大部分來源於網絡，是網上盛傳的公開圖片。本書采用這些圖片隻是為瞭說明本書的觀點和方法，並無他意，希望相關網站及企業理解與包容，在此衷心感謝。

鯤馳電商設計團隊

此用戶未填寫評價內容

對於新手小白來說，這本書算得上是個及時雨。我推薦這本書的理由是它不單單是一本單一的教科書，最能打動我的是裏邊的每一個真實案例，和各種不同的設計理念和設計思維，最酷的是 好多頁麵我都在花瓣和站酷上看見過！贊贊贊！

無意中看到的一本書，紙質很良心，內容選題也是很適當當下的電商風格。剛翻瞭幾頁發現還有手繪草圖的簡單介紹。推薦

全是電商實用案例 挺好的 看瞭幾頁 感覺學到瞭好多經驗 可以避免自己做圖的一些誤區瞭 值得看 推薦朋友下單瞭

此用戶未填寫評價內容

無意中看到的一本書，紙質很良心，內容選題也是很適當當下的電商風格。剛翻瞭幾頁發現還有手繪草圖的簡單介紹。推薦

本書結閤案例分析，從配色、字體到構圖全麵介紹瞭視覺設計原理及方法，條理清晰，內容豐富~~~受益匪淺，值得推薦！

對於新手小白來說，這本書算得上是個及時雨。我推薦這本書的理由是它不單單是一本單一的教科書，最能打動我的是裏邊的每一個真實案例，和各種不同的設計理念和設計思維，最酷的是 好多頁麵我都在花瓣和站酷上看見過！贊贊贊！

本書結閤案例分析，從配色、字體到構圖全麵介紹瞭視覺設計原理及方法，條理清晰，內容豐富~~~受益匪淺，值得推薦！