本書是一本使用Photoshop進行電商頁面布局設計制作的案例教程,語言淺顯易懂,配合大量精美的電商頁面設計案例,講解了有關電商頁面布局設計的相關知識和使用Photoshop進行電商頁面設計制作的方法和技巧。使讀者在掌握電商頁面設計各方面知識的同時,能夠在電商頁面設計制作基礎上做到活學活用。
高金山,資深UI設計師,有豐富的UI設計經驗,先后從事電商設計,軟件界面、網站界面和游戲界面的設計工作。曾在中國傳媒大學、北京大學、北京師范大學等重點院校教授設計課程。
目錄
Chapter01 網店設計必備知識
1.1了解網店設計
1.1.1什麼是網店設計
1.1.2網店設計的重要性
1.1.3網店設計前的准備工作
1.2網店裝修的一般流程
1.2.1取個好店名很重要
1.2.2確定設計風格
1.2.3注重細節修飾
1.3網店設計中的色彩搭配
1.3.1網店設計中的色彩
1.3.2色彩搭配的原理
1.4理解電商設計文案
1.4.1電商設計文案的內容
1.4.2電商設計文案策划
1.4.3如何創建優秀的產品文案
1.5電商設計必須注意的問題
1.6如何創建成功的電商網站
1.6.1面向合適的用戶群
1.6.2遵守常規的導航元素
1.6.3產品介紹頁面是用戶的關注點
1.7網店視覺營銷
1.7.1網店視覺營銷的表現
1.7.2不同類型網店的視覺營銷方法
1.8本章小結
Chapter02 電商網站布局元素
2.1店標設計
2.1.1店標的作用
2.1.2店標的特性
2.1.3店標的設計要求
2.1.4店標的類別
案例分析 水果店鋪店標設計分析
實戰案例 設計咖啡店標
案例分析 藥品專營店鋪店標設計分析
實戰案例 設計啤酒店標
2.2店招設計
2.2.1店招的設計要點
2.2.2店招的表現類型
案例分析 母嬰商城店招設計分析
實戰案例 設計店鋪促銷店招
2.3電商網站導航設計原則
2.3.1符合網站內容結構
2.3.2明確網站業務目標
2.3.3遵從用戶使用習慣
2.3.4避免重復的分類
2.3.5使用合適的文案
2.3.6清晰的視覺體驗
2.3.7為用戶提供反饋
2.3.8導航符合網站整體風格
2.3.9利於搜索引擎優化
2.3.10趨於專業化的導航
案例分析 名鞋庫網站導航設計分析
實戰案例 設計運動品牌電商網站導航
2.4面包屑導航設計技巧
2.4.1統一關鍵詞,避免重復
2.4.2顯示相關產品數量
2.4.3善於使用面包屑
2.4.4使用具有指向性的符號
2.4.5減少對用戶的影響
2.4.6控制層級
2.4.7在面包屑中使用關鍵字
案例分析 屈臣氏導航和店招設計分析
實戰案例 設計網店導航和店招
2.5商品陳列構圖
2.5.1距離感
2.5.2對稱與等比
2.5.3節奏感
2.5.4圖片與文字的相輔相成
案例分析 隨性的商品構圖設計分析
實戰案例 設計商品菱形排列布局
2.6本章小結
Chapter03 文字與廣告設計
3.1店鋪中的文字設計
3.1.1文字的字體
3.1.2文字的字號
3.1.3文字的間距和行距
3.1.4文字的顏色
案例分析 母親節變形文字設計分析
實戰案例 設計廣告變形文字
3.2文字圖形化處理
3.2.1文字的圖形化
3.2.2文字的重疊
3.2.3文字的整體性
3.2.4讓文字更易讀
案例分析 特效毛筆廣告文字設計分析
實戰案例 設計光影特效文字
3.3電商廣告的作用
3.3.1傳達產品信息
3.3.2增強產品藝術表現
3.3.3增加頁面趣味
案例分析 衣品天成女裝廣告設計分析
實戰案例 設計化妝品廣告
3.4電商廣告排版布局技巧
3.4.1對齊
3.4.2對比
3.4.3分組
案例分析 海鮮促銷廣告設計分析
實戰案例 設計水果促銷廣告
3.5電商廣告設計原則
3.5.1突出廣告主題
3.5.2明確廣告目標人群
3.5.3完美的表現形式
案例分析 安踏運動鞋廣告設計分析
實戰案例 設計運動鞋宣傳廣告
3.6本章小結
Chapter04 電商海報設計
4.1電商海報的類型
4.1.1產品宣傳海報
4.1.2促銷宣傳海報
4.1.3活動宣傳海報
案例分析 男裝促銷活動海報設計分析
實戰案例 設計女裝活動海報
4.2常見的電商海報構圖方式
4.2.1左右構圖
4.2.2三欄分布構圖
4.2.3疊加構圖
4.2.4傾斜構圖
案例分析 太陽鏡海報設計分析
實戰案例 設計精油產品海報
4.3電商海報的配色技巧
4.3.1了解色彩關系
4.3.2掌握配色黃金比例
4.3.3鄰近色搭配
4.3.4間隔色搭配
4.3.5互補色搭配
案例分析 春夏季女鞋活動海報設計分析
實戰案例 設計淘 寶新年活動海報
4.4電商海報的設計表現形式
4.4.1直接展示
4.4.2突出特點
4.4.3對比襯托
4.4.4以小見大
4.4.5聯想
4.4.6誇張
4.4.7幽默
4.4.8以情托物
案例分析 母親節活動海報設計分析
實戰案例 設計五一促銷活動海報
4.5本章小結
Chapter05 電商頁面構圖設計
5.1了解電商頁面的構圖
5.1.1為什麼要對電商頁面進行構圖
5.1.2電商頁面構圖標准
5.2頁面幾何切割的構圖方式
5.2.1簡單切割
5.2.2對稱切割
5.2.3組合切割
5.2.4多重切割
案例分析 化妝品網店活動頁面設計分析
實戰案例 設計運動服裝網店頁面
5.3放射與透視狀的頁面構圖
5.4整體和流程的頁面構圖
案例分析 護膚品店鋪頁面設計分析
實戰案例 設計啤酒促銷頁面
5.5根據圖像輪廓聯想的方式構圖
案例分析 賽車票務電商頁面設計分析
實戰案例 設計古典風格網店頁面
5.6本章小結
Chapter06 電商頁面布局設計
6.1電商頁面首屏布局設計要點
6.1.1確定頁面首屏可視范圍
6.1.2展示吸引用戶的信息
6.1.3明確清晰的視覺焦點
6.1.4運用圖片便於理解
6.1.5首屏要強調主題
6.1.6適當添加交互效果
6.1.7符合視覺習慣的圖文混排
案例分析 時尚女包店鋪頁面設計分析
實戰案例 設計化妝品網店首頁
6.2商品列表頁布局設計
6.2.1商品列表形式
6.2.2展示有用的產品信息
6.2.3鼠標懸停時產生交互效果
6.2.4出現適量的附加信息
6.2.5添加推薦商品刺激消費
6.2.6減少操作步驟
6.2.7了解顧客心理
案例分析 食品店鋪產品列表頁面設計分析
實戰案例 設計手機促銷列表頁面
6.3商品詳情頁設計
6.3.1提供商品展示圖片的細節放大效果
6.3.2滿足用戶的比價心理
6.3.3運用商品分享功能
6.3.4良好的用戶引導
6.3.5跟隨性導航
6.3.6不可缺少的商品評價功能
6.3.7保持商品介紹的連貫性
6.3.8商品詳情頁面不宜過長
案例分析 化妝品詳情頁面設計分析
實戰案例 設計小家電商品詳情頁面
6.4電商活動頁面設計
6.4.1活動文案是靈感來源
6.4.2節日促銷活動頁配色與素材的選擇
6.4.3活動頁面設計技巧
案例分析 家電促銷活動頁面設計分析
實戰案例 設計網店活動主題頁面
6.5本章小結
1.1了解網店設計
1.1.1什麼是網店設計
1.1.2網店設計的重要性
1.1.3網店設計前的准備工作
1.2網店裝修的一般流程
1.2.1取個好店名很重要
1.2.2確定設計風格
1.2.3注重細節修飾
1.3網店設計中的色彩搭配
1.3.1網店設計中的色彩
1.3.2色彩搭配的原理
1.4理解電商設計文案
1.4.1電商設計文案的內容
1.4.2電商設計文案策划
1.4.3如何創建優秀的產品文案
1.5電商設計必須注意的問題
1.6如何創建成功的電商網站
1.6.1面向合適的用戶群
1.6.2遵守常規的導航元素
1.6.3產品介紹頁面是用戶的關注點
1.7網店視覺營銷
1.7.1網店視覺營銷的表現
1.7.2不同類型網店的視覺營銷方法
1.8本章小結
Chapter02 電商網站布局元素
2.1店標設計
2.1.1店標的作用
2.1.2店標的特性
2.1.3店標的設計要求
2.1.4店標的類別
案例分析 水果店鋪店標設計分析
實戰案例 設計咖啡店標
案例分析 藥品專營店鋪店標設計分析
實戰案例 設計啤酒店標
2.2店招設計
2.2.1店招的設計要點
2.2.2店招的表現類型
案例分析 母嬰商城店招設計分析
實戰案例 設計店鋪促銷店招
2.3電商網站導航設計原則
2.3.1符合網站內容結構
2.3.2明確網站業務目標
2.3.3遵從用戶使用習慣
2.3.4避免重復的分類
2.3.5使用合適的文案
2.3.6清晰的視覺體驗
2.3.7為用戶提供反饋
2.3.8導航符合網站整體風格
2.3.9利於搜索引擎優化
2.3.10趨於專業化的導航
案例分析 名鞋庫網站導航設計分析
實戰案例 設計運動品牌電商網站導航
2.4面包屑導航設計技巧
2.4.1統一關鍵詞,避免重復
2.4.2顯示相關產品數量
2.4.3善於使用面包屑
2.4.4使用具有指向性的符號
2.4.5減少對用戶的影響
2.4.6控制層級
2.4.7在面包屑中使用關鍵字
案例分析 屈臣氏導航和店招設計分析
實戰案例 設計網店導航和店招
2.5商品陳列構圖
2.5.1距離感
2.5.2對稱與等比
2.5.3節奏感
2.5.4圖片與文字的相輔相成
案例分析 隨性的商品構圖設計分析
實戰案例 設計商品菱形排列布局
2.6本章小結
Chapter03 文字與廣告設計
3.1店鋪中的文字設計
3.1.1文字的字體
3.1.2文字的字號
3.1.3文字的間距和行距
3.1.4文字的顏色
案例分析 母親節變形文字設計分析
實戰案例 設計廣告變形文字
3.2文字圖形化處理
3.2.1文字的圖形化
3.2.2文字的重疊
3.2.3文字的整體性
3.2.4讓文字更易讀
案例分析 特效毛筆廣告文字設計分析
實戰案例 設計光影特效文字
3.3電商廣告的作用
3.3.1傳達產品信息
3.3.2增強產品藝術表現
3.3.3增加頁面趣味
案例分析 衣品天成女裝廣告設計分析
實戰案例 設計化妝品廣告
3.4電商廣告排版布局技巧
3.4.1對齊
3.4.2對比
3.4.3分組
案例分析 海鮮促銷廣告設計分析
實戰案例 設計水果促銷廣告
3.5電商廣告設計原則
3.5.1突出廣告主題
3.5.2明確廣告目標人群
3.5.3完美的表現形式
案例分析 安踏運動鞋廣告設計分析
實戰案例 設計運動鞋宣傳廣告
3.6本章小結
Chapter04 電商海報設計
4.1電商海報的類型
4.1.1產品宣傳海報
4.1.2促銷宣傳海報
4.1.3活動宣傳海報
案例分析 男裝促銷活動海報設計分析
實戰案例 設計女裝活動海報
4.2常見的電商海報構圖方式
4.2.1左右構圖
4.2.2三欄分布構圖
4.2.3疊加構圖
4.2.4傾斜構圖
案例分析 太陽鏡海報設計分析
實戰案例 設計精油產品海報
4.3電商海報的配色技巧
4.3.1了解色彩關系
4.3.2掌握配色黃金比例
4.3.3鄰近色搭配
4.3.4間隔色搭配
4.3.5互補色搭配
案例分析 春夏季女鞋活動海報設計分析
實戰案例 設計淘 寶新年活動海報
4.4電商海報的設計表現形式
4.4.1直接展示
4.4.2突出特點
4.4.3對比襯托
4.4.4以小見大
4.4.5聯想
4.4.6誇張
4.4.7幽默
4.4.8以情托物
案例分析 母親節活動海報設計分析
實戰案例 設計五一促銷活動海報
4.5本章小結
Chapter05 電商頁面構圖設計
5.1了解電商頁面的構圖
5.1.1為什麼要對電商頁面進行構圖
5.1.2電商頁面構圖標准
5.2頁面幾何切割的構圖方式
5.2.1簡單切割
5.2.2對稱切割
5.2.3組合切割
5.2.4多重切割
案例分析 化妝品網店活動頁面設計分析
實戰案例 設計運動服裝網店頁面
5.3放射與透視狀的頁面構圖
5.4整體和流程的頁面構圖
案例分析 護膚品店鋪頁面設計分析
實戰案例 設計啤酒促銷頁面
5.5根據圖像輪廓聯想的方式構圖
案例分析 賽車票務電商頁面設計分析
實戰案例 設計古典風格網店頁面
5.6本章小結
Chapter06 電商頁面布局設計
6.1電商頁面首屏布局設計要點
6.1.1確定頁面首屏可視范圍
6.1.2展示吸引用戶的信息
6.1.3明確清晰的視覺焦點
6.1.4運用圖片便於理解
6.1.5首屏要強調主題
6.1.6適當添加交互效果
6.1.7符合視覺習慣的圖文混排
案例分析 時尚女包店鋪頁面設計分析
實戰案例 設計化妝品網店首頁
6.2商品列表頁布局設計
6.2.1商品列表形式
6.2.2展示有用的產品信息
6.2.3鼠標懸停時產生交互效果
6.2.4出現適量的附加信息
6.2.5添加推薦商品刺激消費
6.2.6減少操作步驟
6.2.7了解顧客心理
案例分析 食品店鋪產品列表頁面設計分析
實戰案例 設計手機促銷列表頁面
6.3商品詳情頁設計
6.3.1提供商品展示圖片的細節放大效果
6.3.2滿足用戶的比價心理
6.3.3運用商品分享功能
6.3.4良好的用戶引導
6.3.5跟隨性導航
6.3.6不可缺少的商品評價功能
6.3.7保持商品介紹的連貫性
6.3.8商品詳情頁面不宜過長
案例分析 化妝品詳情頁面設計分析
實戰案例 設計小家電商品詳情頁面
6.4電商活動頁面設計
6.4.1活動文案是靈感來源
6.4.2節日促銷活動頁配色與素材的選擇
6.4.3活動頁面設計技巧
案例分析 家電促銷活動頁面設計分析
實戰案例 設計網店活動主題頁面
6.5本章小結
網路書店
類別
折扣
價格
-
新書$479