互聯(lián)網(wǎng)的發(fā)展,尤其是移動互聯(lián)網(wǎng)的發(fā)展,使得社會對于UI設計人員的需求越來越大,其從業(yè)人員也需不斷學習。本書共分十五章,以移動互聯(lián)網(wǎng)應用需求為導向,以豐富實例為手段,詳細講解了UI設計的方法和技巧,以及注意事項等內(nèi)容。
本書適宜從事UI設計以及相關的設計和美編人員參考。
手機已經(jīng)成為現(xiàn)代人必不可少的工具,而現(xiàn)代手機的使用離不開各種App,本書則是介紹App設計的專業(yè)指導書籍。
App設計,絕不簡單是相關工具軟件的使用,App本身的功能和適用性才是它存活的依靠。本書正是立足于此,通過各種功能需求的解讀來介紹各種工具軟件的使用,干活多,上手快。
當今是以互聯(lián)網(wǎng)發(fā)展為主的時代,人們的生活大多離不開電商購物、手機娛樂,互聯(lián)網(wǎng)已占據(jù)了人們生活的相當一部分。隨著計算機行業(yè)和互聯(lián)網(wǎng)的迅速發(fā)展以及應用領域的拓寬,用戶界面(UI)設計逐漸成為互聯(lián)網(wǎng)熱門的專業(yè)。用戶界面是系統(tǒng)中不可缺少的部分,是人與電子計算機系統(tǒng)進行交互和信息交換的媒介,是用戶使用電子計算機的綜合環(huán)境。近年來,從事UI設計的人越來越多,企業(yè)對UI設計的要求越來越高,UI設計師的薪資也水漲船高。這背后的原因,是近年來智能移動設備越來越流行。
現(xiàn)今,智能設備和網(wǎng)絡飛速發(fā)展,各種通信和網(wǎng)絡連接設備與大眾生活的聯(lián)系日益密切。UI是用戶與機器設備進行交互的平臺,人們對各種類型UI的要求越來越高,促進了UI設計行業(yè)的興盛,這就為UI設計人員提供了很大的發(fā)展空間。而作為從事相關工作的人員則必須要掌握必要的操作技能,以滿足工作的需要。UI設計是指為用戶提供人機交互的可視化界面,在UI的設計中,需要提取用戶需求,針對需求進行分析,設計出合理美觀并且操作簡便的界面。UI設計是一門集工效學、認知心理學、人機交互原理學、設計藝術原理于一身的綜合性學科。
本書用一種新的思路和方式來闡述UI設計的必修內(nèi)容,包括技術、方法、流程與標準;從零開始,詳細地講解與UI設計有關的實用知識,可讀性強,注重邏輯思維培養(yǎng)和從用戶需求角度來考慮產(chǎn)品功能,幫助讀者快速地建立起自己的UI設計知識框架。同時,本書彌補了市場上相關優(yōu)秀書籍缺乏的現(xiàn)狀,講解了UI設計的視覺、用戶體驗、交互設計等方面的知識。
全書共十五章,系統(tǒng)地講解了UI設計的發(fā)展過程、制作技巧和應用方法等,各章內(nèi)容分別為:
章為互聯(lián)網(wǎng)產(chǎn)品設計,主要講解什么是互聯(lián)網(wǎng)產(chǎn)品設計,互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生流程,互聯(lián)網(wǎng)產(chǎn)品競品分析方法及互聯(lián)網(wǎng)產(chǎn)品的用戶研究方法。
第二章為感知移動設計,主要介紹移動設計的特點,移動應用的生命周期,移動設計的創(chuàng)新互聯(lián)網(wǎng)思維,移動設備的三大主流平臺和應用,移動設備中的人機交互設計,移動UI設計發(fā)展新趨勢,移動設計就業(yè)要求等問題。
第三章為用戶體驗與UI交互設計概述,主要解讀UI設計,用戶體驗,用戶體驗設計三大流程,交互設計,原型設計工具推薦等內(nèi)容。
第四章為移動產(chǎn)品的創(chuàng)意和原型草圖設計,主要講解移動產(chǎn)品的創(chuàng)意,移動產(chǎn)品的定位,移動產(chǎn)品的需求分析,討論與初步設計,繪制用戶體驗原型草圖等知識。
第五章為移動產(chǎn)品的低保真原型設計,主要研究移動應用產(chǎn)品設計規(guī)范,界面布局和導航機制,設計組件,低保真原型設計流程,低保真原型的可用性測試。
第六章為移動產(chǎn)品的高保真原型視覺設計,主要講解圖形元素的合理構建,界面的色彩選擇,文字使用技巧,數(shù)字界面的主流風格與圖標設計等知識。
第七章為Axure RP 8.0軟件界面操作基礎,主要講解Axure軟件綜述,Axure基礎元件,Axure RP 8.0元件基礎應用案例。
第八章為微信交互案例,講解微信登錄界面操作案例,微信抽屜式導航案例,微信交互原型案例。
第九章為交互原型案例,講解地圖App交互原型案例,購物App交互原型案例,社團App案例,當?shù)芈糜蜛pp作品展示等內(nèi)容。
第十章為XMind流程圖設計基礎,講解流程圖概述,創(chuàng)建流程圖,流程圖模板和結構,主題,導出與導入。
第十一章為PhotoshopApp圖標設計,主要講解圖標設計的基礎知識,圖標欣賞,心形圖標設計,計算器圖標設計,時鐘圖標設計等知識。
第十二章為Photoshop手機主題界面設計,主要講解手機主題的基礎知識,手機主題界面賞析,水晶花主題界面設計,冬雪的冬天主題界面設計,美好生日夢主題界面設計,清新雛菊制作。
第十三章為AE動效設計基礎,主要講解如何導入素材輸出格式,動態(tài)二維碼的5個屬性,常用工具欄及攝像機功能,GIF生成。
第十四章為響應式網(wǎng)站和H5動畫,主要講解HTML5的三個優(yōu)勢,HTML5的八大特性,HTML5的應用及布局方式,CSS3視覺表現(xiàn)方面的新特性。
第十五章為VR(虛擬現(xiàn)實)和AR(增強現(xiàn)實)交互,主要講解VR和AR技術及其發(fā)展歷史,VR和AR的發(fā)展前景及體系,VR和AR硬件及盈利模式,VR和AR交互,VR和AR項目設計流程及應用領域等知識。
本書作者中,李慶德(佛山科學技術學院)撰寫第1~6章(約21萬字),陳峰(臺州學院)撰寫第7~10章(約13萬字),馬凱(齊齊哈爾大學)撰寫第11~15章(約15萬字)。后,要特別感謝在本書編寫過程中給予大力支持的UI設計方面的老師和同仁們,特別感謝尤媛媛和沈舒心提供的文字及圖片整理工作。
因筆者水平有限,書中不足之處希望廣大讀者和專家批評指正!
著者
2021年2月
李慶德,佛山科學技術學院視覺傳達設計系教師,東北林業(yè)大學博士
從事藝術設計教學工作多年,在藝術設計、設計心理學、藝術理論、藝術展覽諸方面發(fā)表了大量的作品及成果
2002年開始教授設計心理學、家具設計、廣告設計及平面設計課程,發(fā)表多篇藝術設計論文,多年來積累大量設計教學經(jīng)驗和設計實例。發(fā)表sci文章19篇,中文論文有12篇,作品獲得多種獎項。書籍主要有《CI設計原理與實踐》《廣告文案寫作》《產(chǎn)品設計色彩》《Photoshop CS5藝術處理實例教程》《21世紀全國高等院校藝術設計系列實用規(guī)劃教材:Photoshop CS5藝術處理實例教程》《家具設計》《數(shù)碼照片藝術化處理圣經(jīng)》等
2007年就讀于中國教育部?日本電通廣告人才培養(yǎng)研修班
版畫作品《城市和我》入圍臺灣、香港、齊齊哈爾兩岸三地藝術作品展
章 互聯(lián)網(wǎng)產(chǎn)品設計 001
節(jié) 什么是互聯(lián)網(wǎng)產(chǎn)品設計 002
第二節(jié) 互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生流程 008
第三節(jié) 互聯(lián)網(wǎng)產(chǎn)品競品分析方法 013
第四節(jié) 互聯(lián)網(wǎng)產(chǎn)品的用戶研究方法 018
第二章 感知移動設計 025
節(jié) 移動設計的特點 026
第二節(jié) 移動應用的生命周期 030
第三節(jié) 移動設計的創(chuàng)新互聯(lián)網(wǎng)思維 036
第四節(jié) 移動設備的三大主流平臺和應用 039
第五節(jié) 移動設備中的人機交互設計 044
第六節(jié) 移動UI設計發(fā)展新趨勢 046
第七節(jié) 移動設計就業(yè)要求 050
第三章 用戶體驗與UI交互設計概述 053
節(jié) UI設計 054
第二節(jié) 用戶體驗 060
第三節(jié) 用戶體驗設計三大流程 066
第四節(jié) 交互設計 074
第五節(jié) 原型設計工具推薦 075
第四章 移動產(chǎn)品的創(chuàng)意和原型草圖設計 085
節(jié) 移動產(chǎn)品的創(chuàng)意 086
第二節(jié) 移動產(chǎn)品的定位 091
第三節(jié) 移動產(chǎn)品的需求分析 095
第四節(jié) 討論與初步設計 099
第五節(jié) 繪制用戶體驗原型草圖 103
第五章 移動產(chǎn)品的低保真原型設計 116
節(jié) 移動應用產(chǎn)品設計規(guī)范 118
第二節(jié) 界面布局和導航機制 127
第三節(jié) 設計組件 132
第四節(jié) 低保真原型設計流程 139
第五節(jié) 低保真原型的可用性測試 144
第六章 移動產(chǎn)品的高保真原型視覺設計 149
節(jié) 圖形元素的合理構建 150
第二節(jié) 界面的色彩選擇 154
第三節(jié) 文字使用技巧 159
第四節(jié) 數(shù)字界面的主流風格與圖標設計 160
第七章 Axure RP 8.0軟件界面操作基礎 167
節(jié) Axure軟件綜述 168
第二節(jié) Axure基礎元件 171
第三節(jié) Axure RP 8.0元件基礎應用案例 174
第八章 微信交互案例 182
節(jié) 微信登錄界面操作案例 182
第二節(jié) 微信抽屜式導航案例 186
第三節(jié) 微信交互原型案例 189
第九章 交互原型案例 194
節(jié) 地圖App交互原型案例 194
第二節(jié) 購物App交互原型案例 199
第三節(jié) 社團App案例 202
第四節(jié) 當?shù)芈糜蜛pp作品展示 204
第十章 XMind流程圖設計基礎 207
節(jié) 流程圖概述 207
第二節(jié) 創(chuàng)建流程圖 210
第三節(jié) 流程圖模板和結構 212
第四節(jié) 主題 214
第五節(jié) 導出與導入 217
第十一章 PhotoshopApp圖標設計 220
節(jié) 圖標設計的基礎知識 220
第二節(jié) 圖標欣賞 222
第三節(jié) 心形圖標設計 223
第四節(jié) 計算器圖標設計 229
第五節(jié) 時鐘圖標設計 233
第十二章 Photoshop手機主題界面設計 242
節(jié) 手機主題的基礎知識 242
第二節(jié) 手機主題界面賞析 243
第三節(jié) 水晶花主題界面設計 244
第四節(jié) 冬雪的冬天主題界面設計 248
第五節(jié) 美好生日夢主題界面設計 251
第六節(jié) 清新雛菊制作 254
第十三章 AE動效設計基礎 257
節(jié) 導入素材輸出格式 257
第二節(jié) 動態(tài)二維碼的5個屬性 264
第三節(jié) 常用工具欄及攝像機功能 270
第四節(jié) GIF生成 281
第十四章 響應式網(wǎng)站和H5動畫 287
節(jié) HTML5的三個優(yōu)勢 288
第二節(jié) HTML5的八大特性 289
第三節(jié) HTML5的應用及布局方式 290
第四節(jié) CSS3視覺表現(xiàn)方面的新特性 291
第十五章 VR (虛擬現(xiàn)實)和AR (增強現(xiàn)實)交互 298
節(jié) VR和AR技術及其發(fā)展歷史 299
第二節(jié) VR和AR的發(fā)展前景及體系 301
第三節(jié) VR和AR硬件及盈利模式 303
第四節(jié) VR和AR交互 309
第五節(jié) VR和AR項目設計流程及應用領域 313
參考文獻 316