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