觸動人心的手機端頁面設計

第1部分 手機端設計的趨勢

第1章 手機上網(wǎng)已成主流 / 3
1．1 手機端用戶到底有多少 / 4
1．2 手機端設計的分類 / 4
--1．2．1 APP / 4
--1．2．2 手機端網(wǎng)站 / 5
--1．2．3 其他頁面設計 / 7
1．3 小結 / 7

第2章 手機端相關市場調查 / 9
2．1 手機品牌與屏幕尺寸統(tǒng)計 / 10
2．2 手機屏幕分辨率統(tǒng)計 / 11
2．3 Photoshop 小技巧 / 12
2．4 小結 / 14

第2部分 細談手機端頁面設計 / 15

第3章 手機端頁面設計的預備知識 / 17
3．1 了解手機用戶的視線 / 18
3．2 手機端2 秒原則 / 20
3．3 小結 / 21

第4章 手機端頁面架構 / 23
4．1 手機引導頁 / 24
4．2 手機網(wǎng)站 / 25
--4．2．1 單屏手機站 / 26
--4．2．2 其他手機站 / 27
4．3 手機專題 / 29
--4．3．1 單屏滑動專題 / 29
--4．3．2 整頁專題 / 30
4．4 小結 / 32

第5章 手機端頁面設計元素 / 33
5．1 文字設計 / 34
--5．1．1 字號的選擇 / 34
--5．1．2 字體的選擇 / 35
5．2 顏色設計 / 37
--5．2．1 選主色 / 37
--5．2．2 對比色 / 41
--5．2．3 相近色 / 45
--5．2．4 選色工具 / 46
5．3 圖形設計 / 49
--5．3．1 單個形狀的應用 / 49
--5．3．2 多個形狀的應用 / 52
--5．3．3 Photoshop 形狀小技巧 / 53
5．4 留白很重要 / 56
--5．4．1 整體留白 / 56
--5．4．2 局部留白 / 61
5．5 布局設計 / 62
--5．5．1 上下布局 / 63
--5．5．2 左右布局 / 64
5．6 頁面配圖 / 65
--5．6．1 icon 的選擇 / 65
--5．6．2 其他圖片搭配 / 67
5．7 小結 / 69

第6章 手機端頁面設計提升 / 71
6．1 主流設計 / 72
--6．1．1 扁平化設計 / 72
--6．1．2 扁平立體結合 / 76
--6．1．3 扁平技巧 / 78
--6．1．4 Photoshop 制作長投影 / 79
--6．1．5 制作不規(guī)則圖形 / 83
6．2 Banner 設計 / 87
--6．2．1 Banner 的尺寸 / 87
--6．2．2 選用字體 / 89
--6．2．3 背景配圖 / 91
6．3 圖文并茂 / 93
--6．3．1 文字融入圖片 / 93
--6．3．2 圖文分離 / 95
--6．3．3 出格立體感 / 96
6．4 字體設計 / 97
--6．4．1 硬字體 / 97
--6．4．2 軟字體 / 98
--6．4．3 立體字體 / 99
--6．4．4 Photoshop 制作字體 / 101
6．5 點線面的組合 / 106
--6．5．1 點 / 106
--6．5．2 線 / 107
--6．5．3 面 / 108
--6．5．4 點線面結合技巧 / 110
6．6 營銷型頁面 / 114
--6．6．1 網(wǎng)站營銷概念 / 114
--6．6．2 營銷型網(wǎng)站要點 / 115
--6．6．3 手機營銷網(wǎng)站的技巧 / 117
6．7 小結 / 118

第3部分 案例分析

第7章 優(yōu)秀手機端頁面解析 / 121
7．1 購物類手機網(wǎng)站 / 122
7．2 信息類手機網(wǎng)站 / 138
7．3 行業(yè)類手機網(wǎng)站 / 151
7．4 手機專題頁 / 170
7．5 手機頁的各類廣告 / 177
7．6 小結 / 182