第 1章 初識(shí)UI設(shè)計(jì) 1.1 UI設(shè)計(jì)的相關(guān)概念 002 1.1.1 UI設(shè)計(jì)的基本概念 002 1.1.2 UI與WUI、GUI的關(guān)系 002 1.1.3 UI設(shè)計(jì)的常用術(shù)語(yǔ) 002 1.1.4 UI設(shè)計(jì)常用軟件 003 1.2 UI設(shè)計(jì)項(xiàng)目流程 003 1.2.1 項(xiàng)目設(shè)計(jì)流程 003 1.2.2 UI設(shè)計(jì)流程 004 1.3 UI設(shè)計(jì)的風(fēng)格表現(xiàn) 004 1.4 UI設(shè)計(jì)的行業(yè)發(fā)展 006 1.4.1 UI設(shè)計(jì)行業(yè)現(xiàn)狀 006 1.4.2 UI設(shè)計(jì)發(fā)展趨勢(shì) 008 1.5 UI設(shè)計(jì)的學(xué)習(xí)方法 008 第 2章 圖標(biāo)設(shè)計(jì) 2.1 圖標(biāo)的基礎(chǔ)知識(shí) 012 2.1.1 圖標(biāo)的概念 012 2.1.2 圖標(biāo)設(shè)計(jì)的流程 013 2.1.3 圖標(biāo)設(shè)計(jì)的原則 014 2.2 圖標(biāo)的設(shè)計(jì)規(guī)范 016 2.2.1 App圖標(biāo)設(shè)計(jì)規(guī)范 016 2.2.2 網(wǎng)頁(yè)圖標(biāo)設(shè)計(jì)規(guī)范 020 2.2.3 軟件圖標(biāo)設(shè)計(jì)規(guī)范 022 2.3 圖標(biāo)的風(fēng)格類型 026 2.3.1 像素風(fēng)格 026 2.3.2 扁平化風(fēng)格 027 2.3.3 擬物化風(fēng)格 030 2.3.4 微擬物化風(fēng)格 030 2.3.5 立體風(fēng)格 030 2.4 課堂案例——繪制扁平化風(fēng)格的不透明色塊面性圖標(biāo) 031 2.5 課堂案例——繪制扁平化風(fēng)格的不透明疊加效果圖標(biāo) 033 2.6 課堂練習(xí) 037 2.6.1 繪制扁平化風(fēng)格的單色面性圖標(biāo) 037 2.6.2 繪制扁平化風(fēng)格的微漸變面性圖標(biāo) 037 2.7 課后習(xí)題 038 2.7.1 繪制扁平化風(fēng)格的光影效果圖標(biāo) 038 2.7.2 繪制扁平化風(fēng)格的折紙投影圖標(biāo) 038 第3章 App界面設(shè)計(jì) 3.1 App基礎(chǔ)知識(shí) 040 3.1.1 App的概念 040 3.1.2 App的設(shè)計(jì)流程 040 3.1.3 App的設(shè)計(jì)原則 043 3.2 App的設(shè)計(jì)規(guī)范 047 3.2.1 App設(shè)計(jì)的尺寸 047 3.2.2 App設(shè)計(jì)的結(jié)構(gòu) 050 3.2.3 App設(shè)計(jì)的布局 052 3.2.4 App設(shè)計(jì)的文字 054 3.3 App常用界面類型 057 3.3.1 閃屏頁(yè) 057 3.3.2 引導(dǎo)頁(yè) 058 3.3.3 首頁(yè) 060 3.3.4 個(gè)人中心頁(yè) 061 3.3.5 詳情頁(yè) 062 3.3.6 注冊(cè)登錄頁(yè) 062 3.4 課堂案例——制作Delicacy App界面 063 3.5 課堂案例——制作侃侃App界面 094 3.6 課堂練習(xí)——制作美食到家 App界面 117 3.7 課后習(xí)題——制作美食來(lái)了 App界面 118 第4章 網(wǎng)頁(yè)界面設(shè)計(jì) 4.1 網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)知識(shí) 120 4.1.1 網(wǎng)頁(yè)界面設(shè)計(jì)的概念 120 4.1.2 網(wǎng)頁(yè)界面設(shè)計(jì)的流程 120 4.1.3 網(wǎng)頁(yè)界面設(shè)計(jì)的原則 122 4.2 網(wǎng)頁(yè)界面設(shè)計(jì)的規(guī)范 124 4.2.1 網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸 124 4.2.2 網(wǎng)頁(yè)界面設(shè)計(jì)的結(jié)構(gòu) 126 4.2.3 網(wǎng)頁(yè)界面設(shè)計(jì)的布局 126 4.2.4 網(wǎng)頁(yè)界面設(shè)計(jì)的文字 128 4.3 網(wǎng)頁(yè)設(shè)計(jì)常用界面類型 129 4.4 課堂案例——制作裝飾家居電商網(wǎng)站界面 131 4.4.1 制作裝飾家居電商網(wǎng)站首頁(yè) 131 4.4.2 制作裝飾家居電商網(wǎng)站產(chǎn)品列表頁(yè) 140 4.4.3 制作裝飾家居電商網(wǎng)站產(chǎn)品詳情頁(yè) 149 4.5 課堂練習(xí)——制作Easy Life家居電商網(wǎng)站界面 161 4.6 課后習(xí)題——制作Artsy家居電商網(wǎng)站界面 162 第5章 軟件界面設(shè)計(jì) 5.1 軟件界面設(shè)計(jì)基礎(chǔ)知識(shí) 164 5.1.1 軟件界面設(shè)計(jì)的概念 164 5.1.2 軟件界面設(shè)計(jì)的流程 164 5.1.3 軟件界面設(shè)計(jì)的原則 165 5.2 軟件界面設(shè)計(jì)的規(guī)范 166 5.2.1 軟件界面設(shè)計(jì)的尺寸及單位 167 5.2.2 軟件界面設(shè)計(jì)的結(jié)構(gòu) 167 5.2.3 軟件界面設(shè)計(jì)的布局 167 5.2.4 軟件界面設(shè)計(jì)的文字 170 5.3 軟件常用界面類型 170 5.4 課堂案例——制作More音樂(lè)播放器軟件界面 172 5.4.1 制作More音樂(lè)播放器軟件首頁(yè) 172 5.4.2 制作More音樂(lè)播放器軟件歌單頁(yè) 184 5.4.3 制作More音樂(lè)播放器軟件歌曲列表頁(yè) 190 5.5 課堂練習(xí)——制作Song音樂(lè)播放器軟件界面 197 5.6 課后習(xí)題——制作CoolPlayer音樂(lè)播放器軟件界面 198 第6章 游戲界面設(shè)計(jì) 6.1 游戲界面設(shè)計(jì)的基礎(chǔ)知識(shí) 200 6.1.1 游戲界面設(shè)計(jì)的概念 200 6.1.2 游戲界面設(shè)計(jì)的流程 200 6.1.3 游戲界面設(shè)計(jì)的原則 202 6.2 游戲界面設(shè)計(jì)的規(guī)范 203 6.2.1 游戲界面設(shè)計(jì)的尺寸 203 6.2.2 游戲界面設(shè)計(jì)的結(jié)構(gòu) 203 6.2.3 游戲界面設(shè)計(jì)的布局 203 6.2.4 游戲界面設(shè)計(jì)的文字 205 6.3 游戲常用界面的類型 205 6.4 課堂案例——制作Boom游戲界面 207 6.5 課堂練習(xí)——制作水果消消消游戲界面 216 6.6 課后習(xí)題——制作Pet Fun游戲界面 216