本書詳細介紹了使用Photoshop 軟件設計與制作App UI 的思路和方法。全書分為3 個部分,共11 章。第1 部分為第1 章、第2 章,介紹了UI 設計的基礎知識;第2 部分為第3 章至第10 章,詳細介紹了用Photoshop 制作各種UI 常用元素(圖形、控件、啟動圖標以及圖片等)的方法與過程;第3 部分為第11 章,詳細介紹了不同手機系統(tǒng)下的UI 設計案例。
本書提供所有實例的多媒體教學視頻、所有實例的素材和源文件,下載地址為:http://pan.baidu.com/s/1pKUJRyN。
本書適合已經(jīng)掌握Photoshop CC 軟件基本使用方法的讀者閱讀。
葉經(jīng)文,湖南新化人,碩士。現(xiàn)為衡陽師范學院教授,美術學院副院長。中國美術家協(xié)會會員,湖南省美術家協(xié)會水彩畫藝委會委員。近年來出版專著《水彩畫寫生與創(chuàng)作》,主編高校教材《色彩構成》、《大學美術鑒賞》、《現(xiàn)代設計色彩寫生》等,參編高校教材多部;在《文藝研究》、《美術觀察》、《裝飾》等藝術類**期刊發(fā)表論文多篇。其美術創(chuàng)作《瑤鄉(xiāng)早市》、《有字帖的靜物》等十余件作品分別入選第十屆全國美術作品展等全國性美術展覽。長期從事智能手機 UI的設計與培訓工作,具有豐富的教學與實際設計經(jīng)驗。
第1章 手機UI 設計概述
1.1 手機UI 設計概述 002
1.1.1 什么是UI ? 002
1.1.2 優(yōu)秀的UI 具有哪些特點 003
1.2 UI 設計的布局和分類 003
1.2.1 UI 設計的布局 003
1.2.2 UI 設計的分類 005
1.3 如何制作出優(yōu)秀的UI 008
1.4 UI 設計師如何自我提升 012
1.4.1 形狀/ 輪廓 012
1.4.2 美術基礎 013
1.4.3 色彩識別 013
1.4.4 引導視覺 014
設計思路:如何設計出更加友好的UI 016
知識擴展:瀏覽本書所有范例,從視覺上總結 UI 設計的基本要素 018
第2 章 手機UI 設計基礎
2.1 關于手機 021
2.1.1 智能手機操作系統(tǒng)的分類 021
2.1.2 手機屏幕的分辨率 021
2.1.3 屏幕的色彩 022
2.2 UI 設計相關知識 023
2.2.1 什么是UI 設計 023
2.2.2 UI 設計的目的和重要性 024
2.2.3 UI 設計中最重要的元素是什么 024
2.2.4 平面UI 與手機UI 的不同 025
2.3 UI 設計的原則 026
設計思路:一個UI 設計師去找工作,如何展示他的價值 029
知識擴展:思考一下UI 設計的流程? 029
第3 章 Photoshop 制作圖標常用的編輯操作
3.1 UI 設計的準則 032
3.2 圖標設計的格式和大小 034
3.2.1 JPEG 格式 034
3.2.2 PNG 格式 034
3.2.3 GIF 格式 034
3.2.4 圖標尺寸大小 035
3.3 跟大師設計一組圖標 036
3.3.1 準備工作 036
3.3.2 構思、草圖 036
3.3.3 輔助背景制作 037
3.3.4 基本形、放大 038
3.3.5 創(chuàng)作過程 038
3.3.6 常用方法——變形 040
3.3.7 成品 041
設計思路:設計圖標的三個階段 042
知識擴展:圖標格式的那點事 044
第4 章 手機UI 的平面圖標制作
實戰(zhàn)01 Home 圖標制作 049
實戰(zhàn)02 日歷圖標制作 051
實戰(zhàn)03 錄音機圖標制作 053
實戰(zhàn)04 文件夾圖標制作 055
實戰(zhàn)05 徽章圖形 058
實戰(zhàn)06 秒表圖形 062
設計思路:繪制基本形狀 067
知識擴展1:了解繪圖模式 070
知識擴展2:了解圖層樣式 071
第5 章 手機UI 的字效表現(xiàn)
實戰(zhàn)01 車燈字體 073
實戰(zhàn)02 星星字體 078
實戰(zhàn)03 牛仔布料字體 084
設計思路:在 APP UI 中如何控制字號 088
知識擴展:字體配色的那點事 090
第6 章 手機UI 的質感表現(xiàn)
實戰(zhàn)01 金屬 093
實戰(zhàn)02 膠布 098
實戰(zhàn)03 玻璃 101
實戰(zhàn)04 光滑表面 107
實戰(zhàn)05 木紋 115
實戰(zhàn)06 皮革 119
實戰(zhàn)07 紙張 124
實戰(zhàn)08 陶瓷 126
實戰(zhàn)09 光滑漆皮 129
實戰(zhàn)10 塑料、金屬和玻璃綜合表現(xiàn) 135
設計思路1:Apple 和Android 移動端尺寸指南 139
設計思路2:iOS 扁平化系統(tǒng)有哪些特色 140
知識擴展:關于透明元素和透明度使用的藝術 142
第7 章 手機UI 的立體圖標制作
實戰(zhàn)01 Dribbbleb 圖標制作 145
實戰(zhàn)02 按鈕圖標制作 150
實戰(zhàn)03 Chrome 圖標制作 159
實戰(zhàn)04 twieer 圖標制作 164
實戰(zhàn)05 照相機圖標制作 169
設計思路1:圖標設計的流程 175
設計思路2:如何讓圖標更具吸引力 176
知識擴展:立體圖標的設計原則 177
第8 章 手機UI 的按鈕設計
實戰(zhàn)01 發(fā)光按鈕 179
實戰(zhàn)02 控制鍵按鈕 183
實戰(zhàn)03 播放器按鈕 188
實戰(zhàn)04 清新開關按鈕 195
實戰(zhàn)05 高調旋鈕 204
設計思路:如何設計和諧的交互 212
知識擴展:設計師關于按鈕設計的幾點建議 213
第9 章 手機UI 局部設計
實戰(zhàn)01 登錄UI 216
實戰(zhàn)02 設置UI 開關 222
實戰(zhàn)03 通知列表UI 230
實戰(zhàn)04 日歷UI 238
設計思路:如何制作配色卡 246
知識擴展:關于進度條設計的幾點建議 250
第10 章 手機UI 零件設計大集合
實戰(zhàn)01 進度條 252
實戰(zhàn)02 音量設置 262
實戰(zhàn)03 選項設置 278
設計思路:導航列表的設計原則 288
第11 章 手機UI 整體制作
實戰(zhàn)01 Windows Phone 手機UI 總體設計 291
實戰(zhàn)02 蘋果手機IOS UI 總體設計 307
實戰(zhàn)03 Android 手機UI 總體設計 320
附錄 網(wǎng)絡資源與常用UI 設計工具
1. 網(wǎng)上資源 336
2. 原型設計輔助工具 338