本書主要講解了iOS、Android和Windows Phone這三種主流智能手機(jī)的操作系統(tǒng)界面、App元素和基本風(fēng)格,全面解析了各類App界面的具體繪制方法與技巧。
本書共5章。第1章和第2章主要講解智能手機(jī)的分類、設(shè)計(jì)原則、圖形元素的格式和App的設(shè)計(jì)流程等App
界面設(shè)計(jì)基礎(chǔ)知識(shí)。第3章至第5章分別講解了iOS、Android和Windows Phone三種主流智能手機(jī)操作系統(tǒng)設(shè)計(jì)規(guī)范和設(shè)計(jì)原則,以及圖形、控件、圖標(biāo)和完整界面的具體制作方法。
本書適合UI設(shè)計(jì)愛好者、App界面設(shè)計(jì)從業(yè)者閱讀,也適合作為各院校相關(guān)設(shè)計(jì)專業(yè)的教材。
1.基礎(chǔ)知識(shí)與操作案例結(jié)合,擯棄了傳統(tǒng)教科書式的純理論式教學(xué),采用少量基礎(chǔ)知識(shí)和大量操作案例相結(jié)合的講解模式。
2. 技術(shù)新,主流軟件版本。
3. 彩色印刷,樣式精美。
4.在基礎(chǔ)知識(shí)和操作案例的講解過(guò)程中列出了大量的提示和技巧,這些信息都是結(jié)合作者長(zhǎng)期的UI設(shè)計(jì)經(jīng)驗(yàn)與教學(xué)經(jīng)驗(yàn)歸納出來(lái)的,他們可以幫助讀者更準(zhǔn)確的理解和掌握相關(guān)的知識(shí)點(diǎn)和操作技巧。
5.為了增加讀者的學(xué)習(xí)渠道,增強(qiáng)讀者的學(xué)習(xí)興趣,本書配有大量配套資源。配套資源中提供了本書中所有實(shí)例的相關(guān)素材和源文件,以及書中實(shí)例的視頻教學(xué),使讀者可以跟著本書做出相應(yīng)的效果,并能能夠快速應(yīng)用于實(shí)際工作中。
張晨起,藝術(shù)設(shè)計(jì)類暢銷書作者,編寫過(guò)多本設(shè)計(jì)類圖書,包括《7天精通Photoshop CS6 UI交互設(shè)計(jì)》、《網(wǎng)站用戶體驗(yàn)設(shè)計(jì)全程揭秘》、《中文版Photoshop CS6完全自學(xué)一本通》等。
第1章 手機(jī)UI設(shè)計(jì)基本概念 1
1.1 關(guān)于手機(jī) 2
1.1.1 手機(jī)的分類 2
1.1.2 手機(jī)的分辨率 3
1.1.3 手機(jī)的色彩級(jí)別 3
1.2 了解UI設(shè)計(jì) 3
1.2.1 什么是UI設(shè)計(jì) 4
1.2.2 手機(jī)UI設(shè)計(jì) 4
1.2.3 手機(jī)UI設(shè)計(jì)的特點(diǎn) 4
1.2.4 手機(jī)UI與平面UI的區(qū)別 5
1.3 手機(jī)界面設(shè)計(jì)的原則 5
1.3.1 界面效果的整體性和一致性 5
1.3.2 界面效果的個(gè)性化 5
1.3.3 界面視覺元素的規(guī)范 6
1.4 手機(jī)界面設(shè)計(jì)的流程 6
1.4.1 確認(rèn)設(shè)計(jì)對(duì)象 6
1.4.2 繪制設(shè)計(jì)草稿 7
1.4.3 完成界面繪制 7
1.4.4 輸出正確格式 8
1.5 圖標(biāo)的格式和大小 8
1.5.1 PNG、GIF和JPEG格式 8
1.5.2 其他格式 9
1.5.3 圖標(biāo)的大小 9
1.6 設(shè)計(jì)尺寸的單位 10
1.6.1 分辨率 10
1.6.2 英寸 10
1.6.3 網(wǎng)點(diǎn)密度 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 本章小結(jié) 13
練習(xí)題 14
第2章 常見的手機(jī)系統(tǒng) 15
2.1 蘋果系統(tǒng)(iOS) 16
2.1.1 iOS界面特色 16
2.1.2 iOS的基礎(chǔ)UI組件 16
2.1.3 iOS開發(fā)工具 16
2.1.4 iOS的設(shè)備 17
2.1.5 iOS 8與iOS 9 18
2.2 安卓系統(tǒng)(Android) 22
2.2.1 Android優(yōu)勢(shì) 23
2.2.2 Android界面特色 23
2.2.3 Android的基礎(chǔ)UI組件 23
2.2.4 關(guān)于深度定制系統(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的基礎(chǔ)UI組件 28
2.4 其他系統(tǒng) 28
2.4.1 Symbian操作系統(tǒng) 28
2.4.2 黑莓系統(tǒng) 28
2.5 本章小結(jié) 29
練習(xí)題 30
第3章 iOS系統(tǒng)應(yīng)用 31
3.1 iOS App設(shè)計(jì)概述 32
3.1.1 關(guān)注主任務(wù) 32
3.1.2 提升用戶關(guān)注內(nèi)容的權(quán)重 32
3.1.3 使用方法明顯、易顯 32
3.1.4 使用以用戶為中心的術(shù)語(yǔ) 33
3.1.5 界面元素要一致 33
3.2 iOS系統(tǒng)界面設(shè)計(jì)規(guī)范 33
3.2.1 確保程序通過(guò) 33
3.2.2 確保程序在iPhone和iPad上通用 34
3.2.3 重新考慮基于Web的設(shè)計(jì) 34
3.3 iOS系統(tǒng)基本圖形繪制 34
案例 繪制iOS 9的解鎖界面 35
案例 繪制iOS 9小圖標(biāo) 38
3.4 iOS系統(tǒng)控件的繪制 40
案例 繪制iOS 9日期拾取器 44
案例 繪制iOS 9的分段控件 47
3.5 iOS圖標(biāo)繪制 48
3.5.1 設(shè)計(jì)圖標(biāo)的特點(diǎn) 48
3.5.2 設(shè)計(jì)圖標(biāo)的標(biāo)準(zhǔn) 49
3.5.3 圖標(biāo)的分類 49
案例 繪制iOS 9的撥號(hào)圖標(biāo) 52
3.6 設(shè)計(jì)中的圖片 54
案例 繪制扁平化圖標(biāo) 55
3.7 iOS 8與iOS 9界面對(duì)比 58
3.7.1 新字體 58
3.7.2 應(yīng)用切換 59
3.7.3 Spotlight 59
3.7.4 電池使用細(xì)節(jié) 59
3.7.5 相機(jī)應(yīng)用 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
綜合案例——繪制滑動(dòng)界面 61
綜合案例——繪制iOS 9 游戲中心界面 64
綜合案例——繪制游戲小界面 70
3.9 本章小結(jié) 76
練習(xí)題 77
第4章 Android系統(tǒng)應(yīng)用 78
4.1 Android App UI概論 79
4.2 Android App UI設(shè)計(jì)原則 80
4.3 Androd界面設(shè)計(jì)風(fēng)格 83
4.3.1 設(shè)備與顯示 83
4.3.2 主題樣式 83
4.3.3 單位和網(wǎng)格 83
4.3.4 觸摸反應(yīng) 84
4.3.5 字體 85
4.3.6 顏色 85
4.3.7 圖標(biāo) 85
案例 繪制Android通知圖標(biāo) 87
4.3.8 寫作風(fēng)格 89
4.4 Android App常用結(jié)構(gòu) 89
4.5 控件設(shè)計(jì) 90
案例 繪制Android固定選項(xiàng)卡 91
案例 繪制Android進(jìn)度條 96
案例 繪制Android開關(guān)按鈕 98
案例 繪制Android提示對(duì)話框 101
4.6 繪制啟動(dòng)圖標(biāo) 103
4.6.1 圖標(biāo)設(shè)計(jì)規(guī)范 104
案例 繪制Android電子郵箱圖標(biāo) 104
4.6.2 圖標(biāo)的特點(diǎn) 109
4.6.3 繪制圖標(biāo)時(shí)的注意問(wèn)題 109
4.6.4 圖標(biāo)類型 109
案例 繪制Android選擇欄 110
4.7 特效的使用 112
4.8 綜合案例 113
綜合案例——繪制Android解鎖界面 113
綜合案例——繪制Android通知欄 117
4.9 本章小結(jié) 122
練習(xí)題 123
第5章 Windows Phone系統(tǒng)應(yīng)用 124
5.1 Windows Phone App設(shè)計(jì)特點(diǎn) 125
5.2 Windows Phone App設(shè)計(jì)原則 126
5.3 界面設(shè)計(jì)框架 127
5.3.1 頁(yè)面標(biāo)題 127
5.3.2 進(jìn)度指示器 127
5.3.3 滾動(dòng)查看器 128
5.3.4 主題 128
5.4 UI設(shè)計(jì)的分類 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 應(yīng)用程序控件設(shè)計(jì) 130
5.5.1 應(yīng)用程序控件分類 130
5.5.2 系統(tǒng)控件規(guī)范 132
5.6 Windows Phone 圖標(biāo)繪制 133
5.7 綜合案例 134
綜合案例——繪制Windows Phone語(yǔ)音設(shè)計(jì)界面 134
綜合案例——繪制Windows Phone應(yīng)用程序界面 136
綜合案例——繪制Windows Phone可愛游戲界面 141
5.8 本章小結(jié) 148
練習(xí)題 149
附錄一 Android M操作系統(tǒng)前瞻 150
附錄二 Windows Phone 10
操作系統(tǒng)前瞻 152