本書主要由四部分構(gòu)成,第一章視覺與交互設(shè)計概述,第二章UI圖標(biāo)設(shè)計,第三章APP交互原型設(shè)計與制作,第四章APP設(shè)計與實踐。本書試圖通過一個個真實案例設(shè)計制作的全過程介紹,讓讀者真正了解APP設(shè)計的整個流程,并掌握基本設(shè)計方法與技巧。
第1章 視覺與交互設(shè)計概述
1.1 什么是交互設(shè)計
1.1.1 交互設(shè)計的定義
1.1.2 交互設(shè)計的本質(zhì)
1.1.3 交互設(shè)計的原則
1.2 視覺交互設(shè)計相關(guān)概念
1.2.1 視覺設(shè)計與uI設(shè)計
1.2.2 圖形設(shè)計師與交互設(shè)計師
1.3 APP產(chǎn)品研發(fā)流程
1.3.1 產(chǎn)品定義階段
1.3.2 交互與視覺設(shè)計
1.3.3 開發(fā)階段
1.3.4 測試與發(fā)布階段
1.4 視覺交互設(shè)計常用軟件介紹
1.4.1 Photoshop
1.4.2 Illustrator
1.4.3 Axure
1.4.4 MockingBot(墨刀)
1.4.5 Sketch
1.5 移動設(shè)備常用尺寸以及相關(guān)設(shè)計規(guī)范
1.5.1 設(shè)計單位與相關(guān)概念
1.5.2 不同機型屏幕尺寸規(guī)格
第2章 uI圖標(biāo)設(shè)計
2.1 圖標(biāo)設(shè)計基本規(guī)范
2.1.1 Ios圖標(biāo)設(shè)計規(guī)范
2.1.2 Android圖標(biāo)設(shè)計規(guī)范
2.1.3 圖標(biāo)常見存儲格式
2.2 線性圖標(biāo)
2.2.1 “天氣”線陛圖標(biāo)思路解析
2.2.2 Photoshop制作“天氣”線性圖標(biāo)實操詳解
2.3 剪影圖標(biāo)
2.3.1 “三葉草”剪影圖標(biāo)思路解析
2.3.2 Photoshop制作“三葉草”剪影圖標(biāo)實操詳解
2.4 扁平化圖標(biāo)
2.4.1 “定位”扁平化圖標(biāo)思路解析
2.4.2 Photoshop制作“定位”扁平化圖標(biāo)實操詳解
2.5 擬物化圖標(biāo)
2.5.1 “電話”擬物化圖標(biāo)思路解析
2.5.2 Photoshop制作“電話”擬物化圖標(biāo)實操詳解
第3章 APP交互原型設(shè)計與制作
3.1 初識交互原型設(shè)計
3.1.1 手繪原型
3.1.2 低保真原型
3.1.3 高保真原型
3.2 交互原型制作工具——Axure RP 9
3.2.1 初識Axure RP 9
3.2.2 Axure RP 9工作界面和元件庫
3.2.3 實操練習(xí)01——制作基本頁面
3.3 Axure RP 9的基本交互
3.3.1 Axure RP 9基本交互流程
3.3.2 實操練習(xí)02——交互鏈接設(shè)置
3.4 Axure RP 9高級交互
3.4.1 Axure RP 9高級交互類型
3.4.2 實操練習(xí)03——設(shè)置狀態(tài)欄實時時間
3.4.3 實操練習(xí)04——動態(tài)面板輪播圖制作
3.4.4 實操練習(xí)05——APP掃描識圖頁面制作
3.4.5 實操練習(xí)06——APP音樂播放頁面制作
第4章 API設(shè)計與實戰(zhàn)
4.1 智能家居——“AI+”APP設(shè)計
4.1.1 “AI+”APP用戶調(diào)研
4.1.2 “AI+”APP用戶畫像
4.1.3 “AI+”APP競品分析
4.1.4 “AI+”APP信息架構(gòu)
4.1.5 “AI+”APP交互原型
4.1.6 “AI+”APP視覺設(shè)計
4.2 茶香中華一“簡茶”APP設(shè)計
4.2.1 “簡茶”APP用戶調(diào)研
4.2.2 “簡茶”APP用戶畫像
4.2.3 “簡茶”APP競品分析
4.2.4 “簡茶”APP信息架構(gòu)
4.2.5 “簡茶”APP交互原型
4.2.6 “簡茶”APP視覺設(shè)計
4.3 鄉(xiāng)土文化——“及思”APP設(shè)計
4.3.1 “及思”APP用戶調(diào)研
4.3.2 “及思”APP用戶畫像
4.3.3 “及思”APP競品分析
4.3.4 “及思”APP信息架構(gòu)
4.3.5 “及思”APP交互原型
4.3.6 “及思”APP視覺設(shè)計