産品特色
編輯推薦
適讀人群 :適閤從事UI視覺設計、GUI設計、平麵設計、交互設計、用戶體驗、産品經理等專業的朋友閱讀 《UI交互動效必修課》不僅適閤從事UI視覺設計、GUI設計、平麵設計、交互設計、用戶體驗、産品經理等專業朋友閱讀,也可作為高等院校平麵設計、網站設計、藝術設計、工業設計、遊戲設計等相關專業的教輔用書及相關培訓機構的參考用書。
★★花瓣網人氣設計師、UEgood優蝶教育雪姐傾心打造的UI交互動效圖書。
★★超值贈送MG動效 + APP動效視頻小動畫、260分鍾UI交互動效基礎操作視頻、660分鍾After Effects CC 2015影視閤成與特效教學視頻、60分鍾Sketch交互設計必修課教學視頻、60分鍾Principle交互設計必修課教學視頻、教學用PPT課件、全書案例素材文件。
★★專業團隊隨時隨地為讀者朋友答疑解惑。
內容簡介
《UI交互動效必修課》是花瓣網人氣設計師、UEgood優蝶教育雪姐傾情打造的關於UI交互動效的圖書,書中結閤瞭作者豐富的工作經驗,通過大量交互動效的案例,從零開始全麵闡述産品交互與動效錶達的技術與方法。
《UI交互動效必修課》共10章。第1~5章分彆講解交互設計概念、交互設計師必備知識、交互設計需要掌握的工具、産品交互實用文檔、交互設計原則等;第6、7章分彆講解After Effects交互動效錶達的基礎與案例;第8章講解響應式網站和H5動畫的實現;第9章講解Sketch工具的學習和應用;第10章講解當前*流行的VR(虛擬現實)和AR(增強現實)中的交互設計邏輯。同時,書中相關案例的動效圖,讀者都可以掃描書中相應二維碼進行查看,方便讀者學習使用。
《UI交互動效必修課》還贈送MG動效+APP動效視頻小動畫、260分鍾UI交互動效基礎操作視頻、780分鍾軟件教學視頻、教學用PPT課件以及《UI交互動效必修課》案例素材文件,除此之外,還有專業團隊為讀者答疑解惑,方便讀者學習。
《UI交互動效必修課》不僅適閤從事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
前言/序言
隨著智能大屏設備的普及,移動軟件産品開發成本的降低,相關領域的大型公司紛紛成立瞭移動産品設計部,APP 創業型公司也如雨後春筍般崛起,如何快速地把市場需求轉化成産品交互框架成為所有公司的迫切需求。這就要求無論是産品經理、程序員,還是UI界麵設計人員,都需要學習相關的知識。傳統的Axure RPPro軟件雖然是一個非常好的交互流程綫框原型工具,但是如果沒有配套的業務知識來支撐,那麼做齣來的交互將會不夠實用,商業性也不強。本書用一種新的思路和方式來闡述産品交互與動效錶達的技術與方法。
本書從零開始,詳細地講解瞭和交互有關的實用知識,可讀性強,注重邏輯思維培養和從用戶需求角度來考慮産品功能,幫助讀者快速地建立起自己的産品交互框架。同時,本書彌補瞭市場上相關書籍缺乏的現狀。不僅講解瞭交互方麵的邏輯思維方法,還安排瞭大量交互動效錶達的案例,具體內容包括:
第1~5章分彆講解交互設計是什麼、交互設計師必備知識、交互設計工具和圖、産品交互實用文檔及功能分類、交互設計原則等;第6、7章分彆講解AE基礎及MG動效、酷炫插件及APP動效;第8章講解響應式網站和H5動畫;第9章講解Sketch學習捷徑;第10章講解VR(虛擬現實)和AR(增強現實)交互。
本書還贈送MG動效+APP動效視頻小動畫、260分鍾UI交互動效基礎操作視頻、780分鍾軟件教學視頻、教學用PPT課件以及全書案例素材文件,除此之外,還有專業團隊為讀者答疑解惑,方便讀者學習。
本書售後
UEgood優蝶教育有著近20年IT、計算機圖形圖像和藝術設計領域相關圖書的編寫經驗,善於提煉知識內容,總結教學方法,將實用的技術和職業技能用高效、快捷的方式傳授給需要的用戶。
本著“學習,使人進步”的信仰,秉承“授人以魚,不如授之以漁”的核心教育思想,通過“教、學、産、研、人”五位一體的裂變規模化發展思路做好良心教育工程。
我們不僅僅是傳道授業解惑者,更是學習、生活的良好組織者和促進者。
依托現有的約10000 名一綫資深設計師、2000 名大學老師、3000 個互聯網企業、400 個動漫與設計公司資源,欲打造50個精品教學網點,實現真正的“教、學、産、研、人”一體化構想。
目前開設UI/UE 設計精品必修班、UI/UE設計高級研修班、UI運營插畫必修班、UI交互動效必修班、VR 虛擬現實項目實訓班、HTML 5 前端工程師必修班、産品經理必修班、遊戲原畫美術必修班、影視動畫全能就業班等係列課程。
圖書交流QQ 群:387689345。我們將竭誠為您服務。
歡迎大傢登錄我們官網www.uegood.com獲取更多的學習資料和資源。
《UI交互動效必修課》內容概述 引言 在當今高度視覺化的數字時代,用戶界麵的設計已經遠遠超越瞭靜態布局和簡單的交互。引人入勝的動效不僅能提升産品的整體美感,更能極大地優化用戶體驗,引導用戶完成任務,並傳達情感和信息。本課程旨在深入淺齣地剖析UI交互動效的核心原理、設計方法和實踐技巧,幫助設計師掌握將靜態界麵轉化為生動、流暢、富有吸引力的數字體驗的能力。我們將從基礎概念齣發,逐步深入到高級技巧,涵蓋理論與實踐的各個層麵,為您的UI設計之路注入源源不斷的活力。 第一章:動效設計的基石——為什麼需要動效? 本章將帶領您探索UI交互動效的根本意義和價值。我們將深入分析動效在提升用戶體驗方麵的關鍵作用,包括: 增強用戶參與感與趣味性: 為什麼恰到好處的動效能讓用戶更願意停留和互動?我們將通過案例分析,揭示動效如何將枯燥的界麵轉化為富有生命力的體驗。 引導用戶視綫與注意力: 如何利用動效的動態特性,在復雜信息流中自然地引導用戶關注關鍵元素?我們將探討視綫追蹤的心理學原理,以及如何將其轉化為動效設計的策略。 提供即時反饋與狀態指示: 用戶在進行操作時,需要明確的反饋。動效如何提供比靜態反饋更直觀、更友好的狀態提示?例如,按鈕按下後的微小形變、加載過程的動態指示等。 傳遞信息與上下文: 有時,信息的傳遞需要通過動態的過程來完成。例如,元素從一個位置平滑地過渡到另一個位置,可以清晰地錶明它們之間的關聯。 建立品牌個性與情感連接: 動效是塑造品牌個性的重要載體。獨特的動效風格能夠傳達産品的調性,例如活潑、專業、優雅等,從而與用戶建立更深層次的情感連接。 減少用戶的認知負荷: 閤理的動效可以減少用戶需要記憶的信息量,通過動態演示或過渡來幫助用戶理解界麵邏輯和操作流程。 第二章:動效設計的語言——核心原則與理論 要創造齣優秀的動效,必須掌握其背後的基本原理。本章將深入探討UI交互動效設計中的核心原則,並藉鑒動畫設計的經典理論: 十二條動畫基本法則的UI應用:我們將詳細解析迪士尼動畫大師提齣的十二條基本動畫法則(如擠壓與拉伸、預判、緩入緩齣、弧綫運動等),並探討它們如何巧妙地應用於UI動效設計中,使動效看起來更自然、更具生命力。 動效的時間與節奏: 時間和節奏是動效的靈魂。我們將學習如何控製動效的持續時間、速度麯綫,以達到最佳的視覺效果和用戶體驗。過快或過慢的動效都可能適得其反。 動效的空間與路徑: 元素在界麵中的移動路徑和空間關係同樣重要。我們將學習如何設計清晰、符閤邏輯的運動軌跡,以及如何利用空間感來增強動效的錶現力。 動效的形態與變化: 元素的形狀、大小、透明度等屬性在動效中如何變化?我們將探討如何通過這些形態的變化來傳達信息和情感。 動效的流暢性與一緻性: 如何確保不同動效之間的平滑過渡和整體風格的一緻性?我們將討論動效係統的構建和維護。 微交互的藝術: 微交互是用戶與産品之間最小的交互單元,但往往能在細節處展現産品的精緻。我們將深入研究微交互的動效設計,如何通過微小的反饋和動畫來提升用戶滿意度。 第三章:動效設計的工具箱——從概念到原型 理論結閤實踐,本章將聚焦於將動效設計理念轉化為實際原型的工具和方法: 主流動效設計工具介紹與實踐:我們將詳細介紹目前行業內主流的UI動效設計工具,如After Effects (配閤特定插件)、Framer、Principle、ProtoPie等。您將學習到這些工具的基本操作、核心功能以及如何利用它們快速創建高質量的動效原型。 動效原型的創建流程: 從概念草圖到可交互原型,我們將梳理齣一套完整的動效原型創建流程。這包括: 動效需求的分析與定義: 明確動效要解決的問題和達成的效果。 動效腳本的設計: 類似於電影分鏡,繪製動效的運動軌跡、時間軸和狀態變化。 關鍵幀動畫的設置: 在工具中通過關鍵幀來定義元素的起始和結束狀態。 緩動麯綫的應用: 學習如何選擇和調整緩動麯綫,實現自然的加速和減速效果。 動態交互邏輯的實現: 如何將動效與用戶操作關聯起來,創建可交互的原型。 不同類型動效的實現技巧: 過渡動效: 頁麵切換、元素進齣屏幕的流暢過渡。 狀態變化動效: 按鈕點擊、開關切換、加載狀態等。 反饋動效: 對用戶操作的即時視覺響應。 引導性動效: 吸引用戶注意力的動畫元素。 動效資源與素材的應用: 瞭解如何尋找和使用高質量的動效素材,以及如何根據項目需求進行二次創作。 第四章:動效設計的進階——優化與性能考量 優秀的動效不僅要美觀,更要高效。本章將深入探討動效設計的優化策略和性能考量: 動效性能優化原則: 理解渲染原理: 瞭解不同動效在設備上的渲染方式,如GPU加速,以及如何利用它們提高流暢度。 避免不必要的重繪與迴流: 學習如何通過閤理的CSS屬性和JavaScript調用來減少性能損耗。 控製動效的復雜性: 哪些動效會顯著影響性能?如何權衡視覺效果與性能? 針對不同平颱的性能調優: 移動端與桌麵端在性能上有何差異?如何進行針對性優化? 動效與可用性原則的平衡: 不過度動效: 認識到“少即是多”的原則,避免乾擾用戶視綫和操作。 可控性與可中斷性: 用戶應該能夠控製或中斷不想要的動效。 可訪問性考量: 為有特殊需求的用戶(如對動效敏感的用戶)提供關閉或簡化動效的選項。 動效設計的A/B測試與用戶反饋: 如何通過數據來驗證動效設計的有效性?如何收集用戶反饋來不斷迭代優化動效? 動效設計在不同場景下的應用: Web端動效設計: PC端瀏覽器和響應式設計中的動效實現。 移動端應用動效設計: iOS和Android平颱特有的動效規範與最佳實踐。 高級應用: 3D動效、數據可視化動效等前沿探索。 第五章:動效設計的未來與趨勢 在快速發展的數字領域,UI交互動效的設計理念也在不斷演進。本章將帶領您展望UI交互動效的未來發展趨勢: AI在動效設計中的應用: 探索人工智能如何輔助動效設計,例如自動生成動效、智能優化動畫參數等。 沉浸式體驗與XR(VR/AR)中的動效: 隨著虛擬現實和增強現實技術的成熟,動效在沉浸式環境中的作用將更加凸顯。 參數化動效與生成式設計: 學習如何利用參數化工具創建高度可定製和動態變化的動效。 響應式動效與個性化體驗: 如何根據用戶設備、網絡環境甚至用戶情緒來動態調整動效,提供更個性化的體驗。 動效設計師的職業發展路徑: 探討UI交互動效設計師的職業前景和成長方嚮。 總結 《UI交互動效必修課》將為您提供一個全麵、係統、深入的學習平颱,幫助您掌握UI交互動效設計的所有關鍵要素。通過理論學習、工具實踐和前沿趨勢的探討,您將能夠自信地設計齣令人印象深刻、能夠真正提升用戶體驗的動效,從而在競爭激烈的數字産品設計領域脫穎而齣。這不僅僅是一門課程,更是您通往卓越UI設計師之路的堅實基石。