第1篇 基礎(chǔ)入門篇
第01章 UI設(shè)計快速入行
1.1 UI設(shè)計的基礎(chǔ)...................................... 16
實例001 設(shè)計的要義..................................16
實例002 設(shè)計的創(chuàng)作思路............................16
實例003 設(shè)計的分類..................................17
實例004 什么是UI設(shè)計...............................17
實例005 UI設(shè)計的分類.............................. 18
實例006 UI設(shè)計的規(guī)范.............................. 18
實例007 設(shè)計基本原則.............................. 20
實例008 設(shè)計流程及方法............................21
實例009 項目需求分析...............................21
實例010 UI設(shè)計者與產(chǎn)品設(shè)計團隊.............. 22
1.2 Photoshop UI設(shè)計快速入門.................. 22
實例011 了解Photoshop和UI的關(guān)系.......... 22
實例012 啟動Photoshop應(yīng)用程序............. 23
實例013 退出Photoshop應(yīng)用程序............. 24
實例014 了解Photoshop工作界面............. 24
實例015 了解Photoshop的工具箱............. 26
實例016 管理Photoshop面板................... 29
實例017 管理Photoshop工作窗口............. 30
實例018 優(yōu)化Photoshop系統(tǒng)參數(shù)..............31
實例019 控制Photoshop圖像窗口............. 32
實例020 控制Photoshop圖像顯示............. 35
實例021 控制Photoshop圖像畫布............. 40
實例022 應(yīng)用Photoshop輔助工具..............41
1.3 圖像處理基本操作................................. 46
實例023 新建文件.................................... 46
實例024 存儲文件.................................... 47
實例025 關(guān)閉文件.................................... 48
實例026 管理圖像.................................... 49
實例027 自由變換圖像.............................. 50
實例028 選取顏色.................................... 56
實例029 填充顏色與圖案........................... 59
第02章 手機APP界面設(shè)計入門
2.1 手機界面設(shè)計的基礎(chǔ).............................. 62
實例030 什么是手機界面設(shè)計.................... 62
實例031 界面構(gòu)成的基本區(qū)域..................... 62
實例032 手機界面效果的規(guī)范性................. 63
實例033 手機界面效果的個性化................. 63
實例034 手機UI設(shè)計基本流程.................... 64
實例035 手機界面設(shè)計常用的5種布局........ 65
2.2 手機界面的視覺效果.............................. 66
實例036 簡約明快型................................. 67
實例037 趣味與獨創(chuàng)型.............................. 67
實例038 高貴華麗型................................. 68
2.3 安卓與蘋果手機系統(tǒng)組件介紹.................. 68
實例039 安卓系統(tǒng)基礎(chǔ)組件....................... 68
實例040 蘋果系統(tǒng)基礎(chǔ)組件....................... 69
第2篇 手機APP篇
第03章 手機APP常用元素設(shè)計
3.1 了解手機APP常用元素.......................... 72
實例041 手機APP常用圖形元素................. 72
實例042 手機APP常用控件....................... 72
實例043 手機APP啟動圖標(biāo)....................... 74
3.2 手機APP常用元素設(shè)計.......................... 74
實例044 完成按鈕設(shè)計.............................. 74
實例045 選項框設(shè)計................................. 78
實例046 電話圖標(biāo)設(shè)計.............................. 83
3.3 手機APP Logo設(shè)計案例演練.................. 87
實例047 音樂Logo設(shè)計............................ 87
實例048 照片Logo設(shè)計............................ 90
實例049 視頻Logo設(shè)計............................ 95
3.4 手機APP常用元素設(shè)計案例演練............. 100
實例050 搜索框設(shè)計................................100
實例051 解鎖滑塊設(shè)計.............................103
實例052 背光時間列表框設(shè)計...................107
第04章 手機APP登錄界面設(shè)計
4.1 手機APP登錄界面設(shè)計理論....................114
實例053 什么是登錄界面設(shè)計................... 114
實例054 登錄界面設(shè)計的分類................... 114
實例055 登錄界面的設(shè)計原則................... 115
實例056 登錄界面的構(gòu)成元素................... 115
實例057 登錄界面的常見布局................... 116
4.2 手機微信登錄界面設(shè)計..........................116
實例058 設(shè)計界面背景效果...................... 116
實例059 設(shè)計界面主體效果...................... 117
實例060 設(shè)計界面整體效果...................... 119
4.3 手機WiFi登錄界面設(shè)計.........................121
實例061 設(shè)計界面背景效果....................... 121
實例062 設(shè)計界面按鈕效果......................122
實例063 設(shè)計界面復(fù)選框效果...................126
實例064 設(shè)計界面細節(jié)效果......................128
實例065 設(shè)計界面文字效果...................... 131
4.4 手機QQ登錄界面設(shè)計......................... 132
實例066 設(shè)計界面背景效果......................132
實例067 設(shè)計界面主體效果......................133
實例068 設(shè)計界面整體效果......................137
4.5 手機云空間登錄界面設(shè)計...................... 139
實例069 手機云空間背景效果...................140
實例070 手機云空間主體效果................... 141
實例071 手機云空間裝飾效果....................144
實例072 手機云空間整體效果...................145
第05章 手機實用APP界面設(shè)計
5.1 安卓與蘋果手機系統(tǒng)組件介紹................. 149
實例073 安卓手機數(shù)字鍵盤設(shè)計................149
實例074 安卓手機音量列表框設(shè)計.............153
實例075 蘋果手機日歷圖標(biāo)設(shè)計............... 158
實例076 蘋果手機日歷表設(shè)計...................162
實例077 蘋果手機已用空間檢測區(qū)設(shè)計......165
5.2 安卓手機智能撥號界面設(shè)計................... 168
實例078 設(shè)計界面背景效果..................... 168
實例079 設(shè)計界面主體效果......................170
實例080 設(shè)計界面整體效果......................173
5.3 手機郵箱界面設(shè)計............................... 175
實例081 設(shè)計界面背景效果.......................175
實例082 設(shè)計界面主體效果......................176
實例083 設(shè)計界面整體效果..................... 178
5.4 安卓應(yīng)用程序界面設(shè)計......................... 180
實例084 設(shè)計界面背景效果..................... 180
實例085 設(shè)計界面主體效果...................... 181
實例086 設(shè)計界面整體效果..................... 184
5.5 蘋果手機磁盤檢測界面設(shè)計................... 185
實例087 設(shè)計界面背景效果..................... 185
實例088 設(shè)計界面主體效果..................... 186
實例089 設(shè)計界面整體效果..................... 188
5.6 蘋果手機天氣預(yù)報界面設(shè)計................... 189
實例090 設(shè)計界面背景效果..................... 189
實例091 設(shè)計界面主體效果....................... 191
實例092 設(shè)計界面整體效果......................195
第06章 手機商業(yè)性軟件類界面設(shè)計
6.1 軟件類熱門界面元素設(shè)計...................... 198
實例093 軟件按鈕設(shè)計........................... 198
實例094 軟件圖標(biāo)設(shè)計........................... 200
實例095 書架框設(shè)計.............................. 203
6.2 手機微鋪界面元素設(shè)計......................... 204
實例096 設(shè)計界面背景效果.................... 204
實例097 設(shè)計界面主體效果.................... 206
實例098 設(shè)計界面整體效果.................... 208
6.3 手機淘淘界面設(shè)計............................... 209
實例099 設(shè)計界面背景效果.................... 209
實例100 設(shè)計界面主體效果..................... 209
實例101 設(shè)計界面整體效果...................... 211
6.4 美亭秀秀界面設(shè)計.............................. 212
實例102 設(shè)計界面背景效果......................212
實例103 設(shè)計界面主體效果......................212
實例104 設(shè)計界面整體效果......................214
第07章 播放器熱門界面設(shè)計
7.1 手機播放器界面設(shè)計案例演練................. 219
實例105 功能按鈕設(shè)計............................219
實例106 播放進度滑塊設(shè)計..................... 220
實例107 播放區(qū)的播放界面設(shè)計.............. 223
7.2 手機視頻播放器界面設(shè)計...................... 226
實例108 設(shè)計界面背景效果..................... 226
實例109 設(shè)計界面主體效果..................... 227
實例110 設(shè)計界面整體效果..................... 230
7.3 手機APP音樂播放器界面設(shè)計................ 231
實例111 設(shè)計界面背景效果.......................231
實例112 設(shè)計界面主體效果..................... 233
實例113 設(shè)計界面整體效果..................... 235
第3篇 游戲界面篇
第08章 網(wǎng)頁熱門界面設(shè)計
8.1 網(wǎng)頁界面設(shè)計案例演練......................... 238
實例114 網(wǎng)頁導(dǎo)航欄設(shè)計........................ 238
實例115 網(wǎng)站導(dǎo)航按鈕設(shè)計..................... 239
實例116 借書網(wǎng)站按鈕設(shè)計......................241
實例117 網(wǎng)站Logo設(shè)計.......................... 244
實例118 網(wǎng)站橫幅廣告設(shè)計..................... 245
實例119 網(wǎng)站搜索表單設(shè)計..................... 247
8.2 企業(yè)文化宣傳網(wǎng)頁界面設(shè)計................... 250
實例120 設(shè)計界面背景效果..................... 250
實例121 設(shè)計界面主體效果......................251
實例122 設(shè)計界面整體效果..................... 253
8.3 婚紗店網(wǎng)頁界面設(shè)計............................ 254
實例123 設(shè)計界面背景效果..................... 254
實例124 設(shè)計界面主體效果..................... 255
實例125 設(shè)計界面整體效果..................... 258
8.4 攝影作品展網(wǎng)頁界面設(shè)計...................... 259
實例126 設(shè)計界面背景效果..................... 259
實例127 設(shè)計界面主體效果..................... 260
實例128 設(shè)計界面整體效果..................... 264
8.5 美食信息聚合網(wǎng)頁界面設(shè)計................... 265
實例129 設(shè)計界面背景效果..................... 265
實例130 設(shè)計界面主體效果..................... 268
實例131 設(shè)計界面整體效果......................271
第09章 游戲界面效果設(shè)計
9.1 游戲界面設(shè)計案例演練......................... 277
實例132 登錄文本框設(shè)計........................ 277
實例133 信息提示框設(shè)計........................ 279
實例134 游戲主題設(shè)計............................281
9.2 臺球高手游戲界面設(shè)計......................... 284
實例135 設(shè)計界面背景效果..................... 284
實例136 設(shè)計界面主體效果..................... 287
實例137 設(shè)計界面整體效果..................... 290
9.3 大魚抓小魚游戲界面設(shè)計...................... 291
實例138 設(shè)計界面背景效果......................291
實例139 設(shè)計界面主體效果..................... 292
實例140 設(shè)計界面整體效果..................... 294
第10章 手機游戲熱門界面設(shè)計
10.1 手機游戲熱門元素設(shè)計........................ 297
實例141 操作鼠標(biāo)形狀設(shè)計..................... 297
實例142 文字修飾設(shè)計........................... 299
實例143 游戲按鈕樣式設(shè)計......................301
10.2 手機休閑游戲界面設(shè)計....................... 303
實例144 設(shè)計界面背景效果..................... 303
實例145 設(shè)計界面主體效果..................... 304
實例146 設(shè)計界面整體效果..................... 305
10.3 寶寶猜謎游戲界面設(shè)計....................... 307
實例147 設(shè)計界面背景效果..................... 307
實例148 設(shè)計界面主體效果..................... 308
實例149 設(shè)計界面整體效果......................310