移動(dòng)互聯(lián)網(wǎng)產(chǎn)品界面的視覺(jué)設(shè)計(jì)探析

嚴(yán)甜甜　（鄭州輕工業(yè)學(xué)院　450000）

?

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品界面的視覺(jué)設(shè)計(jì)探析

嚴(yán)甜甜（鄭州輕工業(yè)學(xué)院450000）

摘要：移動(dòng)互聯(lián)網(wǎng)產(chǎn)品界面的視覺(jué)設(shè)計(jì)是一門(mén)跨專(zhuān)業(yè)的綜合學(xué)科，它包含了諸如美學(xué)、心理學(xué)、人體工程學(xué)、計(jì)算機(jī)科學(xué)、社會(huì)學(xué)等多學(xué)科內(nèi)容。界面設(shè)計(jì)始終貫穿于用戶(hù)需求研究、新產(chǎn)品投放市場(chǎng)、產(chǎn)品周期化迭代的整個(gè)過(guò)程。本文分析了移動(dòng)互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生的時(shí)代背景及界面視覺(jué)設(shè)計(jì)的重要性，從美學(xué)和用戶(hù)體驗(yàn)的角度探討了應(yīng)然的界面設(shè)計(jì)，最后總結(jié)了移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品界面視覺(jué)設(shè)計(jì)的要點(diǎn)。

關(guān)鍵詞：移動(dòng)互聯(lián)網(wǎng)；產(chǎn)品界面；視覺(jué)設(shè)計(jì)

移動(dòng)通信技術(shù)和互聯(lián)網(wǎng)技術(shù)成為當(dāng)下科技領(lǐng)域中發(fā)展最為迅猛的兩大信息產(chǎn)業(yè)。在這樣一個(gè)科技背景下，移動(dòng)互聯(lián)網(wǎng)兼具移動(dòng)通信的便攜性和互聯(lián)網(wǎng)的即時(shí)快捷性，為廣大用戶(hù)提供了更為高效便捷的信息交互平臺(tái)；移動(dòng)互聯(lián)網(wǎng)產(chǎn)品在智能手機(jī)上的應(yīng)用，深刻影響著人們衣食住行的各個(gè)方面。

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的界面作為用戶(hù)體驗(yàn)的最直接內(nèi)容，是產(chǎn)品設(shè)計(jì)理念和使用功能的重要體現(xiàn)，界面視覺(jué)設(shè)計(jì)是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中應(yīng)關(guān)注的核心問(wèn)題之一。

一、界面視覺(jué)設(shè)計(jì)的美學(xué)

用戶(hù)對(duì)應(yīng)用界面視覺(jué)美的體驗(yàn)是多維度而全方位的，正如約翰·杜威（John Dewey）將審美視作一種整體性、完整性和豐富性的體驗(yàn)過(guò)程。移動(dòng)互聯(lián)網(wǎng)應(yīng)用的界面設(shè)計(jì)美學(xué)就是設(shè)計(jì)人與界面的關(guān)系，界面視覺(jué)設(shè)計(jì)要滿足用戶(hù)需求，要選擇有效的被受眾理解和快速被受眾接受的表達(dá)方式，喚起用戶(hù)情感體驗(yàn)和自我認(rèn)同的作用。

審美活動(dòng)是感性的，因此審美過(guò)程具有從感官刺激到精神升華的過(guò)程。界面視覺(jué)的美感體驗(yàn)與用戶(hù)對(duì)產(chǎn)品的認(rèn)知過(guò)程是分不開(kāi)的，移動(dòng)互聯(lián)網(wǎng)應(yīng)用界面的視覺(jué)審美過(guò)程，主要表現(xiàn)為愉悅的感官體驗(yàn)、流暢的操作體驗(yàn)、使用時(shí)的樂(lè)趣以及情感的喚起，其中的美包含人與界面的無(wú)障礙溝通、用戶(hù)需求與界面設(shè)計(jì)的協(xié)調(diào)、良好的認(rèn)知及情感化體驗(yàn)。主要體現(xiàn)在界面的視覺(jué)吸引力和趣味性以及遵循用戶(hù)對(duì)界面視覺(jué)的心理預(yù)期，使產(chǎn)品界面的視覺(jué)效果不僅能夠吸引用戶(hù)，還能符合用戶(hù)的心理模型、體現(xiàn)人性化的關(guān)懷。

二、用戶(hù)體驗(yàn)與界面視覺(jué)設(shè)計(jì)

用戶(hù)需求決定了產(chǎn)品的定位以及產(chǎn)品設(shè)計(jì)的目的和理念，而界面的視覺(jué)設(shè)計(jì)會(huì)直接作用用戶(hù)體驗(yàn)的結(jié)果，因此界面的視覺(jué)設(shè)計(jì)應(yīng)遵循產(chǎn)品的體驗(yàn)規(guī)律，以用戶(hù)需求為中心來(lái)指導(dǎo)設(shè)計(jì)活動(dòng)。產(chǎn)品體驗(yàn)分為感知體驗(yàn)、理解體驗(yàn)和情感體驗(yàn)三個(gè)層次，這與馬斯洛關(guān)于人的需求理論是相對(duì)應(yīng)的遞進(jìn)關(guān)系。感知體驗(yàn)是用戶(hù)使用產(chǎn)品界面的直觀感受，對(duì)界面的結(jié)構(gòu)、形狀、質(zhì)感、色感、尺寸感等，是對(duì)物感特征進(jìn)行的一種反應(yīng)；理解體驗(yàn)是用戶(hù)在操作應(yīng)用時(shí)對(duì)產(chǎn)品整體的認(rèn)知理解，滿足用戶(hù)對(duì)視覺(jué)界面的心理預(yù)期；情感體驗(yàn)更多的是產(chǎn)品對(duì)人性化關(guān)懷的體現(xiàn)，是用戶(hù)在使用過(guò)程中所產(chǎn)生的一系列情感因素。情感體驗(yàn)是用戶(hù)體驗(yàn)的最高環(huán)節(jié)，德國(guó)青蛙設(shè)計(jì)公司（Frog Design）就曾提出形式跟隨情感的設(shè)計(jì)理念。情感化設(shè)計(jì)是“設(shè)計(jì)師在創(chuàng)作產(chǎn)品的過(guò)程中通過(guò)分析用戶(hù)群體的情感，結(jié)合自身的情感體驗(yàn)，將人內(nèi)心的情感需求和精神需求真正融入到設(shè)計(jì)中，并使群體用戶(hù)能在使用產(chǎn)品的過(guò)程中感受到快樂(lè)和感動(dòng)”。

三、移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品界面視覺(jué)設(shè)計(jì)的要點(diǎn)

1.視覺(jué)設(shè)計(jì)風(fēng)格要與產(chǎn)品內(nèi)容統(tǒng)一

移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的界面視覺(jué)設(shè)計(jì)風(fēng)格要同產(chǎn)品內(nèi)容相統(tǒng)一。形式服務(wù)于功能，實(shí)現(xiàn)產(chǎn)品的使用功能是首先需要考慮的，而界面的視覺(jué)設(shè)計(jì)本身也具有實(shí)現(xiàn)交互的使用功能。因此視覺(jué)設(shè)計(jì)不能單純追求形式上的特異，應(yīng)依據(jù)產(chǎn)品定位和目標(biāo)用戶(hù)的需求，找準(zhǔn)視覺(jué)風(fēng)格并確定設(shè)計(jì)標(biāo)準(zhǔn)，使用戶(hù)能夠快速地從視覺(jué)上理解產(chǎn)品的理念、功能和操作流程。

2.圖形語(yǔ)言兼具良好的隱喻性與識(shí)別性

界面的視覺(jué)設(shè)是通過(guò)視覺(jué)符號(hào)來(lái)傳達(dá)信息，隱喻修辭方式在圖形界面設(shè)計(jì)中能簡(jiǎn)化一些操作過(guò)程，用戶(hù)更易于通過(guò)恰當(dāng)?shù)碾[喻圖形符號(hào)迅速的了解圖形視覺(jué)元素所表達(dá)的含義，促成用戶(hù)與產(chǎn)品界面良好的互動(dòng)。因?yàn)榻缑嬉曈X(jué)中隱喻修辭方式的運(yùn)用是基于用戶(hù)群以往生活經(jīng)驗(yàn)和習(xí)慣，可以減少用戶(hù)操作時(shí)的學(xué)習(xí)成本、更便于用戶(hù)理解和記憶界面圖形符號(hào)的含義。

3.明確界面的視覺(jué)層級(jí)關(guān)系

產(chǎn)品界面設(shè)計(jì)需要通過(guò)視覺(jué)的形式區(qū)分不同的信息內(nèi)容以及主次模塊，與此同時(shí)還需要保證同類(lèi)信息與操作在視覺(jué)上的一致性。可以采取區(qū)域劃分、間隔劃分、色彩劃分、形態(tài)符號(hào)劃分、頁(yè)面層級(jí)劃分等方法，區(qū)分信息的同時(shí)也揭示視覺(jué)信息間的內(nèi)在聯(lián)系，幫助用戶(hù)理解、記憶，使用戶(hù)在使用應(yīng)用時(shí)能直觀了解到界面的層次、快速尋找到所需要的信息。

4.遵循不同移動(dòng)系統(tǒng)平臺(tái)布局特點(diǎn)

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)需要遵循各類(lèi)系統(tǒng)平臺(tái)的特點(diǎn)，比如IOS系統(tǒng)和Android系統(tǒng)是有差異的，不同型號(hào)的iPhone界面布局也有所不同，因此設(shè)計(jì)師要遵循不同移動(dòng)系統(tǒng)平臺(tái)布局特點(diǎn)進(jìn)行界面視覺(jué)設(shè)計(jì)。

5.以用戶(hù)為中心，遵循交互設(shè)計(jì)原則

目標(biāo)用戶(hù)的群體性差異決定了各類(lèi)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品在界面視覺(jué)設(shè)計(jì)上的不同，例如針對(duì)老年人的產(chǎn)品界面在視覺(jué)設(shè)計(jì)一定更側(cè)重于無(wú)障礙設(shè)計(jì)的，要避免視覺(jué)噪音，在字體大小和設(shè)計(jì)風(fēng)格上更加體現(xiàn)對(duì)這類(lèi)群體的人性關(guān)懷；在色彩傾向上，通常年長(zhǎng)的用戶(hù)群更傾向于選擇保守穩(wěn)重的色調(diào)，而年輕用戶(hù)群則喜好更明快的色彩。界面視覺(jué)設(shè)計(jì)時(shí)需要考慮的因素包括用戶(hù)的年齡段、視覺(jué)特點(diǎn)、文化背景、受教育程度、以往的生活經(jīng)驗(yàn)與習(xí)慣、情感偏向等。除此之外還需要遵循交互設(shè)計(jì)的相關(guān)原則，例如產(chǎn)品的簡(jiǎn)單易用性、尊重用戶(hù)的心理模型、友好的視覺(jué)反饋、一致性（界面的整體視覺(jué)風(fēng)格、色彩、布局和眾視覺(jué)元素的一致性）等。

結(jié)語(yǔ)：移動(dòng)互聯(lián)網(wǎng)產(chǎn)品構(gòu)架了一個(gè)信息雙向互動(dòng)的傳播模式，其界面視覺(jué)設(shè)計(jì)是以用戶(hù)為中心，在交互設(shè)計(jì)的基礎(chǔ)上進(jìn)行的，在美學(xué)、符號(hào)學(xué)以及心理學(xué)的宏觀引導(dǎo)下，通過(guò)一定的視覺(jué)設(shè)計(jì)方法與原則對(duì)界面的視覺(jué)要素與內(nèi)容進(jìn)行優(yōu)化設(shè)計(jì)的過(guò)程，良好的用戶(hù)體驗(yàn)則是檢驗(yàn)界面視覺(jué)設(shè)計(jì)的標(biāo)準(zhǔn)。移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)是一個(gè)系統(tǒng)的設(shè)計(jì)體系，在工作中更注重與產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、用戶(hù)體驗(yàn)研究人員、計(jì)算機(jī)工程師等協(xié)同合作，因此，視覺(jué)傳達(dá)設(shè)計(jì)師不可拘泥于視覺(jué)表現(xiàn)的技法上，重要的是要補(bǔ)充相關(guān)理論知識(shí)，如此才能更好的融入團(tuán)隊(duì)，開(kāi)展設(shè)計(jì)工作。

參考文獻(xiàn)：

［1］楊煥.智能手機(jī)移動(dòng)互聯(lián)網(wǎng)應(yīng)用的界面設(shè)計(jì)研究［D］.武漢理工大學(xué)，2013.

［2］Pieter Desmet， Paul Hekkert.Framework of product experience［J］.International Journal of Design， 2007， 1（1）：57-66.

［3］蔡敏.情感化設(shè)計(jì)理論在網(wǎng)絡(luò)界面設(shè)計(jì)中的應(yīng)用研究［D］.武漢理工大學(xué)，2010.