按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計教程
定 價：89.8 元
叢書名：UI設(shè)計從業(yè)必讀
- 作者：王欣
- 出版時間：2020/12/1
- ISBN：9787121401763
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP311.1
- 頁碼：256
- 紙張：
- 版次：01
- 開本：16開
UI交互設(shè)計是設(shè)計人與UI之間的“對話”，交互設(shè)計包括對UI的有用性、易用性和吸引性方面進行設(shè)計和改善。近年來，隨著互聯(lián)網(wǎng)化進程的加快，特別是進入數(shù)字時代，多媒體讓交互設(shè)計變得更加多元化。產(chǎn)品和用戶體驗日益復雜，人們對交互設(shè)計的需求越來越明顯。本書從研究交互設(shè)計與用戶體驗的關(guān)系開始，圖文并茂、循序漸進地講解了UI交互設(shè)計的基礎(chǔ)、UI設(shè)計規(guī)范、交互設(shè)計的UI布局、UI中各種元素的交互設(shè)計方法和技巧，并且還向讀者介紹了交互動效設(shè)計的相關(guān)知識，通過交互動效案例的制作講解，使讀者能夠輕松掌握交互動效的制作方法和技巧，全面提升讀者的UI交互設(shè)計水平，達到學以致用的目的。本書適合正準備學習或者正在學習UI設(shè)計的初、中級讀者，也可以作為各類在職設(shè)計人員在實際UI設(shè)計工作中的理想?yún)⒖加脮?
王欣，從事UI設(shè)計工作多年，有豐富的UI設(shè)計教學經(jīng)驗。熟練掌握各種設(shè)計軟件，了解設(shè)計流程，參與多個UI設(shè)計項目的工作流程和開發(fā)。并熟練掌握iOS系統(tǒng)和Androdi系統(tǒng)UI的UI設(shè)計規(guī)則。曾參與多個App項目的開發(fā)，在多家專業(yè)雜志發(fā)表專業(yè)論文。出版相關(guān)圖書多本。
1.1 UI設(shè)計概述·····································1
1.1.1 什么是UI 設(shè)計 ···································.1
1.1.2 UI 設(shè)計常用術(shù)語 ·································.2
1.1.3 UI 設(shè)計的特點 ····································.2
1.2 了解UI交互設(shè)計·······························5
1.2.1 什么是交互 ········································.5
1.2.2 什么是交互設(shè)計 ··································.6
1.2.3 了解UI 交互設(shè)計師 ·····························.7
1.2.4 交互設(shè)計需要考慮的內(nèi)容 ····················.8
1.2.5 交互設(shè)計需要遵循的習慣 ······················.9
1.3 交互設(shè)計與用戶體驗的關(guān)系 ···············9
1.3.1 什么是用戶體驗 ·································.10
1.3.2 六種基礎(chǔ)體驗 ····································.10
1.3.3 UI 交互設(shè)計的重要性 ························.12
1.3.4 交互設(shè)計的五要素 ·····························.13
1.4 交互設(shè)計的基本流程 ······················14
1.5 產(chǎn)品需求分析································15
1.5.1 需求分析的誤區(qū) ·······························.16
1.5.2 需求分析的路徑 ·······························.16
1.6 用戶行為流程設(shè)計 ·························17
1.6.1 用戶行為流程的分類 ··························.18
1.6.2 用戶行為流程的設(shè)計原則 ····················.18
1.7 產(chǎn)品信息架構(gòu)設(shè)計 ·························20
1.7.1 什么是產(chǎn)品信息架構(gòu) ·························.20
1.7.2 如何進行產(chǎn)品信息架構(gòu)設(shè)計 ·················.21
1.8 產(chǎn)品原型設(shè)計 ·······························23
1.8.1 什么是原型設(shè)計 ································.23
1.8.2 原型設(shè)計的流程 ································.23
1.9 移動端App與網(wǎng)站的交互差異 ··········24
1.9.1 設(shè)備尺寸不同 ···································.24
1.9.2 交互方式不同 ····································.25
1.9.3 使用環(huán)境不同 ····································.27
1.9.4 網(wǎng)絡環(huán)境不同 ····································.27
1.9.5 基于位置服務的精細度不同 ··················.27
1.10 本章小結(jié) ····································28
2.1 了解iOS系統(tǒng)·································29
2.1.1 iOS 系統(tǒng)的屏幕分辨率 ·······················.29
2.1.2 邏輯點與倍圖 ···································.30
2.2 iOS系統(tǒng)UI設(shè)計規(guī)范 ·······················31
2.2.1 iPhone 常用屏幕尺寸和分辨率 ··············.31
2.2.2 界面元素尺寸規(guī)范 ·····························.32
2.2.3 字體規(guī)范 ·········································.35
2.2.4 圖標規(guī)范 ·········································.37
2.2.5 按鈕規(guī)范 ·········································.39
2.2.6 版式布局規(guī)范 ···································.39
2.2.7 邊距和間距設(shè)置規(guī)范 ··························.42
2.2.8 交互手勢規(guī)范 ···································.45
2.2.9 設(shè)計適配 ·········································.49
2.3 iOS系統(tǒng)UI設(shè)計三大原則 ·················49
2.3.1 視覺層——清晰 ································.49
2.3.2 交互層——遵從 ·································.50
2.3.3 結(jié)構(gòu)層——深度 ·································.51
2.4 了解Android系統(tǒng) ···························52
2.4.1 Android 系統(tǒng)的發(fā)展 ··························.52
2.4.2 Android 系統(tǒng)常用單位 ·······················.52
2.4.3 單位換算 ········································.53
2.4.4 Android 系統(tǒng)常用分辨率 ····················.54
2.5 Android系統(tǒng)UI設(shè)計規(guī)范 ·················54
2.5.1 界面基本元素的尺寸設(shè)置 ··················.54
2.5.2 字體設(shè)計規(guī)范 ·································.55
2.5.3 圖標設(shè)計規(guī)范 ·································.56
2.5.4 色彩應用標準 ·································.58
2.5.5 設(shè)計適配 ·······································.61
2.6 本章小結(jié) ·····································62
3.1 移動端UI的布局設(shè)計 ······················63
3.1.1 UI 版面布局的特征 ····························.63
3.1.2 UI 常見布局形式 ·······························.65
3.1.3 無框設(shè)計與卡片式設(shè)計 ·······················.69
3.2 UI設(shè)計中的平面構(gòu)成 ······················71
3.2.1 統(tǒng)一與變化 ······································.71
3.2.2 對比與調(diào)和 ······································.72
3.2.3 對稱與平衡 ······································.72
3.2.4 節(jié)奏與韻律 ····································.73
3.3 界面的格式塔原理 ·························74
3.3.1 什么是格式塔原理 ·····························.74
3.3.2 格式塔原理的七大法則 ·······················.75
3.4 UI的交互設(shè)計 ·······························80
3.4.1 用戶青睞的交互設(shè)計模式 ····················.80
3.4.2 如何提升產(chǎn)品轉(zhuǎn)化率 ··························.81
3.4.3 三種新穎的UI 交互技巧 ·····················.82
3.5 優(yōu)秀的UI交互具有哪些特點 ·············85
3.5.1 明確系統(tǒng)狀態(tài) ···································.85
3.5.2 讓按鈕和操控擁有觸感 ·······················.86
3.5.3 有意義的轉(zhuǎn)場動效 ·····························.86
3.5.4 幫助用戶開始 ···································.87
3.5.5 強調(diào)界面的變化 ································.87
3.5.6 需要注意的細節(jié) ································.87
3.6 本章小結(jié) ·····································88
I交互動畫設(shè)計
第4章 界面元素的交互設(shè)計
4.1 UI設(shè)計元素——文字 ······················89
4.1.1 襯線字體與無襯線字體 ························.89
4.1.2 UI 中的字體應用 ································.90
4.1.3 在界面中盡可能只使用一種字體 ············.91
4.1.4 如何體現(xiàn)文字的層次感 ························.92
4.1.5 文字適配的四種方式 ···························.92
4.2 UI設(shè)計元素——圖標 ······················94
4.2.1 圖標的功能 ·······································.94
4.2.2 圖標的類型 ·······································.96
4.2.3 圖標的表現(xiàn)形式及適用場景 ··················.97
4.3 圖標交互的意義 ····························99
4.3.1 預見性 ·············································.99
4.3.2 美觀性 ···········································.100
4.3.3 統(tǒng)一性 ···········································.101
4.4 UI設(shè)計元素——按鈕 ···················.103
4.4.1 按鈕的功能與表現(xiàn) ····························.103
4.4.2 常見的按鈕形狀 ·······························.104
4.4.3 交互按鈕的樣式與應用 ······················.106
4.5 如何設(shè)計出色的交互按鈕 ·············.108
4.5.1 按鈕需要看起來可點擊 ······················.108
4.5.2 按鈕的色彩很重要 ····························.109
4.5.3 按鈕的尺寸 ·····································.109
4.5.4 合適的擺放位置 ·································110
4.5.5 良好的對比效果 ·································110
4.5.6 按鈕樣式需要統(tǒng)一 ······························111
4.5.7 明確告訴用戶按鈕的功能 ·····················111
4.5.8 注意按鈕的視覺層級 ···························111
4.6 UI設(shè)計元素——圖片 ···················.112
4.6.1 圖片比例 ··········································112
4.6.2 常見的圖片排版方式 ···························113
4.6.3 UI 中圖片的應用技巧 ··························115
4.7 UI設(shè)計元素——導航 ···················.116
4.7.1 底部標簽式導航 ·································116
4.7.2 舵式導航 ··········································117
4.7.3 選項卡式導航 ····································118
4.7.4 抽屜式導航 ·····································.120
4.8 UI設(shè)計元素——表單 ···················.120
4.8.1 文本輸入表單元素 ····························.120
4.8.2 搜索表單的常見表現(xiàn)形式 ···················.122
4.8.3 搜索表單的不同交互狀態(tài) ···················.123
4.9 本章小結(jié) ··································.126
第5章 UI交互動效基礎(chǔ)
5.1 交互動效與UI設(shè)計 ······················.127
5.1.1 UI 動效的發(fā)展 ·································.127
5.1.2 優(yōu)秀的交互動效具有哪些特點 ·············.128
5.1.3 交互動效的優(yōu)勢是什么 ······················.129
5.1.4 功能型動效與展示型動效 ···················.130
5.2 哪些場合可以使用動效表現(xiàn)UI交互 ··.131
5.2.1 轉(zhuǎn)場過渡 ········································.131
5.2.2 層級展示 ········································.132
5.2.3 空間擴展 ········································.132
5.2.4 關(guān)注聚焦 ········································.132
5.2.5 內(nèi)容呈現(xiàn) ········································.133
5.2.6 操作反饋 ········································.133
5.3 基礎(chǔ)動效類型有哪些 ···················.134
5.3.1 基礎(chǔ)動效 ········································.134
5.3.2 屬性變化 ········································.135
5.3.3 運動節(jié)奏 ········································.135
5.3.4 基礎(chǔ)動效組合應用 ····························.136
5.4 認識主流交互動效制作軟件
——After Effects ·························.136
5.4.1 了解After Effects ·····························.136
5.4.2 After Effects 的工作界面 ·····················.137
5.4.3 After Effects 的基本操作 ·····················.138
5.4.4 導入素材 ········································.140
5.4.5 導入PSD 格式素材 ···························.140
實戰(zhàn)練習01——導入PSD 格式素材創(chuàng)建合成 ··.141
5.5 交互動效制作基礎(chǔ) ······················.142
5.5.1 認識“時間軸”面板 ·························.142
5.5.2 理解幀與關(guān)鍵幀 ·······························.145
5.5.3 創(chuàng)建關(guān)鍵幀 ·····································.146
5.5.4 編輯關(guān)鍵幀 ·····································.147
5.5.5 五種基礎(chǔ)“變換”屬性 ······················.149
實戰(zhàn)練習02——制作App 啟動界面動效 ·······.151
5.5.6 關(guān)于緩動效果 ··································.155
5.6 關(guān)于蒙版動效·····························.157
5.6.1 蒙版動效原理 ··································.157
5.6.2 創(chuàng)建蒙版的工具 ·······························.158
5.6.3 蒙版屬性 ········································.159
實戰(zhàn)練習03——制作界面蒙版顯示動效 ········.160
5.6.4 軌道遮罩 ········································.164
實戰(zhàn)練習04——制作iOS 系統(tǒng)解鎖文字
遮罩動效 ·························.164
5.7 交互動效的渲染輸出 ···················.167
5.7.1 渲染選項設(shè)置 ··································.167
5.7.2 使用Photoshop 將動效輸出為GIF 文件 ·.169
實戰(zhàn)練習05——將動效渲染輸出為GIF
動畫文件 ··························.169
5.7.3 將動效嵌入手機模板 ·························.172
實戰(zhàn)練習06——將動效嵌入手機模板 ···········.172
5.8 本章小結(jié)···································.174
計與實現(xiàn)
6.1 開關(guān)按鈕交互動效 ······················.175
6.1.1 開關(guān)按鈕的功能與特點 ······················.175
6.1.2 制作開關(guān)按鈕交互動效 ······················.175
實戰(zhàn)練習01——制作開關(guān)按鈕交互動效 ········.175
6.2 加載進度交互動效 ······················.179
6.2.1 了解加載等待動效 ····························.179
6.2.2 常見的加載進度動效表現(xiàn)形式 ·············.180
6.2.3 制作矩形進度條動效 ·························.181
實戰(zhàn)練習02——制作矩形進度條動效 ···········.181
6.3 文字交互動效·····························.185
6.3.1 文字動效的表現(xiàn)優(yōu)勢 ·························.185
6.3.2 常見的文字動效表現(xiàn)形式 ···················.186
6.3.3 制作手寫文字動效 ····························.189
實戰(zhàn)練習03——制作手寫文字動效 ··············.189
6.4 圖標交互動效·····························.194
6.4.1 常見的圖標動效表現(xiàn)形式 ···················.194
6.4.2 制作圖標路徑變換動效 ······················.197
實戰(zhàn)練習04——制作圖標路徑變換動效 ········.197
6.4.3 圖標工具欄交互動效 ·························.203
6.4.4 制作工具圖標動感展開動效 ················.203
實戰(zhàn)練習05——制作工具圖標動感展開動效 ··.204
6.5 導航菜單交互動效 ······················.208
6.5.1 交互式導航菜單的優(yōu)勢 ······················.208
6.5.2 交互式導航菜單的設(shè)計要點 ················.209
6.5.3 制作側(cè)滑交互導航菜單動效 ················.210
實戰(zhàn)練習06——制作側(cè)滑交互導航菜單動效 ··.210
6.6 UI交互動效································.213
6.6.1 UI 交互動效的作用 ···························.213
6.6.2 常見的UI 交互動效表現(xiàn)形式 ··············.216
6.6.3 制作火箭加載等待動效 ······················.220
實戰(zhàn)練習07——制作火箭加載等待動效 ········.220
6.7 UI轉(zhuǎn)場交互動效··························.225
6.7.1 常見的UI 轉(zhuǎn)場動效形式 ····················.225
6.7.2 UI 轉(zhuǎn)場交互動效設(shè)計要求 ··················.229
6.8 UI交互動效設(shè)計規(guī)范 ···················.232
6.8.1 UI 交互動效設(shè)計要點 ························.232
6.8.2 通過交互動效設(shè)計提升UI 用戶體驗 ·······.234
6.8.3 制作登錄轉(zhuǎn)場動效 ····························.237
實戰(zhàn)練習08——制作登錄轉(zhuǎn)場動效 ··············.237
6.9 本章小結(jié)···································.246__
書單推薦
