中圖網(wǎng)小程序
一鍵登錄
更方便
>
>>
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程 版權(quán)信息
- ISBN：9787121401763
- 條形碼：9787121401763 ; 978-7-121-40176-3
- 裝幀：一般膠版紙
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>>
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程 本書特色
適讀人群 ：Ui設(shè)計(jì)師，用戶體驗(yàn)從業(yè)人員。本書緊跟移動端交互設(shè)計(jì)的發(fā)展趨勢，向讀者詳細(xì)介紹UI交互設(shè)計(jì)的相關(guān)知識，并且講解目前流行的交互動效設(shè)計(jì)制作，通過基礎(chǔ)知識與實(shí)戰(zhàn)操作相結(jié)合的方式，使讀者在理解交互設(shè)計(jì)的基礎(chǔ)上能夠在UI界面設(shè)計(jì)中靈活應(yīng)用，并且能夠在UI中實(shí)現(xiàn)各種不同的交互動效，真正做到學(xué)以致用。
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程 內(nèi)容簡介
UI交互設(shè)計(jì)是設(shè)計(jì)人與UI之間的“對話”，交互設(shè)計(jì)包括對UI的有用性、易用性和吸引性方面進(jìn)行設(shè)計(jì)和改善。近年來，隨著互聯(lián)網(wǎng)化進(jìn)程的加快，特別是進(jìn)入數(shù)字時(shí)代，多媒體讓交互設(shè)計(jì)變得更加多元化。產(chǎn)品和用戶體驗(yàn)日益復(fù)雜，人們對交互設(shè)計(jì)的需求越來越明顯。本書從研究交互設(shè)計(jì)與用戶體驗(yàn)的關(guān)系開始，圖文并茂、循序漸進(jìn)地講解了UI交互設(shè)計(jì)的基礎(chǔ)、UI設(shè)計(jì)規(guī)范、交互設(shè)計(jì)的UI布局、UI中各種元素的交互設(shè)計(jì)方法和技巧，并且還向讀者介紹了交互動效設(shè)計(jì)的相關(guān)知識，通過交互動效案例的制作講解，使讀者能夠輕松掌握交互動效的制作方法和技巧，全面提升讀者的UI交互設(shè)計(jì)水平，達(dá)到學(xué)以致用的目的。本書適合正準(zhǔn)備學(xué)習(xí)或者正在學(xué)習(xí)UI設(shè)計(jì)的初、中級讀者，也可以作為各類在職設(shè)計(jì)人員在實(shí)際UI設(shè)計(jì)工作中的理想?yún)⒖加脮?/p>
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程 目錄
1.1 UI設(shè)計(jì)概述 1
1.1.1 什么是UI 設(shè)計(jì) 1
1.1.2 UI 設(shè)計(jì)常用術(shù)語 2
1.1.3 UI 設(shè)計(jì)的特點(diǎn) 2
1.2 了解UI交互設(shè)計(jì) 5
1.2.1 什么是交互 5
1.2.2 什么是交互設(shè)計(jì) 6
1.2.3 了解UI 交互設(shè)計(jì)師 7
1.2.4 交互設(shè)計(jì)需要考慮的內(nèi)容 8
1.2.5 交互設(shè)計(jì)需要遵循的習(xí)慣 9
1.3 交互設(shè)計(jì)與用戶體驗(yàn)的關(guān)系 9
1.3.1 什么是用戶體驗(yàn) 10
1.3.2 六種基礎(chǔ)體驗(yàn) 10
1.3.3 UI 交互設(shè)計(jì)的重要性 12
1.3.4 交互設(shè)計(jì)的五要素 13
1.4 交互設(shè)計(jì)的基本流程 14
1.5 產(chǎn)品需求分析 15
1.5.1 需求分析的誤區(qū) 16
1.5.2 需求分析的路徑 16
1.6 用戶行為流程設(shè)計(jì) 17
1.6.1 用戶行為流程的分類 18
1.6.2 用戶行為流程的設(shè)計(jì)原則 18
1.7 產(chǎn)品信息架構(gòu)設(shè)計(jì) 20
1.7.1 什么是產(chǎn)品信息架構(gòu) 20
1.7.2 如何進(jìn)行產(chǎn)品信息架構(gòu)設(shè)計(jì) 21
1.8 產(chǎn)品原型設(shè)計(jì) 23
1.8.1 什么是原型設(shè)計(jì) 23
1.8.2 原型設(shè)計(jì)的流程 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)絡(luò)環(huán)境不同 27
1.9.5 基于位置服務(wù)的精細(xì)度不同 27
1.10 本章小結(jié) 28
2.1 了解iOS系統(tǒng) 29
2.1.1 iOS 系統(tǒng)的屏幕分辨率 29
2.1.2 邏輯點(diǎn)與倍圖 30
2.2 iOS系統(tǒng)UI設(shè)計(jì)規(guī)范 31
2.2.1 iPhone 常用屏幕尺寸和分辨率 31
2.2.2 界面元素尺寸規(guī)范 32
2.2.3 字體規(guī)范 35
2.2.4 圖標(biāo)規(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è)計(jì)適配 49
2.3 iOS系統(tǒng)UI設(shè)計(jì)三大原則 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è)計(jì)規(guī)范 54
2.5.1 界面基本元素的尺寸設(shè)置 54
2.5.2 字體設(shè)計(jì)規(guī)范 55
2.5.3 圖標(biāo)設(shè)計(jì)規(guī)范 56
2.5.4 色彩應(yīng)用標(biāo)準(zhǔn) 58
2.5.5 設(shè)計(jì)適配 61
2.6 本章小結(jié) 62
3.1 移動端UI的布局設(shè)計(jì) 63
3.1.1 UI 版面布局的特征 63
3.1.2 UI 常見布局形式 65
3.1.3 無框設(shè)計(jì)與卡片式設(shè)計(jì) 69
3.2 UI設(shè)計(jì)中的平面構(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è)計(jì) 80
3.4.1 用戶青睞的交互設(shè)計(jì)模式 80
3.4.2 如何提升產(chǎn)品轉(zhuǎn)化率 81
3.4.3 三種新穎的UI 交互技巧 82
3.5 優(yōu)秀的UI交互具有哪些特點(diǎn) 85
3.5.1 明確系統(tǒng)狀態(tài) 85
3.5.2 讓按鈕和操控?fù)碛杏|感 86
3.5.3 有意義的轉(zhuǎn)場動效 86
3.5.4 幫助用戶開始 87
3.5.5 強(qiáng)調(diào)界面的變化 87
3.5.6 需要注意的細(xì)節(jié) 87
3.6 本章小結(jié) 88
I交互動畫設(shè)計(jì)
第4章 界面元素的交互設(shè)計(jì)
4.1 UI設(shè)計(jì)元素——文字 89
4.1.1 襯線字體與無襯線字體 89
4.1.2 UI 中的字體應(yīng)用 90
4.1.3 在界面中盡可能只使用一種字體 91
4.1.4 如何體現(xiàn)文字的層次感 92
4.1.5 文字適配的四種方式 92
4.2 UI設(shè)計(jì)元素——圖標(biāo) 94
4.2.1 圖標(biāo)的功能 94
4.2.2 圖標(biāo)的類型 96
4.2.3 圖標(biāo)的表現(xiàn)形式及適用場景 97
4.3 圖標(biāo)交互的意義 99
4.3.1 預(yù)見性 99
4.3.2 美觀性 100
4.3.3 統(tǒng)一性 101
4.4 UI設(shè)計(jì)元素——按鈕 103
4.4.1 按鈕的功能與表現(xiàn) 103
4.4.2 常見的按鈕形狀 104
4.4.3 交互按鈕的樣式與應(yīng)用 106
4.5 如何設(shè)計(jì)出色的交互按鈕 108
4.5.1 按鈕需要看起來可點(diǎn)擊 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è)計(jì)元素——圖片 112
4.6.1 圖片比例 112
4.6.2 常見的圖片排版方式 113
4.6.3 UI 中圖片的應(yīng)用技巧 115
4.7 UI設(shè)計(jì)元素——導(dǎo)航 116
4.7.1 底部標(biāo)簽式導(dǎo)航 116
4.7.2 舵式導(dǎo)航 117
4.7.3 選項(xiàng)卡式導(dǎo)航 118
4.7.4 抽屜式導(dǎo)航 120
4.8 UI設(shè)計(jì)元素——表單 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è)計(jì) 127
5.1.1 UI 動效的發(fā)展 127
5.1.2 優(yōu)秀的交互動效具有哪些特點(diǎn) 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 空間擴(kuò)展 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 運(yùn)動節(jié)奏 135
5.3.4 基礎(chǔ)動效組合應(yīng)用 136
5.4 認(rèn)識主流交互動效制作軟件
——After Effects 136
5.4.1 了解After Effects 136
5.4.2 After Effects 的工作界面 137
5.4.3 After Effects 的基本操作 138
5.4.4 導(dǎo)入素材 140
5.4.5 導(dǎo)入PSD 格式素材 140
實(shí)戰(zhàn)練習(xí)01——導(dǎo)入PSD 格式素材創(chuàng)建合成 141
5.5 交互動效制作基礎(chǔ) 142
5.5.1 認(rèn)識“時(shí)間軸”面板 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
實(shí)戰(zhàn)練習(xí)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
實(shí)戰(zhàn)練習(xí)03——制作界面蒙版顯示動效 160
5.6.4 軌道遮罩 164
實(shí)戰(zhàn)練習(xí)04——制作iOS 系統(tǒng)解鎖文字
遮罩動效 164
5.7 交互動效的渲染輸出 167
5.7.1 渲染選項(xiàng)設(shè)置 167
5.7.2 使用Photoshop 將動效輸出為GIF 文件 169
實(shí)戰(zhàn)練習(xí)05——將動效渲染輸出為GIF
動畫文件 169
5.7.3 將動效嵌入手機(jī)模板 172
實(shí)戰(zhàn)練習(xí)06——將動效嵌入手機(jī)模板 172
5.8 本章小結(jié) 174
計(jì)與實(shí)現(xiàn)
6.1 開關(guān)按鈕交互動效 175
6.1.1 開關(guān)按鈕的功能與特點(diǎn) 175
6.1.2 制作開關(guān)按鈕交互動效 175
實(shí)戰(zhàn)練習(xí)01——制作開關(guān)按鈕交互動效 175
6.2 加載進(jìn)度交互動效 179
6.2.1 了解加載等待動效 179
6.2.2 常見的加載進(jìn)度動效表現(xiàn)形式 180
6.2.3 制作矩形進(jìn)度條動效 181
實(shí)戰(zhàn)練習(xí)02——制作矩形進(jìn)度條動效 181
6.3 文字交互動效 185
6.3.1 文字動效的表現(xiàn)優(yōu)勢 185
6.3.2 常見的文字動效表現(xiàn)形式 186
6.3.3 制作手寫文字動效 189
實(shí)戰(zhàn)練習(xí)03——制作手寫文字動效 189
6.4 圖標(biāo)交互動效 194
6.4.1 常見的圖標(biāo)動效表現(xiàn)形式 194
6.4.2 制作圖標(biāo)路徑變換動效 197
實(shí)戰(zhàn)練習(xí)04——制作圖標(biāo)路徑變換動效 197
6.4.3 圖標(biāo)工具欄交互動效 203
6.4.4 制作工具圖標(biāo)動感展開動效 203
實(shí)戰(zhàn)練習(xí)05——制作工具圖標(biāo)動感展開動效 204
6.5 導(dǎo)航菜單交互動效 208
6.5.1 交互式導(dǎo)航菜單的優(yōu)勢 208
6.5.2 交互式導(dǎo)航菜單的設(shè)計(jì)要點(diǎn) 209
6.5.3 制作側(cè)滑交互導(dǎo)航菜單動效 210
實(shí)戰(zhàn)練習(xí)06——制作側(cè)滑交互導(dǎo)航菜單動效 210
6.6 UI交互動效 213
6.6.1 UI 交互動效的作用 213
6.6.2 常見的UI 交互動效表現(xiàn)形式 216
6.6.3 制作火箭加載等待動效 220
實(shí)戰(zhàn)練習(xí)07——制作火箭加載等待動效 220
6.7 UI轉(zhuǎn)場交互動效 225
6.7.1 常見的UI 轉(zhuǎn)場動效形式 225
6.7.2 UI 轉(zhuǎn)場交互動效設(shè)計(jì)要求 229
6.8 UI交互動效設(shè)計(jì)規(guī)范 232
6.8.1 UI 交互動效設(shè)計(jì)要點(diǎn) 232
6.8.2 通過交互動效設(shè)計(jì)提升UI 用戶體驗(yàn) 234
6.8.3 制作登錄轉(zhuǎn)場動效 237
實(shí)戰(zhàn)練習(xí)08——制作登錄轉(zhuǎn)場動效 237
6.9 本章小結(jié) 246
展開全部
UI設(shè)計(jì)從業(yè)推薦閱讀按鈕+菜單+加載+轉(zhuǎn)場UI交互動效設(shè)計(jì)教程 作者簡介
王欣，從事UI設(shè)計(jì)工作多年，有豐富的UI設(shè)計(jì)教學(xué)經(jīng)驗(yàn)。熟練掌握各種設(shè)計(jì)軟件，了解設(shè)計(jì)流程，參與多個(gè)UI設(shè)計(jì)項(xiàng)目的工作流程和開發(fā)。并熟練掌握iOS系統(tǒng)和Androdi系統(tǒng)UI的UI設(shè)計(jì)規(guī)則。曾參與多個(gè)App項(xiàng)目的開發(fā)，在多家專業(yè)雜志發(fā)表專業(yè)論文。出版相關(guān)圖書多本。
書友推薦
- >
伯納黛特,你要去哪(2021新版)
- >
朝聞道
- >
我與地壇
- >
回憶愛瑪儂
- >
中國歷史的瞬間
- >
企鵝口袋書系列·偉大的思想20:論自然選擇(英漢雙語)
- >
隨園食單
- >
巴金－再思錄
本類暢銷
