《App草圖+流程圖+互動原型設計教程》是2020年電子工業出版社出版的圖書，作者是劉源。
基本介紹
- 書名：App草圖+流程圖+互動原型設計教程
- 作者：劉源
- 出版社：電子工業出版社
- 出版時間：2020年9月
- 頁數：240 頁
- 定價：89.8 元
- 開本：16 開
- ISBN：9787121394478
內容簡介,圖書目錄,
內容簡介
該系列圖書通過採用軟體知識點+行業基礎+實戰的方式講解。 案例與基礎知識相融合，快速帶領用戶掌握網站UI產品原型設計製作方法和技巧 ，分別使用流行的Axure和Adobe XD完成網站產品的製作，與實際工作接軌。 在每章的最後為讀者提供一個操作案例，供讀者練習使用。 全書所有案例配教學視頻，有助讀者學習。 全書的案例極具針對性，便於讀者查找學習。
圖書目錄
1章 了解網站產品原型
1.1 網際網路產品開發流程 ························1
1.1.1 需求分析 ··········································.1
1.1.2 互動設計 ··········································.2
1.1.3 視覺設計 ··········································.5
1.1.4 技術開發 ··········································.6
1.1.5 發布維護 ··········································.6
1.2 網際網路產品開發人員配置 ··················7
1.2.1 產品經理 ··········································.7
1.2.2 產品助理 ··········································.8
1.2.3 設計師 ·············································.8
1.2.4 產品運營 ··········································.9
1.2.5 產品開發 ··········································.9
1.2.6 市場行銷 ·········································.10
1.3 網際網路產品原型的套用 ··················.11
1.3.1 網際網路產品原型設計 ··························.11
1.3.2 網際網路產品原型的作用 ·······················.12
1.3.3 網際網路產品原型的重要性 ····················.13
1.3.4 網際網路產品原型的設計技巧 ·················.13
1.4 網際網路產品原型的設計流程 ·············14
1.4.1 確定整體結構 ···································.14
1.4.2 確定排版布局 ···································.15
1.4.3 確定功能模組 ···································.16
1.4.4 設計製作原型稿 ································.17
1.4.5 設計互動效果 ···································.18
1.4.6 調試互動效果 ···································.20
1.5 了解網站產品原型的分類 ················20
1.5.1 低保真原型 ······································.20
1.5.2 高保真原型 ······································.22
1.5.3 互動動畫原型 ···································.24
1.6 原型設計的常用工具 ······················26
1.6.1 Axure RP ·········································.27
1.6.2 Adobe XD ········································.27
1.6.3 墨刀 ···············································.28
1.7 本章小結 ·····································29
第2章 了解Axure RP 9
2.1 初識Axure RP 9 ···························30
2.1.1 關於Axure RP 9 ································.30
2.1.2 軟體下載與安裝 ································.31
2.2 Axure RP 9的工作界面 ···················32
2.2.1 了解Axure RP 9 的工作界面 ················.33
2.2.2 自定義工具列 ···································.35
2.3 頁面設定 ·····································36
2.3.1 頁面基本屬性 ···································.36
實戰練習01——使用“頁面”面板 ···············.36
2.3.2 頁面自適應 ······································.39
2.4 使用Axure RP 9的元件庫 ···············40
2.4.1 Default 元件 ·····································.40
2.4.2 Flow 元件 ········································.40
2.4.3 Icons 元件 ········································.40
2.4.4 使用“動態面板” ······························.41
實戰練習02——使用“動態面板”製作輪播圖片 ·.41
2.4.5 使用中繼器 ······································.45
實戰練習03——使用“中繼器”元件展示商品 ···.45
2.4.6 下載和導入元件庫 ·····························.48
2.5 Axure RP 9中的基本互動效果··········50
2.5.1 互動事件 ·········································.50
2.5.2 連結 ···············································.51
2.5.3 元件 ···············································.51
2.6 Axure RP 9中的高級互動效果··········51
2.6.1 設定條件 ·········································.52
2.6.2 添加變數 ·········································.52
實戰練習04——使用全局變數設定歡迎頁面 ···.53
2.6.3 使用表達式 ······································.56
2.7 使用函式 ·····································57
2.7.1 中繼器/ 數據集 ································.58
2.7.2 元件函式 ·········································.58
2.7.3 指針函式 ·········································.59
2.7.4 視窗函式 ·········································.59
實戰練習05——使用視窗函式顯示隱藏元件 ···.60
2.7.5 頁面函式 ·········································.62
2.7.6 數字函式 ·········································.62
2.7.7 字元串函式 ······································.63
實戰練習06——使用字元串函式設定關鍵字搜尋 ·.64
2.7.8 數學函式 ·········································.68
2.7.9 時間函式 ·········································.69
實戰練習07——使用時間函式顯示實時時間 ···.70
2.8 查看原型 ·····································73
2.8.1 快速預覽 ·········································.74
2.8.2 預覽選項 ·········································.74
2.8.3 生成HTML 檔案 ·······························.75
2.8.4 生成Word 說明書 ···························.77
2.9 發布與測試 ··································78
2.10 本章小結 ···································79
第3章 了解Adobe XD
3.1 Adobe XD的簡介 ··························80
3.1.1 初識Adobe XD ·································.80
3.1.2 下載和安裝Adobe XD ························.80
3.1.3 了解主頁螢幕 ···································.81
3.1.4 工作界面結構 ···································.82
3.1.5 使用資源 ·········································.83
3.1.6 使用輔助工具 ···································.84
3.2 Adobe XD的基礎工作流程 ··············86
3.3 Adobe XD的基礎操作 ····················86
3.3.1 新建、打開和存儲檔案 ·······················.86
3.3.2 使用畫板 ·········································.87
實戰練習01——新建和存儲Adobe XD 檔案 ····.88
3.3.3 導入對象 ·········································.89
3.3.4 創建重複元素 ···································.90
3.3.5 對象的操作 ······································.91
3.4 Adobe XD的基本工具 ····················95
3.4.1 繪圖工具 ·········································.95
3.4.2 文本工具 ·········································.95
3.4.3 使用圖層 ·········································.96
3.4.4 使用布爾運算 ···································.97
3.4.5 蒙版技術 ·········································.98
實戰練習02——使用蒙版遮罩圖像 ···············.98
3.4.6 設定描邊、填充、投影和模糊 ············.100
3.5 使用Adobe XD完成原型 ··············.101
3.5.1 連結頁面 ·······································.101
3.5.2 設定原型首屏內容 ···························.102
3.5.3 使用語音命令創建原型 ·····················.102
3.6 使用Adobe XD導出文檔 ··············.103
3.7 本章小結 ··································.104
第4章 設計製作PC端網頁產品原型
4.1 PC端網頁產品原型概述 ··············.105
4.2 PC端網頁設計規範 ····················.106
4.2.1 網頁尺寸設計規範 ···························.106
4.2.2 網頁文本設計規範 ···························.109
4.2.3 網頁圖像選擇規範 ·····························116
實戰練習01——製作網頁低保真原型 ············117
4.3 PC端網頁配色設計 ····················.121
4.3.1 明確主色 ·······································.121
4.3.2 明確背景色 ····································.122
4.3.3 確定輔色 ·······································.124
4.3.4 協調點綴色 ····································.125
4.3.5 搭配字型色 ····································.127
4.4 PC端網頁布局方式 ····················.128
4.4.1 布局方式 ·······································.128
4.4.2 分列布局 ·······································.131
4.4.3 網頁構圖 ·······································.133
實戰練習02——製作網頁高保真原型 ··········.133
4.5 PC端網頁互動效果 ····················.136
4.5.1 頁面的連結效果 ······························.136
4.5.2 文字的描述效果 ······························.139
實戰練習03——製作網頁互動效果 ·············.144
4.6 PC端網頁適配···························.149
4.6.1 適配的方式方法 ······························.150
4.6.2 適配時需要注意的點 ························.150
4.7 本章小結 ··································.150
第5章 設計製作Android系統產品原型
5.1 Android系統的原型設計 ··············.151
5.1.1 Android 系統的碎片化 ······················.151
5.1.2 Android 系統的原型優勢 ···················.152
5.2 設計Android系統原型的流程 ········.156
5.2.1 確定框架 ·······································.156
5.2.2 制定全局 ·······································.157
5.2.3 繪製頁面 ·······································.157
5.2.4 輸出原型 ·······································.158
5.3 Android系統的設計規範 ··············.159
5.3.1 設計單位 ·······································.159
5.3.2 頁面尺寸 ·······································.160
5.3.3 組件尺寸 ·······································.161
5.3.4 圖示尺寸 ·······································.161
5.3.5 間距規範 ·······································.163
實戰練習01——設計製作App 頁面的低
保真原型 ···············································.164
5.4 Android系統的文字規範 ··············.168
5.5 Android系統的頁面布局 ··············.169
5.5.1 列表式布局 ····································.169
5.5.2 陳列式布局 ····································.170
5.5.3 宮格式布局 ····································.170
5.5.4 卡片式布局 ····································.171
實戰練習02——設計製作App 的高保真原型 ··.171
5.6 Android系統的版式設計 ··············.177
實戰練習03——設計製作App 頁面的互動效果 ·.178
5.7 Android系統的頁面適配 ··············.185
5.7.1 適配方式 ·······································.185
5.7.2 整體頁面適配 ·································.185
5.7.3 圖示適配 ·······································.185
5.7.4 文本適配 ·······································.186
5.7.5 圖片適配 ·······································.186
5.8 本章小結 ··································.187
第6章 設計製作iOS系統產品原型
6.1 設計iOS系統的原型頁面 ··············.188
6.1.1 確定設計尺寸 ·································.188
6.1.2 指定頁面布局 ·································.188
6.1.3 定義內容區域 ·································.189
6.1.4 遵循設計規範 ·································.189
6.2 iOS系統設計規範 ·······················.190
6.2.1 設計單位 ·······································.190
6.2.2 設計尺寸 ·······································.190
6.2.3 組件尺寸 ·······································.191
6.3 iOS系統的文字規範 ····················.191
6.3.1 字型 ·············································.192
6.3.2 字號 ·············································.192
6.3.3 字型顏色 ·······································.193
6.3.4 字重 ·············································.193
實戰練習01——設計iOS 系統App 的低
保真原型 ···············································.194
6.4 iOS系統的圖示設計規範 ··············.198
6.5 iOS系統的邊距設計規範 ··············.200
6.5.1 全局邊距 ········································.200
6.5.2 卡片邊距 ········································.201
6.5.3 內容間距 ········································.201
實戰練習02——設計iOS 系統App 的高
保真原型 ···············································.202
6.6 iOS系統的圖片設計規範 ··············.206
6.6.1 圖片比例 ·······································.206
6.6.2 圖片格式 ·······································.208
實戰練習03——設計iOS 系統App 的
互動效果 ···············································.208
6.7 iOS系統的頁面適配 ····················.212
6.7.1 向下適配 ·······································.213
6.7.2 向上適配 ·······································.214
6.8 本章小結 ··································.216
第7章 了解標註與輸出
7.1 Android系統界面的輸出 ··············.217
7.1.1 Android 系統界面標註 ····················.217
實戰練習01——使用PxCook 標註效果圖 ·····.218
7.1.2 Android 系統界面切圖 ····················.219
7.2 iOS系統界面的輸出 ···················.224
7.2.1 iOS 系統界面標註 ··························.224
7.2.2 iOS 系統界面切圖 ··························.226
實戰練習02——使用Adobe XD 導出資源 ·····.228
7.3 項目輸出 ··································.229
7.4 本章小結 ··································.230
