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

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

《Sketch+Xcode雙劍合璧 移動UI設計師快速上手指南(全彩)》是2015年電子工業出版社出版的圖書,作者是靜電。

基本介紹

  • 中文名: Sketch+Xcode雙劍合璧 移動UI設計師快速上手指南(全彩)
  • 作者:靜電
  • 出版社: 電子工業出版社
  • 出版時間:2015年
  • 頁數:208 頁
  • 定價:69.8 元
  • 開本:16 開
  • ISBN: 9787121273520  
內容簡介,圖書目錄,

內容簡介

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

熱門詞條

聯絡我們