內容簡介

本書是花瓣網人氣設計師、UEgood優蝶教育雪姐傾情打造的第一本關於UI交互動效的圖書，書中結合了作者豐富的工作經驗，通過大量交互動效的案例，從零開始全面闡述產品交互與動效表達的技術與方法。

全書共10章。第1～5章分別講解交互設計概念、交互設計師必備知識、交互設計需要掌握的工具、產品交互實用文檔、交互設計原則等；第6、7章分別講解After Effects交互動效表達的基礎與案例；第8章講解回應式網站和H5動畫的實現；第9章講解Sketch工具的學習和應用；第10章講解當前最流行的VR（虛擬實境）和AR（增強現實）中的交互設計邏輯。同時，書中相關案例的動效圖，讀者都可以掃描書中相應二維碼進行查看，方便讀者學習使用。

本書還贈送MG動效+APP動效視頻小動畫、260分鐘UI交互動效基礎操作視頻、780分鐘軟體教學視頻、教學用PPT課件以及全書案例素材檔，除此之外，還有專業團隊為讀者答疑解惑，方便讀者學習。

本書不僅適合從事UI視覺設計、GUI設計、平面設計、交互設計、使用者體驗、產品經理等專業的朋友閱讀，也可以作為高等院校平面設計、網站設計、藝術設計、工業設計、遊戲設計等相關專業的教輔圖書及相關培訓機構的參考圖書。

作者介紹

UEgood雪姐，畢業于上海交通大學電腦科學與技術系，2006年進入UI設計行業，至今已有近12年的UI交互設計經驗，UI中國產品交互版版主，曾任UI視覺設計師、APP產品交互設計師、高級使用者體驗設計師、3D UI引擎設計師、VR硬體軟體專案經理等職務，參與過20余家國內外知名公司手機品牌專案，多年網站建設和運營工作。編寫《潮流UI設計必修課》一書，廣受UI新人學習者的好評及喜愛，擅長把知識點化繁為簡，寫作風格條理清晰，簡潔易懂。

第1章交互設計是什麼 001
1.1 人機交互設計概念 002
1.2 產品相關的各種崗位職能 003

第2章交互設計師必備知識 004
2.1 交互設計師常用工具 005
2.2 產品硬體平臺 005
2.3 信息架構學 006
2.4 用戶角色建模 007
2.5 流程圖符號意義 010
2.5.1 流程圖符號 010
2.5.2 其他符號 012
2.6 手勢與標籤 012
2.7 網站線框圖的信息層級 013
2.8 APP信息層級 013

第3章交互設計工具和圖 015
3.1 常見交交互操作事件 016
3.2 頭腦風暴和思維導圖 018
3.3 交互設計師畫的7種圖 019
3.4 UML建模規範 023
3.5 任務及任務狀態 024
3.6 用例設計 025
3.6.1 軟體用例設計 025
3.6.2 用例中需要檢查和定義的部分舉例 025
3.7 原型設計中的用戶可用性測試 027
3.8 缺陷回饋跟蹤及版本反覆運算 030
3.9 四類不同的軟體發展模式 031
3.9.1 瀑布開發模式 031
3.9.2 反覆運算開發模式 031
3.9.3 螺旋開發模式 032
3.9.4 敏捷開發模式 033
3.9.5 四類不同軟體發展模式的優缺點 033

第4章產品交互實用文檔及功能分類 035
4.1 產品經理常見交付物 036
4.1.1 BRD（商業需求描述） 036
4.1.2 MRD（市場需求文檔） 036
4.1.3 PRD（產品需求文檔） 037
4.1.4 FRD（功能需求文檔） 038
4.1.5 DRD（交互細節說明文檔） 038
4.2 導航設計讓用戶不迷路 040
4.3 優化功能優先順序的卡片分類法 044
4.4 布控資料獲取節點及資料監測 045

第5章交互設計原則 049
5.1 交互設計六原則 050
5.2 交互設計四要素 050
5.3 人類擅長歸類 051
5.4 人的腦部結構和意識認知 051
5.5 用戶需求分析 052
5.6 競品分析 054
5.7 如何玩轉運營 057
5.8 設計的價值所在 059
5.9 尼爾森可用性十原則 060
5.10 長尾理論和個性化設置 062

第6章 AE基礎及MG動效 065
6.1 AE基礎動畫 066
6.1.1 導入素材輸出格式 066
6.1.2 動態二維碼的5個屬性（視頻小動畫） 074
6.1.3 常用工具列及攝像機功能 081
6.1.4 GIF生成 093
6.2 MG小動畫 097
6.2.1 海豚動態二維碼 097
6.2.2 微信圖示修剪動畫（視頻小動畫） 102
6.2.3 水滴融合動畫（視頻小動畫） 105
6.2.4 小球組字（視頻小動畫） 111
6.2.5 蒙版水波（視頻小動畫） 115
6.2.6 鯉魚路徑動畫（視頻小動畫） 118
6.2.7 漢堡走路（視頻小動畫） 124
6.2.8 煙花（視頻小動畫） 126
6.2.9 幾何變形動畫（視頻小動畫） 134
6.2.10 邊角定位（視頻小動畫） 140
6.2.11 模糊效果（視頻小動畫） 144
6.2.12 發光（視頻小動畫） 145

第7章酷炫外掛程式及APP動效 147
7.1 酷炫外掛程式 148
7.1.1 UEgood風景（視頻小動畫） 148
7.1.2 櫻花天氣（視頻小動畫） 163
7.1.3 宇宙星空（視頻小動畫） 168
7.1.4 山川天氣（視頻小動畫） 174
7.2 APP動效 177
7.2.1 3D圖層翻轉（視頻小動畫） 177
7.2.2 啟動頁動效（視頻小動畫） 184
7.2.3 地圖搜索（視頻小動畫） 201
7.2.4 載入刷新（視頻小動畫） 204
7.2.5 播放機翻頁（視頻小動畫） 211
7.2.6 外賣（視頻小動畫） 217

第8章回應式網站和H5動畫 223
8.1 HTML 5的三個優勢 224
8.2 HTML 5八大特性 225
8.3 HTML 5的應用及佈局方式 226
8.4 CSS3視覺表現方面的新特性 227

第9章 Sketch學習捷徑 233
9.1 初識Sketch 234
9.1.1 Sketch的安裝 234
9.1.2 Sketch的介面 235
9.1.3 Sketch工具列的自訂 236
9.1.4 Sketch的快速鍵及自訂快速鍵的方法 237
9.2 Sketch小試牛刀——介面 240
9.2.1 新建畫布 241
9.2.2 圖層列表面板的使用 243
9.2.3 檢查器面板的使用 247
9.2.4 使用Sketch進行UI介面設計實例 253
9.3 Sketch漸入佳境——圖示 263
9.3.1 布耳運算 263
9.3.2 實例一：搜索圖示的繪製 265
9.3.3 實例二：星星的繪製 265
9.4 Sketch大師之路——外掛程式 267
9.5 Sketch的切圖、匯出和資源推薦 274
9.5.1 Sketch的切圖 274
9.5.2 Sketch的匯出 275
9.5.3 Sketch的匯出小技巧 276
9.5.4 Sketch的資源推薦 278

第10章 VR（虛擬實境）和AR（增強現實）交互 279
10.1 VR技術及其發展歷史 280
10.2 VR的發展前景及體系 281
10.2.1 VR的發展前景 281
10.2.2 VR體系 282
10.3 VR硬體及盈利模式 282
10.3.1 VR硬體 282
10.3.2 VR的盈利方式 284
10.4 VR交互 284
10.5 VR專案設計流程及應用領域 287
10.5.1 VR專案設計流程 287
10.5.2 VR應用領域 287

附錄動效邏輯原理 291

看更多