本書是移動端APP UI設計的自學教程,通過大量的綜合任務案例,介紹如何設計與制作移動端交互界面。
全書分為6個單元,分別介紹交互式UI設計基礎、交互式原型設計、Photoshop圖標設計、Illustrator
綜合圖標設計、UI界面設計以及UI動效設計基礎。其中涉及Axure RP、Photoshop、Illustrator、After
Effects等軟件的操作。
本書內容從兩條主線進行組織編寫,一條主線是實際操作案例,在案例選擇上由淺入深,循序漸進,另一條主線是基礎理論知識,兩條主線緊密融合,非常完整地展現(xiàn)了整個UI設計流程,幫助讀者融會貫通,制作出更好的移動APP UI作品。
本書結構清晰、語言簡潔、實例豐富、版式精美,可以作為高等職業(yè)院校、培訓機構的參考教材,也適合移動APP UI設計初、中級讀者及廣大UI設計愛好者和從業(yè)者閱讀。
本書結構清晰、語言簡潔、實例豐富,主要具有以下幾個特點:
。1)單元設計緊扣UI設計流程。首先讓讀者掌握UI設計的整體流程,然后分別按照UI設計的標準流程進行介紹,符合認知規(guī)律,使讀者學習后更容易在真實工作崗位中快速上手。
(2)基礎知識與操作任務緊密結合。本書摒棄了傳統(tǒng)教科書純理論式的教學,大量采用實際操作任務進行講解,在任務操作的基礎上輔助關鍵性基礎知識的講解,促進讀者理解。
。3)內容覆蓋更加完整,介紹更加深入直觀。UI全流程的內容涵蓋更加完整,目前大部分同類書籍對UI設計基本流程介紹不夠深入直觀,沒有關于Axure RP原型設計和動效設計的相關內容,對圖標和界面設計使用的軟件也只介紹了Photoshop。本書解決了以上問題,UI基本流程闡述更加深入,涵蓋Axure RP原型設計和動效設計,圖片設計軟件方面,對Photoshop、Illustrator的應用方法都做了簡要的闡述。
。4)有完整的教學案例和電子資源。教材案例完整,所有實例全部采用詳細步驟說明與實際操作相結合的編寫手法,使讀者通過閱讀文字與觀察操作步驟中的圖示,邊學邊操作。書中設計的案例均提供調用素材和源文件,并包含本書所有操作實例的高清多媒體有聲教學視頻。同時,為方便教師教學,還配備了PPT教學課件,以供參考。
本書由具有APP UI設計經驗的設計師和從事多年職業(yè)教育的高校教師共同編寫。在編寫之前大家有個共識,一線的APP UI設計師,盡管可能只需要做全流程中的一部分工作,但是需要對整個UI設計的流程有全面的認識,不僅要有熟練的軟件操作能力,而且要有較為扎實的理論功底,這樣才能在技術不斷更新的情況下保持優(yōu)秀的職業(yè)能力。
基于以上思考,編者對移動APP UI設計的全流程進行了仔細分析和梳理,在自身專業(yè)知識和從業(yè)經驗的基礎上,本書也借鑒了相關同行以及網(wǎng)絡資源中的內容組織方式。一方面將APP UI設計的學習過程分成六個階段,分別是了解UI設計基本概念、UI設計基本流程、交互式原型設計、圖標設計、界面設計以及UI動效設計;另一方面教材內容按兩條主線組織編寫,一條主線是實際操作任務案例,在案例選擇上由淺入深,循序漸進,每個任務設計成:任務描述→設計思路→任務實施→拓展任務;另一條主線是基礎理論知識。兩條主線緊密融合,非常完整地展現(xiàn)了整個UI設計流程。本書具體內容如下:
單元1 交互式UI設計基礎。通過認識我們的手機、認識手機APP兩個任務掌握手機屏幕的相關參數(shù)、APP UI界面的組成和設計要點。通過民宿APP UI設計任務,完整地了解整個設計過程。
單元2 交互式原型設計。以徜徉紅途APP項目為主線,完成用戶登錄、圖片輪播、首頁拖動及回彈、搜索旅游線路和省市級聯(lián)菜單等任務,讓讀者掌握利用Axure RP軟件繪制原型的方法。
單元3 Photoshop 圖標設計。通過扁平化和擬物化圖標設計任務,重點介紹圖標的風格區(qū)別和基本圖標設計的流程。
單元4 Illustrator綜合圖標設計。通過平面風格圖標、立體風格圖標、線性風格圖標、功能導航圖標、控件圖標等任務,介紹Illustrator的基本使用方法和綜合圖標設計的主要過程。
單元5UI界面設計。在單元二原型設計的基礎上,利用Photoshop完成具體UI界面的設計,包括引導頁、首頁、行程、定制頁面的設計等,了解UI界面設計的具體知識。
單元6 UI動效設計基礎。通過制作圖標動效和APP界面動效任務,介紹UI動效的基本設計思路、設計方法和After Effects的基本應用。
本書結構清晰、語言簡潔、實例豐富,主要具有以下幾個特點:
。1)單元設計緊扣UI設計流程。首先讓讀者掌握UI設計的整體流程,然后分別按照UI設計的標準流程進行介紹,符合認知規(guī)律,使讀者學習后更容易在真實工作崗位中快速上手。
。2)基礎知識與操作任務緊密結合。本書摒棄了傳統(tǒng)教科書純理論式的教學,大量采用實際操作任務進行講解,在任務操作的基礎上輔助關鍵性基礎知識的講解,促進讀者理解。
。3)內容覆蓋更加完整,介紹更加深入直觀。UI全流程的內容涵蓋更加完整,目前大部分同類書籍對UI設計基本流程介紹不夠深入直觀,沒有關于Axure RP原型設計和動效設計的相關內容,對圖標和界面設計使用的軟件也只介紹了Photoshop。本書解決了以上問題,UI基本流程闡述更加深入,涵蓋Axure RP原型設計和動效設計,圖片設計軟件方面,對Photoshop、Illustrator的應用方法都做了簡要的闡述。
(4)有完整的教學案例和電子資源。教材案例完整,所有實例全部采用詳細步驟說明與實際操作相結合的編寫手法,使讀者通過閱讀文字與觀察操作步驟中的圖示,邊學邊操作。書中設計的案例均提供調用素材和源文件,并包含本書所有操作實例的高清多媒體有聲教學視頻。同時,為方便教師教學,還配備了PPT教學課件,以供參考。
在學習本書時,除了熟練掌握Office辦公軟件外,一方面需要具備美術等基本設計素養(yǎng),可以自修平面、色彩構成等相關知識,增強設計美感;另一方面還需要掌握各類與設計相關的軟件使用方法。由于本書篇幅有限,其中涉及Photoshop、Axure RP、Illustrator、After Effects等軟件操作的介紹較為精簡,在學習過程中需要利用各類資源進一步強化理解和運用。本書配套資源請到http://www.tdpress.com/51eds/下載。
本書由阮進軍、孫握瑜任主編,周艷麗、朱麗進、江宏任副主編。具體編寫分工如下:孫握瑜編寫單元1、單元6,朱麗進編寫單元2,阮進軍編寫單元3,江宏編寫單元4,周艷麗編寫單元5。本書獲安徽省教育廳大規(guī)模在線開放課程(MOOC)示范項目《UI交互設計與實現(xiàn)》(編號:2018mooc447)資助。
由于編者知識水平有限,書中難免有疏漏和不足之處,懇請廣大讀者批評指正。
編 者
2020年5月本書由具有APP UI設計經驗的設計師和從事多年職業(yè)教育的高校教師共同編寫。在編寫之前大家有個共識,一線的APP UI設計師,盡管可能只需要做全流程中的一部分工作,但是需要對整個UI設計的流程有全面的認識,不僅要有熟練的軟件操作能力,而且要有較為扎實的理論功底,這樣才能在技術不斷更新的情況下保持優(yōu)秀的職業(yè)能力。
基于以上思考,編者對移動APP UI設計的全流程進行了仔細分析和梳理,在自身專業(yè)知識和從業(yè)經驗的基礎上,本書也借鑒了相關同行以及網(wǎng)絡資源中的內容組織方式。一方面將APP UI設計的學習過程分成六個階段,分別是了解UI設計基本概念、UI設計基本流程、交互式原型設計、圖標設計、界面設計以及UI動效設計;另一方面教材內容按兩條主線組織編寫,一條主線是實際操作任務案例,在案例選擇上由淺入深,循序漸進,每個任務設計成:任務描述→設計思路→任務實施→拓展任務;另一條主線是基礎理論知識。兩條主線緊密融合,非常完整地展現(xiàn)了整個UI設計流程。本書具體內容如下:
單元1 交互式UI設計基礎。通過認識我們的手機、認識手機APP兩個任務掌握手機屏幕的相關參數(shù)、APP UI界面的組成和設計要點。通過民宿APP UI設計任務,完整地了解整個設計過程。
單元2 交互式原型設計。以徜徉紅途APP項目為主線,完成用戶登錄、圖片輪播、首頁拖動及回彈、搜索旅游線路和省市級聯(lián)菜單等任務,讓讀者掌握利用Axure RP軟件繪制原型的方法。
單元3 Photoshop 圖標設計。通過扁平化和擬物化圖標設計任務,重點介紹圖標的風格區(qū)別和基本圖標設計的流程。
單元4 Illustrator綜合圖標設計。通過平面風格圖標、立體風格圖標、線性風格圖標、功能導航圖標、控件圖標等任務,介紹Illustrator的基本使用方法和綜合圖標設計的主要過程。
單元5UI界面設計。在單元二原型設計的基礎上,利用Photoshop完成具體UI界面的設計,包括引導頁、首頁、行程、定制頁面的設計等,了解UI界面設計的具體知識。
單元6 UI動效設計基礎。通過制作圖標動效和APP界面動效任務,介紹UI動效的基本設計思路、設計方法和After Effects的基本應用。
本書結構清晰、語言簡潔、實例豐富,主要具有以下幾個特點:
。1)單元設計緊扣UI設計流程。首先讓讀者掌握UI設計的整體流程,然后分別按照UI設計的標準流程進行介紹,符合認知規(guī)律,使讀者學習后更容易在真實工作崗位中快速上手。
。2)基礎知識與操作任務緊密結合。本書摒棄了傳統(tǒng)教科書純理論式的教學,大量采用實際操作任務進行講解,在任務操作的基礎上輔助關鍵性基礎知識的講解,促進讀者理解。
。3)內容覆蓋更加完整,介紹更加深入直觀。UI全流程的內容涵蓋更加完整,目前大部分同類書籍對UI設計基本流程介紹不夠深入直觀,沒有關于Axure RP原型設計和動效設計的相關內容,對圖標和界面設計使用的軟件也只介紹了Photoshop。本書解決了以上問題,UI基本流程闡述更加深入,涵蓋Axure RP原型設計和動效設計,圖片設計軟件方面,對Photoshop、Illustrator的應用方法都做了簡要的闡述。
。4)有完整的教學案例和電子資源。教材案例完整,所有實例全部采用詳細步驟說明與實際操作相結合的編寫手法,使讀者通過閱讀文字與觀察操作步驟中的圖示,邊學邊操作。書中設計的案例均提供調用素材和源文件,并包含本書所有操作實例的高清多媒體有聲教學視頻。同時,為方便教師教學,還配備了PPT教學課件,以供參考。
在學習本書時,除了熟練掌握Office辦公軟件外,一方面需要具備美術等基本設計素養(yǎng),可以自修平面、色彩構成等相關知識,增強設計美感;另一方面還需要掌握各類與設計相關的軟件使用方法。由于本書篇幅有限,其中涉及Photoshop、Axure RP、Illustrator、After Effects等軟件操作的介紹較為精簡,在學習過程中需要利用各類資源進一步強化理解和運用。本書配套資源請到http://www.tdpress.com/51eds/下載。
本書由阮進軍、孫握瑜任主編,周艷麗、朱麗進、江宏任副主編。具體編寫分工如下:孫握瑜編寫單元1、單元6,朱麗進編寫單元2,阮進軍編寫單元3,江宏編寫單元4,周艷麗編寫單元5。本書獲安徽省教育廳大規(guī)模在線開放課程(MOOC)示范項目《UI交互設計與實現(xiàn)》(編號:2018mooc447)資助。
由于編者知識水平有限,書中難免有疏漏和不足之處,懇請廣大讀者批評指正。
編 者
2020年5月
阮進軍,安徽商貿職業(yè)技術學院副教授,電子信息工程系主任。近5年主要成果:主持教育部高等職業(yè)教育創(chuàng)新發(fā)展行動計劃項目1項,國家職業(yè)教育專業(yè)教學資源庫課程建設項目1項,主持完成安徽省高校自然科學研究重點項目1項,主持完成省級質量工程項目1項,獲實用新型專利授權2項,指導學生參加全國職業(yè)院校技能大賽,獲得二等獎1項,本人參加安徽省信息化教學大賽獲得一等獎1項,獲得安徽省教學成果一等獎2項、二等獎3項、三等獎3項,發(fā)表教科研論文4篇,主編高職高專教材1部,參編2部。獲得的職業(yè)資格證書:(1) Oracle OCP認證;(2)微軟MCP認證工程師;(3)安徽省高等職業(yè)院校高級“雙師型”教師。孫握瑜,安徽商貿職業(yè)技術學院講師。獲得過的職業(yè)資格證書:(1)數(shù)據(jù)庫應用系統(tǒng)設計工程師;(2)微軟MCP認證工程師;(3)安徽省高等職業(yè)院!半p師型”教師(中級);(4)人工智能研發(fā)工程師。主要成果有:主持安徽省級重點科研項目1項,主持安徽省教育廳大規(guī)模在線開放課程(MOOC)示范項目《UI交互設計與實現(xiàn)》項目1項,參與安徽省《計算機網(wǎng)絡技術綜合改革試點》項目1項。教學成果和獎勵:(1)榮獲安徽省教學成果一等獎1次,榮獲安徽省教學成果二等獎4次,榮獲安徽省教學成果三等獎一次。副主副教材1種,參編教材1種。專利 2種。
單元1交互式UI設計基礎 1
認識我們的手機 1
任務1.1 查看手機屏幕相關參數(shù) 1
知識庫 2
一、屏幕(主屏)尺寸 2
二、屏幕分辨率 3
三、網(wǎng)點密度 4
四、像素密度 4
五、DPI和PPI 4
六、dp、pt、sp的概念 5
七、dp和px的轉換 5
八、像素比 6
認識手機APP 7
任務1.2 查看常見手機APP的界面組成 7
知識庫 8
一、 UI設計的概念 8
二、 手機UI設計 8
三、 手機UI設計要點 8
四、 APP界面組成說明 9
UI設計基本流程實操 11
任務1.3 民宿APP UI設計 12
知識庫 15
一、用戶需求 15
二、繪制草圖 16
三、繪制低保真原型(線框圖) 17
四、設計高保真原型(效果圖) 17
五、手機APP UI設計規(guī)范 17
單元2交互式原型設計 19
規(guī)劃軟件原型結構 19
任務2.1 徜徉紅途APP項目規(guī)劃 20
知識庫 23
一、認識Axure工作界面 23
二、頁面管理區(qū)域的使用 25
利用元件搭建APP原型界面 25
任務2.2 注冊界面搭建 25
知識庫 30
一、基本元件 30
二、表單元件 32
三、菜單和表格 34
四、下載并載入元件庫和自定義元件庫 35
利用動態(tài)面板制作輪播動態(tài)效果 36
任務2.3 動態(tài)面板實現(xiàn)輪播效果 37
知識庫 44
動態(tài)面板 44
利用母版設計APP主界面 46
任務2.4 母版設計導航模塊 46
知識庫 48
一、母版 48
二、母版創(chuàng)建方式 48
三、母版的拖放行為 49
利用變量制作交互效果 49
任務2.5 首頁拖動及回彈 50
知識庫 58
Axure提供了全局變量和局部變量 58
利用變量值在頁面間傳遞 58
任務2.6 搜索旅游線路 58
知識庫 65
變量值在頁面間傳遞 65
利用部件行為制作交互效果 65
任務2.7 省市級聯(lián)菜單 65
知識庫 73
部件行為 73
單元3Photoshop圖標設計 79
設計扁平化圖標 79
任務3.1 制作信封圖標 79
任務3.2 制作日歷圖標 82
任務3.3 制作“徜徉紅途APP”啟動圖標 84
任務3.4 制作折紙風格日歷圖標 89
知識庫 98
一、扁平化設計特點 98
二、扁平化設計原則 99
設計擬物化圖標 102
任務3.5 制作通訊錄圖標 102
任務3.6 制作指南針圖標 112
知識庫 122
一、擬物化設計的特點 122
二、擬物化和扁平化設計 122
單元4Illustrator綜合圖標設計 125
平面風格圖標設計 125
任務4.1 紅色旅游景點圖標設計 125
知識庫 132
圖標參考線繪制 132
立體風格圖標設計 135
任務4.2 友稅APP圖標設計 135
知識庫 144
形狀編輯工具 144
線性風格圖標設計 145
任務4.3 設計標簽欄圖標 145
知識庫 148
描邊面板 148
功能導航圖標設計 149
任務4.4 紅色之旅功能導航圖標設計 150
知識庫 154
路徑查找器 154
控件圖標設計 156
任務4.5 輸入文本框設計 156
知識庫 159
字符面板設置 159
任務4.6 滑塊圖標的設計 159
知識庫 163
漸變面板設置 163
單元5UI界面設計 165
制作“引導頁”頁面 165
任務5.1 制作徜徉紅途APP引導頁1 165
任務5.2 制作徜徉紅途APP引導頁2 170
任務5.3 制作徜徉紅途APP引導頁3 172
知識庫 175
制作“首頁”頁面 176
任務5.4 標簽欄導航制作 176
任務5.5 狀態(tài)欄制作 179
任務5.6 搜索欄制作 183
任務5.7 主界面的制作 184
知識庫 189
制作“行程”頁面 190
任務5.8 制作“行程”頁面 190
知識庫 196
制作“定制”頁面 196
任務5.9 制作“定制”頁面 196
知識庫 202
單元6UI動效設計基礎 203
制作圖標動效 203
任務6.1 設計圖標動效 203
APP引導頁動效 210
任務6.2 制作徜徉紅途APP引導頁動效 210
制作APP界面動效 215
任務6.3 備忘錄APP界面動效 215
知識庫 221
一、什么是移動APP動效設計 221
二、移動APP動效的作用 221
三、常用動效設計工具 222
四、圖標動效設計思路 222單元1交互式UI設計基礎 1
認識我們的手機 1
任務1.1 查看手機屏幕相關參數(shù) 1
知識庫 2
一、屏幕(主屏)尺寸 2
二、屏幕分辨率 3
三、網(wǎng)點密度 4
四、像素密度 4
五、DPI和PPI 4
六、dp、pt、sp的概念 5
七、dp和px的轉換 5
八、像素比 6
認識手機APP 7
任務1.2 查看常見手機APP的界面組成 7
知識庫 8
一、 UI設計的概念 8
二、 手機UI設計 8
三、 手機UI設計要點 8
四、 APP界面組成說明 9
UI設計基本流程實操 11
任務1.3 民宿APP UI設計 12
知識庫 15
一、用戶需求 15
二、繪制草圖 16
三、繪制低保真原型(線框圖) 17
四、設計高保真原型(效果圖) 17
五、手機APP UI設計規(guī)范 17
單元2交互式原型設計 19
規(guī)劃軟件原型結構 19
任務2.1 徜徉紅途APP項目規(guī)劃 20
知識庫 23
一、認識Axure工作界面 23
二、頁面管理區(qū)域的使用 25
利用元件搭建APP原型界面 25
任務2.2 注冊界面搭建 25
知識庫 30
一、基本元件 30
二、表單元件 32
三、菜單和表格 34
四、下載并載入元件庫和自定義元件庫 35
利用動態(tài)面板制作輪播動態(tài)效果 36
任務2.3 動態(tài)面板實現(xiàn)輪播效果 37
知識庫 44
動態(tài)面板 44
利用母版設計APP主界面 46
任務2.4 母版設計導航模塊 46
知識庫 48
一、母版 48
二、母版創(chuàng)建方式 48
三、母版的拖放行為 49
利用變量制作交互效果 49
任務2.5 首頁拖動及回彈 50
知識庫 58
Axure提供了全局變量和局部變量 58
利用變量值在頁面間傳遞 58
任務2.6 搜索旅游線路 58
知識庫 65
變量值在頁面間傳遞 65
利用部件行為制作交互效果 65
任務2.7 省市級聯(lián)菜單 65
知識庫 73
部件行為 73
單元3Photoshop圖標設計 79
設計扁平化圖標 79
任務3.1 制作信封圖標 79
任務3.2 制作日歷圖標 82
任務3.3 制作“徜徉紅途APP”啟動圖標 84
任務3.4 制作折紙風格日歷圖標 89
知識庫 98
一、扁平化設計特點 98
二、扁平化設計原則 99
設計擬物化圖標 102
任務3.5 制作通訊錄圖標 102
任務3.6 制作指南針圖標 112
知識庫 122
一、擬物化設計的特點 122
二、擬物化和扁平化設計 122
單元4Illustrator綜合圖標設計 125
平面風格圖標設計 125
任務4.1 紅色旅游景點圖標設計 125
知識庫 132
圖標參考線繪制 132
立體風格圖標設計 135
任務4.2 友稅APP圖標設計 135
知識庫 144
形狀編輯工具 144
線性風格圖標設計 145
任務4.3 設計標簽欄圖標 145
知識庫 148
描邊面板 148
功能導航圖標設計 149
任務4.4 紅色之旅功能導航圖標設計 150
知識庫 154
路徑查找器 154
控件圖標設計 156
任務4.5 輸入文本框設計 156
知識庫 159
字符面板設置 159
任務4.6 滑塊圖標的設計 159
知識庫 163
漸變面板設置 163
單元5UI界面設計 165
制作“引導頁”頁面 165
任務5.1 制作徜徉紅途APP引導頁1 165
任務5.2 制作徜徉紅途APP引導頁2 170
任務5.3 制作徜徉紅途APP引導頁3 172
知識庫 175
制作“首頁”頁面 176
任務5.4 標簽欄導航制作 176
任務5.5 狀態(tài)欄制作 179
任務5.6 搜索欄制作 183
任務5.7 主界面的制作 184
知識庫 189
制作“行程”頁面 190
任務5.8 制作“行程”頁面 190
知識庫 196
制作“定制”頁面 196
任務5.9 制作“定制”頁面 196
知識庫 202
單元6UI動效設計基礎 203
制作圖標動效 203
任務6.1 設計圖標動效 203
APP引導頁動效 210
任務6.2 制作徜徉紅途APP引導頁動效 210
制作APP界面動效 215
任務6.3 備忘錄APP界面動效 215
知識庫 221
一、什么是移動APP動效設計 221
二、移動APP動效的作用 221
三、常用動效設計工具 222
四、圖標動效設計思路 222