用戶界面是介于用戶與硬件之間,為彼此溝通而設(shè)計(jì)的相關(guān)媒介，因此用戶界面是人和機(jī)械溝通的橋梁。圖形用戶界面是指采用圖形方式的計(jì)算機(jī)操作的用戶界面，與早期計(jì)算機(jī)使用的命令行界面相比，圖形界面對于用戶來說在視覺上更易于接受。移動(dòng)應(yīng)用圖形用戶界面,簡稱移動(dòng)UI,是指應(yīng)用在各類移動(dòng)終端上的使用圖形用戶界面的統(tǒng)稱。其主要作用為人機(jī)交互，提供操作邏輯，達(dá)到界面美觀的整體效果。一個(gè)好的移動(dòng)UI可以提升產(chǎn)品的個(gè)性和品位，為用戶帶來舒適、簡單、自由的使用體驗(yàn)，同時(shí)也可以體現(xiàn)出產(chǎn)品的基本定位和特色。
隨著智能終端（包括手機(jī)、智能手表等）逐漸成為每個(gè)人生活中必不可少的一部分，隨之而來的是移動(dòng)終端上人們?nèi)粘Ｊ褂玫母黝悜?yīng)用成為手機(jī)用戶和商家爭相關(guān)注的焦點(diǎn)，同時(shí)也成為未來社會中大數(shù)據(jù)來源的重要平臺，而一款移動(dòng)應(yīng)用的用戶體驗(yàn)度直接決定了該款應(yīng)用的成敗，同時(shí)移動(dòng)UI設(shè)計(jì)的優(yōu)劣在很大程度上決定了用戶的體驗(yàn)度。因此移動(dòng)UI設(shè)計(jì)師成為很多公司和企業(yè)都非常看重的人才。
Photoshop是Adobe公司開發(fā)的用于圖像處理的應(yīng)用軟件，在圖像編輯、制作、處理等方面的功能強(qiáng)大，目前廣泛應(yīng)用于美術(shù)設(shè)計(jì)、彩色印刷、海報(bào)設(shè)計(jì)等。由于互聯(lián)網(wǎng)產(chǎn)業(yè)的加速發(fā)展，該軟件逐漸受到PC端網(wǎng)站、移動(dòng)應(yīng)用領(lǐng)域和各種移動(dòng)智能終端智能應(yīng)用的UI設(shè)計(jì)領(lǐng)域的歡迎，已成為這些領(lǐng)域流行的圖像處理應(yīng)用軟件。該軟件支持RGB模式、灰度模式、位圖模式、索引模式等多種圖像模式，支持PSD、BMP、TIFF、JPEG、GIF等多種文件格式圖像的處理。在該軟件中，可對圖像進(jìn)行裁剪、上色、圖像參數(shù)調(diào)整，并可使用多種風(fēng)格的濾鏡進(jìn)行處理，更適合UI設(shè)計(jì)中多種交互效果的設(shè)計(jì)。
本書主要內(nèi)容
本書以Photoshop CC為平臺編寫。本書全面、系統(tǒng)地介紹了移動(dòng)UI設(shè)計(jì)的基礎(chǔ)知識、設(shè)計(jì)工具的使用及界面設(shè)計(jì)實(shí)戰(zhàn)等。全書分為3篇，分別為移動(dòng)UI設(shè)計(jì)的入門篇、進(jìn)階篇和實(shí)戰(zhàn)篇，共11章，分別介紹了移動(dòng)UI設(shè)計(jì)基礎(chǔ)、移動(dòng)UI的圖像性質(zhì)、移動(dòng)UI圖像制作的常用環(huán)境、Photoshop制作移動(dòng)UI圖像的常用工具、移動(dòng)UI的色彩與風(fēng)格設(shè)計(jì)、移動(dòng)UI的文字設(shè)計(jì)、移動(dòng)UI的圖像選擇合成及特效處理、設(shè)計(jì)移動(dòng)應(yīng)用的圖標(biāo)、移動(dòng)UI控件設(shè)計(jì)案例、移動(dòng)應(yīng)用的界面設(shè)計(jì)案例、移動(dòng)UI設(shè)計(jì)的全流程設(shè)計(jì)案例。
本書特色
（1） 適合SPOC教學(xué)和混合式教學(xué)。
本書除了提供基本的知識外，還提供了大多數(shù)學(xué)生使用的基礎(chǔ)案例展示，也提供了有一定難度的創(chuàng)新任務(wù)設(shè)計(jì)，供不同學(xué)習(xí)層級的學(xué)生靈活掌握。同時(shí)，也為教師的教學(xué)模式的創(chuàng)新提供了便利。
（2） 重點(diǎn)突出、目的明確。
本書立足于基本理論，面向應(yīng)用技術(shù)，以需要、實(shí)用為尺度，以掌握概念、強(qiáng)化應(yīng)用為重點(diǎn)，加強(qiáng)理論知識和實(shí)際應(yīng)用的統(tǒng)一。
（3） 語言通俗、圖文并茂。
本書避免過多的專業(yè)詞匯，盡量貼近初學(xué)者的學(xué)習(xí)視角，語言通俗易懂。在理論學(xué)習(xí)、過程實(shí)踐、案例展示等多環(huán)節(jié)中融入了大量有助于理解的配圖，便于讀者理解。
（4） 敘述翔實(shí)，實(shí)例豐富。
本書有詳細(xì)的實(shí)例，每個(gè)例子都經(jīng)過精挑細(xì)選，有很強(qiáng)的針對性。書中的案例都有完整的操作過程，而且非常簡潔和高效，便于讀者學(xué)習(xí)和調(diào)試。
配套資源
為便于教學(xué)，本書配有150分鐘微課視頻、案例素材、軟件安裝包、教學(xué)課件、教學(xué)大綱、教案、教學(xué)日歷、實(shí)驗(yàn)教學(xué)計(jì)劃書。
（1） 獲取微課視頻方式： 讀者可以先掃描本書封底的文泉云盤防盜碼，再掃描書中相應(yīng)的視頻二維碼，觀看教學(xué)視頻。
（2） 獲取案例素材和軟件安裝包方式： 先掃描本書封底的文泉云盤防盜碼，再掃描下方二維碼，即可獲取。
源文件與案例素材
軟件安裝包
（3） 其他配套資源可以掃描本書封底的書圈二維碼下載。
讀者對象
本書主要面向移動(dòng)UI設(shè)計(jì)的愛好者和從事移動(dòng)UI教育的教師，適合全國高等學(xué)校的學(xué)生及UI設(shè)計(jì)領(lǐng)域相關(guān)人員使用。
本書由西安工程大學(xué)計(jì)算機(jī)科學(xué)學(xué)院薛濤院長和牟莉副教授主審，朱欣娟教授組織規(guī)劃，參加編寫工作的有郭繼遠(yuǎn)、孫浩文、姚艷、童小凱、周曉蕾、李惠雯、陸妍、陳潞瀅、樊超宇、李堃和閆麗娟，本書后一章引用了郭繼遠(yuǎn)指導(dǎo)大學(xué)生創(chuàng)新創(chuàng)業(yè)項(xiàng)目的研究資料。此外霍煒和白新國參加了的書稿的審閱工作。
由于時(shí)間倉促，加之編者水平有限，疏漏之處在所難免，誠懇地期望得到各領(lǐng)域的專家和廣大讀者的批評指正。
編者
2021年6月
第1篇移動(dòng)UI設(shè)計(jì)入門
第1章移動(dòng)UI設(shè)計(jì)基礎(chǔ)
本章學(xué)習(xí)目標(biāo)
1.1認(rèn)識移動(dòng)UI
1.1.1移動(dòng)UI概念
1.1.2移動(dòng)UI與平面UI的區(qū)別
1.2移動(dòng)UI設(shè)計(jì)的特點(diǎn)
1.3移動(dòng)設(shè)備的界面設(shè)計(jì)規(guī)范
1.3.1iOS的移動(dòng)設(shè)備的界面設(shè)計(jì)規(guī)范
1.3.2Android的移動(dòng)設(shè)備的界面設(shè)計(jì)規(guī)范
創(chuàng)新任務(wù)設(shè)計(jì)
第2篇移動(dòng)UI設(shè)計(jì)進(jìn)階
第2章移動(dòng)UI的圖像性質(zhì)
本章學(xué)習(xí)目標(biāo)
2.1位圖與矢量圖形
2.1.1位圖圖形
2.1.2矢量圖形
2.2像素與分辨率
2.3圖像顏色模式
2.4存儲文件格式
基礎(chǔ)案例展示
創(chuàng)新任務(wù)設(shè)計(jì)
第3章移動(dòng)UI圖像制作的常用環(huán)境
本章學(xué)習(xí)目標(biāo)
3.1移動(dòng)UI制作常用環(huán)境的認(rèn)識
3.1.1認(rèn)識菜單欄
3.1.2認(rèn)識工具箱
3.1.3認(rèn)識工具屬性欄
3.1.4認(rèn)識圖像編輯窗口
3.1.5認(rèn)識調(diào)板
3.2移動(dòng)UI圖像文件制作輔助工具的使用
3.2.1圖像文件的查看
3.2.2輔助工具的使用
基礎(chǔ)案例展示
創(chuàng)新任務(wù)設(shè)計(jì)
第4章Photoshop制作移動(dòng)UI圖像的常用工具
本章學(xué)習(xí)目標(biāo)
4.1選區(qū)工具
4.1.1選框工具組
4.1.2套索工具組
4.1.3魔棒和快速選擇工具
4.2鋼筆工具的使用
4.2.1鋼筆工具組
4.2.2路徑選擇工具組
4.3選區(qū)運(yùn)算
4.3.1選區(qū)相加
4.3.2選區(qū)相減
4.3.3選區(qū)相交
4.4選區(qū)的調(diào)整
4.4.1移動(dòng)選區(qū)及選區(qū)內(nèi)容
4.4.2修改選區(qū)
4.4.3變換選區(qū)
4.4.4反向
4.4.5色彩范圍
4.4.6擴(kuò)大選取
4.5填充工具組
4.5.1油漆桶工具
4.5.2漸變工具
基礎(chǔ)案例展示
創(chuàng)新任務(wù)設(shè)計(jì)
第5章移動(dòng)UI的色彩與風(fēng)格設(shè)計(jì)
本章學(xué)習(xí)目標(biāo)
5.1移動(dòng)UI的色彩
5.1.1色彩的三要素
5.1.2色彩應(yīng)用規(guī)律
5.1.3色彩與生活
5.1.4色彩的設(shè)計(jì)
5.1.5移動(dòng)UI常用的配色方案
5.2手動(dòng)調(diào)整移動(dòng)UI圖像的色彩
5.2.1色階
5.2.2曲線
5.2.3色彩平衡調(diào)整
5.2.4亮度/對比度
5.2.5色相/飽和度
5.2.6曝光度
5.3自動(dòng)調(diào)整移動(dòng)UI圖像的色彩
5.3.1去色
5.3.2反相
5.4特效調(diào)整移動(dòng)UI圖像的色彩
5.4.1匹配顏色
5.4.2替換顏色
5.4.3通道混合
5.4.4漸變映射
5.4.5照片濾鏡
基礎(chǔ)案例展示
創(chuàng)新任務(wù)設(shè)計(jì)
第6章移動(dòng)UI的文字設(shè)計(jì)
本章學(xué)習(xí)目標(biāo)
6.1文字設(shè)計(jì)理論
6.1.1字體基礎(chǔ)術(shù)語
6.1.2兩種設(shè)備中的字體
6.1.3文字的大小規(guī)范
6.1.4文字的顏色規(guī)范
6.1.5如何讓文字在App中更有層級
6.1.6字體排版建議
6.2為移動(dòng)UI圖像添加文字
6.2.1文字工具的使用
6.2.2點(diǎn)文字的輸入
6.2.3段落文字的輸入
6.2.4點(diǎn)文字與段落文字轉(zhuǎn)化
6.2.5路徑文字
6.3設(shè)置移動(dòng)UI圖像的文字格式
6.3.1文字屬性的設(shè)置
6.3.2段落屬性的設(shè)置
6.3.3設(shè)置文字的方向互換
6.3.4創(chuàng)建變形文字
創(chuàng)新任務(wù)設(shè)計(jì)
第7章移動(dòng)UI的圖像選擇合成及特效處理
本章學(xué)習(xí)目標(biāo)
7.1圖層的理解
7.1.1圖層面板
7.1.2圖層的基本操作
7.1.3常用快捷鍵
7.2圖層的混合模式
7.2.1圖層混合模式基本概念
7.2.2圖層混合模式原理介紹
7.3圖層樣式
7.3.1圖層樣式的編輯
7.3.2十大圖層樣式
7.4使用蒙版編輯移動(dòng)UI圖像
7.4.1圖層蒙版
7.4.2圖層蒙版的基本操作
7.4.3矢量蒙版
7.4.4剪貼蒙版
基礎(chǔ)案例展示
創(chuàng)新任務(wù)設(shè)計(jì)
第3篇移動(dòng)UI設(shè)計(jì)實(shí)戰(zhàn)
第8章設(shè)計(jì)移動(dòng)應(yīng)用的圖標(biāo)
本章學(xué)習(xí)目標(biāo)
8.1圖標(biāo)設(shè)計(jì)概述
8.1.1圖標(biāo)設(shè)計(jì)原則
8.1.2圖標(biāo)設(shè)計(jì)規(guī)范
8.1.3圖標(biāo)手繪樣稿
8.1.4圖標(biāo)設(shè)計(jì)的風(fēng)格分類
8.2移動(dòng)UI圖標(biāo)制作實(shí)例
8.2.1電話圖標(biāo)制作
8.2.2微信圖標(biāo)制作
8.3移動(dòng)UI半扁平化圖標(biāo)設(shè)計(jì)
8.4移動(dòng)UI立體圖標(biāo)的設(shè)計(jì)
8.4.1擬物時(shí)鐘終圖標(biāo)的制作
8.4.2擬物化照相機(jī)圖標(biāo)制作
創(chuàng)新任務(wù)設(shè)計(jì)
第9章移動(dòng)UI控件設(shè)計(jì)案例
本章學(xué)習(xí)目標(biāo)
9.1開關(guān)設(shè)計(jì)
9.1.1系統(tǒng)開關(guān)設(shè)計(jì)實(shí)例
9.1.2開關(guān)優(yōu)秀案例賞析
9.2搜索框設(shè)計(jì)
9.2.1常規(guī)搜索框設(shè)計(jì)實(shí)例
9.2.2搜索框優(yōu)秀案例賞析
9.3對話框設(shè)計(jì)
9.3.1時(shí)尚對話框設(shè)計(jì)實(shí)例
9.3.2對話框優(yōu)秀案例賞析
9.4標(biāo)簽設(shè)計(jì)
9.4.1科技感標(biāo)簽欄設(shè)計(jì)實(shí)例
9.4.2標(biāo)簽欄優(yōu)秀案例賞析
9.5天氣控件設(shè)計(jì)
9.5.1天氣控件設(shè)計(jì)實(shí)例
9.5.2天氣界面優(yōu)秀案例賞析
9.6進(jìn)度條設(shè)計(jì)
9.6.1進(jìn)度條設(shè)計(jì)實(shí)例
9.6.2進(jìn)度條優(yōu)秀案例賞析
創(chuàng)新任務(wù)設(shè)計(jì)
第10章移動(dòng)應(yīng)用的界面設(shè)計(jì)案例
本章學(xué)習(xí)目標(biāo)
10.1天氣界面設(shè)計(jì)
10.1.1制作背景
10.1.2繪制個(gè)界面
10.1.3添加文字素材
10.2鬧鐘界面設(shè)計(jì)
10.2.1制作背景
10.2.2繪制界面內(nèi)容
10.3音樂播放器界面
10.3.1音樂播放器主界面設(shè)計(jì)
10.3.2top10界面設(shè)計(jì)
10.4加載條界面設(shè)計(jì)
10.4.1制作背景并繪制狀態(tài)欄
10.4.2添加文字
創(chuàng)新任務(wù)設(shè)計(jì)
第11章移動(dòng)UI設(shè)計(jì)的全流程設(shè)計(jì)案例
本章學(xué)習(xí)目標(biāo)
11.1口袋工程校園移動(dòng)應(yīng)用設(shè)計(jì)案例
11.1.1需求分析
11.1.2競品分析
11.1.3交互架構(gòu)設(shè)計(jì)
11.1.4導(dǎo)航設(shè)計(jì)
11.1.5按鈕設(shè)計(jì)
11.1.6界面設(shè)計(jì)
11.2聚搭實(shí)用造型搭配移動(dòng)應(yīng)用設(shè)計(jì)案例
11.2.1需求分析
11.2.2競品分析
11.2.3用戶體驗(yàn)設(shè)計(jì)
11.2.4交互架構(gòu)設(shè)計(jì)
11.2.5導(dǎo)航設(shè)計(jì)
11.2.6按鈕設(shè)計(jì)
11.2.7界面設(shè)計(jì)
參考文獻(xiàn)
書單推薦
