移動(dòng)終端交互設(shè)計(jì)中的視覺美學(xué)法則

孫超凡 （東南大學(xué) 江蘇南京 210000）

移動(dòng)終端交互設(shè)計(jì)中的視覺美學(xué)法則

孫超凡 （東南大學(xué) 江蘇南京 210000）

隨著4G網(wǎng)絡(luò)的開發(fā)和推廣以及移動(dòng)設(shè)備硬件技術(shù)的進(jìn)步，移動(dòng)互聯(lián)網(wǎng)浪潮逐漸顛覆人們的生活。以觸屏手機(jī)和平板電腦為代表的移動(dòng)終端以其高親密度的人機(jī)交互方式獲得人們的青睞，越來越多的人們習(xí)慣于使用移動(dòng)終端APP處理衣食住行等各種生活信息，移動(dòng)互聯(lián)網(wǎng)甚至有了APP 化的趨勢(shì)。移動(dòng)終端APP設(shè)計(jì)隨之成了交互設(shè)計(jì)研究的新興領(lǐng)域。然而，我們可以從安卓以及蘋果的網(wǎng)上終端商城中看到，APP的設(shè)計(jì)水平參差不齊，其中有些復(fù)雜的APP交互界面讓用戶無所適從。由于 APP 市場(chǎng)競(jìng)爭(zhēng)的激烈，使得以視覺中心為驅(qū)動(dòng)的用戶體驗(yàn)成為 APP 的競(jìng)爭(zhēng)軟實(shí)力，成為衡量產(chǎn)品成功與否的一項(xiàng)重要指標(biāo)。本課旨在研究移動(dòng)終端平臺(tái)上的界面交互設(shè)計(jì)的視覺法則,通過分析移動(dòng)終端交互平臺(tái)的特點(diǎn),結(jié)合平面設(shè)計(jì)美學(xué)的規(guī)律,提出一套基于移動(dòng)終端交互設(shè)計(jì)的視覺美學(xué)法則。

互聯(lián)網(wǎng)；移動(dòng)終端；視覺設(shè)計(jì)；用戶體驗(yàn)；美學(xué)

如何更好地設(shè)計(jì)移動(dòng)終端交互界面，讓用戶跨越技術(shù)的鴻溝進(jìn)行無障礙的人機(jī)交流？隨著移動(dòng)互聯(lián)網(wǎng)的普及和觸屏移動(dòng)終端的風(fēng)靡，這是當(dāng)下交互體驗(yàn)設(shè)計(jì)師時(shí)時(shí)刻刻思考的問題。用戶對(duì)APP的接觸始于視覺，基于觸覺，而視覺體驗(yàn)是超越功能體驗(yàn)更直接的存在，所以設(shè)計(jì)師應(yīng)該通過最簡(jiǎn)約的美學(xué)設(shè)計(jì)帶來最真切的用戶體驗(yàn)。一個(gè)基于視覺美學(xué)的界面設(shè)計(jì)，是將內(nèi)容、功能和美學(xué)匯聚到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，完成功能目標(biāo)的同時(shí)滿足用戶的感官享受。筆者在大量的設(shè)計(jì)實(shí)踐中提煉出以下幾條概括性的界面視覺準(zhǔn)則，請(qǐng)跟隨筆者來探索移動(dòng)終端交互設(shè)計(jì)中的視覺法則。

一、注意力原則

評(píng)價(jià)一個(gè)終端產(chǎn)品視覺設(shè)計(jì)最簡(jiǎn)單的原則，即“注意力原則”。用戶的視線首先落在什么地方？哪個(gè)設(shè)計(jì)要素在在第一時(shí)間吸引了用戶的注意力？它們是對(duì)于戰(zhàn)略目標(biāo)來講很重要的東西嗎？或者用戶第一時(shí)間注意到的東西與他們的或者你想傳達(dá)給它們的目標(biāo)背道而馳嗎？

用戶在頁面上的視線移動(dòng)并不是隨機(jī)的。它是一種所有人類共有的、對(duì)于視覺刺激而產(chǎn)生的、一系列復(fù)雜的原始本能反應(yīng)。這些反應(yīng)并不是完全無法控制的，設(shè)計(jì)師可以用各種各樣有效的視覺手段，來吸引或分散用戶的注意力。

面對(duì)一個(gè)成功的設(shè)計(jì)，用戶的視線遵循的是一條流暢的路徑。有些過于“擁擠”的界面，填塞太多的內(nèi)容，所有的元素都在試圖吸引用戶的注意，使用戶的眼睛在各種各樣的元素之間跳來跳去，絲毫達(dá)不到聚焦重點(diǎn)的目的。其次，在不需要用太多細(xì)節(jié)的前提下，好的設(shè)計(jì)為用戶提供有效選擇的某種“引導(dǎo)”。這些引導(dǎo)應(yīng)該支持用戶試圖在此刻通過與產(chǎn)品交互去完成某個(gè)目標(biāo)和任務(wù)，同時(shí)，這些引導(dǎo)不應(yīng)該分散用戶對(duì)那些“能完成目標(biāo)的信息或功能”注意力。

二、對(duì)比和一致性原則

在視覺設(shè)計(jì)中，我們用于吸引用戶注意的一個(gè)主要工具就是對(duì)比。一個(gè)沒有對(duì)比的設(shè)計(jì)，就像一個(gè)灰色的平面，令用戶的視線四處游離，而無法解決任何問題。對(duì)比是用以把用戶的注意力吸引到界面中的關(guān)鍵部分的一個(gè)重要手段，能幫助用戶理解頁面導(dǎo)航元素之間的關(guān)系。同時(shí)，對(duì)比還是傳達(dá)信息設(shè)計(jì)中的概念群組的一個(gè)主要手段。當(dāng)一個(gè)元素在設(shè)計(jì)中顯得與眾不同時(shí)，用戶就會(huì)注意到它，這是他們所不能控制的本能行為。設(shè)計(jì)師可以利用這一點(diǎn)來使用戶注意那些“真正需要從這個(gè)頁面的其他元素中突出的東西”。比方，在頁面界面上的錯(cuò)誤提示通常會(huì)被頁面的其他元素所淹沒，但如果給文本一些不同的顏色或者用一個(gè)醒目的圖形將它們凸顯出來，就能將信息迅速送入用戶眼簾。這些手段的目的只有一個(gè)，就是讓“差異”足夠清晰，讓用戶要足夠分辨出某個(gè)設(shè)計(jì)選擇是特意要傳達(dá)一些信息的。

在設(shè)計(jì)中保持“一致性”是終端界面設(shè)計(jì)的另一個(gè)重要的組成部分，它能使你的設(shè)計(jì)有效地傳達(dá)信息，而不會(huì)導(dǎo)致用戶迷惑或者焦慮。“一致性”被廣泛應(yīng)用在視覺設(shè)計(jì)的許多方面。將視覺元素的大小保持一致的尺寸，可以使你在需要的時(shí)候把他們更容易地重新組合成新的設(shè)計(jì)。舉個(gè)例子，如果你在導(dǎo)航中使用的所有圖形按鈕都是同一個(gè)高度，那么它們就可以在需要的時(shí)候被混合并匹配，而不會(huì)形成一個(gè)布局雜亂或者被要求重新設(shè)計(jì)的圖形。

三、配色方案

色彩可能是向外界傳遞品牌識(shí)別的一個(gè)最有效的方法。一些品牌與色彩具有如此密切的關(guān)系，比如，很難相信如果沒有色彩，可口可樂如何才能被不假思索的記住。可口可樂公司多年來一直堅(jiān)持使用了同一種很特別的顏色，紅色，這在公眾的腦海里創(chuàng)造了一個(gè)很強(qiáng)烈的感覺。

在大多數(shù)情況下，更亮或者更醒目的色彩可以用于設(shè)計(jì)界面的前景色——那些你希望得到更多注意的元素。更暗淡的色彩最好用于那些不需要跳出頁面的背景元素中，擁有所中可選擇的色彩，為我們提供了一套能做出高效的、可供選擇的工具包。

正如“對(duì)比”和“一致性”原則在視覺設(shè)計(jì)的其他領(lǐng)域很重要一樣，它們?cè)趧?chuàng)建配色方案時(shí)也扮演了一個(gè)重要的角色。在同樣的環(huán)境中使用時(shí)，一個(gè)非常接近其他顏色、但又不完全一樣的色彩，會(huì)降低配色方案的效率。所以當(dāng)你想使用不同色度的同一色系時(shí)，要保證它們之間的差異足夠用戶把它們區(qū)別開。

四、字體簡(jiǎn)單

從喬布斯的蘋果電腦對(duì)字體美學(xué)的狂熱偏執(zhí)開始，字體便一直作為“用設(shè)計(jì)來有效傳達(dá)形象”的一個(gè)重要組成部分。在APP中，受移動(dòng)終端尺寸的限制，任何文本都會(huì)呈現(xiàn)在一個(gè)可延展且被用戶高度集中注視的區(qū)域，因此，簡(jiǎn)單最好。面對(duì)復(fù)雜字體組成的大段文本，用戶的眼睛很快就會(huì)疲倦，這就是簡(jiǎn)單字體被廣泛使用并經(jīng)久不衰的原因。但這并不是唯一選擇，在保證可讀性的同時(shí)并不一定要犧牲風(fēng)格。

有效地使用字體的原則與那些視覺設(shè)計(jì)的其他原則完全一樣：不要使用非常相似但又不完全一樣的風(fēng)格。只有在你需要傳達(dá)不同信息的時(shí)候才使用不同的風(fēng)格。風(fēng)格之間要有足夠的“對(duì)比”才能在你需要的時(shí)候吸引到用戶的注意，但是不要使用過于廣泛和多樣的風(fēng)格。

終端交互設(shè)計(jì)市場(chǎng)已成為移動(dòng)互聯(lián)網(wǎng)的一項(xiàng)重要產(chǎn)業(yè)，吸引了眾多企業(yè)的關(guān)注，越來越多的品牌為其產(chǎn)品打造移動(dòng)線上操作平臺(tái)，移動(dòng)終端交互美學(xué)的研究必將為今后的線上商業(yè)推廣提供巨大的幫助。除了筆者所總結(jié)的這幾條終端交互的視覺設(shè)計(jì)法則之外，還有許多交互美學(xué)準(zhǔn)則有待設(shè)計(jì)工作者們共同挖掘。

[1](美)威諾格拉德著.軟件設(shè)計(jì)的藝術(shù).北京:機(jī)械工業(yè)出版社.2005.

[2]柳冠中.設(shè)計(jì)文化[M].哈爾濱：黑龍江科技出版社，1995.