從視覺層次淺析UI界面的設(shè)計(jì)原則

朱宇婷

摘要：

近幾年，有一個(gè)新興的詞在設(shè)計(jì)領(lǐng)域出現(xiàn)，那就是UI設(shè)計(jì)，在短短的幾年時(shí)間里，UI設(shè)計(jì)師越來(lái)越多，各大院校也開設(shè)了和UI相關(guān)的專業(yè)或課程，成立UI部門的企業(yè)越來(lái)越多。這一切都預(yù)示著UI大時(shí)代的到來(lái)。隨著智能手機(jī)及互聯(lián)網(wǎng)時(shí)代的出現(xiàn)，UI設(shè)計(jì)更加考慮用戶體驗(yàn)等因素，將從UI設(shè)計(jì)的基本概念，通過(guò)配色等視覺層次上淺析移動(dòng)UI登錄界面設(shè)計(jì)的美感。

關(guān)鍵詞：UI設(shè)計(jì)；界面設(shè)計(jì)； 配色

目前，國(guó)內(nèi)的設(shè)計(jì)行業(yè)越來(lái)越受到重視，人們對(duì)設(shè)計(jì)的要求也越來(lái)越高。包括騰訊體育、新浪首頁(yè)還有剛剛改版的京東商城等，很多我們?nèi)粘Ｊ褂玫降木W(wǎng)站，都在慢慢的發(fā)生變化。移動(dòng)端界面設(shè)計(jì)方面，不僅蘋果公司開始拋棄鐘愛的擬物化設(shè)計(jì)，谷歌公司也有了很大的嘗試，在2011年10月發(fā)布的安卓4.0版本的設(shè)計(jì)規(guī)范里就有提到，“中性，平面，簡(jiǎn)潔。使用單一的視覺隱喻，使用戶可以很容易地識(shí)別和理解它的目的”。

一、UI設(shè)計(jì)的基本概念

UI即User Interface（用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅會(huì)讓軟件變得有個(gè)性有品味，還會(huì)讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)了軟件的定位和特點(diǎn)。

二、奪人眼球的界面設(shè)計(jì)

界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來(lái)舒適的視覺享受，拉近人與電腦的距離。界面設(shè)計(jì)不是單純的美術(shù)繪畫，而是純粹的具有科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開發(fā)組領(lǐng)導(dǎo)的意見，也不是項(xiàng)目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計(jì)是一個(gè)不斷為最終用戶設(shè)計(jì)滿意視覺效果的過(guò)程。

以手機(jī)的界面設(shè)計(jì)為例，之前的擬物化設(shè)計(jì)不管是在圖形的設(shè)計(jì)還是在場(chǎng)景的交互上都力求與現(xiàn)實(shí)相一致，其高度的相似性及精致的外觀成了最大的賣點(diǎn)。這樣做的優(yōu)勢(shì)是可以減少學(xué)習(xí)成本，新用戶或者知識(shí)儲(chǔ)備比較欠缺的用戶也可以根據(jù)其逼真的形象迅速的進(jìn)行識(shí)別。但是擬物化設(shè)計(jì)也有其缺點(diǎn)存在：一、隨著現(xiàn)在電子產(chǎn)品屏幕分辨率的提高，尺寸也逐漸多樣化，繁瑣費(fèi)時(shí)的擬物化設(shè)計(jì)顯然不能滿足未來(lái)市場(chǎng)的要求。

目前，模糊背景的運(yùn)用如雨后春筍般冒了出來(lái)，因?yàn)槟：尘暗倪\(yùn)用不僅讓整個(gè)網(wǎng)站顯得更加人性化，并且在很大程度上烘托出所要表現(xiàn)的氛圍。

三、優(yōu)化的配色原則

在黑白顯示器的年代，人們是不用考慮色彩的配置的。然而今天，屏幕色彩的配置是屏幕界面設(shè)計(jì)的一個(gè)關(guān)鍵。恰當(dāng)?shù)纳蔬\(yùn)用，不但能美化界面，而且還能夠增加用戶的興趣，引導(dǎo)其順利完成操作。人機(jī)交互在很大程度上是依賴于可視界面，尋找某個(gè)事物，并與圖形化UI元素進(jìn)行交互。顏色是視覺畫面的主要特征，這并不僅限于計(jì)算機(jī)屏幕，而是任何我們所看到的事物。因?yàn)樵谖覀內(nèi)粘Ｉ钪?，大多?shù)所看到并進(jìn)行交互的事物都是有顏色的——或許是看到的太多了，我們已對(duì)這點(diǎn)習(xí)以為常了。反過(guò)來(lái)說(shuō)，如果你需要去閱讀一個(gè)黑色按鈕上的深灰色標(biāo)簽，那將是非常痛苦的。所以，顏色會(huì)潛移默化的增強(qiáng)或削弱用戶體驗(yàn)。

顏色非常適合增強(qiáng)視覺感染力。我們通常會(huì)賦予某些顏色以特定的涵義。這些對(duì)顏色的觀念在設(shè)計(jì)UI的時(shí)候往往起到非常大的作用。舉個(gè)例子，一個(gè)基于白色的診所軟體應(yīng)用程序是非常合情合理的，因?yàn)榘咨笳髦罢麧崱?。再比如，?lián)合國(guó)的主頁(yè)是基于藍(lán)色的，傳達(dá)了一種“和平”的理念。

（一）色調(diào)的一致性

色調(diào)的一致性指的是采用統(tǒng)一的色調(diào)，換言之，就是有個(gè)主色調(diào)。例如蘋果手機(jī)的整個(gè)色調(diào)都是以純色為主，用戶通過(guò)對(duì)顏色的習(xí)慣就可以辨別出產(chǎn)品。所以，在界面設(shè)計(jì)的時(shí)候，要保持色調(diào)的統(tǒng)一。例如：iphone的黑色外觀體現(xiàn)出產(chǎn)品的理性，而界面上的圖標(biāo)卻色彩斑斕，打破了黑色的嚴(yán)肅，在黑色的映襯下，圖標(biāo)會(huì)顯得更加活躍，有趣味，在凸顯了理性的同時(shí)，又彰顯了使用者的個(gè)性。

（二）保守地使用色彩

大多數(shù)界面設(shè)計(jì)者都贊成這一色彩配置原則。所謂保守地使用色彩，就是從大多數(shù)的用戶考慮出發(fā)，根據(jù)不同類別的用戶設(shè)計(jì)不同的色彩。界面設(shè)計(jì)時(shí)提倡采用一些柔和的、中性的顏色，以便讓絕大數(shù)用戶接受。因?yàn)橛袝r(shí)急于使用色彩突出顯示效果，反而適得其反。扁平化的純色背景設(shè)計(jì)看似很簡(jiǎn)單，但如果只用一種顏色未免會(huì)顯得有些單調(diào)，因此既要結(jié)合不同的顏色，又要做到界面的協(xié)調(diào)和美感絕不是一件簡(jiǎn)單的事情。

（三）色彩的搭配要便于閱讀

要確保屏幕的可讀性，就要注意色彩的搭配，最有效的方法是遵循對(duì)比法則，諸如在淺色背景上使用深色文字，在深色背景上使用淺色文字等。色彩是產(chǎn)品情感表達(dá)中的一個(gè)重要的元素，也是UI界面設(shè)計(jì)必須考慮的一個(gè)問(wèn)題。

四、注意用戶體驗(yàn)的UI設(shè)計(jì)

我們想要設(shè)計(jì)出一份成功的作品，那么作品一定離不開用戶體驗(yàn)這一個(gè)重要的環(huán)節(jié)。時(shí)下，UI設(shè)計(jì)的主流是簡(jiǎn)潔化設(shè)計(jì)，很多設(shè)計(jì)師認(rèn)為界面設(shè)計(jì)越簡(jiǎn)潔越好，看到簡(jiǎn)潔這個(gè)詞，我相信大部分的設(shè)計(jì)師都會(huì)理解成就是簡(jiǎn)單的意思。其實(shí)不然，這里的簡(jiǎn)潔不等于簡(jiǎn)單，這里的簡(jiǎn)潔指的是，設(shè)計(jì)師在非常深入的了解了用戶的需求以后，再根據(jù)用戶的需求設(shè)計(jì)出用戶想要看的交互設(shè)計(jì)界面。因此，簡(jiǎn)潔的UI設(shè)計(jì)，是力求打造這樣一種交互式界面，這一界面既要能滿足用戶的實(shí)際需求，又要能方便用戶的操作。

繁瑣和復(fù)雜的操作步驟是不能被用戶所認(rèn)可的，現(xiàn)在再看看部分網(wǎng)站的注冊(cè)頁(yè)面，大部分都只有很簡(jiǎn)單的幾個(gè)需要用戶填寫的信息，有些網(wǎng)站為了方便用戶的使用，甚至取消了用戶注冊(cè)的環(huán)節(jié)，這才是真正的體現(xiàn)了用戶便利。簡(jiǎn)潔的就是好的，用戶在使用的時(shí)候會(huì)感受到實(shí)實(shí)在在的方便，這樣的用戶體驗(yàn)才是好的。

【參考文獻(xiàn)】

[1] 孟建華.UI設(shè)計(jì)與應(yīng)用[J].藝術(shù)設(shè)計(jì)，2009（04）

[2] 周睿.基于可用性的手機(jī)交互界面設(shè)計(jì)研究[D].南京理工大學(xué)，2006

【作者單位：安徽工程大學(xué)機(jī)電學(xué)院】endprint