讀者對像 電商設計師及各行業設計人員、品牌營銷的從業人員以及從事電商行業的相關人士。 《電商視覺設計師修煉手冊》一方面從學術角度繫統講述了電商設計師的修煉路徑及**技能，另一方面通過生動的案例講述了每個項目完成過程中設計師的心路歷程，是不可多得的實戰類型的教科書，值得每一位從事電商行業的相關人士反復閱讀。

電商設計服務於電商行業，以商業銷售為先，電子商務是依賴於互聯網產生的，它是帶有平面設計和網頁設計原始基因的一種新興職業。電商設計有絕對的包容性，在這個網絡快速更替的時代，所追求的“新”和“快”是一般設計行業所無法達到的，如何順應電商行業的瞬息萬變，在最短時間內做出最快的反應來抓住一閃即逝的商機，做出最合適的設計，快速在消費者心中占據先機，是每個電商設計師都應具備的能力。 　　《電商視覺設計師修煉手冊》提煉出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”元素、促銷氛圍等如何渲染和貫穿整個活動頁面。對於畫面的主體部分、主推產品以及主要的色彩，在頭腦裡先有一個大概的規劃，從而為接下來的工作做好鋪墊。
資生堂個人護理包含多個品牌，各有特色、產品多樣，色彩差別也比較大，因此如何在一個畫面中保持統一、和諧的調性也是一個難點。
2. 梳理品牌活動需求 每個成熟的品牌都有一套完整的品牌規範和風格體繫，即使像“618”“雙十一”這種電商大促，以銷售為*大目標的活動頁面也一定要遵循品牌的風格定位。為了讓頁面設計風格既有大促氛圍又保持品牌調性，重新梳理一下品牌的形像規範、往期頁面的設計風格，甚至是線上、線下推廣的設計風格，這些都是十分必要的（見圖3-5、圖3-6）。
圖3-5　資生堂個護品牌梳理 圖3-6　活動頁面banner部分梳理 3.1.2 溝通確認 1. 溝通設計風格 根據活動內容及品牌風格在頭腦中有一個大致的設計方向，找一些往期頁面和幾個自己預想風格的頁面，以及幾個相似品牌的成功案例等，以便和運營策劃一起溝通，讓他們有*直觀的認識，從而能夠高效地確認這期活動的設計風格。“618”的活動分為預熱期、高潮期、返場期3個部分，這就決定了本次活動的視覺風格要求是既要熱鬧的大促氛圍，也要凸顯品質，同時便於不同時期頁面的視覺統一與延伸。
在溝通中要準確地把自己思考的設計點展現給運營策劃，如果不符合他們的預想，有什麼意見可以共同探討解決，配色方案、風格調性、素材選擇、創意手法、排版方式等盡量提前做好溝通，讓他們大致了解*後出來的頁面，確認沒有太大問題與分歧後再著手做後續工作，以免造成設計結果與他們預想的差距太大，從而推翻重做。當在大方向上達成一致的時候基本上就確定了我們所要的風格，然後在此基礎上進行豐富與調整，找到一個明確的方向（見圖3-7）。
圖3-7　溝通確認設計的風格與方向 2. 確認工作周期 確認主視覺完成的時間、初稿完成的時間、終稿確認的時間節點等，針對一些特定區域內容的特殊設計需求（例如活動時間軸的特殊效果、視頻區域以及動態效果能否實現、是否有技術難點等問題）提前做好交流、溝通；與制作人員確認能否實現、能不能跟平臺兼容、需要預留多長時間完成特殊效果等問題；並確認有沒有需要提前完成的部分，例如站內入口圖視覺呈現、站外推廣視覺呈現、預告時間軸等，同時確認好時間，以便把握好自己的設計進度。
打開腦洞整理資料，確定大致方向 3.2.1 發散思維，尋求靈感 1. 根據活動主題做延展 電商設計主要是視覺營銷，**印像很重要，一個視覺精美的畫面可以提升顧客對品牌的好感度和信任度，畫面傳達給消費者的直觀感受至關重要。在很多時候，尤其是像“雙十一”“618”這種大型促銷類的頁面都是為運營目的服務的，所以要想做好這類頁面，首先要弄懂運營方向和活動目的、活動定位、文案設定，這些都是影響設計的因素，分析利用好這些關鍵點就可以很快地找準切入點，明確這次活動頁面的整體設計方向（見圖3-8）。
圖3-8　資生堂個護京東“618”活動主題 京東“618”、年中狂歡購，以及滿減力度、購物贏豪禮等相關文字被放大顯示，首先讓人聯想到的畫面一定是喜慶、有衝擊力的；“高品質洗護”則需要凸顯品質感，所以大致的風格方向很明顯了，即在保持高品質感的前提下加入熱烈、有衝擊力的元素來體現促銷感。
2. 收集以往平臺的主題風格做參考 很多時候活動以節日為噱頭展開，分析好文案、明確方向後根據不同的活動目的和時間節點去營造相應的氛圍。
從各個電商平臺提供的活動元素出發，像“618”“雙十一”這種大型的平臺性活動，各個平臺都會有一套完整的logo及視覺體繫規範，也為設計師提供了很好的設計參考方向（見圖3-9）。
圖3-9　電商“618”年中購物節logo 了解清楚平臺的風格和宣傳方式，把握好風格、尺寸，精準地進行視覺營銷設計（見圖3-10）。
圖3-10　電商“618”年中購物節主視覺 3. 結合品牌形像和特點做創意 從品牌的logo、品名、包裝、圖案廣告設計等方面出發，分析品牌定位的目標消費人群，發掘他們的信息特征，分析賣點，根據需求特點快速立意，明確設計方向，吸引目標用戶。品牌定位為“高品質洗護”，洗護給人的感覺是柔和、舒緩的，高品質讓人聯想到禮盒包裝、櫃臺展示、絲帶等元素（見圖3-11）。
圖3-11　根據品牌形像特點延伸元素 3.2.2 整理思路，確定方向 1. 收集整理素材 在拿到設計需求時我們偶然也會有靈光一閃的好創意，但大部分時候還是苦思冥想，不得其法。這時候就需要放慢腳步冷靜思考，以前面梳理好的思路為出發點，相應地找一些可用 的參考素材，例如色彩搭配參考、畫面版式參考、文字樣式設計等，抓住核心需求點，不斷充實、豐富自己的思路，從中吸取精華，應用到自己的方案當中（見圖3-12）。
圖3-12　根據思路收集、整理素材 若一開始無從下手，先看一下別人是怎麼定義這個主題的。當看到一個**的設計作品時，分析一下創作者是如何想到這個獨特的創意的，從哪裡入手，用了什麼技法，用了什麼樣的設計結構和排版方式，又是怎麼運用視覺語言將其表現成這樣一個**的作品的。當看過並分析了一些不同的表現手法時，你的思緒自然會被調動起來，與之相關的靈感、設計元素等也會相應地迸發出來，並在這個過程中提取一手素材為自己所用，這些都會被運用到*終的設計成果中。
2. 確定框架和色彩 框架是一個頁面由上至下排列的基本結構，每個有規劃的頁面都有基本的原型框架。例如這次活動的策劃案就是由頭部banner、活動時間軸、活動獎品區域、**套裝禮盒區域、明星單品區域、**區域/主推產品區域、產品排列區域等組成，再加上產品和文案信息，以背景和氛圍渲染、烘托元素，按照這個結構有序地分布、貫穿在整個頁面中就形成了一個完整的活動頁面。
頁面的框架結構形式可分為按上下順序直接排列的豆腐塊式的常規型和不規則型兩種，不規則型有左右對比型、Z形、S形等，要根據品牌的調性、活動的氛圍、目標消費人群去規劃框架，有主次、節奏分明地去把握頁面的設計。
根據活動主題及平臺提供的視覺規範等（同時也要考慮到品牌風格定位）來選定頁面的整體色調和輔助顏色。
色彩是一種神秘的語言，不同的色彩能夠調動用戶不同的情緒和反應，能夠影響用戶對於品牌的感知。簡單來說，色彩可以造就不同的設計。研究表明，色彩能夠強化品牌認知度（高達80%），加深用戶的印像，讓品牌的設計和文本在同類中脫穎而出（見圖3-13）。
圖3-13　色彩對畫面的作用 在一個頁面中，對於色彩搭配的主色、輔助色、點綴色的分配比例，理想的比例為70%使用主色，25%為輔助色，5%為點綴色。畫面色彩*好不要超過３種色相，一般情況下，顏色用的越少越好，顏色越少畫面越簡潔、越容易控制，也會*顯成熟、*顯檔次。一些特殊情況除外，例如這次的大促型節日類的頁面設計就要求畫面充滿熱鬧、活躍的氛圍，再加上多品牌的產品，色彩*是多樣，都要在同一頁面中體現。多顏色可以使畫面*活躍，但是對設計師的要求*高，顏色越多越要嚴格要求配色比例，使畫面和諧、統一，否則畫面將**混亂，難以把控（見圖3-14）。
圖3-14　活動頁面的色彩整理 *後把針對這次活動收集的靈感圖片和設計素材進行整理、篩選，隨著想法逐步成熟、具體，把一些用不到的素材刪掉，將重點素材標出，以便作圖時使用。設計需要考慮很多東西，素材要自己整合，不斷調整纔能適合產品。選擇合適的素材，其中**的素材是靈魂，普通的素材是裝飾，找素材要保證素材能對氛圍的表達有幫助，且能恰當表意，同時要保證頁面上的素材風格一致。
打開設計神器，揮灑自如 3.3.1 視覺布局 1. 明確主體 在構思好畫面的創意點之後，先確定畫面的主體部分，主體一定是畫面中占面積比較大、顯眼的元素，能輕而易舉地識別出，且與畫面中的第二大元素相比，依然很凸顯它的主體地位。當然，畫面中不一定隻有單獨元素，也可以眾多元素組合，這就要考慮讓需要強調的元素從色彩和位置上*容易識別。
“618”購物狂歡節這種以促銷為*大目標的活動頁面應當以爆款產品為主體元素吸引顧客的眼球，其次以大的促銷力度激發顧客的購買欲望，以其他文案信息、節日氛圍、背景元素為輔。在促銷活動頁面或banner中商品的擺放也是很重要的部分，一個頁面好不好看、氣氛強不強都和商品息息相關（見圖3-15）。
圖3-15　畫面主體的不同排列方式 很多頁面中商品的擺放近似三角形，因為三角形是*穩定的形狀，它還有引導指向性。以三角形方式擺放是*常見的一種方式，它不局限於商品的角度以及是否立體（見圖3-16）。
圖3-16　倒三角形排列方式 需要注意的是，不要擺成很正的三角形，隨意一些效果*好。以三角形方式擺放後你會發現在三角形的頂部會出現空的地方，需要用飄起來的商品補充，*後是虛化的，因為擺放的商品都是實的，所以其他虛化。另外，商品不可過多，多則亂；也不可過少，少則松。商品的顏色也要盡量少，以避免把畫面變花了（見圖3-17）。
圖3-17　穩定聚焦的三角形排列方式 2. 色彩搭配 色彩在設計中有著舉足輕重的作用，一個畫面的設計是否能夠給人留下深刻的**印像往往與色彩有關。在進行頁面設計的時候，主色調的使用範圍在整個頁面的色彩面積較大的地方，例如用於背景或形狀元素上；輔助色通常是能烘托並產生呼應的顏色，輔助色通常會使用在頁面設計中的字體、點綴的小面積元素上。如果輔助色和主色形成了互補色，就會產生一種強烈的對比，這時對比色還有強調的作用。當要凸顯畫面中的某個元素時就可以用對比色來強調（見圖3-18）。
圖3-18　色彩搭配比例 畫面的**感可以通過色調來體現，通常使用低純度和低明度的色彩來體現**感，例如黑色、白色、深棕色、暗紅色等，每種色彩的運用在視覺傳達中都起到關鍵性的作用。色彩是用戶能夠直觀看到的元素，能夠讓用戶感受到情緒，從而影響到品牌的傳播以及商品的銷售。例如這次活動頁面選用了紅色色調，紅色是比較難駕馭的顏色，紅色一方面代表著危險、警告，一方面又代表著**、熱血、開心，可以讓人激動，所以選用暗紅色為主色調，以黃色、金色來點綴，使畫面既熱情激烈又沉穩莊重（見圖3-19）。
圖3-19　遵循色彩搭配比例的banner色彩 3. 結構劃分 形成整體風格的關鍵是畫面的布局，不管什麼樣的布局一定要讓整體頁面形成一種邏輯，從上到下不僅要有順序，還要有秩序，頁面元素也不要太多、太雜（見圖3-20）。
圖3-20　左右對稱S形的頁面結構 3.3.2 氛圍渲染 1. 字體 字體的使用應該符合人的“潛意識”，一定要深入考慮，不是自己想要什麼字體，看著舒服就可以，而是要考慮用戶怎麼看，對的字體配上對的畫面，用戶纔會有正確的吸收、解讀。不管是做banner設計還是做頁面設計，文案是*直觀表達活動定位和運營策略的信息，設計的作用就是把這個活動定位傳達出來（見圖3-21）。
圖3-21　襯線字體和非襯線字體 （1）襯線字體（宋體）：筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細有所不同，可讀性*佳，裝飾性強，有對比參照性，清新又文藝。
（2）非襯線字體（黑體）：沒有額外的裝飾，而且筆畫的粗細差不多，簡潔、時尚、休閑、干淨。
變形字體要盡可能保證文字的可閱讀性，因為終歸是商業設計，識別性是**位的，然後將字體放到實際的應用環境下做細節和色彩搭配的調整，同時考慮頁面的風格決定質感、色彩種類等（見圖3-22）。
圖3-22　頭圖banner中的字體應用 2. 元素 畫面中設計元素應用的好壞也會影響整體的效果，點、線、面是組成畫面的基礎，點是點綴畫面、豐富畫面氣氛的元素；線連接頁面、引導人的視覺、豐富畫面，頁面中的線可優美、可速度、可靜止。點、線、面是互通的，是相對存在的。通過點、線、面可以豐富畫面、提升畫面的檔次、突出商品的特性、增強畫面的視覺衝擊力（見圖3-23）。
圖3-23　點綴元素使畫面*豐富 3. 空間 在現實生活中物體都有長度、寬度和深度，而在設計當中，特別是在banner、海報中，空間是指一種有深度、層次遞進的感覺，就視覺而言產生的空間可以利用近大遠小和前後、上下重疊關繫；利用陰影使物體具有立體感、空間感；利用疏密對比、冷暖色彩、矛盾空間、虛實關繫，然後按一定的透視空間規律擺放營造空間感（見圖3-24）。
從色調上來看，暗調給人較遠的感覺，明調給人很近的感覺；從色相的冷暖對比來看，暖色有膨脹感，讓人感覺較近，冷色有收縮感，讓人感覺較遠；從色相飽和度上來看，低純度的顏色沉穩、後退感強，高純度的顏色跳躍、前進感強。
圖3-24　利用虛實與明暗產生的空間感 特別常見的、*容易表現空間感的是虛實與明暗變化，虛實與明暗變化使人的視覺產生近實遠虛的感覺，虛化的物體自然就會弱化出視線，產生進深感。虛實與明暗變化還能產生聚焦的作用，可以引導人的視覺焦點。
利用大小對比也可以表現空間感，對於大小相同的商品，利用近大遠小的原理產生遠近的感覺，在設計時需要注意商品之間的疏密關繫、層疊關繫，不要擺放得太均勻，在保持畫面布局平衡、和諧的前提下做一些靈活變化，使畫面*豐富、有層次（見圖3-25）。
圖3-25　頭圖banner中的空間感 3.3.3 節奏把控 1. 平衡 不管是整體頁面還是頭圖banner，無論是有意還是無意，平衡總是會影響我們的視覺，因此元素的運用至關重要，即要保證元素與元素之間以及元素與整體之間大小、形狀、數量、色彩、材質等的分布與視覺上的平衡。電商頁面稍微不注意就會做成頭重腳輕的感覺，在設計時要盡量保證平衡感（見圖3-26）。
圖3-26　畫面的平衡 這幅照片之所以不穩定，是因為重心集中在右下，而在左上角沒有元素。
2. 韻律 韻律就是畫面的節奏感，畫面中的一種或多種元素按一定的規律排列會產生音樂般的旋律感，好的韻律就像和諧的音符給人以美妙的感覺。畫面的節奏韻律跟排版中的疏密關繫有密切的聯繫，力求構圖飽滿，空間布局合理、透氣（見圖3-27）。
圖3-27　空間布局合理 3. 對比 對比是畫面中必不可少的，對比會產生視覺焦點，產生差異性。畫面中的元素都可以形成對比，留白也可以成為畫面的對比元素，強烈的對比會讓人產生視覺上甚至心靈上的衝擊，留下深刻的記憶。
通過大小對比可以*好地突出內容，在設計形式上可以形成不同的版式結構（見圖3-28）。
圖3-28　字體大小對比 顏色對比能產生視覺焦點，使信息層級*明確，可以利用冷暖、明暗、色相、互補讓文字或者主體產生顏色對比（見圖3-29）。
圖3-29　顏色對比 前後對比能形成視覺空間，讓畫面*有吸引力。虛實對比則通過光影、空間結構來塑造，對比*明確，讓畫面*加生動。要想做好一個頁面，對所有方面都要能適當把握、正確運用（見圖3-30）。
圖3-30　視覺空間對比 初稿審核，綜合修改 3.4.1 運營意見，品牌主張 1. 促銷力度不突出 在電商設計中，運營對促銷力度的要求很大，經常爭論滿減不突出、折扣不夠大、優惠券不明顯等。 無論設計師和運營之間的“唇*舌戰”多激烈，大家都要相信所有的爭執討論都是基於想把活動頁面做得*好，所以心態要放正，本著共同討論、共同進步的心態去解決問題，保持平和、不卑不亢的心態去討論問題，相信坦誠的討論比無意義的吵架、暗戰*有意義。
對於一個頁面，運營*在意的除了產品美觀之外就是促銷力度，利用促銷力度來吸引顧客，當然還需要引導顧客，增加訪問深度，引導其收藏、添加購物車，從而達到*終成交的目的。在運營的思維中，數據能說明一切，運營關注的是瀏覽量、頁面點擊數、訪問深度、點擊率、跳失率、停留時間、引導轉化率、引導買家數等，如果後臺數據不好，再美的頁面也是浪費。
運營也有他們的專業能力，有時候他們對頁面設計提出異議也許是從全局或者其他方面去考慮的。設計師應該換位思考，站在他們的角度去想問題，這樣可能會把問題想得*透徹，而且也會從中得到提高。另外，學會放棄也是一種能力，如果對頁面的想法不一致，這時候就需要我們考慮一下這是不是頁面設計中核心的地方，放棄了是否會影響整體的效果,如果不是，那麼可以學會妥協，做出相應的調整。當然，如果這個改變影響了整體的規劃布局甚至設計感覺，那就需要從專業的角度做出講解，說服運營接受這樣的設計（見圖3-31）。
圖3-31　頁面點擊熱力圖 2. 設計風格跳躍 品牌方可能會覺得創意的表現手法不足以匹配產品的目標群體，不夠檔次，或者所選的主色調他們不喜歡。其實，每一個說不出具體要求和標準的甲方，內心都有無數個要求和標準，你隻要有一點沒能與之匹配，改稿就是在所難免的，所以多花些時間去做前期溝通是**必要的（見圖3-32）。
圖3-32　日常品牌風格 大促期間的頁面風格和品牌風格是衝突容易被激化的*高時期，這就*考驗設計師的能力與技巧了。大品牌的商品很注重包裝，原因就在於一個好的包裝會使商品在客戶心中的可信度不斷上升，同樣好的頁面視覺*能快速地促進消費者購買商品（見圖3-33）。
圖3-33　大促活動風格 如果感覺很怪，需要引導他們說出設計中的哪些地方怪，是圖片？是色彩？是排版？還是文案內容？如果說不出來，那就等他們給出明確的反饋再進行修改。他們或許說能不能換個顏色？我覺得這個顏色怎麼樣怎麼樣。他們或許還會問字號能不能大一些？此時需要給他們講解我們這樣做的想法，盡量說服他們可以不修改。當品牌方對設計中的產品賣點以及文字賣點描述提出修改意見的時候，我們要虛心聽取他們的想法，畢竟他們*懂產品，在不影響美觀的角度下要盡量配合修改。
3.4.2 細節調整 1. 文字細節 文字是頁面中重要的設計元素之一。頭圖banner部分的文字要一目了然、突出重點，吸引顧客的目光；產品信息文案部分要條理清晰、層次分明。產品信息、價格等文字部分一般是重復性排列的，至少一個區域中是相同的排版方式，所以要保證它們的統一性，即字體、字號、顏色、對齊方式等保持統一樣式。在頁面完成後，文字內容多少會有些改動，例如修改價格、賣點，調換位置等，所以不到*後文字不要柵格化，變形字體*好留個底稿，以方便修改、調整。
2. 版面調整 設計完成稿能*直觀地展示產品，所以運營會根據情況對板塊做些調整，甚至是調換板塊的位置，所以在作圖時要分好圖層組，以方便修改（見圖3-34）。
無線端不是計算機端的直接縮放，字體大小要根據手機端的要求來做；無線端每一屏的內容需要有一個比較明顯的分割線，從而主次分明，也不要隨便把字體加粗，適可而止；無線端*適合上下排版；無線端文案*好左對齊或者右對齊，中規中矩即可，不要搞得太麻煩（見圖3-35）。
細節其實是一個廣義的概念，一個設計作品如果成功，在細節方面一定是到位的，但細節不僅僅指細小的方面，例如像素級別的對齊，還包括如果不用這種形式，稍微加點紋理或者質感會不會*好，與整體是否協調，光影關繫是否與整個畫面一致等。
在做設計細節的時候一定要戒驕戒躁，即使是很小的一個點，也需要多思考如何讓這個點*符合整個設計作品的氣質，確定之後再去動手實現。注意，不要因為要做的事情很小，而且沒什麼技術難度，就直接幾下完成，然後在一次次的評審中去修改，這樣花的時間有可能*多。
圖3-34　調換板塊的位置 圖3-35　手機端頁面 終稿確認 3.5.1 精益求精 細節決定設計的質感，設計傳遞的是產品的價值感，並不是有價值感、有設計感的設計適合所有產品、所有品牌、所有店鋪，設計一定要和產品價值、品牌價值相匹配，協調一致，對產品元素和環境光影細節的調整能夠增加產品圖片的質感、豐富畫面的層次。
網格繫統是利用垂直和水平參考線將畫面簡化成有規律的格子，以方便將這些格子作為參考構建秩序性版面。通過構建網格繫統，我們可以有效地控制版面中的留白和比例關繫，為元素提供對齊依據。要想熟練地掌握網格繫統的相關知識，需要經過大量的專項訓練，提升自己的審美能力和版面把控能力，這樣纔能達到靈活運用的程度。
網格化是通過確定等分的單位寬度以及單位寬度之間的間距，把單位寬度進行組合的一種排版方式。首先分析等分的復雜度，如果版式是4等分、3等分，12列的網格繫統就可以滿足需求；如果有較多，那麼建議采用24列的網格繫統。在進行頁面設計或排版的時候除了要注意豎向的布局以外，橫向的布局也是要注意的，標題間距、模塊間距也要統一，*好與網格間距統一，多以5、10、15、20、30為間距（見圖3-36）。
圖3-36　各個端口的示意圖 網格的規劃並沒有固定的規則，可以在前期繪制草圖，確定好網格結構，並在已有的架構下編排內容，也可以將內容大致編排後根據版面結構套用網格規範進行調整。網格內的文字和圖像元素必須與網格架構對齊，版面中所有元素的大小都要有一個比例依據，網格的規劃需要根據實際內容決定。另外，留白也是版面中的元素，不要把網格填滿。
3.5.2 終稿完成 要想做出讓運營、品牌方滿意的設計，必須學會讀懂對方的心思：用大紅色無非是想讓內容隆重些、有節日氣氛，或者是醒目一些；將產品調大就是擔心買家看不見或看不清產品；加個框就是希望能夠突出這個部分。如果能夠讀懂對方的心思並且能夠找到解決方法，可以減少設計師與他們之間的很多矛盾衝突，這也是設計師需要不斷努力的方向。
設計師一定要以開放的心態去溝通，沒有人比運營和品牌方*懂他們自己的產品和品牌定位，所以要明白運營和品牌方為什麼不滿意這個設計，並把他們真正想要的設計了解清楚，在不影響美觀的情況下盡量配合修改，好的設計一定是能經得起人推敲的。
適合用戶的設計纔是好設計，首先要確保設計有效地傳達了品牌意識和活動意圖，並且簡潔、大氣，通過視覺設計做出好的用戶體驗，把丑的東西變成美。做一個成功的設計師需要學習很多知識，不需要每一樣都精通，但是必須了解，這樣纔能讓你有能力應對不同的需求，例如營銷、程序、心理學、溝通技巧、創意技巧、著裝、古典文章、做人做事等，另外每個行業的特點也需要了解。隻有不停學習纔能趕上時代的步伐。