淺談UI設(shè)計(jì)中的視覺(jué)設(shè)計(jì)風(fēng)格發(fā)展

竇曉晨

【摘 要】21世紀(jì)以來(lái)，隨著科學(xué)技術(shù)進(jìn)步及移動(dòng)互聯(lián)網(wǎng)的發(fā)展，信息技術(shù)已成為當(dāng)前社會(huì)經(jīng)濟(jì)發(fā)展中不可忽略的一部分，電腦和掌上移動(dòng)設(shè)備作為信息的載體也有著突飛猛進(jìn)的發(fā)展。這樣一來(lái)，人與電腦設(shè)備之間如何互動(dòng)就成了一門值得考慮的學(xué)問(wèn)，UI設(shè)計(jì)應(yīng)運(yùn)而生，UI設(shè)計(jì)中的視覺(jué)設(shè)計(jì)風(fēng)格也在不斷發(fā)展。

【關(guān)鍵詞】UI設(shè)計(jì)；視覺(jué)設(shè)計(jì)風(fēng)格；發(fā)展

中圖分類號(hào)：TB472 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1007-0125（2017）07-0171-01

一、UI設(shè)計(jì)概述

（一）UI設(shè)計(jì)的定義：UI是由User Interface（用戶界面）縮寫(xiě)而來(lái)。UI設(shè)計(jì)即為用戶界面設(shè)計(jì)。是對(duì)軟件的人機(jī)交互、整體操作的邏輯以及操作界面的視覺(jué)美觀性的整體設(shè)計(jì)過(guò)程。

（二）UI設(shè)計(jì)中視覺(jué)設(shè)計(jì)風(fēng)格定義：UI設(shè)計(jì)中視覺(jué)設(shè)計(jì)風(fēng)格是指視覺(jué)設(shè)計(jì)師在進(jìn)行用戶界面設(shè)計(jì)時(shí)所使用的圖形化語(yǔ)言。視覺(jué)設(shè)計(jì)師在進(jìn)行軟件界面設(shè)計(jì)時(shí)對(duì)數(shù)據(jù)進(jìn)行全面分析并歸納總結(jié)，運(yùn)用點(diǎn)、線、面等圖形化語(yǔ)言并設(shè)定合適的色彩創(chuàng)造出符合用戶審美的用戶界面風(fēng)格。當(dāng)前主要運(yùn)用于UI設(shè)計(jì)中的視覺(jué)設(shè)計(jì)語(yǔ)言有：1.擬物化風(fēng)格，該視覺(jué)設(shè)計(jì)語(yǔ)言風(fēng)格是對(duì)真實(shí)物體的模擬，最大程度在去模擬真實(shí)物體的形體和質(zhì)感。2.極簡(jiǎn)化風(fēng)格，該視覺(jué)設(shè)計(jì)風(fēng)格是視覺(jué)設(shè)計(jì)師將想要表達(dá)的形體事物以最簡(jiǎn)單的線條或者圖形概括出來(lái)，使用戶看到這一圖形即可聯(lián)想到一定的實(shí)物。

二、國(guó)內(nèi)外UI設(shè)計(jì)視覺(jué)設(shè)計(jì)風(fēng)格發(fā)展現(xiàn)狀

美國(guó)于上世紀(jì)中期便發(fā)明了計(jì)算機(jī)并建立了互聯(lián)網(wǎng)，這方便了人們的工作和生活，在人與計(jì)算機(jī)使用和被使用的過(guò)程中便產(chǎn)生了人機(jī)交互這一概念。在人機(jī)交互上是以發(fā)現(xiàn)問(wèn)題到解決問(wèn)題的模式不斷地形成了規(guī)范；在視覺(jué)設(shè)計(jì)語(yǔ)言方面，美國(guó)、德國(guó)、法國(guó)等國(guó)家受到包豪斯設(shè)計(jì)學(xué)院的影響，遵從包豪斯“藝術(shù)與技術(shù)的新統(tǒng)一、設(shè)計(jì)的目的是人而不是產(chǎn)品、設(shè)計(jì)必須遵循自然與客觀的法則來(lái)進(jìn)行”的觀點(diǎn)，形成了簡(jiǎn)約至上的現(xiàn)代視覺(jué)設(shè)計(jì)語(yǔ)言風(fēng)格。

國(guó)內(nèi)關(guān)于藝術(shù)類的教育仍然處于講述基本知識(shí)的學(xué)院式教育，教學(xué)僅僅是為了講述知識(shí)，而并沒(méi)有和當(dāng)前先進(jìn)的科學(xué)技術(shù)生產(chǎn)力接軌，關(guān)于UI設(shè)計(jì)的教學(xué)也僅僅是依靠教師在相關(guān)領(lǐng)域的相關(guān)經(jīng)驗(yàn)，并不能切實(shí)地結(jié)合社會(huì)需求。這些都極大地限制了中國(guó)在UI設(shè)計(jì)行業(yè)的發(fā)展。隨著互聯(lián)網(wǎng)技術(shù)在中國(guó)突飛猛進(jìn)的發(fā)展，目前國(guó)內(nèi)也有許多互聯(lián)網(wǎng)企業(yè)在借鑒了國(guó)外成熟的設(shè)計(jì)規(guī)范后，發(fā)展出了自己完善的UI設(shè)計(jì)規(guī)范，也做出了相當(dāng)成熟的產(chǎn)品。

三、成熟UI設(shè)計(jì)視覺(jué)語(yǔ)言風(fēng)格應(yīng)用

（一）擬物化設(shè)計(jì)風(fēng)格：是借助已有的實(shí)體進(jìn)行設(shè)計(jì)，將設(shè)計(jì)中功能上并不必須的元素也要添加，這種真實(shí)的實(shí)物感以及質(zhì)感帶給用戶極大的親切感，能使用戶更快地掌握如何操作和使用該產(chǎn)品。如錘子科技公司的手機(jī)系統(tǒng)Smartisan OS，該系統(tǒng)UI大量采用了擬物化設(shè)計(jì)風(fēng)格：其系統(tǒng)自帶軟件計(jì)算器，其圖標(biāo)是具有真實(shí)質(zhì)感的計(jì)算器按鈕，能使用戶快速識(shí)別。打開(kāi)軟件后，無(wú)論從質(zhì)感立體感到屏幕顯示、字體顯示、界面顏色再到觸覺(jué)反饋，無(wú)不呈現(xiàn)出一個(gè)真實(shí)的計(jì)算器。這樣的設(shè)計(jì)能帶給用戶生活中的親切感。

（二）扁平化設(shè)計(jì)風(fēng)格：是指在設(shè)計(jì)過(guò)程中使用簡(jiǎn)單的特效或者不使用視覺(jué)特效，以極簡(jiǎn)單的形體去進(jìn)行設(shè)計(jì)。這種設(shè)計(jì)方式較簡(jiǎn)單直接也更加輕量化，更加適用于移動(dòng)界面的設(shè)計(jì)。如2010年微軟windows phone操作系統(tǒng)，其整體布局采用色彩明亮的色塊進(jìn)行區(qū)塊劃分和整體布局，圖標(biāo)設(shè)計(jì)也采用極簡(jiǎn)的線形和面元素設(shè)計(jì)，整體輕快簡(jiǎn)潔。隨后，蘋(píng)果公司和谷歌公司在iOS和安卓系統(tǒng)中也開(kāi)始采用扁平化設(shè)計(jì)風(fēng)格。目前無(wú)論是蘋(píng)果還是安卓，在原生系統(tǒng)級(jí)的圖標(biāo)和布局的設(shè)計(jì)都采用了扁平化設(shè)計(jì)風(fēng)格。受此影響，國(guó)內(nèi)外的軟件廠商為和手機(jī)系統(tǒng)風(fēng)格保持一致也紛紛效仿改變風(fēng)格。

（三）原質(zhì)化設(shè)計(jì)風(fēng)格：是谷歌公司所研究出來(lái)的一種新的設(shè)計(jì)語(yǔ)言，也是一種設(shè)計(jì)規(guī)范。該風(fēng)格是由谷歌團(tuán)隊(duì)對(duì)于紙質(zhì)和墨水材料的研究，在基本元素的處理上，借鑒了傳統(tǒng)的印刷設(shè)計(jì)、排版、網(wǎng)格、空間、比例、配色、圖像。同時(shí)強(qiáng)調(diào)結(jié)合實(shí)體物理屬性和規(guī)律的、合理的動(dòng)效和高效的空間化利用。以和物理世界接近的觸感可以讓用戶更為自然、快速地理解和認(rèn)知。該風(fēng)格是在扁平化風(fēng)格基礎(chǔ)上加以真實(shí)物理世界的觸感，是介于上述兩種風(fēng)格之間的風(fēng)格，原質(zhì)化設(shè)計(jì)風(fēng)格尚處于發(fā)展初期，在未來(lái)的發(fā)展中它可能在UI設(shè)計(jì)視覺(jué)語(yǔ)言風(fēng)格中占有一席之地。

四、結(jié)語(yǔ)

互聯(lián)網(wǎng)技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)商業(yè)也緊隨其后，這就決定了UI設(shè)計(jì)發(fā)展的重要性。隨著人們對(duì)各系統(tǒng)操作的熟識(shí)，UI設(shè)計(jì)視覺(jué)設(shè)計(jì)風(fēng)格也要隨著用戶的審美變化而不斷發(fā)展。而這種發(fā)展也會(huì)是符合現(xiàn)在設(shè)計(jì)發(fā)展的規(guī)律，由起初簡(jiǎn)單的文本界面發(fā)展為精美雕飾的形體界面，再由繁復(fù)的界面簡(jiǎn)化為簡(jiǎn)約輕快的界面，之后還會(huì)在簡(jiǎn)單的基礎(chǔ)上再去增加體驗(yàn)。總而言之，UI設(shè)計(jì)視覺(jué)設(shè)計(jì)風(fēng)格的發(fā)展也會(huì)遵從由簡(jiǎn)到繁再由繁到簡(jiǎn)這樣一個(gè)過(guò)程。

參考文獻(xiàn)：

[1]人機(jī)互動(dòng)，UI 的絢麗與便捷*移動(dòng)互聯(lián)網(wǎng)時(shí)代的手機(jī)UI設(shè)計(jì)與主流終端廠商理念評(píng)析[J].新潮電子，2009，（9）：29-47.

[2]蔣陸.手機(jī)圖形用戶界面的圖標(biāo)個(gè)性化設(shè)計(jì)研究[J].黑龍江科技信息，2007，（6）：67+152.

[3]約翰遜.認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則[M].北京：人民郵電出版社，2011.