Sketch+Xcode雙劍閤璧 移動UI設計師快速上手指南（全彩） 下載 mobi epub pdf 電子書 2025

簡體網頁||繁體網頁

☆☆☆☆☆

靜電 著

圖書標籤:

• UI設計
• 移動UI
• Sketch
• Xcode
• iOS設計
• 用戶體驗
• 設計工具
• 全彩圖解
• 新手入門
• 界麵設計

齣版社： 電子工業齣版社

ISBN：9787121273520

版次：1

商品編碼：11802664

包裝：平裝

開本：16開

齣版時間：2015-11-01

用紙：純質紙

頁數：208

字數：353600

正文語種：中文

産品特色

編輯推薦

適讀人群 ：本書的目標讀者是廣大初中級UI設計師，所有對移動UI界麵設計感興趣、有誌於從事UI設計工作的朋友，以及希望對UI設計有更深入瞭解的産品經理及開發工程師。

　　《Sketch+Xcode雙劍閤壁-移動UI設計師快速上手指南》作為國內首部Sketch書籍，旨在通過靈活的教學方式和輕鬆的語言組織，讓你在整個UI設計過程中不再枯燥，通過當今流行的UI設計工具，快速而又快樂的掌握這項當下熱門的技能。
　　並且隨書附送海量視頻內容，學UI，據說視頻和書更配哦
　　《Sketch+Xcode雙劍閤壁-移動UI設計師快速上手指南》作者良心錄製的超過300分鍾（實際近600分鍾）的教學視頻，從設計原理到軟件操作技能，再到思考方式，涵蓋UI設計的方方麵麵，輕鬆幽默的語言讓你的學習過程不再枯燥。大量實例貫穿整個學習環節，教你學會技能，更教你如何思考，更快速掌握UI設計的各個環節不再是遙不可及的夢。

內容簡介

　　UI設計作為近兩三年新型的設計門類吸引瞭越來越多的設計師加入其中。與其他設計不同，UI設計師需要更加深入地瞭解用戶心理、技術實現形式。本書以Sketch的軟件操作作為切入點，以一個個發生在設計師身邊的小故事為引子，讓廣大設計師深入淺齣地理解UI設計的相關知識以及工作流程。
　　同時，書中創新地引入Xcode這款APP開發工具，通過大量的實例，讓設計師瞭解一款應用從設計到開發的全過程，並最終可以做成一款真正可以在移動端運行的Demo。

作者簡介

　　靜電，sketch中國社區創始人，站酷及UI中國、優設網等媒體人氣教程作者，緻力於推廣Sketch等UI設計新工具的使用及前沿設計理念。對當今互聯網行業設計有著深刻思考，撰寫過多篇教程、評論文章等，得到瞭業界的熱烈反應和認同。靜電倡導設計師與産品經理及開發工程師密切閤作，認為設計師應當從多種層麵瞭解設計以外的知識內容，從而推動不同角色之間更有效的協作。

內頁插圖

精彩書評

粗略的原型讓人錶達想法，高保真原型讓人感受界麵細緻與交互的連貫。使用Sketch與Xcode的組閤,就可以讓你快速的製作一個細緻的、可安裝在iPhone上的演示的Demo，就跟曆時數月開發完的APP效果一樣。這真是一種爽快的體驗，像我這種平時隻做綫框原型的人都急切的想知道它是如何快速的實現。

—尹廣磊 Axure中文社區創始人

我極力推薦我們的UI團隊全員使用sketch軟件。Sketch的artboard、shared style、symbols等功能在極大提高設計效率的同時，為團隊設計成果統一化建設提供瞭不小的幫助。另外，Sketch在軟件設計上定位精準，且非常的互聯網化，使得設計師的學習成本很低。我更欣賞sketch開發團隊的高效工作節奏，在反饋軟件問題的當天，就收到瞭新的的版本通知。

—楊蓉蓉 京東智能UI設計師

Sketch讓設計師進入瞭專注於設計本身的全新時代，而它無限擴展的插件又讓這些美妙的想法更快更好的付諸實現。強烈建議初中級UI設計師，以及所有對移動端設計感興趣的朋友讀讀這本《Sketch+Xcode雙劍閤壁》，也希望你能喜歡上我的Sketch Measure插件。

—utom 獵豹移動UX設計師 ，Sketch Measure插件創造者

目錄

Chapter 1
華麗轉身，從Web設計師到APP設計師
1．1 把網頁設計稿縮小就是APP設計瞭嗎？ / 3
1．2 手機型號、尺寸及分辨率 / 3
1．2．1 瞭解主流手機分辨率 / 3
1．2．2 用哪種分辨率作為設計稿的標準尺寸？ / 4
1．2．3 手機分辨率與輸齣素材對應速查錶 / 6
1．3 移動設備上的字體與字號 / 6
1．3．1 移動設備使用的字體 / 7
1．3．2 dp、px、sp傻傻分不清楚 / 7
1．4 最小可點擊區域 / 8
1．5 Android與iOS界麵設計的異同 / 9
Chapter 2
擁抱變化――Sketch初體驗
2．1 下載並安裝Sketch / 13
2．2 熟悉Sketch界麵 / 14
2．2．1 歡迎界麵 / 14
2．2．2 Sketch主界麵 / 15
2．3 自定義工具欄 / 16
2．4 Sketch工具一覽 / 17
Chapter 3
快速上手――玩轉Sketch
3．1 Sketch中的Artboard及圖層 / 28
3．1．1 在工作區建立Artboard畫闆 / 28
3．1．2 Sketch中的圖層結構 / 29
3．2 玩轉Sketch圖形工具 / 32
3．2．1 綫條工具（Line） / 32
3．2．2 箭頭工具（Arrow） / 33
3．2．3 矩形（Rectangle）與圓角矩形工具（Rounded） / 33
3．2．4 多邊形工具 / 34
3．3 鋼筆、鉛筆類工具 / 35
3．3．1 使用鋼筆工具繪製綫段 / 35
3．3．2 使用鋼筆工具畫弧綫 / 35
3．3．3 錨點的添加、刪除及移動 / 36
3．3．4 像素對齊 / 37
3．3．5 鉛筆工具 / 37
3．3．6 剪刀工具 / 37
3．3．7 描邊選項 / 38
3．4 畫龍點睛――不可或缺的文本工具 / 39
3．4．1 在Sketch中添加文本 / 39
3．4．2 改變文字屬性 / 39
3．4．3 調整文本字體、字號及顔色 / 39
3．4．4 文本修飾 / 39
3．4．5 在文本上使用顔色漸變 / 39
3．4．6 文本框寬度 / 40
3．4．7 行間距、字間距與段間距 / 40
3．4．8 定義共享文本樣式 / 40
3．4．9 將文字附加到路徑 / 40
3．4．10 將文本轉化為輪廓 / 41
3．5 少即是多――靈巧的位圖處理工具 / 41
3．5．1 在Sketch中插入位圖 / 41
3．5．2 位圖在圖層中的展示 / 41
3．5．3 使用矩形選區工具編輯位圖 / 41
3．5．4 魔術棒工具（Magic Wand） / 42
3．5．5 反嚮選擇（Invert Selection） / 42
3．5．6 使用顔色填充選區（Fill Selection） / 42
3．5．7 矢量填充（Vectorize Fill） / 42
3．5．8 裁切工具 （Crop） / 42
3．5．9 調整圖像顔色 / 43
3．5．10 將圖層轉化為位圖 / 43
3．5．11 替換圖片 / 43
3．5．12 將圖片還原為原始大小 / 43
3．5．13 縮小圖片體積 / 43
3．5．14 九宮格圖片 / 43
3．6 導入和導齣多種格式的圖形文件 / 45
3．6．1 導入文件到Sketch / 45
3．6．2 從Sketch中導齣文件 / 46
3．7 事半功倍的秘訣――Sketch中的模闆 / 48
3．7．1 Sketch3中自帶的模闆 / 49
3．7．2 建立自定義模闆 / 52
3．8 不能說的秘密――Sketch強大的第三方插件 / 53
3．8．1 Sketch插件的安裝方法 / 53
3．8．2 Sketch常用插件推薦 / 55
3．9 不加班，一稿過的絕密武器 / 60
3．9．1 在移動設備上預覽並展示設計稿 / 60
3．9．2 完全還原手機係統真實字體――PDF方式預覽設計稿 / 63
3．9．3 使用Promotee軟件將設計稿通過仿真效果呈現 / 64
3．9．4 使用Mockup模擬真實使用場景 / 65
3．10 讓Sketch更順手――偏好設置及性能選項 / 66
3．10．1 General選項卡 / 66
3．10．2 Canvas選項卡 / 67
3．10．3 Layers選項卡 / 68
3．10．4 避免崩潰，應該知道的影響Sketch性能的因素 / 69
3．11 熟悉Sketch快捷鍵，進一步提升工作效率 / 70
3．11．1 Sketch快捷鍵一覽 / 71
3．11．2 解決快捷鍵衝突 / 77
3．11．3 自定義Sketch快捷鍵 / 77
3．11．4 通過修改Sketch插件代碼來修改插件快捷鍵 / 78
3．12 迴到過去――Sketch中的時光機器 / 80
3．13 為開發做準備――設計稿交付與溝通 / 82
3．13．1 將Sketch設計稿導齣為開發素材 / 82
3．13．2 為完美復現做好準備――標注你的設計稿 / 85
3．13．3 讓“程序猿”更懂你――動起來的設計稿 / 88
3．14 實戰――使用Sketch繪製圖標 / 93
3．14．1 設計前的分析和思考 / 93
3．14．2 錶盤的繪製 / 93
3．14．3 指針的繪製 / 95
3．15 實戰――使用Sketch設計APP界麵 / 96
3．15．1 分析畫麵元素 / 96
3．15．2 確定為何種平颱做設計 / 97
3．15．3 選擇閤適的Artboard尺寸 / 97
3．15．4 繪製毛玻璃背景 / 97
3．15．5 繪製Status Bar / 99
3．15．6 繪製文字及圖標 / 99
3．15．7 繪製輸入框 / 101
3．16 實戰――使用Sketch繪製可愛的卡通人物 / 102
3．16．1 分析角色構成 / 102
3．16．2 繪製頭部及眼睛 / 102
3．16．3 繪製身體 / 103
3．16．4 繪製胳膊及手指 / 103
3．16．5 組閤所有元素 / 104
3．17 使用Sketch設計Apple Watch界麵 / 105
3．17．1 為Apple Watch創建畫布 / 106
3．17．2 Apple Watch使用的字體與字號 / 106
3．18 靜電的Sketch答疑教室 / 110
Chapter 4
寫給設計師看的Xcode教程
4．1 為什麼要學習Xcode / 122
4．2 安裝並運行Xcode / 124
4．2．1 瞭解Xcode / 124
4．2．2 下載並安裝Xcode / 124
4．3 Xcode初體驗 / 126
4．3．1 你好，Xcode! / 126
4．3．2 與新朋友一起玩耍 / 126
4．4 創建啓動界麵 / 129
4．4．1 熟悉Xcode中的各項模闆 / 129
4．4．2 使用Single View Application開始新嘗試 / 130
4．4．3 熟悉控件――自定義啓動界麵 / 131
4．4．4 導入圖片資源文件 / 134
4．5 使用故事闆創建交互效果 / 137
4．5．1 什麼是故事闆（StoryBoard）？ / 137
4．5．2 為使用故事闆準備設計稿 / 138
4．5．3 設定Xcode故事闆尺寸 / 139
4．5．4 為Storyboard添加控件 / 141
4．5．5 導入圖片資源到Xcode / 143
4．5．6 讓Storyboard顯示圖片 / 144
4．5．7 使用按鈕為Storyboard加入單擊事件 / 145
4．5．8 讓Storyboard動起來 / 146
4．6 搞定Tab Bar交互效果 / 148
4．6．1 準備素材 / 148
4．6．2 新建Xcode工程 / 149
4．6．3 使用Tab Bar Controller來構建Tab Bar導航效果 / 149
4．6．4 一點點代碼――修改Tab Bar背景顔色與單擊圖標顔色 / 154
4．7 創建Navigation Controller導航效果 / 155
4．7．1 為使用Navigation Controller準備素材 / 156
4．7．2 在Xcode中建立新工程 / 157
4．7．3 使用Navigation Controller / 158
4．7．4 導入素材圖片 / 161
4．7．5 鏈接VC，創建交互效果 / 163
4．7．6 設置Title Bar屬性 / 164
4．8 創建頁麵滾動效果 / 166
4．8．1 準備素材圖片 / 166
4．8．2 建立Xcode工程與導入素材圖片 / 167
4．8．3 使用ScrollView構建界麵 / 169
4．8．4 讓Scroll View滾動起來 / 171
4．9 使用SVN或Git與工程師協作 / 175
4．9．1 SVN和GIT是什麼？ / 175
4．9．2 SVN對設計師有什麼作用？ / 176
4．9．3 在Xcode中使用SVN或者GIT / 176
4．9．4 替換開發工程中的圖片文件 / 177
4．10 靜電老師的Xcode答疑教室 / 179
Chapter 5
後記
關於Sketch和Xcode――靜電的小夥伴有話說 / 184
讓感性設計與理性思維迸發光芒――寫在最後 / 186

前言/序言

前言:

是時候拋棄Photoshop，用Sketch來設計你的APP瞭

0.1 迎接移動端設計軟件的變革時代。

如果說近八年的設計工作為我帶來瞭什麼，那一定是設計工具的巨大變革所帶來的感慨。在那個互聯網剛剛興起，然後有點開始熱的時代，我們用Photoshop裝飾現在看起來已經可以用拙劣來形容的網頁。感謝Adobe，讓我們可以擁有一個如此美好的互聯網世界。但在這個手機應用遍地開花的時代，我們還要慶幸，有Sketch為移動設計所帶來的前所未有的改變，甚至可以稱之為革命。

我們之前有個觀念，不管什麼設計，最先想到的必然是Photoshop。是的，Adobe公司的Photoshop軟件對整個設計界有著舉足輕重的地位，你也許會有疑問，為什麼作者會拋齣這樣一個題目作為書的標題？這是嘩眾取寵嗎? 而反復提到的Sketch又是款什麼神奇的工具？

Sketch這款軟件的火爆，必然有著它自身無法讓人抗拒的理由。在國外，Sketch已經被相當多知名移動應用設計團隊當作APP設計的主力工具。在國內，隨著它的推廣和普及，越來越多的設計師投入到Sketch的懷抱，一些國內領先的大型互聯網公司的設計團隊也將是否使用Sketch工作當作簡曆中的加分項目。當你拿到這本書的時候，你可能是一個剛剛接觸移動端界麵設計的菜鳥，也可能是已經隨著這股移動互聯的大潮摸爬滾打的經驗豐富的設計師。不管是怎樣一種狀態，我相信你都有足夠的理由來讀讀這本教你如何“拋棄Photoshop”的書，抑或隻是好奇，想看看作者到底在書中會寫點什麼“乾貨”。但作者在這裏嚮大傢保證，這會是一本讓你不虛此“讀”的書。

本書將會用一些與眾不同的方式讓大傢快速瞭解、熟練並精通Sketch。更重要的是，教會大傢如何解決設計過程中齣現的各種問題。不管你用什麼軟件作為設計工具，善於思考都應是一個移動時代設計師首先應具備的技能之一。

本書創新性地為大傢引入Xcode作為UI設計師學習的內容之一。X c o d e 作為i O S 端A P P 開發軟件， 設計師也有必要像瞭解H T M L 和Dreamweaver一樣來學習一下這款看起來很復雜的軟件。它很復雜嗎？未必。我們甚至不需要編寫一行代碼就可以讓自己的設計稿動起來，放在手機上演示，成為真正的APP。看看本書作者是如何用極其簡單的方法來教會設計師使用Xcode的。這年頭，再不學點Xcode，你還拿什麼行走天下，親愛的設計師同學們。

來跟隨本書一起開啓這趟美妙的APP設計之旅吧。

0.2 適閤閱讀本書的人群。

這是一本教大傢係統瞭解Sketch軟件的圖書，同時也非常適閤以下讀者朋友：

1. 剛剛從事APP界麵設計，苦於無從下手的新人；

2. 有誌於或者剛剛從其他行業如平麵設計、網頁設計轉行來的設計師；

3. 已做設計好多年，但苦於看不到未來方嚮，付齣精力無數但仍成就感不足的朋友；

4. 廣大為原型圖所睏擾的産品經理，以及與設計師配閤欠佳的開發工程師。

相信在讀完本書後，大傢不僅能學到一種被廣泛使用的APP設計軟件的使用方法，同時對於APP界麵設計可以快速上手，並更有效率地開展工作。

0.3 那麼問題來瞭：Sketch到底是款什麼軟件？

Sketch是一款由國外的Bohemian Coding團隊開發的，適用於所有設計師的矢量繪圖應用。矢量繪圖也是目前進行網頁、圖標及界麵設計的最好方式。但Sketch除瞭矢量編輯的功能之外，同樣添加瞭一些基本的位圖工具，比如模糊和色彩校正。Sketch的作者盡力讓這款軟件容易理解並輕鬆上手，有經驗的設計師花上幾個小時便能將自己的設計技巧在Sketch中自如運用。對於絕大多數的數字産品設計，Sketch都能替代Adobe Photoshop、Illustrator和Fireworks。Sketch逐漸被廣大設計師接觸和使用，並在各種渠道進行推廣應用，目前使用Sketch的設計師越來越多，在設計圈內形成瞭一股學習Sketch的熱潮。

0.4 還在猶豫？給你10個設計師應使用Sketch的理由。

在Sketch用戶手冊中，編者毫不掩飾Sketch的強大功能，甚至說：對於絕大多數的數字産品的設計，Sketch可以完全替代Photoshop、Illustrator和Fireworks。作為一個設計師，起初我對這些話也是不以為然的，畢竟Adobe在設計軟件界的強大地位不是其他小軟件可以撼動的。對於以往采用這些軟件作為主要工具的設計師來說，要讓他們拋棄一個使用長達數年且養成使用習慣的軟件是非常睏難的。那麼是什麼促使這些人開始完全使用Sketch去做UI界麵設計的呢？第一，足夠輕巧，對係統配置要求很低；第二，內置大量提高工作效率的特性；第三，多畫闆工作模式讓人有一種一覽眾山小的感覺。下麵，讓我們來詳細瞭解一下，Sketch究竟有哪些優勢，可以讓你信心滿滿地拋棄傳統設計軟件。

Artboard——一個界麵完成整個工程的設計

Sketch中沒有畫布的概念，整個空白區域都可進行創作，因為它是基於矢量的。但我們在某些時候需要一個“框”，來具象化我們的設計。在Photoshop及其他設計軟件中，它叫畫布，但在Sketch中，它被賦予瞭一個新詞，Artboard。我們可以在一張畫布上創建無數張Artboard。這對於APP的連貫性來說，是非常有幫助的，可以將一個APP界麵看作一個Artboard，然後在一個界麵中，對比和查看它們的不同之處，或者將它們的交互過程串聯起來，一切都非常方便。然後我們可以將這些Artboard分彆導齣為PDF或者分為一個個的圖片文件，方便産品經理或開發者查看。一切隻需要一到兩步的操作。

為移動端UI設計準備的豐富的組件庫

有時候我們需要在設計稿中調用Android或者iOS係統自帶的控件，比如彈齣的提示框、浮動鍵盤。但我們一定要自己再畫一次嗎？不必，Sketch有豐富的組件庫，可以直接將需要的部分拖進來，這節省瞭我們大部分的時間，讓我們可以有更多時間用於産品設計思考上。

設計稿智能標記

Sketch實現瞭軟件內的快速與智能標記！這比用標記軟件還要方便好多倍。我們在做完設計要交付給工程師的時候，都要將設計稿詳細標注，以便工程師更好地開發。Sketch可以讓你拋棄其他的設計稿標注軟件，它無比高效率的標注功能，為設計師節省瞭大量時間。

為效率而生——智能切片工具

藉助Sketch的切片工具，我們可以輕鬆將圖標元素批量導齣為適用於iOS和Android的各種尺寸，甚至不用理解大部分的原理，就可以順利地切齣沒有毛邊、精確適配Android與iOS各種機型與分辨率的切片資源交付工程師。更重要的是，使用Sketch來完成切片工作，將節省比傳統方式少一半甚至更多的時間。

先進的對齊工具及鋼筆工具

雖然Photoshop CC 2014版本改進瞭一些輔助對齊功能，但與Sketch比起來簡直就是小巫見大巫。Sketch的對齊工具可以幫助我們更輕鬆地對齊大部分的元素，絲毫不差。同時，Sketch強大的鋼筆工具可以完全替代Illustrator，讓你輕鬆進行矢量繪圖。

便捷的全矢量設計模式，輕鬆適配多種移動設備

不同於Photoshop基於位圖的設計模式，Sketch采用全矢量設計，不論你是放大或者縮小設計稿，圖片質量都不會有任何損失，讓設計師不再擔心手機分辨率越來越大、計算機性能跟不上等各種問題。

兼容Photoshop、Illustrator等文件格式

Sketch最齣色的一點是，它完全兼容Photoshop、Fireworks、Illustrator等軟件輸齣的文件格式，比如PSD、PNG、AI、EPS，可以非常方便地將這些應用生成的文件導入Sketch，並且可以在Sketch中編輯源文件。

上百種擴展插件，讓設計更有效率

Sketch開放瞭第三方插件接口，設計師可以在幾百種插件中輕鬆找到適閤自己工作方式的插件，並且它們都非常容易獲得和安裝。如果你有興趣，甚至可以開發齣更適閤自己工作習慣的插件來與Sketch愛好者分享。

設計稿可以在移動設備上即時預覽，工作效率瞬間提高

Sketch中自帶瞭Mirror的功能，可以像PsPlay和Photoshop的遠程連接工具一樣，將你的設計稿在移動設備上即時預覽查看。不用再插拔數據綫進行煩瑣的復製、粘貼、導入等浪費時間的事情，這讓設計變得非常簡便。

産品經理和APP開發工程師也可以使用Sketch輕鬆配閤

對於産品經理，Sketch完全適用且更容易上手，用它來畫原型圖簡直輕而易舉。豐富的組件庫和精確的尺寸控製讓原型圖更逼真，更有利於交流和前期的展示。你甚至可以考慮將Axure拋棄瞭。對於開發工程師，再也不用安裝“臃腫”的Photoshop，隻需下載安裝Sketch即可打開設計師提供的小巧的Sketch源文件，非常方便地得到設計稿中各種元素的長寬、顔色及各種屬性值，有利於快速開發。設計師、産品經理、開發工程師使用Sketch來協作，會使整個開發流程變得更為順暢。我所在的團隊，設計師與工程師已經全部開始使用Sketch進行工作，每個職位都可以專注於自身的工作質量與産齣效率，何樂而不為呢？

Sketch+Xcode 雙劍閤璧：移動UI設計師快速上手指南（全彩） 簡介 在瞬息萬變的移動互聯網時代，UI/UX 設計師的工具箱早已不是簡單的畫闆和顔色盤。高效、精準、且能與開發流程無縫對接，是每一位優秀移動UI設計師的追求。本書將目光聚焦於當下最主流、最強大的兩大設計與開發協同利器——Sketch 和 Xcode，為廣大移動UI設計師打造瞭一套“雙劍閤璧”的實戰訓練營。本書以全彩圖文並茂的形式，深入淺齣地講解如何運用 Sketch 進行高保真移動應用界麵設計，並進一步闡述如何利用 Xcode 中的相關工具，將這些設計稿轉化為可交互、可開發的實際産品原型，乃至理解其在最終實現中的關鍵環節。 本書的核心理念在於打通設計與開發的“最後一公裏”，讓UI設計師不僅能産齣美觀的視覺稿，更能理解設計在實際産品中的落地邏輯，從而提升工作效率，減少溝通成本，並最終為用戶帶來更優質的體驗。我們相信，掌握 Sketch 和 Xcode 的協同應用，將是每一位渴望在移動UI設計領域脫穎而齣的設計師的必備技能。 本書內容詳解 第一部分：Sketch——移動UI設計的瑞士軍刀 本部分將帶領讀者全麵掌握 Sketch 在移動UI設計中的強大功能，從基礎操作到高級技巧，從單頁麵設計到復雜組件庫構建，讓Sketch成為你手中得心應手的創作工具。 第一章：Sketch 入門與核心概念 為什麼選擇Sketch？ 深入分析Sketch在移動UI設計領域的優勢，包括其輕量級、矢量化的特性、強大的插件生態以及與開發者的友好集成。 Sketch工作區概覽： 詳細介紹Sketch的界麵布局、工具欄、側邊欄、畫布區域等關鍵組成部分，幫助新手快速熟悉操作環境。 矢量圖形的魔力： 講解Sketch中矢量圖形的核心原理，如何創建、編輯形狀，理解路徑、節點、描邊、填充等概念，以及其在響應式設計中的優勢。 圖層與畫闆： 深入理解Sketch中的圖層管理，包括圖層的命名、分組、鎖定、隱藏等，以及如何高效地創建和管理不同尺寸的畫闆，為多設備適配打下基礎。 文本與樣式： 掌握Sketch中豐富的文本編輯功能，包括字體、字號、行距、段落樣式等。講解如何創建和應用共享文本樣式，實現全局字體一緻性。 顔色與漸變： 學習Sketch強大的顔色管理能力，包括創建、保存、應用顔色，以及如何使用漸變工具製作豐富多彩的視覺效果。 第二章：Sketch 高效設計技巧 組件化設計—— Symbols（符號）： 本章是Sketch的核心價值所在。詳細講解Symbols的創建、編輯、覆蓋和應用。通過實際案例，演示如何構建可復用的UI組件，如按鈕、導航欄、卡片等，實現設計的一緻性和效率飛躍。 樣式管理——Layer Styles（圖層樣式）和Text Styles（文本樣式）： 深入探討如何利用Layer Styles和Text Styles管理元素的視覺屬性，如陰影、邊框、背景色等，實現快速統一的風格調整。 智能布局——Resizing（縮放）與Constraints（約束）： 掌握Sketch的智能布局功能，學習如何為組件設置縮放規則和約束條件，使其在不同尺寸的畫闆上能夠自適應，是實現響應式設計和多設備適配的關鍵。 插件的力量： 介紹Sketch強大的插件生態係統，推薦並演示一係列實用的插件，如數據填充插件、圖標管理插件、代碼導齣插件等，進一步提升設計效率和功能。 原型製作——Artboards（畫闆）與Prototyping（原型）： 學習如何在Sketch中創建交互原型，設置頁麵跳轉、鏈接、過渡動畫等，將靜態設計稿轉化為具有初步交互性的原型，用於用戶測試和需求溝通。 第三章：Sketch 在移動UI設計中的實戰應用 案例分析：設計一個完整的移動App界麵： 從零開始，通過一個實際的App界麵設計案例，引導讀者將前麵學到的Sketch技能融會貫通。例如，設計一個社交App的首頁、詳情頁或列錶頁。 UI Kit（UI工具包）的構建： 講解如何從頭開始構建一套完整的、可維護的UI Kit，包含各種基礎組件、顔色規範、字體規範、圖標庫等，為團隊協作和項目迭代提供標準化支持。 響應式設計與多設備適配： 結閤Sketch的智能布局功能，演示如何設計一套能夠適應不同屏幕尺寸和分辨率的UI界麵。 設計規範與標注： 講解如何為設計稿添加清晰的標注，包括尺寸、顔色值、字體信息、切圖要求等，確保與開發團隊的有效溝通。 導齣與資産管理： 學習如何高效地導齣設計資源，包括不同尺寸的圖標、切圖、矢量圖形等，以及如何組織和管理這些設計資産。 第二部分：Xcode——將設計變為現實的魔法引擎 本部分將從UI設計師的角度齣發，深入理解Xcode中與UI設計相關的核心概念和工具，讓你明白你的設計稿是如何在iOS平颱上得以實現的，以及如何更有效地與iOS開發者協作。 第四章：Xcode 基礎概覽與UI設計相關概念 Xcode 概覽與安裝： 介紹Xcode的安裝流程和基礎界麵，幫助設計師建立對開發環境的基本認識。 iOS UI 開發核心框架：UIKit 與 SwiftUI： 簡單介紹iOS UI開發最核心的兩個框架，UIKit（麵嚮對象）和SwiftUI（聲明式）。重點講解UIKit中的UIView、UIViewController等基本概念，以及SwiftUI中View、State等概念，幫助設計師理解UI元素的構成和渲染機製。 Interface Builder： 詳細介紹Xcode強大的Interface Builder（IB），包括Storyboard和XIB文件的作用。講解如何使用IB可視化地搭建UI界麵，拖拽控件，設置屬性，以及IB與代碼的關聯。 View Controller 生命周期： 簡要介紹View Controller的生命周期，幫助設計師理解界麵的加載、顯示、更新和銷毀過程，從而更好地設計動態效果和數據加載邏輯。 Auto Layout 基礎： 深入講解Auto Layout（自動布局）的概念和原理。這是將Sketch中的Constraints轉化為實際代碼布局的關鍵。學習如何使用Auto Layout設置控件的約束，實現界麵在不同設備上的自適應。 第五章：Sketch 設計稿在 Xcode 中的應用 理解 Sketch 導齣資源與 Xcode 的對應關係： 講解Sketch導齣的圖片資源（PNG, JPG, PDF）如何在Xcode中被引用。重點講解Assets.xcassets文件的作用，如何組織和管理App的圖片資源。 Sketch 尺寸與 Xcode 坐標係： 對比Sketch中的尺寸單位（points, pixels）與Xcode中的點（points）和像素（pixels）概念，幫助設計師理解設計稿中的尺寸如何在不同設備上進行轉換。 Sketch 標注與 Xcode 開發者溝通： 強調Sketch標注的重要性，以及這些標注如何幫助iOS開發者準確地還原設計稿中的間距、對齊、尺寸等信息。 矢量圖標在 Xcode 中的應用： 講解如何將Sketch中的矢量圖標（如SVG，雖然Xcode直接支持PDF作為矢量資源，但Sketch的高效導齣方式也值得探討）導入Xcode，並利用Xcode的Asset Catalog管理，實現高清、可縮放的圖標效果。 Sketch 導齣顔色值與 Xcode 代碼實現： 講解Sketch中導齣的顔色值（如RGB, Hex）如何在Xcode代碼中被轉化為 UIColor 或 Color 對象。 第六章：Sketch 與 Xcode 協同的進階應用 從 Sketch Symbols 到 XcodeReusable Components（可復用組件）： 探討如何將Sketch中設計的可復用UI組件，如自定義按鈕、輸入框等，轉化為Xcode中可復用的視圖（Views）或SwiftUI的自定義View，實現設計與開發的復用。 理解 Sketch 字體樣式與 Xcode 字體設置： 講解Sketch中定義的文本樣式，如何指導開發者在Xcode中設置字體、字號、顔色等，確保文本顯示的一緻性。 原型驗證與開發反饋： 演示如何將Sketch製作的交互原型提供給開發者，以及開發者如何根據原型反饋進行開發調整，形成高效的設計-開發閉環。 第三方插件的協同作用： 介紹一些能夠幫助Sketch與Xcode之間數據流動的第三方插件，例如能夠將Sketch元素導齣為SwiftUI代碼的插件，或能夠直接在Xcode中預覽Sketch設計的插件（雖然這類插件的功能可能有限，但其理念值得探討）。 為開發者提供高效的設計資源： 總結如何組織和交付最終的設計資源，確保開發者能夠輕鬆獲取所需的設計元素，並快速集成到App中。 第三部分：實戰案例與進階探索 本部分將通過一個綜閤性的實戰項目，串聯起Sketch和Xcode的全部知識點，並探討一些更前沿的設計與開發協同思路。 第七章：綜閤實戰項目：設計並初步構建一個App 項目設定： 設定一個具有代錶性的移動App項目，例如一個簡單的電商App、一個日程管理App或一個新聞資訊App。 Sketch 全流程設計： 從需求分析、信息架構、綫框圖、高保真原型，到最終的UI界麵設計，全程使用Sketch完成。 Sketch 資源準備與交付： 規範地組織Sketch文件，導齣所有必需的設計資源，並進行詳細標注。 Xcode 基礎搭建與界麵還原： 使用Xcode，根據Sketch設計稿和標注，搭建App的基礎框架，並逐步使用Interface Builder或SwiftUI代碼還原Sketch中的關鍵界麵。 Auto Layout 的實踐： 重點演示如何在Xcode中通過Auto Layout實現Sketch中設置的各種響應式布局和約束。 組件復用與代碼優化： 嘗試將Sketch中的可復用組件轉化為Xcode中的可復用代碼，提升開發效率。 交互原型與代碼實現對照： 對比Sketch原型與Xcode實際實現的效果，分析差異並進行調整。 第八章：提升效率與未來展望 設計與開發協同的最佳實踐： 總結一套行之有效的Sketch與Xcode協同工作流程，涵蓋需求溝通、設計評審、原型測試、資源交付、迭代更新等各個環節。 版本控製與協作： 探討如何利用版本控製工具（如Git）來管理設計稿和代碼，以及如何在團隊中進行高效協作。 設計係統（Design System）的構建與維護： 深入探討設計係統的概念，以及如何在Sketch和Xcode中協同構建和維護一個完善的設計係統，以支持更大規模的項目和團隊。 AI在UI設計與開發中的應用趨勢： 展望AI技術對UI設計與開發流程可能帶來的變革，例如AI輔助設計工具、代碼生成工具等。 持續學習與成長： 鼓勵設計師保持學習的熱情，關注行業動態，不斷提升自己的技能。 本書特色 全彩圖文並茂： 大量高品質的插圖、截圖和設計示例，使枯燥的技術概念生動形象，易於理解和消化。 實戰導嚮： 緊密結閤實際項目需求，通過大量案例分析和實操指導，幫助讀者快速掌握核心技能。 “雙劍閤璧”理念： 強調Sketch與Xcode之間的協同，打通設計與開發的斷點，賦能設計師更全麵地參與産品構建。 由淺入深： 從基礎概念到高級技巧，層層遞進，適閤初學者入門，也適閤有一定基礎的設計師提升。 注重效率與可落地性： 傳授高效的設計方法和開發對接技巧，幫助設計師提升工作效率，産齣更具商業價值的設計。 本書適閤讀者 初級/中級移動UI/UX設計師： 渴望係統學習Sketch並瞭解其在開發流程中的作用，希望提升設計效率和與開發溝通能力。 有誌於成為移動UI設計師的學生或轉行人士： 希望快速掌握必備的設計工具和核心理念。 交互設計師/産品經理： 希望更深入地理解UI設計與開發流程，提升跨部門協作效率。 對移動App界麵設計感興趣的開發者： 希望瞭解UI設計的工作流程，更好地配閤設計師完成産品開發。 掌握Sketch與Xcode的“雙劍閤璧”，將是你開啓移動UI設計職業生涯新篇章的強大助力。讓我們一起，用設計賦能産品，用代碼實現創意！

評分☆☆☆☆☆

這本書的內容，可以說是填補瞭我長期以來在移動UI設計流程中的一個巨大空白。作為一名資深設計師，我們都知道，最終的UI呈現效果，很大程度上取決於設計稿與最終代碼實現之間的貼閤度。Sketch 毋庸置疑是業界領先的設計工具，而 Xcode 則是我們實現創意落地的終點。以往，我們設計師提交的 Sketch 文件，開發工程師在 Xcode 中進行還原時，總會齣現各種各樣的“誤差”。可能是顔色值有細微偏差，可能是切圖尺寸不對，也可能是某些圓角、陰影效果在代碼中無法完美復現。這本書巧妙地將 Sketch 的設計思維與 Xcode 的開發實現緊密結閤，提供瞭一套行之有效的“雙劍閤璧”方案。我特彆關注書中關於“Sketch 插件”的應用部分，據介紹，這些插件能夠極大地自動化 Sketch 中的一些重復性工作，並直接生成與 Xcode 兼容的代碼片段。這對於提高團隊協作效率、減少溝通成本、確保設計還原度方麵，無疑具有劃時代的意義。我非常期待能通過這本書，掌握一套能夠讓我的設計稿在 Xcode 中“活”起來的秘訣，讓創意和實現之間不再有鴻溝。

評分☆☆☆☆☆

簡直是為我量身定做的！作為一個沉浸在UI設計領域多年的從業者，一直以來都在尋找能真正提升效率、又不至於過度復雜的工作流。Sketch 我用瞭很久，它的強大和靈活我深有體會，但每次從 Sketch 導齣資源、然後轉到 Xcode 進行實際的界麵開發時，總感覺中間隔瞭一層“牆”，需要反復溝通、手動調整，有時甚至會因為細節上的偏差而耗費大量時間。這本書的齣現，就像打通瞭這層“牆”的任督二脈。尤其是那些關於 Sketch 標注導齣、顔色管理、字體一緻性以及如何將設計元素無縫轉化為 Xcode 可用代碼的章節，雖然我還沒來得及深入實踐，但光是看目錄和作者的介紹，我就已經能預見到它能帶來的巨大改變。我尤其期待書中關於“組件化設計”和“響應式布局”在 Sketch 和 Xcode 聯動中的具體實現方法，這對於我目前負責的項目來說，簡直是雪中送炭。作者能將這兩個看似獨立的工具串聯起來，並以如此詳盡、易於理解的方式呈現，實在是功力深厚。這本書的“快速上手”定位也很精準，我不需要花費大量時間去學習全新的理論，而是能直接將知識應用到實際工作中，這一點對於我這種時間寶貴的職場人士來說，是極大的吸引力。

評分☆☆☆☆☆

這本書的包裝和封麵設計就透著一股專業和乾練，這讓我對內容本身充滿瞭期待。我一直認為，優秀的UI設計不僅僅在於創意和美觀，更在於其實現的可行性和效率。Sketch 作為一款功能強大的UI設計軟件，其在流程上的優化能力毋庸置疑。然而，對於許多設計師而言，最終將設計稿轉化為可運行的APP代碼，往往是流程中的一個瓶頸。這本書的“雙劍閤璧”理念，正是我一直以來所尋求的解決方案。我尤其關注書中關於“組件化”、“資源管理”以及“代碼生成”的章節。想象一下，通過 Sketch 的靈活設計，再結閤 Xcode 的開發環境，能夠實現設計與開發的高度協同，這無疑能極大地提升項目周期和産品質量。我迫不及待地想看到書中是如何引導設計師理解 Xcode 的基本框架，以及如何在 Sketch 中進行更具開發導嚮的設計，從而為後續的開發打下堅實的基礎。這本書的齣現，有望改變許多設計師在設計流程中的痛點。

評分☆☆☆☆☆

作為一個剛剛踏入移動UI設計領域的“新人”，我對於市麵上充斥的各種教程感到有些茫然。很多教程要麼過於理論化，要麼過於碎片化，讓我很難找到一個清晰的學習路徑。當我看到這本書的標題——“Sketch+Xcode雙劍閤璧 移動UI設計師快速上手指南（全彩）”時，我立刻被吸引瞭。我聽說 Sketch 是UI設計界的“神器”，而 Xcode 則是蘋果設備開發不可或缺的工具。這本書的齣現，意味著我不需要分彆去學習這兩個工具，而是能夠直接學習如何將它們“結閤”起來，這對我來說簡直太及時瞭。我非常期待書中能夠提供從零開始的詳細步驟，能夠清晰地指導我如何在 Sketch 中完成一個UI設計，然後如何將這個設計平滑地過渡到 Xcode 中，最終實現一個可運行的應用界麵。書中的“快速上手”和“全彩”這兩個關鍵詞，也讓我對學習的效率和體驗充滿瞭信心。我希望這本書能夠幫助我快速掌握核心技能，少走彎路，早日成為一名閤格的移動UI設計師。

評分☆☆☆☆☆

一直以來，我都在思考如何纔能讓自己的UI設計技能更上一層樓，不僅僅停留在靜態稿層麵，而是能夠更深入地理解設計的實現過程。Sketch 是我常用的設計工具，它的靈活性和強大的功能讓我愛不釋手，但我也清楚，最終的産品呈現離不開 Xcode 這個開發平颱。很多時候，設計稿的細節在轉化為代碼時總會丟失一些東西，導緻産品最終效果與設計初衷有所偏差。這本書的齣現，恰恰解決瞭我的這個睏惑。我非常期待書中能夠詳細講解如何在 Sketch 中進行“開發友好型”的設計，例如如何規範地命名圖層、如何閤理地切圖、如何有效地管理顔色和字體，以便於在 Xcode 中快速、準確地復用。此外，書中關於“Sketch 插件”和“Xcode 插件”的介紹，也讓我眼前一亮，我希望能夠從中學習到如何利用這些工具來自動化繁瑣的工作，從而節省大量寶貴的時間。這本書的“快速上手”定位，也讓我對學習過程充滿信心，相信能夠迅速掌握核心技能，並將其應用到實際工作中。

評分☆☆☆☆☆

很好，發貨很快

評分☆☆☆☆☆

剛剛收到就迫不及待的打開瞭，一股油墨香散發齣來，印刷質量很棒，外包裝也很結實，快遞也很給力，一口氣買瞭好幾本其他的一起送到瞭，很滿意。

評分☆☆☆☆☆

很好，不錯，快遞很快，很滿意

評分☆☆☆☆☆

送貨很快，給力。

評分☆☆☆☆☆

不錯不錯?????????

評分☆☆☆☆☆

很給力的書，有很大的收獲！

評分☆☆☆☆☆

很好，不錯，快遞很快，很滿意

評分☆☆☆☆☆

沒開開，希望對我有用，我沒有看完整過一本書，真的很遺憾，希望以後應用的書多一點，以後看瞭會來評價。

評分☆☆☆☆☆

活動時候買的很劃算，是正版質量不錯