隨著信息技術(shù)不斷地完善和更新,智能手機在市場中也越來越普及,使用移動客戶端的人數(shù)大幅度上升。人們通過各種APP進行購物、看電影、閱讀文獻,處處都受APP客戶端的影響,APP的開發(fā)無疑是移動互聯(lián)網(wǎng)發(fā)展的主流。本文從APP用戶界面的歷史演變出發(fā),從最初簡單、粗獷、毫無情感的界面,逐步發(fā)展成逼真,貼近現(xiàn)實的擬物化界面風格,最后到2013年蘋果公司對IOS7系統(tǒng)界面進行顛覆性的改造,設(shè)計師普遍承認扁平化界面是當前的一個時代潮流,也是一個發(fā)展趨勢。研究扁平化設(shè)計風格,它是信息時代發(fā)展的需求,摒棄繁瑣的裝飾效果。探索扁平化視覺傳達設(shè)計語言,提倡簡單的圖形、明亮的色彩、清晰的布局等這些特點非常適用于這種信息量大,內(nèi)容繁雜的APP用戶界面。隨著時間的流逝發(fā)現(xiàn)太過于扁平的界面讓人感覺極為呆板,圖形過于抽象,沒有良好的交互提示。為了改變這一弊端,產(chǎn)生新的扁平化風格,它可以有微投影,微漸變等視覺效果,使畫面內(nèi)容條理清晰,操作方便快捷。本文重點研究扁平化風格的特點和原則,通過問卷調(diào)查分析新的扁平化所帶來的效果,論述扁平化對APP用戶界面的意義。在這些理論基礎(chǔ)上結(jié)合畢業(yè)設(shè)計“拾光”APP扁平化用戶界面進行設(shè)計實... 

【文章來源】：寧夏大學寧夏回族自治區(qū) 211工程院校

【文章頁數(shù)】：39 頁

【學位級別】：碩士

【部分圖文】：

圖１－３游戲界面

輕易分散注意力，用戶會更加容易被引導到特定的區(qū)域，關(guān)注主要內(nèi)容，這種設(shè)計思路可以有效??的傳達信息。極簡主義造型單純、用色簡練，結(jié)構(gòu)嚴謹，其理念注重功能性、時效性、快速傳播??性，被應用在各種各樣的設(shè)計領(lǐng)域（如圖１－２）。??圖?１－２?海報圖片來源：ｈｔｔｐ：／／ｂｌｏｇ．ｓｉｎａ．ｅｎ／ｄｐｏｏｌ／ｂｌｏｇ／ｓ／ｂｌｏｇ＿９８２９ｅ９３ａ０１０１９０２ｚ．ｈｔｍｌ??第三節(jié)扁平化ＡＰＰ界面設(shè)計的起源與發(fā)展??縱觀ＡＰＰ界面設(shè)計發(fā)展歷史，其設(shè)計風格經(jīng)歷了早期豪放粗獷的抽象信息化階段，界面中的??圖形十分簡單，抽象又古板的視覺語言和乏味的信息傳輸，不關(guān)注用戶內(nèi)心的感受，毫無情感的??用戶體驗。例如諾基亞６１１０手機在１９９８年上新第一款游戲軟件程序？。諾基亞首創(chuàng)開發(fā)手機游??戲，贏得大家爭相購買，該手機共開發(fā)三款游戲，其中的貪吃蛇最為流行，成為諾基亞手機的必??備游戲，其實手機內(nèi)部配置的游戲軟件界面也就是早期的ＡＰＰ用戶界面，如圖（１－３，如圖１－４）。??ｎａＨＢ?＿??＾ｆＴｎｌ?（Ｓ??圖１－３游戲界面?圖１－４歡迎界面??圖片來源：ｈｔｔｐ：／／ｓｈｏｕｊｉ．ｔｇｂｕｓ．ｃｏｍ／ｖｉｅｗ／１６８６３８／?圖片來源：ｈｔｔｐ：／／ｔｉｅｂａ．ｂａ丨ｄｕ．ｅｏｍ／ｐ／ｌ４７４５８７３８ｌ？ｔｒａｃｅｉｄ＝??１張濤．淺析極簡主義風格的平面設(shè)計［Ｊ］．藝術(shù)科技，２０１６?（１?）?：?２３．??２高君．手機ＵＩ界面中情感化表現(xiàn)的創(chuàng)新性研宄與應用［Ｄ］．天津工業(yè)大學，２０１５．??－６?－??

采用增添高光、紋理、漸變、陰影等效果進行仿真物體，設(shè)計過程中可以進行加工變??形和夸張，擬物設(shè)計會讓你第一眼就認出這是個什么東西，有較強的真實感。人們根據(jù)生活中的??常識可以明確辨識，給用戶體驗帶來真實感的追求（如圖１－５，如圖１－６）。??ｍｍｍｍ??■■■■■■??圖１－５錄音機界面?圖１－６天氣界面??圖片來源：１１即：／／＼＼＾＼￥．（＾丨已（：〇１１１／１］１叱３（１－１３９１２５－卜１．１１加丨圖片來源：ｈｔｔｐ：／／ｔｉｅｂａ．ｂａｉｄｕ．ｅｏｍ／ｐ／５１３７６２３４３１??后來又回歸到簡潔式畫面，與最開始的的冰冷的幾何形式不同。扁平化設(shè)計注重人性，符合??人們的審美感受，良好的視覺語言傳遞。這種風格的演變順應歷史的發(fā)展走向，記錄著在科技引??領(lǐng)下，手機界面風格、內(nèi)容與功能變遷的軌跡。在２０１３年ＷＷＤＣ？大會上，蘋果公司對丨０Ｓ７顛??覆性的改造，用戶界面由擬物化風格轉(zhuǎn)向扁平化風格，設(shè)計師普遍承認用戶界面扁平化風格是當??前的一個潮流，也是一個發(fā)展趨勢（如圖１－７，如圖１－８）。圖標采用更鮮艷的配色、更簡單的背??景，清晰的圖標與模糊的背景之間的高度反差凸顯了層次，并運用大字體，現(xiàn)代感十足。??圖１－７蘋果手機丨０Ｓ１２錄音機界面?圖１－８蘋果手機Ｉ０Ｓ１２天氣界面??圖片來源：蘋果系統(tǒng)錄音軟件?圖片來源：蘋果系統(tǒng)天氣軟件??１史蒂夫？喬布斯美國發(fā)明家、企業(yè)家、美國蘋果公司聯(lián)合創(chuàng)辦人。??２蘋果全球開發(fā)者大會（英文全稱是“Ｗｏｒ丨ｄｗｉｄｅ?Ｄｅｖｅｌｏｐｅｒｓ?Ｃｏｎｆｅｒｅｎｃｅ”）

【參考文獻】：
期刊論文
[1]試談移動UI設(shè)計原則與方法[J]. 秦艷麗.  電腦編程技巧與維護. 2018(05)
[2]扁平化插圖設(shè)計——以“嘻游季”為例[J]. 關(guān)兆.  大觀(論壇). 2018(04)
[3]手機界面的扁平化設(shè)計研究[J]. 徐倩,魏容.  美術(shù)教育研究. 2017(15)
[4]扁平化設(shè)計風格在界面中的應用[J]. 尹中月.  數(shù)碼世界. 2017(04)
[5]淺析極簡主義風格的平面設(shè)計[J]. 張濤.  藝術(shù)科技. 2016(01)
[6]淺析類扁平化設(shè)計在圖標設(shè)計中的應用[J]. 張朦朦.  大眾文藝. 2015(24)
[7]格式塔心理學在移動UI視覺設(shè)計中的應用[J]. 谷曉.  藝術(shù)科技. 2015(07)
[8]簡潔而不乏味——淺談扁平化界面設(shè)計[J]. 馬娜娜.  大眾文藝. 2013(16)
[9]以“人”為本的用戶界面設(shè)計流程研究[J]. 蔡瑩瑩.  才智. 2011(04)

碩士論文
[1]移動端智能手機軟件產(chǎn)品的UI設(shè)計研究[D]. 馮陽.青島理工大學 2016
[2]數(shù)字化時代圖像扁平化視覺應用與研究[D]. 鄭譜.大連工業(yè)大學 2016
[3]“扁平化”設(shè)計風格在圖書館網(wǎng)站設(shè)計上的應用[D]. 王梓瀟.沈陽師范大學 2015
[4]智能手機用戶界面設(shè)計的批評研究[D]. 王庭杰.南京藝術(shù)學院 2015
[5]論絲網(wǎng)印刷互聯(lián)網(wǎng)定制平臺的扁平化設(shè)計[D]. 沈佳倫.中國美術(shù)學院 2015
[6]扁平化設(shè)計風格下平面視覺元素的應用研究[D]. 方心怡.蘇州大學 2015
[7]基于用戶需求與體驗的新聞客戶端研究[D]. 萬芊.復旦大學 2014



本文編號：3514847