本書主要講解了iOS、Android和Windows Phone這三種主流智能手機的操作系統(tǒng)界面、App元素和基本風格,全面解析了各類App界面的具體繪制方法與技巧。
本書共5章。第1章和第2章主要講解智能手機的分類、設計原則、圖形元素的格式和App的設計流程等App
界面設計基礎知識。第3章至第5章分別講解了iOS、Android和Windows Phone三種主流智能手機操作系統(tǒng)設計規(guī)范和設計原則,以及圖形、控件、圖標和完整界面的具體制作方法。
本書適合UI設計愛好者、App界面設計從業(yè)者閱讀,也適合作為各院校相關設計專業(yè)的教材。
張晨起,藝術設計類暢銷書作者,編寫過多本設計類圖書,包括《7天精通Photoshop CS6 UI交互設計》、《網(wǎng)站用戶體驗設計全程揭秘》、《中文版Photoshop CS6完全自學一本通》等。
第1章 手機UI設計基本概念 1
1.1 關于手機 2
1.1.1 手機的分類 2
1.1.2 手機的分辨率 3
1.1.3 手機的色彩級別 3
1.2 了解UI設計 3
1.2.1 什么是UI設計 4
1.2.2 手機UI設計 4
1.2.3 手機UI設計的特點 4
1.2.4 手機UI與平面UI的區(qū)別 5
1.3 手機界面設計的原則 5
1.3.1 界面效果的整體性和一致性 5
1.3.2 界面效果的個性化 5
1.3.3 界面視覺元素的規(guī)范 6
1.4 手機界面設計的流程 6
1.4.1 確認設計對象 6
1.4.2 繪制設計草稿 7
1.4.3 完成界面繪制 7
1.4.4 輸出正確格式 8
1.5 圖標的格式和大小 8
1.5.1 PNG、GIF和JPEG格式 8
1.5.2 其他格式 9
1.5.3 圖標的大小 9
1.6 設計尺寸的單位 10
1.6.1 分辨率 10
1.6.2 英寸 10
1.6.3 網(wǎng)點密度 11
1.6.4 屏幕密度 11
1.7 常用軟件工具 12
1.7.1 Photoshop 12
1.7.2 Illustrator 12
1.7.3 Flash 12
1.7.4 3DS Max 12
1.7.5 Iconcool studio和Image Optimizer 13
1.8 本章小結 13
練習題 14
第2章 常見的手機系統(tǒng) 15
2.1 蘋果系統(tǒng)(iOS) 16
2.1.1 iOS界面特色 16
2.1.2 iOS的基礎UI組件 16
2.1.3 iOS開發(fā)工具 16
2.1.4 iOS的設備 17
2.1.5 iOS 8與iOS 9 18
2.2 安卓系統(tǒng)(Android) 22
2.2.1 Android優(yōu)勢 23
2.2.2 Android界面特色 23
2.2.3 Android的基礎UI組件 23
2.2.4 關于深度定制系統(tǒng) 23
2.3 Windows Phone操作系統(tǒng) 26
2.3.1 了解Windows Phone 26
2.3.2 Windows Phone 7與Windows Phone 8系統(tǒng) 26
2.3.3 Windows Phone 8系統(tǒng)特色 26
2.3.4 Windows Phone的基礎UI組件 28
2.4 其他系統(tǒng) 28
2.4.1 Symbian操作系統(tǒng) 28
2.4.2 黑莓系統(tǒng) 28
2.5 本章小結 29
練習題 30
第3章 iOS系統(tǒng)應用 31
3.1 iOS App設計概述 32
3.1.1 關注主任務 32
3.1.2 提升用戶關注內(nèi)容的權重 32
3.1.3 使用方法明顯、易顯 32
3.1.4 使用以用戶為中心的術語 33
3.1.5 界面元素要一致 33
3.2 iOS系統(tǒng)界面設計規(guī)范 33
3.2.1 確保程序通過 33
3.2.2 確保程序在iPhone和iPad上通用 34
3.2.3 重新考慮基于Web的設計 34
3.3 iOS系統(tǒng)基本圖形繪制 34
案例 繪制iOS 9的解鎖界面 35
案例 繪制iOS 9小圖標 38
3.4 iOS系統(tǒng)控件的繪制 40
案例 繪制iOS 9日期拾取器 44
案例 繪制iOS 9的分段控件 47
3.5 iOS圖標繪制 48
3.5.1 設計圖標的特點 48
3.5.2 設計圖標的標準 49
3.5.3 圖標的分類 49
案例 繪制iOS 9的撥號圖標 52
3.6 設計中的圖片 54
案例 繪制扁平化圖標 55
3.7 iOS 8與iOS 9界面對比 58
3.7.1 新字體 58
3.7.2 應用切換 59
3.7.3 Spotlight 59
3.7.4 電池使用細節(jié) 59
3.7.5 相機應用 59
3.7.6 分享界面 60
3.7.7 Siri界面 60
3.7.8 鍵盤大小寫切換 60
3.7.9 聽寫界面 60
3.7.10 圓角 61
3.8 綜合案例 61
綜合案例——繪制滑動界面 61
綜合案例——繪制iOS 9 游戲中心界面 64
綜合案例——繪制游戲小界面 70
3.9 本章小結 76
練習題 77
第4章 Android系統(tǒng)應用 78
4.1 Android App UI概論 79
4.2 Android App UI設計原則 80
4.3 Androd界面設計風格 83
4.3.1 設備與顯示 83
4.3.2 主題樣式 83
4.3.3 單位和網(wǎng)格 83
4.3.4 觸摸反應 84
4.3.5 字體 85
4.3.6 顏色 85
4.3.7 圖標 85
案例 繪制Android通知圖標 87
4.3.8 寫作風格 89
4.4 Android App常用結構 89
4.5 控件設計 90
案例 繪制Android固定選項卡 91
案例 繪制Android進度條 96
案例 繪制Android開關按鈕 98
案例 繪制Android提示對話框 101
4.6 繪制啟動圖標 103
4.6.1 圖標設計規(guī)范 104
案例 繪制Android電子郵箱圖標 104
4.6.2 圖標的特點 109
4.6.3 繪制圖標時的注意問題 109
4.6.4 圖標類型 109
案例 繪制Android選擇欄 110
4.7 特效的使用 112
4.8 綜合案例 113
綜合案例——繪制Android解鎖界面 113
綜合案例——繪制Android通知欄 117
4.9 本章小結 122
練習題 123
第5章 Windows Phone系統(tǒng)應用 124
5.1 Windows Phone App設計特點 125
5.2 Windows Phone App設計原則 126
5.3 界面設計框架 127
5.3.1 頁面標題 127
5.3.2 進度指示器 127
5.3.3 滾動查看器 128
5.3.4 主題 128
5.4 UI設計的分類 128
5.4.1 開始屏幕 128
5.4.2 屏幕方向 129
5.4.3 通知 129
5.4.4 文本字體 129
5.4.5 狀態(tài)欄 130
5.5 應用程序控件設計 130
5.5.1 應用程序控件分類 130
5.5.2 系統(tǒng)控件規(guī)范 132
5.6 Windows Phone 圖標繪制 133
5.7 綜合案例 134
綜合案例——繪制Windows Phone語音設計界面 134
綜合案例——繪制Windows Phone應用程序界面 136
綜合案例——繪制Windows Phone可愛游戲界面 141
5.8 本章小結 148
練習題 149
附錄一 Android M操作系統(tǒng)前瞻 150
附錄二 Windows Phone 10
操作系統(tǒng)前瞻 152