如何提高設(shè)計工作效率-詳情設(shè)計篇

作者：songquiet

 

一直都有想法，想在設(shè)計上輸出一些東西。畢竟，作為一個非科般出身的設(shè)計師,做設(shè)計也有些年頭（運(yùn)營稱之為美工），磕磕碰碰走了許多彎路，也算是取得些成績（至少經(jīng)歷過3家公司從基層到主管、經(jīng)理級別，有大公司、也有上市國企）；是經(jīng)驗輸出也好、是對自己成長記錄也好，總歸要留下點什么，如果還順便對新手非科班出身的設(shè)計師有些幫助，那也是我非常樂意看到的。所以從今天開始，要慢慢地，一點點的記錄。雖然我不擅長文章，但我相信，一件事情只要開始做，就有機(jī)會將它做好。

種一顆樹最好的時機(jī)是十年前，其次就是現(xiàn)在，沒錯，就現(xiàn)在、趁現(xiàn)在。

 

電商設(shè)計師粗略可分二類：平臺設(shè)計師、店鋪設(shè)計師；

非常實誠的告訴大家，到目前為止我所有的經(jīng)歷、經(jīng)驗均來自于店鋪設(shè)計（特別是以淘寶、天貓店鋪居多）；所以我的分享、輸出都是店鋪設(shè)計師的視角出發(fā)。

 

店鋪設(shè)計師，日常的工作比較瑣碎，大致會有以下工作：

店鋪裝修，店鋪首頁（PC端及手機(jī)端），寶貝上新（新品詳情頁設(shè)計+主圖設(shè)計），系列產(chǎn)品二級頁、分類頁、鉆展圖、品銷寶圖、淘客圖、微淘圖，上活動的話，還會有承接頁、窗口圖設(shè)計、活動玩法介紹二級頁（如果活動機(jī)制、玩法很復(fù)雜的話，需要單獨開個二級頁去專門介紹，引導(dǎo)顧客）關(guān)聯(lián)銷售、詳情說明等等……

以上內(nèi)容與設(shè)計分享無關(guān)，僅僅是介紹，希望菜鳥們對工作有個初步的了解，老鳥可以自行跳過。還有一點需要交待的是，為什么先從詳情開始？無它，最近接到的工作單，以詳情設(shè)計比較多，下面干貨即將開始了，請繼續(xù)往下看，不要離開哈。

 

接到詳情設(shè)計需求單開始，新手很多時候是無從下手的，腦袋一片混亂，時間就一點一滴浪費(fèi)在遲疑、發(fā)呆、對素材盲目尋找，最后找了一堆貌似有用，最終確沒用上的垃圾素材。

當(dāng)沒有思路時，回到需求的起點，對問題一點一點拆解。

 

不同的公司、不同團(tuán)隊、不同環(huán)境、不同資源，需求的下達(dá)也是千奇百怪，歸結(jié)起來會有二種形式，一是口頭表述、二是書面文檔。先分析第一種形式，我們應(yīng)該如何開始？

 

口頭表述

小公司、小團(tuán)隊就不要指望有什么內(nèi)容策劃、文案等配套崗位，甚至連產(chǎn)品素材都沒有（僅提供實物），店長/運(yùn)營/推廣直接對接設(shè)計，很多時候?qū)τ谛庐a(chǎn)品，它們其實也并不了解，也說不出個所以然，需求不清晰。拋下一句子話就走開了：“幫我把這個詳情弄出來，二天后給個初稿”。黑人問號？留下個一臉懵逼的您，不知所措。

 

不要急于去拍照（沒有產(chǎn)品素材，得設(shè)計師親自掛帥），不要急于找素材，先靜一靜，先把思路理順再動手也不遲。

回到設(shè)計的起點，電商設(shè)計2個最基本的需求是什么？

沒錯，信息傳達(dá)跟美觀。

這款寶貝需要傳達(dá)給消費(fèi)者、受眾什么信息呢？信息又是通過什么去傳達(dá)？

文案跟畫面感。

沒有文案怎么辦？是自己想還是找參考（或是直接抄？）？上哪里找文案？

一個接著一個將問題拋出來給自己，再一個個去解決它們。這就是問題的拆分法，大問題拆成小問題，小問題再拆成小小問題，各個擊破，直到把問題解決。

 

經(jīng)驗之談，對于既定時間內(nèi)需要完成的任務(wù)，把握工作進(jìn)度是重中之重，對于需求，我的個人主張及建議是：先解決“有”，再解決“好”。混跡職場，做人做事，對自己、對領(lǐng)導(dǎo)、對公司都要有個交待，對工作任務(wù)不一定保質(zhì)保量，但請你先完成任務(wù)（事實上在工作過程中，許多條件，資源不匹配，困難重重，第一步是不需要做到完美、不需要追求極至的）。

 

OK？文案如何找？

先找出至少3家同行，同類目產(chǎn)品詳情，下載保存圖片。這時候要做的是打開excel表，將3-5款產(chǎn)品的文案全部整理出來，縱列排開，方便后續(xù)橫向跟縱向?qū)Ρ取?/p>

下一步要做的是分析文案，分析什么呢？

沒錯，分析它們的結(jié)構(gòu)跟邏輯，結(jié)構(gòu)是否合理？邏輯是否通順？

縱向比對結(jié)構(gòu)、橫向分析邏輯。

在比較成熟的大類目，你會發(fā)現(xiàn)結(jié)構(gòu)都是大同小異，結(jié)合自身情況，把類目結(jié)構(gòu)都借鑒下來就O了；

邏輯是否通順？考慮2點，1/運(yùn)營推廣需求，2/客戶體驗。

通俗點講，運(yùn)營需要將哪些信息作為優(yōu)先展示（運(yùn)營主導(dǎo)是目前大部份電商公司的現(xiàn)狀）？從客戶購物角度出發(fā)，客戶了解產(chǎn)品的行為，順序是怎樣的？這也是邏輯部分需要充分考慮的。梳理完這些，一篇產(chǎn)品詳情的文案架構(gòu)基本上搞定。然后把文案中的語言重新組織下，文案就算大功告成了。

注意，文案需要結(jié)合自家產(chǎn)品，以及設(shè)計師自身理解去重新組織，設(shè)計師的理解很重要，在此特別強(qiáng)調(diào)，以下會說到原因。

 

 

這個時候，準(zhǔn)備工作已經(jīng)完成了50%，是不是躍躍欲試？想要動手設(shè)計了？且慢，上面說到的設(shè)計師自身對文案的理解很重要，現(xiàn)在是時候發(fā)揮下你的相像了，將理解轉(zhuǎn)換成畫面感。

什么是畫面感？“即看見文案后腦海中浮現(xiàn)的畫面”

打個比方：前凸后翹、波多野結(jié)衣（額，不好意思，沒剎住又開“車”了）。

嗯，您想到了什么？這就是畫面感。

每個人對同一文案的理解，畫面感各不相同，電商設(shè)計師水平高低，與他所設(shè)計的頁面引發(fā)共鳴人數(shù)成正比。

黃海知道不？那個號稱是“在他之前，中國就沒有海報！”的電影海報設(shè)計大師，很多觀眾就因為被他的電影宣傳海報吸引，為垃圾電影貢獻(xiàn)了票房（電影配不上海報，如「道士下山」）。

以先解決“有”的思想為指導(dǎo)，畫面感這貨，也是可以參考（借鑒）同行的啦。

如果沒有產(chǎn)品素材，優(yōu)先理清產(chǎn)品的畫面感，即產(chǎn)品的展示角度、方位。確定之后扛起單反，火速完成拍攝（什么？單反都沒有？手機(jī)行不行？這鳥不拉屎的公司不考慮辭職？哦，忘了，你丫是個菜鳥！）。

 

碼字真TM累呀！

工作進(jìn)行到這步，皮埃斯（PS)終于可以派上用場了。上機(jī)之前，先猛灌2杯涼白開下肚，防止工傷?。ň米菀装l(fā)胖、腰肌勞損、肩周炎、頸椎病甚至是猝死！實在憋不住尿了，我倒是看你上不上廁所？？？）開工。

 

新建個PS文檔，隨便命名“某某產(chǎn)品詳情”保存（軟件教程里都教你要用英文命名，不存在的，怎么方便怎么來，只要自己爽了就好）；

第一步：把文案及產(chǎn)品拖進(jìn)PS文檔

excel表里已經(jīng)整理好的文案，及對應(yīng)文案里相應(yīng)出現(xiàn)的產(chǎn)品，通通全TM拖進(jìn)PS里，此處不要思考，快速處理完就好；

第二步：整理詳情框架結(jié)構(gòu)及文案分級

框架結(jié)構(gòu)即文案結(jié)構(gòu)，在文案整理過程中已敲定，套用即可。

文案分3個信息層級，分別是重要信息、次要信息、輔助信息，用字號大小加以區(qū)分；

第三步：找素材

找哪些素材？找設(shè)計師還原自身腦海中的畫面感所需要的素材，帶著目的去找素材，同時需要掂量自已技術(shù)及執(zhí)行過程中的實現(xiàn)難度；說的再直白點就是，你能不能通過這些素材+技術(shù)實現(xiàn)腦海中的畫面，并準(zhǔn)時交付工作任務(wù)，這些是需要找個平衡點的，關(guān)系到設(shè)計決策及進(jìn)度把控；

第四步：排版

排版對于新人來說，比較有難度，但同樣也有套路可依。

先行理解消化下，什么是版式？即版面表現(xiàn)形式；

還有一詞叫“版式統(tǒng)一”，即同一個版面里，不斷地重復(fù)2到3個設(shè)計元素，貫穿整個版面，使得版面達(dá)到相對統(tǒng)一狀態(tài)。版式統(tǒng)一是規(guī)律也是套路，非常適合新人使用。

版式提供二種思路

1/利用幾何元素對版面背景規(guī)律性的分割；

2/找2-3種圖形圖案元素對標(biāo)題文案加以裝飾。（什么，不知所云？看下面的參考吧）

 

如果這些方法都不會，或者技術(shù)能力限制了執(zhí)行，最最下策的做法及套路了解下，套版。

簡單來說，就是找2~3個設(shè)計師可以執(zhí)行落地的版面（必須有相近風(fēng)格屬性的版面），直接套用；

例：取A版的產(chǎn)品功效版面+B版的寶貝參數(shù)版面+C版的產(chǎn)品特性版面……，組合成屬于你自己的詳情版面。

排版這一塊涉及的知識點非常多（包括字體設(shè)計、標(biāo)題版式、用字、配色、比例比重……）在這里不再一一展開說明，只提供高效出圖的思路。

 

寫到這里才發(fā)現(xiàn)，設(shè)計師其實還是瞞苦逼的，要學(xué)習(xí)的東西真是不能太多哦！隨便拉出一個知識點都能碼一篇文章出來，而且這僅僅個人技術(shù)、技能層面。真正到現(xiàn)實中，到了執(zhí)行層面，設(shè)計師就是一個節(jié)點，需要連接運(yùn)營、推廣、策劃、品牌、領(lǐng)導(dǎo)、產(chǎn)品等等，涉及到對接人的部分，又得充分溝通、了解需求，還需要想方設(shè)法去滿足他們，并且平衡各需求之間的矛盾與沖突。（看到這里是不是覺得頭大？放心，如果您還是個菜鳥，沒機(jī)會進(jìn)大一點的公司，也就不會出現(xiàn)處理以上復(fù)雜人際關(guān)系的煩惱了，哈）

 

第五步：檢查并輸出

1/所運(yùn)用到的圖片素材有沒有購買版權(quán)?（小公司可以無視，在公司及品牌沒搞出什么名堂之前，吃版權(quán)飯的那幫家伙沒興趣去關(guān)注你，放一百個心）;

2/字體運(yùn)用有沒有受權(quán)？字體需要引起足夠重視，開天貓店的，經(jīng)常會因為字體的使用問題而收到律師涵的哦?。ê孟⑹乾F(xiàn)在的設(shè)計環(huán)境越來越好，越來越開源了，可以商用的免費(fèi)字體越來越多，如思源黑體、思源宋體、龐門正道標(biāo)題體、站酷系列免費(fèi)商用字體 高端黑、酷黑、快樂體等；同樣英文字體也有許許多多費(fèi)用開源可商用字體，嗯，我都有，有需要的可以找我提供呢）

3/檢查敏感詞、違禁詞、所有現(xiàn)行廣告法明令禁止的廣告詞一律不要出現(xiàn)了（這一步其實也可以在梳理文案時解決）；

4/檢查細(xì)節(jié)，元素的運(yùn)用是否與產(chǎn)品相關(guān)聯(lián)？場景構(gòu)建是否符合現(xiàn)實？陰影倒影處理是否協(xié)調(diào)？字體字號是否統(tǒng)一、對齊？配色是否舒適等等；

5/整體調(diào)色后輸出。同樣是為了版式版面過渡自然、協(xié)調(diào)統(tǒng)一，輸出時進(jìn)行整體調(diào)色，這一步用“色彩平衡”微調(diào)即可，輸出圖片時，為提高圖片清晰度可以“蓋印所見圖層”后，執(zhí)行“高反差保留”操作；

 

第六步：交付工作任務(wù)并作簡要的設(shè)計思路解析說明。（溝通，讓需求人理解你的設(shè)計意圖）

 

至此，第一種口頭表述需求的詳情設(shè)計工作單，完美交付。

是否有遺漏？不需要改稿？難道運(yùn)營與設(shè)計這對冤家死對頭都只是傳說？

老鳥都知道，所有的對立、沖突都是溝通不暢、溝通不夠徹底所造成的。深層追究，本質(zhì)上沒有對錯，都是為了工作。作為一個店鋪設(shè)計師，首先要找準(zhǔn)自己定位，如果運(yùn)營/推廣/店長具有最終決定權(quán)，那么你在做任何動作之前，都應(yīng)該主動尋求溝通，在得到確認(rèn)之后再執(zhí)行。這樣做的目確，一是為了確保高效協(xié)作，二是為了規(guī)避責(zé)任（責(zé)權(quán)劃分，說難聽點就是自保，在現(xiàn)實中，設(shè)計/美工背鍋的事例不在少數(shù)）。

 

以上所有動作，都是在高頻溝通中進(jìn)行中。文案梳理好了，找運(yùn)營溝通，是否需要修改結(jié)構(gòu)布局？是否需要調(diào)整邏輯順序？是否還有特別需求（領(lǐng)導(dǎo)的個人癖好、品牌方的硬性規(guī)定）？文案確認(rèn)后繼續(xù)跟進(jìn)，確認(rèn)設(shè)計風(fēng)格走向，可以提供簡筆畫，將大致的畫面感呈現(xiàn)給運(yùn)營，如果畫面太過抽象，可以找具體參考方便他人理解消化；在得到確定的反饋后開始做設(shè)計執(zhí)行。執(zhí)行過程中同樣需要保持高頻溝通；過程中有任何修改，有任何一處信息不對稱，都應(yīng)該及時尋找溝通與反饋，不要怕麻煩，這所有的一系列動作，都是往正向結(jié)果去推進(jìn)，可以有效規(guī)避后期的反復(fù)改稿。人畢竟不是機(jī)器，反復(fù)修改難免會有情緒上的波動，造成雙方之間的不理解，進(jìn)一步激化矛盾，沖突升級，最后工作無法正面推進(jìn)，未能準(zhǔn)時交付，最終鍋還得由設(shè)計來背，得不嘗失。

 

什么是溝通？通俗點解釋就是，嘗試?yán)斫庀舜酥g想法與行為，使溝通者之間達(dá)成某種共識或利益平衡。這很艱難！

世界上兩件事最困難：一是把自己的思想裝進(jìn)別人的腦袋，二是把別人的錢裝進(jìn)自己的口袋。溝通就是類似第一點，不同的是，多個思想需要匯集、碰撞、孵化后產(chǎn)生彼此相對認(rèn)同的思想，確保裝進(jìn)各自腦袋后不產(chǎn)生排異。雖然很艱難，但是還是得去嘗試把它做的更好，甚至做到極致。

為什么？很簡單??！

哪天你將“溝通大法”玩弄地爐火純青時，你就已經(jīng)位列公司頭部、管理層、屬于團(tuán)隊精英了呀。試想，當(dāng)你可以溝通、協(xié)調(diào)、平衡各部門、各領(lǐng)導(dǎo)層想法及利益，推進(jìn)、把控項目，甚至是盈利為公司創(chuàng)造效益，那不是活該被升職加薪？

一個有用之人，能解決問題之人，終究會被重用的，請放寬心！

 

說了這么多題外話，還能夠堅持閱讀到這里的親們，那確實是真愛！在此說聲“謝謝”

 

書面文檔

我們繼續(xù)聊產(chǎn)品詳情設(shè)計需求形式2：書面文檔

能以“書面文檔需求”為下單形式的，可謂算得上是“正規(guī)軍”了，至少，不論是需求人/店長/運(yùn)營/推廣們對此事認(rèn)知較深、較系統(tǒng)。

通過流程模式解決工作問題，是一切提高工作效率的根本。

設(shè)計師接到這份需求單后，應(yīng)該如何開展工作？

 

沒事不惹事，遇事不怕事，一個字，穩(wěn)！

做啥事都不要著急，謀定而后動。還是那句老話“慢慢來，會比較快！”

 

第一步：理解并消化需求

理清他人需求背后的目的、機(jī)動，搞清楚需求人內(nèi)心那點小九九（當(dāng)然這并不容易，上面有提到過）；同時整理、記錄好尚未理解的部分（論工作筆記的重要性）

第二步：解碼轉(zhuǎn)化需求

經(jīng)自身的理解消化后，轉(zhuǎn)化成你所理解的畫面感；帶著第一步尚未理解的部分，主動錄求需求人溝通；反復(fù)磨合碰撞，直到達(dá)成需求與設(shè)計之間的平衡；得到確切反饋之后方才開始設(shè)計執(zhí)行（如有規(guī)范的工作流程，切記所有工作按照流程走，自保?。⌒值埽?/p>

第三步：設(shè)計執(zhí)行

執(zhí)行“口頭表述”形式中PS操作過程的6個步驟，直到完成交付。（過程都是大同小異的，這里就不再復(fù)述）

 

自此，二種形式的詳情需求設(shè)計方法已經(jīng)講述完畢，是不是有點懵？

沒關(guān)系，多看幾遍，理解并消化解題步驟即可。

 

回歸到主題，如何提高工作效率？

除了熟練操作各種設(shè)計軟件、高效執(zhí)行外，最最重要的是有效溝通，溝通是一切工作重中之重，因溝通不暢，導(dǎo)致反復(fù)改稿，徒增時間成本，高效便無從談起。

（顯然，這篇文章通編都是在教新手解決問題的思路，軟件操作層面的我及少談到，原因很簡單；軟件操作這種純技巧/技能性的東西，通過一段時間的刻意練習(xí)，通過實際案例操作，做中學(xué)，是個活人都可以上手。思路則需要去領(lǐng)悟，領(lǐng)悟還得看個人造化，為什么有些人進(jìn)步很慢，工作十年，實際經(jīng)驗值才一年？這就是悟！正常人都是希望自己越來越好的，不論生活還是其它方面，但是沒有想法，沒有領(lǐng)悟，永遠(yuǎn)都不會有行動。以后我的分享套路都是以思路為主，技術(shù)為輔）

首次以這種形式（插科打諢，各種不嚴(yán)肅，各種不正經(jīng)）去分享工作經(jīng)驗，寫的不好請見諒，同時也希望多多指正，本人也非常期待看見自己的進(jìn)步哈。

本篇已經(jīng)接近尾聲，就這樣！

下期我將繼續(xù)分享《如何提高設(shè)計工作效率-主圖篇》，敬請期待，謝謝，再見！