視覺(jué)UI設(shè)計(jì)——漫談信息圖形化

任懷琎 周 著

（1.西安工業(yè)大學(xué)藝術(shù)與傳媒學(xué)院，陜西 西安710000；2.西安工業(yè)大學(xué)，陜西 西安710000）

UI全稱是User interface直譯過(guò)來(lái)就是用戶界面的縮寫(xiě)，這個(gè)詞涵蓋面比較廣既包括界面的視覺(jué)設(shè)計(jì)，也包括界面的交互設(shè)計(jì)。通常我們把視覺(jué)類(lèi)UI設(shè)計(jì)稱為GUI設(shè)計(jì)既視覺(jué)界面設(shè)計(jì)。

1 用戶界面設(shè)計(jì)的興起

從電子產(chǎn)品普及伊始用戶界面設(shè)計(jì)就開(kāi)始悄悄的生根發(fā)芽默默成長(zhǎng)。時(shí)至今日多屏?xí)r代的來(lái)臨已勢(shì)不可擋，電子產(chǎn)品由大屏到觸屏、由薄到超薄，一款電子設(shè)備擁有舒適的用戶界面會(huì)無(wú)疑會(huì)給用戶帶來(lái)良好的使用體驗(yàn)，拉近人機(jī)之間的距離。而對(duì)于任何一款用戶界面而言，檢驗(yàn)的標(biāo)準(zhǔn)既不是設(shè)計(jì)師的意見(jiàn)也不是委托方的看法，而是終端用戶的直觀體驗(yàn)。從這個(gè)角度來(lái)說(shuō)UI設(shè)計(jì)無(wú)疑是一種建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)。

1.1 讀圖時(shí)代的來(lái)臨

縱觀用戶界面設(shè)計(jì)的發(fā)展歷程，幾款里程碑式的設(shè)計(jì)案例均由世界級(jí)的電子科技類(lèi)公司所創(chuàng)造的。微軟操作系統(tǒng)的演變史，從某種意義上說(shuō)就是用戶界面設(shè)計(jì)從無(wú)到有的發(fā)展史，早在1985年微軟正式推出windows1.0，有幸使用過(guò)的人數(shù)應(yīng)該不會(huì)太多，而此時(shí)的用戶界面只能用不忍直視來(lái)評(píng)價(jià)；直至windows95推出之后，windows操作系統(tǒng)才為人所熟知，很重要的原因在于windows95及其之后的版本均采用圖形化操作界面，看起來(lái)直觀簡(jiǎn)單，各模塊一目了然。正是因?yàn)槲④洠屧O(shè)計(jì)界在1995年的時(shí)候，知道了用戶界面有多重要！

圖形化操作界面也就是信息圖形化設(shè)計(jì)，把數(shù)據(jù)視覺(jué)化讓用戶在最短時(shí)間內(nèi)了解所使用的設(shè)備。設(shè)備再好，沒(méi)有一個(gè)好的界面，用戶還是不會(huì)接受的，畢竟大多數(shù)人對(duì)計(jì)算機(jī)代碼都不甚了解，而讓不懂各種代碼的人一眼就能夠分辨出設(shè)備上的內(nèi)容而進(jìn)行操作才是最重要的。在分析任何一款視覺(jué)界面設(shè)計(jì)的成功案例時(shí)，認(rèn)為視覺(jué)界面設(shè)計(jì)是需要質(zhì)感也好還是簡(jiǎn)約也罷，這貌似都不是視覺(jué)界面設(shè)計(jì)最根本任務(wù)。私下認(rèn)為降低學(xué)習(xí)使用設(shè)備的時(shí)間成本，以直觀的視覺(jué)語(yǔ)言提供給用戶盡可能多的信息，這似乎才是視覺(jué)界面設(shè)計(jì)最根本的任務(wù)。

1.2 視覺(jué)UI設(shè)計(jì)——設(shè)計(jì)家族的新成員

蘋(píng)果公司擬物化設(shè)計(jì)的硝煙還未完全散去，微軟以win8.0為契機(jī)推出的Metro UI又大有蔓延之勢(shì)。無(wú)論是對(duì)產(chǎn)品開(kāi)發(fā)商仰或用戶群體來(lái)說(shuō)都在強(qiáng)調(diào)效率，無(wú)論在科學(xué)技術(shù)設(shè)備，還是商業(yè)娛樂(lè)工具，操作界面的信息圖形化都發(fā)揮著重要的作用。這直接導(dǎo)致了近年來(lái)傳統(tǒng)美工漸漸淡出了視覺(jué)UI設(shè)計(jì)領(lǐng)域，出現(xiàn)了專(zhuān)業(yè)的UI設(shè)計(jì)機(jī)構(gòu)，也涌現(xiàn)出一些優(yōu)秀的設(shè)計(jì)案例.當(dāng)然國(guó)內(nèi)的UI設(shè)計(jì)還處于跟隨別人前進(jìn)的階段，而且UI設(shè)計(jì)既要求基本的圖形美感與設(shè)計(jì)審美能力，又要有嚴(yán)密的內(nèi)在邏輯關(guān)系，這在UI設(shè)計(jì)中幾乎成了一個(gè)不可調(diào)和的矛盾。

2 圖形化設(shè)計(jì)——視覺(jué)UI設(shè)計(jì)的必然走向

UI設(shè)計(jì)是產(chǎn)品的一部分，通過(guò)圖形界面的邏輯嚴(yán)謹(jǐn)布局合理，設(shè)計(jì)師可以讓用戶通過(guò)界面就能體驗(yàn)到產(chǎn)品的適用程度。界面更合理，便能更好地引導(dǎo)用戶使用。達(dá)到占市場(chǎng)的目的。

2.1 直觀的界面才是好的界面

“傻瓜式設(shè)計(jì)才是好的設(shè)計(jì)”在設(shè)計(jì)中常常聽(tīng)同行這么一說(shuō)，私下想來(lái)大概是說(shuō)經(jīng)過(guò)UI設(shè)計(jì)的信息需要直白而單純。以此為前提UI設(shè)計(jì)中很難找出比圖形更明確、更直觀的設(shè)計(jì)語(yǔ)言！在大多數(shù)情況下圖形語(yǔ)言甚至于可以無(wú)視不同國(guó)界間用戶的母語(yǔ)差別，進(jìn)行無(wú)障礙交流。1974年美國(guó)平面設(shè)計(jì)學(xué)院設(shè)計(jì)的聯(lián)邦交通標(biāo)識(shí)[1]，在全世界范圍內(nèi)被推廣恰好證實(shí)了這一點(diǎn)。在視覺(jué)UI設(shè)計(jì)領(lǐng)域所有信息圖形都按照一定邏輯順序進(jìn)行科學(xué)排列，在有限屏幕空間最大化優(yōu)化內(nèi)容排列,清晰展示設(shè)備的每一功能屬性。在保證功能的前提下，兼顧視覺(jué)清晰，直觀，美觀，這就是UI設(shè)計(jì)的基本規(guī)則。

2.2 視覺(jué)UI設(shè)計(jì)的多元化發(fā)展

和其他設(shè)計(jì)種類(lèi)一樣，視覺(jué)UI設(shè)計(jì)在發(fā)展中也逐漸形成了一些不同的風(fēng)格潮流，而且每種風(fēng)格的關(guān)注點(diǎn)和呈現(xiàn)面貌也都有較大的差異。這對(duì)維持視覺(jué)UI設(shè)計(jì)的新鮮度[2]是很重要的。

2.2.1 從Metro風(fēng)格說(shuō)視覺(jué)UI設(shè)計(jì)

Metro是由微軟公司從20世紀(jì)50年代出現(xiàn)的“國(guó)際主義設(shè)計(jì)風(fēng)格”中獲取靈感基于排版的設(shè)計(jì)語(yǔ)言所開(kāi)發(fā)的一種界面設(shè)計(jì)風(fēng)格，該技術(shù)已于2010年初（美國(guó)）獲得Metro UI專(zhuān)利批準(zhǔn)如今該技術(shù)被引入到Windows Phone操作系統(tǒng)和Windows 8、Windows 8.1以及Office 15中。研究Metro UI會(huì)發(fā)現(xiàn)此風(fēng)格對(duì)排版設(shè)計(jì)要求較高，Metro UI設(shè)計(jì)的元素有很?chē)?yán)謹(jǐn)?shù)目臻g規(guī)劃，字體在塊面上的位置及留白相當(dāng)重要，塊面在版塊中的布局需要很好的推敲。使用Metro風(fēng)格界面有效告訴用戶設(shè)備有何種功能且如何操作。

Metro風(fēng)格的另一個(gè)特點(diǎn)是，這種剔除不必要設(shè)計(jì)元素而僅僅基于排版的設(shè)計(jì)方式能大大地簡(jiǎn)化設(shè)計(jì)，減少設(shè)計(jì)師工作量。

2.2.2 扁平化的視覺(jué)UI設(shè)計(jì)

2013年4月IOS7.0系統(tǒng)的扁平化設(shè)計(jì)風(fēng)格給UI設(shè)計(jì)界帶來(lái)一股強(qiáng)大的潮流，短短幾個(gè)月內(nèi)UI扁平化設(shè)計(jì)已經(jīng)成為設(shè)計(jì)行業(yè)內(nèi)最受歡迎的設(shè)計(jì)風(fēng)格了。在UI設(shè)計(jì)中去掉邊框，陰影，變體，3D等元素，這種極簡(jiǎn)主義的設(shè)計(jì)方法。展現(xiàn)出一個(gè)非常干凈簡(jiǎn)單設(shè)計(jì)作品，這就是扁平化設(shè)計(jì)。

扁平化如此受到追捧，因?yàn)槠湓赨I設(shè)計(jì)中有著明顯的優(yōu)勢(shì)。以最簡(jiǎn)單直白的方式傳遞設(shè)計(jì)所要表達(dá)的東西，因此設(shè)計(jì)會(huì)更加注重功能化，通過(guò)明顯的顏色方案與排版上的設(shè)計(jì)，來(lái)減少不必要的視覺(jué)設(shè)計(jì)要素對(duì)用戶接受信息的干擾。

在視覺(jué)UI設(shè)計(jì)中，對(duì)設(shè)計(jì)元素“舍”得多是復(fù)雜，“取”得多是簡(jiǎn)單，而設(shè)計(jì)師在“取舍”時(shí)進(jìn)行的恰到好處，則UI界面也就顯得簡(jiǎn)潔親切，也就是俗稱的界面友好。視覺(jué)UI設(shè)計(jì)之所以能賦予產(chǎn)品生命，是因?yàn)樗墙?jīng)過(guò)精煉出來(lái)的，是主要信息和設(shè)計(jì)因素的集合，是設(shè)計(jì)師對(duì)細(xì)節(jié)的注重和對(duì)整體的把控。滿足了用戶對(duì)于視覺(jué)界面最本質(zhì)的需求。

［1］王受之.世界平面設(shè)計(jì)史[M].中國(guó)青年出版社,2005:260-261.

［2］藝態(tài)15:尋找自己的符號(hào)[M].上海人民美術(shù)出版社,2012.