任懷琎 周 著

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

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

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

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

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

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

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

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

蘋果公司擬物化設(shè)計(jì)的硝煙還未完全散去，微軟以win8.0為契機(jī)推出的Metro UI又大有蔓延之勢。無論是對產(chǎn)品開發(fā)商仰或用戶群體來說都在強(qiáng)調(diào)效率，無論在科學(xué)技術(shù)設(shè)備，還是商業(yè)娛樂工具，操作界面的信息圖形化都發(fā)揮著重要的作用。這直接導(dǎo)致了近年來傳統(tǒng)美工漸漸淡出了視覺UI設(shè)計(jì)領(lǐng)域，出現(xiàn)了專業(yè)的UI設(shè)計(jì)機(jī)構(gòu)，也涌現(xiàn)出一些優(yōu)秀的設(shè)計(jì)案例.當(dāng)然國內(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ì)——視覺UI設(shè)計(jì)的必然走向

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

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

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

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

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

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

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

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

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

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

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

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

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

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