第1章講述UI相關設計理念與基本概念;第2章講解UI崗位中與軟件使用相關的主要操作方法;第3章講解移動端界面中還會遇到的其他類型的組件;第4章講解UI工作流程中,原型圖的繪制方法和基本概念;第5章講解APP設計規(guī)范,并按照產(chǎn)品開發(fā)流程,設計并實現(xiàn)整個APP效果圖;第6章將設計稿轉(zhuǎn)化為手機端的效果;第7章以實訓的方式,讓讀者從頭至尾再走一遍流程,加深學習記憶,提高團隊協(xié)作能力。
1.本書主要定位于移動端UI設計師的整個工作過程,重點是讓讀者體驗整個工作過程。
2.內(nèi)容難度定位中等,以知識夠用、軟件使用熟練為目的。
3.附微課視頻教學
吳豐,曾出版多部相關教材:1)網(wǎng)頁設計與制作(Dreamweaver CS6+HTML5+CSS3版),獨著,ISBN編號: 9787302403845,清華大學出版社,2015年12月出版。2)HTML5+CSS3 Web前端設計基礎教程,獨著,ISBN978-7-115-45577-2,人民郵電出版社。
第1章 APP UI設計與交互概述 001
1.1 UI設計行業(yè)的發(fā)展前景 002
1.1.1 認識相關概念 002
1.1.2 就業(yè)前景 003
1.2 如何學習UI設計 004
1.2.1 UI 設計師的常用軟件介紹 004
1.2.2 UI 設計師的設計理論知識儲備 006
1.3 UI設計理論基礎 006
1.3.1 色彩三要素 006
1.3.2 UI 設計配色基礎 007
1.4 APP頁面分類及其作品欣賞 009
1.5 淺析APP產(chǎn)品開發(fā)流程 013
1.6 職場經(jīng)驗分享 015
1.7 學習反思 016
第2章 UI圖標設計 017
2.1 初識移動設備尺寸及其相關概念 018
2.1.1 px、pt 和ppi 等相關概念 018
2.1.2 iPhone 機型屏幕尺寸規(guī)格 018
2.2 UI圖標設計 019
2.2.1 圖標的分類 019
2.2.2 常見存儲格式與圖標尺寸 021
2.2.3 APP 啟動圖標的常見創(chuàng)意設計方法 022
2.3 線性圖標 023
2.3.1 線性圖標概述 023
2.3.2 線性圖標的制作(Wi-Fi 圖標) 024
2.3.3 課堂鞏固練習(Keep圖標) 026
2.4 剪影類圖標 026
2.4.1 剪影類圖標概述 026
2.4.2 剪影類圖標的制作(抖音APP 圖標) 027
2.4.3 課堂鞏固練習(微信圖標) 030
2.5 扁平化與長陰影類圖標 030
2.5.1 知識點概述 030
2.5.2 扁平化與長陰影類圖標的制作(指南針圖標) 031
2.5.3 課堂鞏固練習(一組扁平化圖標) 034
2.6 擬物類圖標的制作 035
2.6.1 知識概述 035
2.6.2 擬物類圖標的制作(木紋質(zhì)感翻頁日歷) 035
2.6.3 課堂鞏固練習(擬物齒輪) 040
2.7 學習反思 041
第3章 常見APP組件的設計與實現(xiàn) 043
3.1 UI Kit概述 044
3.2 按鈕 044
3.2.1 按鈕概述 044
3.2.2 按鈕的按壓狀態(tài) 046
3.2.3 按鈕的種類 046
3.2.4 按鈕的設計要點 048
3.2.5 扁平化按鈕的制作 049
3.2.6 質(zhì)感按鈕的制作 050
3.2.7 課堂鞏固練習(水晶按鈕) 055
3.3 滑動條 055
3.3.1 扁平滑動條的制作 055
3.3.2 質(zhì)感滑動條的制作 056
3.3.3 課堂鞏固練習(QQ音樂播放器) 059
3.4 表單 059
3.4.1 表單結(jié)構(gòu)與設計要點 059
3.4.2 單選按鈕與復選框的制作 061
3.4.3 文本框與下拉框的制作 063
3.4.4 課堂鞏固練習
(反饋頁表單) 064
3.5 數(shù)據(jù)圖表 065
3.5.1 認識數(shù)據(jù)圖表 065
3.5.2 數(shù)據(jù)圖表的制作 067
3.5.3 課堂鞏固練習(環(huán)形數(shù)據(jù)圖表) 071
3.6 學習反思 072
第4章 交互設計與原型圖繪制 073
4.1 初識交互設計 074
4.1.1 交互設計概述 074
4.1.2 產(chǎn)品開發(fā)中的層級關系 075
4.1.3 相關工作經(jīng)驗 076
4.2 初識產(chǎn)品原型 077
4.3 原型制作工具——Axure RP 078
4.3.1 Axure RP界面認知 078
4.3.2 Axure RP基本操作 079
4.3.3 繪制手機原型存放于自己的元件庫 081
4.3.4 多頁面鞏固練習(金融類APP原型圖繪制) 083
4.4 Axure RP常見的交互應用 084
4.4.1 頁面跳轉(zhuǎn) 084
4.4.2 引導頁左右滑動效果 085
4.4.3 長頁面上下滾動效果 088
4.4.4 彈出消息框效果 090
4.4.5 側(cè)邊欄菜單滑入效果 093
4.4.6 表單驗證與登錄交互 095
4.5 學習反思 099
第5章 APP界面設計與實戰(zhàn) 100
5.1 認識APP應用程序及其相關概念 101
5.1.1 常見術語 101
5.1.2 常見手機屏幕尺寸 103
5.2 設計規(guī)范 106
5.2.1 iOS設計規(guī)范 106
5.2.2 Android設計規(guī)范 107
5.2.3 邊距與間距 108
5.2.4 內(nèi)容布局 110
5.2.5 常用顏色 111
5.3 APP項目實戰(zhàn)——“UI社”APP產(chǎn)品設計與實現(xiàn) 111
5.3.1 產(chǎn)品定位與背景簡要分析 111
5.3.2 競品分析 112
5.3.3 “UI社”產(chǎn)品架構(gòu)梳理 117
5.3.4 繪制低保真原型圖 118
5.3.5 “UI社”APP的視覺規(guī)范 119
5.3.6 APP產(chǎn)品啟動圖標的制作 121
5.3.7 “引導頁”效果圖制作 121
5.3.8 “登錄頁”效果圖制作 122
5.3.9 “首頁”效果圖制作 122
5.3.10 “發(fā)現(xiàn)頁”效果圖制作 123
5.3.11 “上傳頁”效果圖制作 123
5.3.12 “動態(tài)頁”與“動態(tài)詳情頁”效果圖制作 123
5.3.13 “我的頁”效果圖制作 124
5.3.14 其他頁面效果圖 125
5.4 學習反思 126
第6章 標注與切圖 128
6.1 標注 129
6.1.1 標注工具介紹 129
6.1.2 Markman(馬克鰻)的使用方法 130
6.1.3 標注哪些信息 132
6.1.4 “UI社”APP項目“引導頁”標注 132
6.1.5 “UI社”APP項目“登錄頁”標注 133
6.1.6 “UI社”APP項目“首頁”標注 134
6.1.7 “UI社”APP項目“教程列表頁”標注 134
6.2 切圖 135
6.2.1 切圖概述 135
6.2.2 圖片資源命名規(guī)范 136
6.2.3 切圖工具——Cutterman 136
6.2.4 iOS平臺與Android平臺下的切圖 137
6.2.5 點9圖 140
6.3 學習反思 142