産品特色
編輯推薦
本書內容分為兩部分:首部分是UI界麵的設計教程,遵循iOS、Material Design、Apple Watch設計規範,讀者可以在該部分中學習如何使用Sketch進行移動UI界麵、圖標和Apple Watch界麵的設計;第二部分是交互動效教程,讀者可以在該部分學習如何將Sketch、Keynote、Principle和Pixate四大交互設計軟件搭配進行動效設計,從UI到UX,讓界麵由靜到動。
隨書附贈案例源文件,另外贈送近600分鍾的輔助教學視頻。
內容簡介
《動靜之美——Sketch移動UI與交互動效設計詳解》全麵、細緻地介紹瞭Sketch軟件的使用方法,以及和Sketch軟件無縫銜接的幾款交互動效軟件的使用方法。本書不局限於軟件本身的使用方法,更多的是設計思路和設計規範等內容的分享,讓讀者在掌握UI設計和交互動效設計精髓的同時徹底掌握Sketch,並能用Keynote、Principle和Pixate等軟件進行交互動效設計。
《動靜之美——Sketch移動UI與交互動效設計詳解》的配套學習資源包括案例源文件和近600分鍾的輔助教學視頻,幫助讀者快速理解書中的知識點。讀者可通過在綫方式獲取這些資源,具體方法請參看本書前言。
《動靜之美——Sketch移動UI與交互動效設計詳解》適閤廣大初、中級UI設計師,交互設計師和産品經理等相關從業人員閱讀使用,同時也適閤需要學習Sketch軟件的設計愛好者閱讀。
作者簡介
黃方聞
高級交互設計師,國內早一批 Sketch 使用者,並緻力於該軟件的推廣與研究。
從 2007 年 iPhone 誕生起便專注於移動交互設計領域的研究,對移動交互設計領域有深刻的思考與獨到的見解,倡導設計師的工作高效率化,多次翻譯並分享國外前沿設計文檔及交互說明。
目錄
CHAPTER 01 移動UI設計師的入門 011
1.1 移動UI的發展 012
1.1.1 第一階段:移動UI設計的目的是保證軟件的可用 012
1.1.2 第二階段:從可用到易用 012
1.1.3 第三階段:內容為王的設計追求減法和好用 013
1.2 移動UI設計師的工作流程 014
1.3 不同移動平颱之間的差異 015
1.4 移動UI設計師應瞭解的基本常識 018
1.4.1 移動UI設計中用到的單位 019
1.4.2 常用移動設備的尺寸 019
1.4.3 文字設計注意事項 021
1.4.4 為觸控而設計 022
1.4.5 從iOS9的特點看設計趨勢 023
1.5 本章小結 024
CHAPTER 02 初識Sketch 025
2.1 Sketch的安裝 026
2.2 Sketch的界麵介紹 027
2.2.1 歡迎界麵 028
2.2.2 Sketch的主界麵 029
2.3 Sketch的快捷鍵 032
2.3.1 Sketch的快捷鍵列錶 033
2.3.2 自定義快捷鍵 036
2.4 Sketch的常見問題 037
2.5 本章小結 038
CHAPTER 03 從綫框原型開始 039
3.1 綫框原型的基本概念 040
3.2 繪製綫框原型的注意事項 041
3.2.1 導航菜單的樣式 041
3.2.2 綫框原型中的層次 042
3.2.3 綫框原型風格對設計的影響 043
3.3 使用Sketch繪製綫框原型 044
3.3.1 注冊頁綫框原型的繪製 044
引申知識點01——迴到Sketch文檔的曆史版本 045
引申知識點02——Sketch的畫闆預設 046
引申知識點03——畫闆的檢查器 048
引申知識點04——圖層麵闆 049
引申知識點05——模闆 052
引申知識點06——圖層組的檢查器 054
引申知識點07——形狀圖層的檢查器 055
引申知識點08——文字圖層的檢查器 057
3.3.2 內容列錶頁綫框原型的繪製 059
3.3.3 完整綫框原型的繪製 061
3.3.4 繪製綫框原型的思考 062
3.4 本章小結 062
CHAPTER 04 移動UI界麵的設計 063
4.1 iOS應用界麵設計規範思考 064
4.2 安卓應用界麵及Material Design設計規範思考 067
4.3 移動界麵中文字的設計思考 069
4.4 移動界麵中顔色的設計思考 071
引申知識點09——Sketch的顔色麵闆 072
引申知識點10——Sketch的插件及安裝 076
4.5 使用Sketch設計移動界麵 080
4.5.1 注冊登錄頁麵和注冊頁麵的設計 081
引申知識點11——Sketch輸入框的運算 081
引申知識點12——文本共享樣式 082
引申知識點13——符號 084
引申知識點14——位圖圖層的檢查器 086
引申知識點15——位圖的插入 086
引申知識點16——毛玻璃效果 087
引申知識點17——圖層共享樣式 089
4.5.2 內容頁麵的設計 092
引申知識點18——內容填充插件Content-generator-sketch-plugin 097
4.5.3 使用Sketch設計移動界麵的注意事項 098
4.6 移動界麵的多分辨率適配 100
引申知識點19——自適應設計插件Fluid for Sketch 101
4.7 本章小結 102
CHAPTER 05 移動UI圖標的設計 103
5.1 移動UI中圖標設計的思考 104
5.1.1 功能型圖標設計的思考 104
5.1.2 展示型圖標設計的思考 106
5.2 功能型圖標的繪製 107
5.2.1 繪製功能型圖標之前 108
5.2.2 使用Sketch進行功能型圖標的設計 108
引申知識點20——鋼筆工具 110
引申知識點21——像素視圖模式 113
引申知識點22——布爾運算 115
引申知識點23——剪刀工具 118
5.3 展示型圖標的繪製 120
5.3.1 繪製展示型圖標之前 120
5.3.2 使用Sketch進行展示型圖標的繪製 121
5.4 圖標資源的獲取和使用 124
5.4.1 專業的圖標網站 124
5.4.2 圖標的源文件 125
5.5 本章小結 126
CHAPTER 06 設計稿的後續處理 127
6.1 在移動設備上實時預覽 128
6.2 將設計稿進行分享 129
6.3 交付給開發的文件 130
6.4 使用Sketch進行切圖、標注和導齣 131
6.4.1 Sketch畫闆和圖層的導齣 131
6.4.2 使用Sketch的切片工具進行切圖 133
引申知識點24——切片圖層檢查器 134
6.4.3 使用Sketch進行標注 135
6.5 展示型圖標的導齣 141
6.6 本章小結 142
CHAPTER 07 Apple Watch界麵的設計 143
7.1 瞭解Apple Watch 144
7.2 使用Sketch設計Apple Watch的圖標 147
7.2.1 主屏幕圖標 148
7.2.2 菜單圖標 151
7.3 使用Sketch設計Apple Watch的通知界麵 153
7.3.1 Short Look界麵 153
7.3.2 Long Look界麵 154
7.4 使用Sketch設計Apple Watch的速覽界麵 157
7.5 使用Sketch設計Apple Watch的App界麵 159
7.5.1 Page-based導航方式的設計 159
7.5.2 Hierarchical導航方式的設計 161
引申知識點25——濛版 162
7.6 Apple Watch中常見界麵內容設計方法 165
7.6.1 圓形進度條的設計方法 165
引申知識點26——Sketch中圖層的鏇轉 168
7.6.2 錶盤的設計方法 170
7.7 展示Apple Watch中的界麵 173
7.7.1 扁平風格界麵展示 173
7.7.2 模擬真實使用場景 175
7.8 本章小結 178
CHAPTER 08 Sketch知識點補充及使用技巧 179
8.1 Sketch知識點的補充 180
8.1.1 Sketch的係統偏好設置 180
8.1.2 Sketch的標尺、參考綫、網格和布局 183
8.1.3 Sketch工具的補充介紹 186
8.2 Sketch的使用小技巧 194
8.2.1 靈活運用描邊屬性 194
8.2.2 復製圖層的CSS屬性 196
8.2.3 Sketch對位圖文件的處理 197
8.2.4 按一定規律復製圖層 200
8.2.5 背景模糊 200
8.2.6 路徑文本 203
8.2.7 按指定尺寸導齣 204
8.3 本章小結 204
CHAPTER 09 移動交互動效設計基礎知識 205
9.1 從AE來看動畫是怎麼形成的 206
9.2 更加真實的動效 210
9.3 理解移動交互動效設計 213
9.3.1 移動交互動效設計的概念 213
9.3.2 移動設備的手勢 213
9.4 移動交互動效設計的注意事項 217
9.5 本章小結 220
CHAPTER 10 讓界麵動起來 221
10.1 常見UI動效軟件介紹 222
10.1.1 快速交互原型的動效軟件 222
10.1.2 時間軸為設計導嚮的動效軟件 224
10.1.3 信號流式的動效軟件 225
10.1.4 編程類動效軟件 227
10.2 使用Keynote進行動效設計 229
10.2.1 Keynote的基礎入門 229
10.2.2 Keynote設計UI動效的初始化設置 234
10.2.3 元素變形——Keynote的神奇移動 235
10.2.4 Keynote和Sketch的無縫銜接 238
10.3 使用Principle進行動效設計 244
10.3.1 Principle的基礎入門 244
10.3.2 Principle的動效設計 250
10.3.3 Principle的導齣和分享 264
10.4 使用Pixate進行動效設計 266
10.4.1 Pixate的基礎入門 267
10.4.2 使用Pixate設計動效 273
10.4.3 Pixate的導齣和共享 281
10.5 探索更多的交互動效設計軟件 282
10.5.1 值得期待的Silver Flows 282
10.5.2 快速上手全新的設計軟件 287
10.6 本章小結 290
CHAPTER 11 移動UI設計師的成長 291
11.1 設計參考資源的收集和對Sketch源文件的分析 292
11.2 動效資源的獲取和對動效圖的分析 296
11.3 UI設計思維的提升 298
後記 300
前言/序言
《動靜之美:Sketch移動UI與交互動效設計詳解》—— 靈動視界,觸感交互的藝術之旅 在這個信息爆炸、視覺至上的時代,一款優秀的移動應用不再僅僅依賴於其強大的功能,更在於其能否以一種直觀、愉悅且引人入勝的方式與用戶溝通。界麵設計,尤其是交互動效,已然成為連接用戶與産品、傳遞品牌溫度、提升用戶體驗的關鍵所在。《動靜之美:Sketch移動UI與交互動效設計詳解》並非一本簡單的工具書,它是一場深入探索設計本質、解鎖動效潛能、構建觸感交互藝術的係統性旅程。本書緻力於為讀者提供一個全麵、深入且實用的視角,去理解、學習和實踐Sketch軟件在現代移動UI與交互動效設計中的強大應用,從而創作齣既具視覺衝擊力又富含邏輯美感的産品。 核心價值與獨特視角: 本書的核心價值在於其“動靜結閤”的理念。它深刻認識到,靜態的UI設計是交互的基礎,而動態的交互動效則是賦予産品靈魂、提升用戶沉浸感、引導用戶行為的生命力所在。我們不將動效視為錦上添花的點綴,而是視其為産品體驗的有機組成部分,與UI設計一同構成一個完整、流暢的溝通係統。 本書的獨特視角體現在: 理論與實踐的深度融閤: 摒棄空泛的理論說教,我們從實際的設計場景齣發,將前沿的設計理論、心理學原理與Sketch軟件的具體操作緊密結閤。每一項動效的設計,都旨在解決實際的用戶痛點,提升用戶效率,或強化情感連接。 Sketch作為核心工具的精細打磨: Sketch作為當前移動UI設計的主流工具,其強大的矢量編輯能力、組件化設計理念以及豐富的插件生態,為交互動效的設計提供瞭堅實的基礎。本書將深入剖析Sketch在實現復雜動效過程中的關鍵功能、技巧與工作流程,例如如何利用組件、符號、智能布局、原型聯動以及第三方插件來高效地構建和預覽動效。 循序漸進,由淺入深的學習路徑: 本書的學習麯綫設計得十分平緩,從基礎的UI元素設計和靜態布局,逐步過渡到動畫的基本原理、關鍵幀動畫、轉場動畫、微交互動效,再到更高級的交互邏輯和情感化設計。無論您是初學者還是有一定經驗的設計師,都能找到適閤自己的學習節奏。 聚焦“用戶體驗”的動效設計: 本書的重中之重在於,設計的每一個動效都必須服務於用戶體驗。我們會詳細探討不同類型動效的設計原則、常見誤區以及如何通過動效來: 提供清晰的反饋: 讓用戶知道他們的操作是否被係統理解和執行。 引導用戶注意力: 在恰當的時間突齣重要信息或操作。 增強界麵的生命力: 讓界麵不再冰冷,而是生動、有趣且富有情感。 優化導航與信息層級: 使復雜的信息結構變得易於理解和瀏覽。 營造品牌個性和情感連接: 通過獨特的動效風格,塑造産品的品牌形象,觸動用戶的情感。 精選案例的深度解析: 本書不隻是羅列技巧,而是精選瞭大量來自一綫互聯網公司的實際應用案例。我們會對這些案例進行細緻的剖析,講解其設計思路、動效邏輯、在Sketch中的具體實現步驟,以及其背後所體現的設計哲學。讀者可以通過模仿和實踐這些案例,快速掌握核心技能。 本書內容概覽: 第一部分:奠定基石——Sketch中的UI設計基礎 在深入探討動效之前,紮實的UI基礎是不可或缺的。本部分將: Sketch工作區與核心功能精講: 從新建文檔、畫布設置、矢量工具、文本編輯、顔色填充、描邊樣式等基礎操作入手,確保讀者熟悉Sketch的方方麵麵。 組件化設計與符號係統: 講解如何構建可復用的UI組件,運用符號係統實現設計效率和一緻性的最大化,為後續的動效製作打下堅實基礎。 響應式布局與柵格係統: 掌握在Sketch中創建適應不同屏幕尺寸的響應式布局,以及如何運用柵格係統保證界麵的整體協調性和專業感。 圖層管理與優化: 高效的圖層管理是復雜項目順利進行的關鍵,本節將介紹命名規範、分組技巧、智能參考綫等,為動效的精確控製提供便利。 共享與協作: 探討Sketch的團隊協作功能,如共享庫、評論等,如何讓設計流程更加順暢。 第二部分:動起來的藝術——交互動效設計理論與實踐 本部分將是本書的重點,將帶領讀者進入令人興奮的動效設計世界: 動效設計的通用法則: 藉鑒迪士尼動畫原理,講解“緩入緩齣”(Easing)、“延時”(Delay)、“預判”(Anticipation)、“二次動作”(Secondary Action)等經典動畫原則,並分析它們如何應用於UI動效,使其更自然、更符閤用戶預期。 關鍵幀動畫的奧秘: 深入講解Sketch中創建關鍵幀動畫的方法,包括時間軸的使用、屬性變化(位置、大小、透明度、鏇轉、顔色等)的控製,以及如何製作齣流暢、富有錶現力的動畫序列。 轉場動畫的設計: 探索不同場景下的轉場動效,如頁麵切換、元素進入/退齣、模態框彈齣等。我們將分析不同轉場方式對用戶體驗的影響,並演示如何在Sketch中實現平滑、富有邏輯的轉場。 微交互的力量: 聚焦於那些細微但至關重要的交互細節,如按鈕點擊的反饋、加載動畫、下拉刷新、滑動刪除等。這些微小的動效能夠顯著提升界麵的友好度和響應感。 利用Sketch插件賦能動效設計: 介紹並實操幾款主流的Sketch動效插件(例如,動態預覽、自動動畫生成等),它們能極大地提升設計效率和創意實現的可能性。 動效的性能與優化: 討論在設計動效時需要考慮的性能問題,如何避免過度動畫導緻卡頓,以及如何設計齣既美觀又高效的動效。 第三部分:深入探索——高級交互與情感化設計 本部分將帶領讀者突破基礎,進入更具挑戰性和創造性的領域: 原型聯動與復雜交互流程: 學習如何通過Sketch的Artboard和鏈接功能,構建復雜的交互原型,模擬真實的用戶流程,並為動效的應用提供上下文。 數據驅動的動效設計: 探討如何根據數據的變化來驅動動效,例如列錶的動態加載、圖錶的實時更新等,使界麵更具動態性和信息量。 動效在特定場景的應用: 引導式教程與新手引導: 如何利用動效讓用戶更輕鬆地理解産品功能。 遊戲化與奬勵機製: 如何通過動效增強用戶參與感和趣味性。 信息可視化與數據呈現: 如何用動效清晰地展示復雜數據。 品牌敘事與情感錶達: 如何通過動效傳遞品牌故事和情感溫度。 跨平颱設計與動效的一緻性: 考慮在不同平颱(iOS, Android)下,動效設計的差異與共通點,以及如何保持品牌在不同平颱上的統一體驗。 未來趨勢展望: 探討人工智能、AR/VR等新興技術對移動UI與交互動效設計可能帶來的影響。 本書的受眾: 《動靜之美:Sketch移動UI與交互動效設計詳解》麵嚮所有對移動應用設計充滿熱情的設計師、産品經理、UI/UX研究員,以及希望提升自身設計能力和作品競爭力的從業者。無論您是初入設計領域的新人,還是尋求突破的資深設計師,本書都將為您提供寶貴的知識、實用的技能和啓迪靈感的視角。 結語: 在這個瞬息萬變的數字世界裏,優秀的設計不僅能解決問題,更能創造驚喜,觸動人心。《動靜之美》將引導您在Sketch的畫布上,揮灑創意,以“動”賦予“靜”以生命,用靈動的交互為用戶打造令人難忘的體驗。這是一場關於視覺、觸感與情感的深度對話,一次對現代移動産品生命力的全新詮釋。讓我們一同踏上這段精彩紛呈的設計之旅,解鎖“動靜之美”的無限可能。