本書按照高職高專計算機多媒體技術專業教學大綱的要求編寫，是一本全面的UI界面設計與制作的基礎教程。本書以培養學生的UI設計理念、方法為基本，結合Photoshop軟件中常用的各種工具和方法，有針對性地剖析設計制作的實施策略與過程，以訓練和提高學生UI界面設計制作技能。
全書內容共7章，分為三個部分。第一部分是UI界面設計相關知識的介紹，包括什么是UI界面設計、UI界面設計的常用方法和設計工具、UI設計與用戶體驗的關系等基本知識。第二部分是各種UI界面常用元素的制作。第三部分是UI界面設計典型實戰，通過4個遞進的設計實例，從任務分析、功能定位、制作步驟入手對界面設計制作進行全過程講解。
本書結構合理、內容翔實、圖文并茂，在項目中講述Photoshop CC的要點和難點，將藝術設計的知識與技巧融入其中，引導讀者進行思考及軟件操作實踐，提升讀者的審美、審藝能力。
第一部分 知識準備
第1章 UI界面設計相關知識
1.1 UI界面設計
1.1.1 UI設計的概念
1.1.2 UI設計的流程
1.1.3 UI界面設計的規范
1.1.4 UI界面設計常用工具
1.2 UI界面設計與用戶體驗
1.2.1 UI界面設計與用戶體驗
1.2.2 影響用戶體驗的因素
1.3 知識拓展
1.3.1 Photoshop CC入門
1.3.2 Photoshop CC精彩新功能
1.3.3 圖像常用基本操作
1.3.4 選區的基本操作
第一部分 知識準備
第1章 UI界面設計相關知識
1.1 UI界面設計
1.1.1 UI設計的概念
1.1.2 UI設計的流程
1.1.3 UI界面設計的規范
1.1.4 UI界面設計常用工具
1.2 UI界面設計與用戶體驗
1.2.1 UI界面設計與用戶體驗
1.2.2 影響用戶體驗的因素
1.3 知識拓展
1.3.1 Photoshop CC入門
1.3.2 Photoshop CC精彩新功能
1.3.3 圖像常用基本操作
1.3.4 選區的基本操作
1.3.5 畫筆工具的應用
本章小結
第2章 UI界面設計的常用方法
2.1 UI界面設計中的設計方法
2.1.1 方法與方法論
2.1.2 認識論和設計方法
2.1.3 UI界面設計中實用的設計方法
2.2 UI界面設計中實用的構成方法
2.2.1 什么是構成
2.2.2 形式美法則
2.2.3 構成的思維方式
2.3 UI界面設計中實用的色彩搭配技巧
2.3.1 色彩的基本理論
2.3.2 色彩搭配法則
2.4 知識拓展——UI界面設計風格
2.4.1 扁平化
2.4.2 擬物化
2.4.3 卡通化
2.5 能力拓展——Photoshop CC中圖層的應用
2.5.1 圖層類別
2.5.2 圖層的基礎操作
2.5.3 圖層樣式
2.5.4 混合模式
2.5.5 Photoshop中的蒙版
2.5.6 漸變工具
本章小結
第二部分 牛刀小試
第3章 各種UI界面常用元素制作
3.1 常用圖形制作
3.1.1 圓形、圓角
3.1.2 多邊形
3.1.3 直線
3.2 常見控件制作
3.2.1 按鈕的制作
3.2.2 下拉選擇框的制作
3.2.3 滑動條的制作
3.2.4 TAB切換塊的制作
3.2.5 氣泡對話框的制作
3.3 創意圖標設計與制作
3.3.1 圖標設計技巧
3.3.2 利用Photoshop打造擬物化設計風格圖標
3.3.3 利用Photoshop打造四種扁平化設計風格圖標
3.4 知識拓展
3.4.1 圖標設計的趨勢——響應式圖標
3.4.2 路徑與形狀工具
3.4.3 擦除類工具
3.5 能力拓展——簡單網頁設計制作實例
本章小結
第三部分 UI界面設計典型實戰
第4章 操作型APP——計算器界面設計
4.1 界面設計任務分析
4.2 學習目標
4.3 制作步驟詳解
4.3.1 新建文件，確定尺寸規范
4.3.2 制作背景
4.3.3 制作狀態欄區域
4.3.4 制作顯示區細節
4.3.5 制作功能鍵區和數字鍵區細節
4.3.6 定稿輸出有效的設計方案
4.4 知識拓展
4.4.1 圖層組
4.4.2 APP界面布局設計
4.4.3 Photoshop外部素材的載入使用
4.5 能力拓展
4.5.1 拓展練習：水平儀UI界面設計
4.5.2 拓展練習：拼拼樂APP界面設計
4.5.3 獨立實踐
本章小結
第5章 實用型軟件——播放器界面設計
5.1 界面設計任務分析
5.2 學習目標
5.3 制作步驟詳解
5.3.1 創建播放器
5.3.2 播放器專輯信息部分制作
5.3.3 播放器播放按鈕部分制作
5.4 知識拓展
5.4.1 色彩的搭配
5.4.2 Photoshop中的色彩調整
5.5 能力拓展
5.5.1 拓展練習：設計制作DVD光盤圖標
5.5.2 拓展練習：設計制作金屬按鈕
5.5.3 拓展練習：為黑白照片調色
5.5.4 獨立實踐
本章小結
第6章 手機主題UI界面設計
6.1 界面設計任務分析
6.2 學習目標
6.3 制作步驟詳解
6.3.1 主體形象設計制作
6.3.2 手機壁紙設計制作
6.3.3 鎖屏設計制作
6.3.4 天氣插件制作
6.3.5 桌面圖標制作
6.4 知識拓展
6.4.1 手機界面設計原則
6.4.2 手機常用尺寸與圖標格式
6.5 能力拓展
6.5.1 拓展練習：ico圖標設計制作
6.5.2 拓展練習：偽扁平手機主題UI界面設計
6.5.3 獨立實踐
本章小結
第7章 Web界面設計實例——兒童節專題網頁設計
7.1 界面設計任務分析
7.2 學習目標
7.3 制作步驟詳解
7.3.1 設計制作頭部主圖
7.3.2 設計制作裝飾圖形
7.3.3 設計制作欄目“書籍系列”
7.3.4 設計制作欄目“服飾系列”
7.3.5 設計制作欄目“玩具系列”
7.3.6 設計制作底部區域
7.4 知識拓展
7.4.1 網站界面設計基本原則
7.4.2 網站界面的功能美與形式美
7.5 能力拓展
7.5.1 拓展練習：照射在透明玻璃窗上效果
7.5.2 拓展練習：Photoshop打造傾盆大雨效果
7.5.3 拓展練習：Photoshop打造電子商務網頁界面
7.5.4 全局觀念的強化
7.5.5 獨立實踐
本章小結
參考文獻
UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，主要包括三個部分：交互設計、用戶研究、界面設計。UI界面設計就像工業產品中的工業造型設計一樣，是產品的重要買點之一。一個友好、美觀的界面會給人帶來舒適的視覺享受，拉近人與產品的距離，為產品創造賣點。UI界面設計不是單純的美術繪畫，他需要定位使用者、使用環境、使用方式，并且配合軟件實現出來，為最終用戶而設計，是純粹的、科學性的藝術設計。隨著科技的不斷發展，互聯網迅猛發展和普及，各類電子設備功能越來越強大，基于計算機、手機、平板電腦等電子終端系統的相關軟件應運而生，這些產品設計的人性化已不僅僅局限于硬件的外觀，軟件系統已成為用戶直接操作和應用的主體，它會因美觀實用、操作便捷而為用戶所青睞。作為人機對話的主要途徑，UI界面設計的重要性不言而喻。
2013年全國UI設計人才需求缺口有35萬，未來10年預計該需求將達到100萬。面對這么大的一個人才市場，2012年，重慶正大軟件職業技術學院成功申請重慶市高等教育教學改革研究項目《構建“技藝融合”課程體系，實現網頁設計師專業方向創新人才培養》，希望通過該項目構建系統、完善的UI界面設計人才培養體系，為社會輸送新鮮血液，促進網絡市場的發展。
為進一步總結和推廣“技藝融合”課題研究成果，課題組特編寫本教材。書中充分體現理論夠用、加強實踐的高職教學理念，針對UI圖像界面設計，從用戶研究、交互設計入手，到灌輸視覺設計理念，再結合實例對設計全過程進行剖析、歸納和演繹，將“理論知識”、“軟件技術”與“藝術設計”各項元素充分融合。通過課題組的精心準備，本教材具有以下特點。
1．案例經典，呈現形式符合認知規律。在理論知識介紹之后，本教材設計了案例學習和典型實戰，由簡單到復雜、逐步遞進地講述了UI界面設計經典案例，在案例教學中深入對理論知識的學習理解，透視UI界面設計整個流程及技巧。
2．技藝融合，突出職業性，強化綜合適應能力的培養。本書將Photoshop CC軟件設計制作技術與藝術設計能力和產品策劃、用戶體驗融合在一起，采用任務驅動的教學模式，按照項目任務工作流程構建教學體系，利于讀者構建自身技藝融合的經驗體系。在任務完成后，設計了知識拓展與能力拓展模塊，保證知識的拓展性和豐富性，同時培養學生知識的綜合運用能力和行業意識。
3．產教結合，結合企業實際項目編寫，突出實用性、實踐性。教材編寫過程中，結合重慶正大恒領網絡科技有限公司、重慶豬八戒網絡有限公司的實際項目完成，保證項目的實用實踐性強。
在本書的編寫過程中，主編張小玲負責全書架構設計、部分章節的編寫及全書統稿，主編張莉負責全書統籌安排及審稿，李欣欣、陶薇薇、楊桂宇任副主編，闞洪、嚴偉、石磊參與了部分章節的編寫。本書的編寫得到了重慶正大軟件職業技術學院互聯網工程系全體老師的大力支持和幫助，也得到了許多學生的支持，在此感謝他們對本書形成過程中提供的各種貢獻。
由于編者水平有限，書中難免會有疏漏和不足之處，敬請大家批評執政，以期共同進步。
編 者
新書資訊