移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通 ( 簡體 字) |
作者:張曉景 | 類別:1. -> 程式設計 -> UI/UX |
譯者: |
出版社:清華大學出版社 | 3dWoo書號: 49902 詢問書籍請說出此書號!【缺書】 NT售價: 440 元 |
出版日:9/1/2018 |
頁數:248 |
光碟數:0 |
|
站長推薦: |
印刷:全彩印刷 | 語系: ( 簡體 版 ) |
|
加入購物車 │加到我的最愛 (請先登入會員) |
ISBN:9787302508946 |
作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
作者序: |
譯者序: |
前言:《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》共分9 章,從UI 設計必修課開始,逐步講解了Sketch 界面、使用Sketch 繪制線框圖、設計圖標、繪制按鈕、制作移動端界面、制作PC 端網頁、UI 的輸出與交互設計及使用Xcode。除了講解Sketch 和Xcode 的使用方法外,還穿插了UI 設計的理論知識,如圖標設計流程、圖標屬性、移動界面中的色彩運用、網站常見設計風格等,提供了原型設計的方法、圖標及界面設計規范、網頁布局原則、iOS 及Android 圖標和界面的設計規范與尺寸等UI 設計及應用中的核心內容。 通過《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的學習,讀者不但可以使用Sketch 設計出漂亮的圖標、流行的界面,還能通過Xcode 制作出UI 的運行效果。從了解什么是UI 開始,到最終的交互體驗,以及UI 設計中不可忽略的行業知識,讀者將從《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》中獲得全面豐富的UI 設計內容及輕松的學習體驗。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》結構 第1 章 UI 入門必修課 本章主要講解了UI、UE 和ID 的基本概念,使讀者了解什么是UI 及UI、UE 和ID 的區別和聯系,講述了用戶體驗的一般設計流程、iOS 和Android 的設計特色、移動UI 的基本常識和網頁UI 的基本常識。 第2 章 初識Sketch 本章從介紹Sketch 軟件開始,講述了Sketch 的界面、Sketch 的設計優勢、Sketch 的安裝與啟動,通過制作Apple Watch 界面和iPhone 跳轉頁面,講解如何插入形狀和圖片,使讀者體驗Sketch 易于操作的特點。 第3 章 使用Sketch 繪制線框圖 本章以繪制線框原圖貫穿始終,從Sketch 文件的新建和保存,到插入文字、設置文字參數、插入形狀、在檢查器中調整形狀及圖層的基本應用。 第4 章 使用Sketch 設計圖標 圖標的繪制是UI 設計中最為重要的一個環節,一個好的圖標,需要有指代性、識別性和審美性。本章不僅詳細闡述了圖標的繪制過程,介紹了縮放工具、使用參考線和網格、使用檢查器、調整錨點和曲線的方法,還講述了UI 圖標的分類、圖標的更換方法、繪制流程和圖標屬性等理念與實際相結合的知識。 第5 章 按鈕設計 本章對UI 設計中的按鈕進行了詳細、具體的講解,闡明了按鈕設計在UI 中的地位和重要作用,介紹了按鈕設計的知識和規范,通過一組播放器按鈕和一組質感按鈕的繪制,詳細介紹了漸變、陰影、內陰影、模糊等工具在設計中的應用。 第6 章 移動端界面設計 本章以第3 章的兩個線框圖為基礎,在實際操作中講述了APP 界面設計,通過修改顏色、樣式、文字等參數,完成APP 界面設計的制作。 第7 章 PC 端網頁界面設計 本章結合前面章節講解的內容,使用Sketch 的各種工具完成PC 端網頁的制作,講解了PC端網頁設計的方法、PC 端和移動端網頁設計的區別、扁平化設計在UI 設計中的應用和網站常見設計風格等內容,對使用Sketch 進行UI 設計是一個概括。 第8 章 UI 的輸出與交互設計 本章通過“導出APP 應用圖標”“導出移動端APP 界面”“為網頁劃分切片”和“導出點九切圖”等案例,講解了Sketch 文件的輸出、適配分辨率、分享設計稿、移動交互設計事項等必要的理論知識,幫助讀者完成和歸納Sketch 應用與UI 設計的最后環節。 第9 章 使用Xcode 制作交互效果 本章講解了如何安裝并啟動Xcode 軟件,介紹了Xcode 的界面和主要功能,演示了Xcode 的基本操作,講解了如何使用Xcode 編輯從Sketch 中導出的圖片,通過編輯和使用控件、導入素材等一系列操作,最終實現模擬運行效果的過程。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》特點 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》以案例帶動知識面的方式,以案例為主,詳細介紹并演示各種工具的使用方法并細化操作步驟,使讀者通過案例的學習,在實踐中熟練掌握Sketch 的使用方法。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》從布局上分為實戰案例、操作指南、通關必讀、知識鏈接、提示和技巧6 個主要部分。每一個實戰案例都講解了實際工作中一個Sketch 作品的制作過程,步驟講解具體,過程講解清晰且完善,通俗易懂。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的“操作指南”是在UI 設計過程中對常用的、典型的工具及方法的具體講解和分析,能夠使讀者掌握重點。《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的“知識鏈接”是對實際UI 設計過程中的方法及軟件功能進行具體分析及理論性講解。《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的“通關必讀”中講解了UI 設計的基礎常識、設計理念及設計規范,讀者可以學習和參考,以掌握UI 設計中必不可少的理論知識。而通過“提示”和“技巧”,讀者可以在UI 設計過程中學習到更簡捷、更有效率的技巧和方法。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》最后介紹了Xcode 的使用,Xcode 和Sketch 一樣是iOS 系統的獨霸軟件。Xcode是運行在操作系統Mac OS X 上的集成開發工具,在此著重講解了Xcode 移動端UI 設計常用的控件和功能,使讀者能夠通過Xcode 看到移動UI 設計最終的演示效果和交互體驗。 編寫《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的目的在于講解如何使用Sketch 軟件和使用Xcode 運行交互效果,使讀者了解UI 設計的基礎常識和必要知識。《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》語言簡潔、描述細致且全面,使讀者能夠輕松地學會Sketch 的操作,了解圖標和界面的繪制過程,在UI 的學習中起到事半功倍的效果。由于互聯網的更新較快,書中所提供的網址僅供參考。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》由張曉景編著,李曉斌、高鵬、胡敏敏、楊帆、楊陽、張國勇、賈勇、劉釗、魏華、林秋、夏志利、胡偉軍、董亮等也參與了《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的編寫工作。由于作者水平所限,書中難免有疏漏和不足之處,懇請廣大讀者批評、指正。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》提供了書中案例的源文件、素材文件、教學視頻和PPT 教學課件等資源,掃一掃下方的二維碼,推送到自己的郵箱后即可下載獲取。 編 者 |
內容簡介:《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》分為9 章,分別為UI 入門必修課、初識Sketch、使用Sketch 繪制線框圖、使用Sketch 設計圖標、按鈕設計、移動端界面設計、PC 端網頁界面設計、UI 的輸出與交互設計、使用Xcode 制作交互效果。通過 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》的學習,讀者可以熟悉移動UI 設計的規范和設計要點,同時掌握移動UI 的輸出及交互動效的添加方法。 《移動互聯網之路——Sketch+Xcode移動UI與交互動效設計從入門到精通》適用于UI 設計師、網站設計人員和網頁設計愛好者閱讀,也可作為網頁設計師、交互設計師、藝術院校師生及UI 設計愛好者的參考書。 |
目錄:第1章UI入門必修課1 1.1 UI、UE和ID1 1.1.1 UI(用戶界面)2 1.1.2 UE(用戶體驗)2 1.1.3 ID(交互設計)2 1.2 用戶體驗的一般設計流程2 1.2.1 原型2 1.2.2 模型3 1.2.3 演示版4 1.2.4 中間步驟4 1.3 iOS和Android的設計特色4 1.3.1 iOS的設計特色4 1.3.2 Android的設計特色8 1.4 移動UI的基本常識11 1.4.1 移動UI設計中用到的單位11 1.4.2 iOS的界面設計規范12 1.4.3 Android的界面設計規范14 1.5 網頁UI的基本常識17 1.5.1 安全網頁寬度與首屏高度17 1.5.2 常見網頁布局形式18 1.5.3 網頁布局原則21 1.5.4 網頁中的配色方法22 1.6 本章小結24 第2章初識Sketch25 2.1 繪制AppleWatch界面25 2.1.1 插入AppleWatch畫板28 2.1.2 繪制AppleWatch界面首頁32 2.1.3 繪制AppleWatch界面36 2.2 繪制iOS旅游APP跳轉頁面41 2.2.1 iOS旅游APP跳轉頁面42 2.2.2 iOS旅游APP跳轉頁面48 2.2.3 iOS旅游APP跳轉頁面51 2.3 本章小結53 第3章使用Sketch繪制線框圖54 3.1 繪制計步APP線框圖首頁54 3.1.1 新建并保存文件55 3.1.2 繪制線框圖的狀態條57 3.1.3 繪制計步圖標線框59 3.1.4 繪制睡眠狀態條63 3.1.5 繪制底部標簽導航66 3.2 繪制天氣APP線框圖68 3.2.1 繪制線框圖首頁68 3.2.2 繪制首頁下滑頁73 3.2.3 繪制搜索頁和設置頁76 3.3 本章小結79 第4章使用Sketch設計圖標80 4.1 繪制簡潔iOS功能圖標80 4.1.1 繪制指南針圖標83 4.1.2 繪制時鐘和相機圖標87 4.1.3 繪制計算器和拍攝圖標90 4.1.4 繪制日記事圖標94 4.2 繪制一組APP應用圖標96 4.2.1 繪制旅行箱圖標97 4.2.2 繪制輪船圖標100 4.2.3 繪制帳篷和太陽傘圖標103 4.2.4 繪制酒杯、救生圈、天氣、冰激凌圖標105 4.2.5 繪制飛機圖標114 4.3 本章小結117 第5章按鈕設計118 5.1 繪制一組播放器按鈕118 5.1.1 繪制循環按鈕121 5.1.2 繪制播放和暫停按鈕126 5.1.3 繪制語音和關閉按鈕128 5.1.4 繪制喇叭按鈕131 5.1.5 繪制選擇、撤銷、隨機和退出按鈕134 5.1.6 繪制按鍵和滑桿按鈕138 5.2 繪制質感按鈕141 5.2.1 繪制金屬拉絲質感按鈕141 5.2.2 繪制紋理質感按鈕143 5.2.3 繪制水晶質感按鈕146 5.3 本章小結148 第6章移動端界面設計149 6.1 繪制計步APP界面149 6.1.1 繪制計步APP首頁計步顯示區150 6.1.2 繪制計步APP首頁其他部分154 6.2 繪制天氣APP界面159 6.2.1 繪制天氣APP首頁插畫背景160 6.2.2 繪制天氣APP其他界面內容164 6.3 本章小結173 第7章PC端網頁界面設計174 7.1 設計制作PC端支付網頁174 7.1.1 繪制PC端支付網頁購物車界面176 7.1.2 繪制PC端支付網頁其他界面181 7.2 設計制作家居網站頁面185 7.2.1 繪制PC端家居頁面的整體結構188 7.2.2 繪制PC端家居網頁廣告部分192 7.3 本章小結202 第8章UI的輸出與交互設計203 8.1 導出APP應用圖標203 8.2 導出移動端APP界面206 8.3 為網頁劃分切片211 8.4 導出點九切圖215 8.5 本章小結218 第9章使用Xcode制作交互效果219 9.1 Xcode的安裝219 9.2 認識Xcode界面225 9.2.1 按區域劃分Xcode界面225 9.2.2 工具欄226 9.2.3 工具區227 9.2.4 編輯區229 9.2.5 導航區230 9.2.6 調試區231 9.3 創建和刪除項目232 9.4 為旅游APP的跳轉頁面制作點擊效果239 9.5 制作完整的天氣APP運行效果243 9.6 本章小結248 通關必讀 什么是Sketch26 為什么選擇Sketch26 Sketch快捷鍵37 Sketch是否能替代Photoshop41 圖標的源文件格式52 Sketch漢化52 線框圖的基本概念55 繪制線框原型的注意事項66 畫好APP線框圖流程圖的要點78 線框原型的優勢79 iOS和iOS圖標的特點81 圖標設計的必要性81 UI圖標的分類82 不同系統圖標的更換方法91 圖標集的制作流程95 圖標的源文件格式104 了解圖標的屬性115 UI設計中最常見的按鈕如何設計119 移動界面中色彩的應用133 按鈕是用戶體驗的重要因素139 陰影和內陰影的設置142 為什么界面設計大多喜歡用藍色152 iOS應用界面設計規范162 移動界面中文字的使用技巧168 APP界面配色原則168 網頁設計PC端和移動端的區別175 扁平化設計在UI設計中的應用179 理解以用戶為中心191 界面設計中的內容與形勢統一191 網站常見設計風格199 適配多分辨率移動界面203 交付給開發的文件210 了解移動設備的手勢214 移動交互動效設計的注意事項217 常見的交互動畫效果231 交互式動畫實現法則236 為什么在學習Sketch之后要了解Xcode248 操作指南 安裝Sketch26 啟動Sketch27 自定義工具欄31 自定義快捷鍵39 修改參考線顏色50 使用內置模板58 添加和刪除自定義模板59 設置填充和描邊選項65 為圓角矩形設置不同的圓角半徑71 調整圖層排列順序72 設置縮放顯示101 使用縮放工具102 使用鋼筆工具繪制路徑111 使用鋼筆工具繪制紅心形狀113 設置重疊的填充樣式120 使用動態模糊調整圖層147 創建路徑文本157 使用旋轉復制工具163 自定義和使用文本樣式172 使用蒙版并設置蒙版不透明度198 獲取與安裝Xcode219 啟動Xcode221 導入和顯示圖片234 知識鏈接 Sketch的歡迎窗口29 Sketch的主界面30 工具欄31 Sketch中的工具35 畫布41 Sketch的系統偏好設置44 其他新建和保存文件的方法56 設置文件存儲標簽和存儲路徑57 插入與設置文本選項61 使用形狀檢查器63 添加陰影和內陰影65 插入圓角矩形70 圖層面板71 圖層類型71 隱藏和鎖定圖層72 復制、剪切和粘貼圖層75 搜索圖層76 在畫布中移動和選擇圖層85 選擇并移動重疊圖層86 在檢查器中精確設置對象大小88 在檢查器中變換對象89 iOS系統中圖標的尺寸91 編輯形狀99 標尺和參考線109 使用網格110 Sketch中的貝塞爾曲線110 錨點和曲線的控制112 使用漸變124 圖案填充127 噪點填充131 布爾運算136 模糊145 文本轉化為輪廓158 旋轉復制162 創建和編輯組件170 混合模式184 編輯位圖186 蒙版197 分享設計稿205 獲取和使用Sketch插件208 切片圖層檢查器212 為什么要使用點九切圖217 Xcode的快捷鍵220 使用Xcode歡迎窗口222 交互設計與交互式動畫222 Xcode中的應用模板234 |
序: |