産品特色

編輯推薦

　　《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，然後在一個界麵中，對比和查看它們的不同之處，或者將它們的交互過程串聯起來，一切都非常方便。然 Sketch+Xcode雙劍閤璧 移動UI設計師快速上手指南（全彩） 下載 mobi epub pdf txt 電子書

還沒用。習慣性好評。

很好的書，還沒開始看，就是價格略貴

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

書還蠻不錯的，主要理論知識也很基礎，素材也可以去掃二維碼下載，書紙質較好，學習用很不錯

彆看我花幾秒鍾就把它畫齣來，我可是花瞭34年學會如何在幾秒鍾把它畫齣來。彆看我花幾秒鍾就把它畫齣來，我可是花瞭34年學會如何在幾秒鍾把它畫齣來。

還沒用。習慣性好評。

特彆好，正版！

好評，書的質量非常好，紙張質量也好，比書店優惠很多！

彆看我花幾秒鍾就把它畫齣來，我可是花瞭34年學會如何在幾秒鍾把它畫齣來。彆看我花幾秒鍾就把它畫齣來，我可是花瞭34年學會如何在幾秒鍾把它畫齣來。