1.內(nèi)容簡介
智能信息時(shí)代,交互技術(shù)、交互通道、交互載體等都發(fā)生了根本性變化,用戶界面UI設(shè)計(jì)已不再是傳統(tǒng)的界面美工范疇,而既要解決面向用戶的認(rèn)知和體驗(yàn)問題,又要重視信息架構(gòu)和信息流的展現(xiàn)問題。本書由淺入深,總分結(jié)合,全面系統(tǒng)地闡述了UI設(shè)計(jì)的新發(fā)展及其與相關(guān)學(xué)科的新交叉,介紹了UI設(shè)計(jì)的基本流程、基本規(guī)范和一般設(shè)計(jì)制作方法,重點(diǎn)講解了設(shè)計(jì)中的用戶研究方法、信息架構(gòu)和信息流模塊化設(shè)計(jì)、信息交互原型制作和理論,幫助讀者快速、有效、系統(tǒng)地建構(gòu)交互類UI界面設(shè)計(jì)的理論和方法。
本書共7章,第1,2章介紹UI設(shè)計(jì)的相關(guān)理論,包括認(rèn)知心理學(xué)、人因工程學(xué)、設(shè)計(jì)美學(xué)、社會學(xué)和人類學(xué)等,在理論溯源的基礎(chǔ)上梳理圖形界面的起源與發(fā)展以及UI設(shè)計(jì)流程與方法。第3章介紹UI設(shè)計(jì)的調(diào)研方法,包括以調(diào)研用戶基礎(chǔ)信息為目的的問卷法、訪談法等,以采集用戶行為信息為目的的用戶畫像法、故事版、卡片分類法等,以分析用戶需求信息為目的的人物角色法、用戶體驗(yàn)地圖等。第4~6章介紹用戶需求與信息架構(gòu)、功能之間的過渡與銜接,界面信息要素的構(gòu)成及交互設(shè)計(jì)步驟。第7章介紹UI設(shè)計(jì)的軟件操作方法及案例,包括原型設(shè)計(jì)的步驟與過程、不同類型軟件的操作細(xì)則以及不同視覺類型的界面設(shè)計(jì)案例。
本書可作為高等院校視覺傳達(dá)、數(shù)字媒體藝術(shù)、交互設(shè)計(jì)等設(shè)計(jì)類專業(yè)的教學(xué)用書,也可作為數(shù)字媒體技術(shù)、信息管理與信息系統(tǒng)、軟件工程等計(jì)算機(jī)信息類專業(yè)和各類培訓(xùn)機(jī)構(gòu)相關(guān)專業(yè)的教材以及數(shù)字藝術(shù)愛好者的參考用書。
2.目錄 第1章概述1 1.1界面與用戶界面1 1.1.1界面1 1.1.2用戶界面1 1.1.3用戶界面發(fā)展歷程2 1.1.4人機(jī)交互3 1.2圖形用戶界面3 1.2.1圖形用戶界面的定義3 1.2.2圖形用戶界面發(fā)展歷程4 1.2.3移動端圖形用戶界面6 1.2.4圖形用戶界面的分類6 1.3用戶界面相關(guān)學(xué)科7 1.3.1認(rèn)知心理學(xué)8 1.3.2人因工程學(xué)9 1.3.3設(shè)計(jì)美學(xué)9 1.3.4社會學(xué)和人類學(xué)10 第2章UI設(shè)計(jì)的應(yīng)用領(lǐng)域與流程11 2.1UI設(shè)計(jì)的基本規(guī)范11 2.1.1界面的一致性11 2.1.2界面的用戶需求13 2.2UI設(shè)計(jì)的應(yīng)用領(lǐng)域13 2.2.1網(wǎng)站界面設(shè)計(jì)13 2.2.2軟件界面設(shè)計(jì)14 2.2.3游戲界面設(shè)計(jì)14 2.2.4車載人機(jī)界面14 2.2.5智能機(jī)器人界面15 2.3UI設(shè)計(jì)常用軟件15 2.3.1視覺設(shè)計(jì)軟件15 2.3.2思維導(dǎo)圖軟件15 2.3.3快速原型設(shè)計(jì)工具16 2.3.4動效設(shè)計(jì)軟件16 2.4UI設(shè)計(jì)基本流程17 2.4.1需求階段17 2.4.2功能設(shè)計(jì)17 2.4.3交互設(shè)計(jì)18 2.4.4視覺設(shè)計(jì)19 參考文獻(xiàn)20 第3章用戶研究21 3.1用戶研究概述21 3.1.1用戶研究21 3.1.2UI設(shè)計(jì)中的用戶研究21 3.1.3UI設(shè)計(jì)中用戶研究的目標(biāo)23 3.2用戶概述26 3.2.1UI設(shè)計(jì)中的用戶26 3.2.2細(xì)分用戶人群27 3.2.3用戶特征信息33 3.3用戶研究的途徑與方法38 3.3.1確定用戶及目標(biāo)38 3.3.2用戶基礎(chǔ)信息調(diào)研39 3.3.3用戶行為信息采集54 3.3.4用戶需求信息分析61 參考文獻(xiàn)70 第4章架構(gòu)與功能71 4.1了解信息架構(gòu)71 4.1.1信息架構(gòu)的概述71 4.1.2構(gòu)成單位73 4.1.3信息分類73 4.1.4信息架構(gòu)的設(shè)計(jì)流程74 4.2信息結(jié)構(gòu)模型75 4.2.1順序性結(jié)構(gòu)模型75 4.2.2非順序性結(jié)構(gòu)模型78 4.3定義功能模塊81 4.3.1面向任務(wù)的功能模塊82 4.3.2面向操作對象的功能模塊84 4.3.3組合功能模塊85 4.4回顧并修訂85 參考文獻(xiàn)86 第5章信息表現(xiàn)形式87 5.1導(dǎo)航設(shè)計(jì)87 5.1.1主要導(dǎo)航模式88 5.1.2次級導(dǎo)航模式91 5.2標(biāo)簽設(shè)計(jì)93 5.2.1為什么要關(guān)心標(biāo)簽設(shè)計(jì)93 5.2.2標(biāo)簽設(shè)計(jì)的原則94 5.3微觀信息架構(gòu)94 5.3.1表格94 5.3.2圖表95 參考文獻(xiàn)98 第6章交互設(shè)計(jì)99 6.1界面交互設(shè)計(jì)99 6.1.1認(rèn)識界面交互設(shè)計(jì)99 6.1.2界面交互設(shè)計(jì)的要素99 6.1.3界面交互設(shè)計(jì)的基本原則100 6.1.4界面交互設(shè)計(jì)的流程103 6.2針對不同交互需求設(shè)計(jì)動效108 6.2.1功能性動效108 6.2.2體驗(yàn)性動效110 6.3不同設(shè)備端界面上的交互112 6.3.1網(wǎng)頁端界面的交互112 6.3.2移動設(shè)備端界面的交互113 6.3.3公共自助端界面的交互114 6.4低保真原型設(shè)計(jì)與軟件操作115 6.4.1制作低保真原型115 6.4.2用Adobe XD軟件制作原型124 有條漫畫——條漫APP144 參考文獻(xiàn)138 第7章視覺設(shè)計(jì)139 7.1UI視覺設(shè)計(jì)風(fēng)格139 7.1.1造型風(fēng)格139 7.1.2文化風(fēng)格144 7.1.3類型風(fēng)格147 7.2UI視覺設(shè)計(jì)的風(fēng)格要素153 7.2.1色彩要素154 7.2.2文字要素161 7.2.3圖像要素167 7.2.4圖標(biāo)要素170 7.2.5版式要素172 7.2.6控件要素176 7.2.7多媒體要素182 7.3UI視覺設(shè)計(jì)的應(yīng)用與發(fā)展183 7.3.1手機(jī)界面UI設(shè)計(jì)183 7.3.2移動端主題UI設(shè)計(jì)187 7.3.3移動端APP UI設(shè)計(jì)190 7.3.4手游UI設(shè)計(jì)197 7.3.5視覺界面的發(fā)展趨勢200 7.4UI視覺設(shè)計(jì)的制作與展示205 7.4.1APP圖標(biāo)制作205 7.4.2Loading動態(tài)圖標(biāo)制作210 7.4.3界面翻頁動效制作214 7.4.4展示視頻動畫制作219 7.4.5界面效果展示219 7.5視覺界面的設(shè)計(jì)規(guī)范220 7.5.1色彩規(guī)范220 7.5.2文字規(guī)范221 7.5.3手機(jī)界面設(shè)計(jì)規(guī)范222 7.5.4移動端APP設(shè)計(jì)規(guī)范223 參考文獻(xiàn)226
|