-- 會員 / 註冊 --  
 帳號:
 密碼:
  | 註冊 | 忘記密碼
3/26 新書到! 3/19 新書到! 3/14 新書到! 12/12 新書到!
購書流程Q & A站務留言版客服信箱
3ds MaxMayaRhinoAfter EffectsSketchUpZBrushPainterUnity
PhotoShopAutoCadMasterCamSolidWorksCreoUGRevitNuke
C#CC++Java遊戲程式Linux嵌入式PLCFPGAMatlab
駭客資料庫搜索引擎影像處理FluentVR+ARANSYS深度學習
單晶片AVROpenGLArduinoRaspberry Pi電路設計CadenceProtel
HadoopPythonStm32CortexLabview手機程式AndroidiPhone
可查書名,作者,ISBN,3dwoo書號
詳細書籍分類

Sketch+Xcode雙劍合璧 移動UI設計師快速上手指南

( 簡體 字)
作者:靜電類別:1. -> 程式設計 -> 手機程式 -> iPhone
   2. -> 程式設計 -> UI/UX
譯者:
出版社:電子工業出版社Sketch+Xcode雙劍合璧  移動UI設計師快速上手指南 3dWoo書號: 42746
詢問書籍請說出此書號!

缺書
NT售價: 350

出版日:11/1/2015
頁數:208
光碟數:0
站長推薦:
印刷:全彩印刷語系: ( 簡體 版 )
加入購物車 加到我的最愛
(請先登入會員)
ISBN:9787121273520
作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證)
作者序:

譯者序:

前言:

是時候拋棄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是一款由國外的Dohemian 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進行工作,每個職位都可以專注于自 身的工作質量與產出效率,何樂而不為呢?
內容簡介:

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

目錄:

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
序: