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

朱宇婷

摘要：

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

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

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

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

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

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

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

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

目前，模糊背景的運用如雨后春筍般冒了出來，因為模糊背景的運用不僅讓整個網(wǎng)站顯得更加人性化，并且在很大程度上烘托出所要表現(xiàn)的氛圍。

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

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

顏色非常適合增強視覺感染力。我們通常會賦予某些顏色以特定的涵義。這些對顏色的觀念在設(shè)計UI的時候往往起到非常大的作用。舉個例子，一個基于白色的診所軟體應(yīng)用程序是非常合情合理的，因為白色象征著“整潔”。再比如，聯(lián)合國的主頁是基于藍色的，傳達了一種“和平”的理念。

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

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

（二）保守地使用色彩

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

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

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

四、注意用戶體驗的UI設(shè)計

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

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

【參考文獻】

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

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

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