丁春

山東工藝美術(shù)學(xué)院 山東 濟(jì)南 250014

引言：隨著社會(huì)的發(fā)展與進(jìn)步，在科研產(chǎn)品及工業(yè)生產(chǎn)產(chǎn)品方面實(shí)用性已經(jīng)不是參考其價(jià)值的唯一標(biāo)準(zhǔn)，需求性才是如今產(chǎn)品的重中之重。針對(duì)這一點(diǎn)，在對(duì)人機(jī)交互技術(shù)進(jìn)行研發(fā)時(shí)，研發(fā)方可將研發(fā)成果實(shí)施用戶體驗(yàn)，令用戶憑借視覺感官對(duì)產(chǎn)品進(jìn)行感受并以此為依據(jù)提出優(yōu)化策略，從而令研發(fā)方真正把握住用戶的視覺心理，持續(xù)優(yōu)化色彩構(gòu)成，為后續(xù)產(chǎn)品的使用與推廣奠定基礎(chǔ)。

1. 用戶交互體驗(yàn)與色彩構(gòu)成、視覺思維間的關(guān)系

1.1 用戶交互體驗(yàn)的視覺需求

用戶體驗(yàn)是所有產(chǎn)品研發(fā)與生產(chǎn)的最根本前提，亦是產(chǎn)品后續(xù)優(yōu)化的最根本依據(jù)。在當(dāng)今時(shí)代下，用戶的視覺需求在用戶對(duì)UI產(chǎn)品的整體需求中占據(jù)了相當(dāng)大的一部分比重，在UI產(chǎn)品市場(chǎng)中常常會(huì)見到這樣的情景，兩類質(zhì)量效果相似的產(chǎn)品視覺效果良好的產(chǎn)品使用量遠(yuǎn)遠(yuǎn)超過另一類產(chǎn)品，這便是用戶的視覺需求，可以說用戶交互體驗(yàn)與視覺需求間聯(lián)系緊密[1]。故此如今研發(fā)人員需要考慮的并不僅僅是產(chǎn)品的質(zhì)量與功效，視覺思維同樣應(yīng)當(dāng)納入研發(fā)的考慮范疇之中。那么在UI設(shè)計(jì)中該如何滿足用戶的視覺需求呢？一般而言，UI設(shè)計(jì)中的視覺需求可以利用具備色彩結(jié)構(gòu)及文字設(shè)計(jì)支持的框架結(jié)構(gòu)與整體風(fēng)格來進(jìn)行維持，而在其中色彩結(jié)構(gòu)的重要性要略高于文字設(shè)計(jì)，合理的色彩結(jié)構(gòu)設(shè)計(jì)能夠在一定程度上滿足產(chǎn)品的不足，增強(qiáng)產(chǎn)品本身的競(jìng)爭(zhēng)力。

1.2 視覺思維在UI設(shè)計(jì)用戶交互體驗(yàn)中的價(jià)值

UI設(shè)計(jì)的本質(zhì)在于幫助用戶對(duì)產(chǎn)品形成一定的了解，而所謂視覺思維，即用戶在見到UI設(shè)計(jì)后腦中會(huì)形成與之相關(guān)的圖像，此后用戶便可實(shí)現(xiàn)“可視化”，當(dāng)產(chǎn)品信息與用戶腦中的圖像相似時(shí)自然會(huì)與用戶產(chǎn)生共鳴，令用戶產(chǎn)生需求感。由此可見，視覺思維在UI設(shè)計(jì)用戶交互體驗(yàn)中的價(jià)值便是滿足用戶視覺需求，以優(yōu)良的視覺體驗(yàn)提升用戶交互體驗(yàn)速度[2]。

2. 色彩構(gòu)成與視覺心理在UI設(shè)計(jì)用戶交互體驗(yàn)中的應(yīng)用

2.1 風(fēng)格定位

在當(dāng)今時(shí)代下，人民素質(zhì)與生活質(zhì)量均發(fā)生了普遍性提升，在此狀況下，人們對(duì)UI設(shè)計(jì)的需求也水漲船高。而為了滿足用戶們的需求，設(shè)計(jì)一般需要對(duì)用戶的視覺需求進(jìn)行了解，對(duì)用戶喜愛的界面風(fēng)格及需要的色彩結(jié)構(gòu)進(jìn)行定位。一般而言，以科學(xué)合理色彩結(jié)構(gòu)進(jìn)行設(shè)計(jì)的界面能夠?qū)崿F(xiàn)對(duì)大部分用戶操作順序的引導(dǎo)，令用戶在對(duì)產(chǎn)品進(jìn)行操作時(shí)產(chǎn)生難以名狀的順暢感，對(duì)用戶交互體驗(yàn)做出保障。舉例而言，小米的概念機(jī)（如圖1）采用當(dāng)今時(shí)代比較流行的無邊界屏幕式手機(jī)便是最典型的UI設(shè)計(jì)風(fēng)格定位，以透明的屏幕取代以往黑白的手機(jī)邊框能夠令手機(jī)產(chǎn)生現(xiàn)代科技感，與手機(jī)本身的定位相得益彰[3]。

圖1 小米概念機(jī)

2.2 框架設(shè)計(jì)

框架是除了風(fēng)格外UI設(shè)計(jì)的另一大應(yīng)用，通過對(duì)色彩結(jié)構(gòu)進(jìn)行調(diào)整以達(dá)到視覺平衡能夠令產(chǎn)品盡可能地迎合用戶的思維習(xí)慣順序，譬如從左到右、自上至下的閱讀順序等等，由于現(xiàn)代人的閱讀順序習(xí)慣，故此設(shè)計(jì)人員可以將比較醒目的色彩擺放在偏上方、左方的位置以抓住用戶眼球，將相對(duì)柔和的色彩堆積在下方、右方，除了色彩外，內(nèi)容的排列順序也應(yīng)遵循這一原則，在用戶快速熟悉產(chǎn)品操作后能夠產(chǎn)生與產(chǎn)品使用相關(guān)的順暢感[4]。舉例而言，目前使用率較高的騰訊QQ軟件（如圖2）將藍(lán)色設(shè)置在軟件的最上方，而下方則全部是淺色，令人忍不住向下翻閱；除此之外，騰訊QQ還在上方設(shè)置了搜索功能，極大地幫助用戶節(jié)省了搜索時(shí)間，在一定程度上加強(qiáng)了用戶體驗(yàn)。

圖2 騰訊QQ

2.3 圖形設(shè)計(jì)

圖形是用戶在UI設(shè)計(jì)中獲得產(chǎn)品相關(guān)信息的主要渠道，同理，圖形設(shè)計(jì)亦在視覺思維中占據(jù)了較大比重，諸如色彩構(gòu)成及文字標(biāo)識(shí)等內(nèi)容皆是其重點(diǎn)。這一點(diǎn)主要受生活節(jié)奏影響，隨著社會(huì)的發(fā)展，人們的生活節(jié)奏越來越快，人們對(duì)信息的閱讀習(xí)慣也日漸偏向于簡(jiǎn)短化、直觀化，故此圖形設(shè)計(jì)在UI設(shè)計(jì)中占據(jù)的比重也日益增大[5]。因而在進(jìn)行UI設(shè)計(jì)時(shí)研發(fā)方多會(huì)選擇與現(xiàn)實(shí)有所關(guān)聯(lián)的圖標(biāo)或能夠激發(fā)用戶關(guān)聯(lián)思維的色彩構(gòu)成完成設(shè)計(jì)，以微信為例，微信所使用的圖標(biāo)（如圖3）本身是兩個(gè)“對(duì)話框”，能夠令用戶直觀地了解產(chǎn)品功能，而圖標(biāo)背景則是使用了青翠的綠色，直接闡明產(chǎn)品的使用簡(jiǎn)潔易懂，其本身算是UI設(shè)計(jì)中比較成功的典范，如此UI設(shè)計(jì)能夠有效提高用戶交互體驗(yàn)，大幅度提升產(chǎn)品在同類產(chǎn)品市場(chǎng)中的競(jìng)爭(zhēng)力。

圖3 微信圖標(biāo)

2.4 色彩感知

色彩是人類視覺思維中最敏感的感官，對(duì)于用戶而言，色彩并不僅僅是簡(jiǎn)單的“顏色”而言，其本身也具有不同的意義，且不同用戶對(duì)色彩的見解也各不相同，比如有的用戶在見到藍(lán)色時(shí)會(huì)想到大海，有的用戶在見到藍(lán)色時(shí)則會(huì)想到天空[6]。除了用戶本身的見解外，UI設(shè)計(jì)中的色彩含義也各不相同，在以往及現(xiàn)今的UI設(shè)計(jì)中，設(shè)計(jì)方多會(huì)選擇以紫色來代表科技，用綠色來代表希望等等。設(shè)計(jì)方在進(jìn)行UI設(shè)計(jì)時(shí)應(yīng)當(dāng)充分考慮到用戶的視覺思維，既要做到吸引用戶又不會(huì)令用戶產(chǎn)生突兀感等視覺疲勞，換句話說，在吸引用戶及色彩突兀間有一個(gè)微妙的平衡點(diǎn)，如何去把握這個(gè)平衡點(diǎn)還需對(duì)產(chǎn)品的實(shí)際狀況進(jìn)行探究方能確定。舉例而言，紅色等偏向暖色調(diào)的色彩能夠吸引用戶的注意，但其本身也極容易令用戶產(chǎn)生緊張感，故此設(shè)計(jì)方可以對(duì)紅色進(jìn)行調(diào)整，在紅色周邊增添橙色、黃色等偏暖色調(diào)但不及紅色突兀的色彩，令其形成“漸變色”，做到以紅色代入、以橙色及黃色進(jìn)行維持等等[7]。一般而言，色彩結(jié)構(gòu)包括以下幾個(gè)要素：一，色彩數(shù)量，相同的顏色如果搭配比例與位置不同就會(huì)產(chǎn)生不一樣的感情色彩。一般不要超過三種顏色是所有色彩原則的基礎(chǔ)；二，色彩搭配，如果使用色彩來搭配，那么一個(gè)頁面最好使用同一色系的顏色來進(jìn)行搭配，如此便可避免色彩不協(xié)調(diào)的問題；三，色彩互補(bǔ)，在UI設(shè)計(jì)中可以使用互補(bǔ)色進(jìn)行搭配，如果使用比例得當(dāng)，互補(bǔ)色的搭配一樣可以收獲很好的視覺效果，也可以使用鄰近色進(jìn)行色彩搭配，當(dāng)其中一種顏色的純度比較高的時(shí)候，另一種顏色純度低或名度低的；四，選用優(yōu)先色，在所有的色彩中，UI設(shè)計(jì)一般以黑白灰優(yōu)先，如果沒有很好的配色，黑灰色應(yīng)當(dāng)成為優(yōu)先考慮的配色，若搭配得當(dāng)，黑白灰UI設(shè)計(jì)同樣能夠體現(xiàn)出超凡的層次感，若想繼續(xù)添加其余色彩，可以在黑白灰的基礎(chǔ)上加入一種色彩，在大面積的黑白灰上添加小面積的其余色彩，如此搭配既顯得高雅又不失活力，是UI設(shè)計(jì)色彩搭配的優(yōu)良選擇。

3.視覺設(shè)計(jì)在UI設(shè)計(jì)用戶交互體驗(yàn)下的應(yīng)用趨勢(shì)分析

在當(dāng)今時(shí)代下，任何設(shè)計(jì)都講求“事前”、“事中”與“事后”，所謂“事前”即是在設(shè)計(jì)前對(duì)用戶的實(shí)際需求進(jìn)行調(diào)研，依據(jù)用戶的實(shí)際需求進(jìn)行設(shè)計(jì)；而“事中”則是在設(shè)計(jì)中及產(chǎn)品使用的過程中發(fā)現(xiàn)問題，對(duì)產(chǎn)品存在的問題進(jìn)行改善；“事后”則是則是在用戶使用過設(shè)計(jì)后對(duì)產(chǎn)品進(jìn)行意見反饋，由設(shè)計(jì)方收集意見，對(duì)意見進(jìn)行分析后對(duì)設(shè)計(jì)產(chǎn)品予以改善[8]。其中，在設(shè)計(jì)前與設(shè)計(jì)時(shí)設(shè)計(jì)方可以利用本身具有一定內(nèi)涵的圖形及豐富但并不雜亂的色彩進(jìn)行搭配，初期先行吸引用戶的注意力，為產(chǎn)品爭(zhēng)取被了解的機(jī)會(huì)與實(shí)踐，如3D交互的發(fā)展和使用等。而在UI設(shè)計(jì)被用戶使用后，用戶會(huì)根據(jù)使用UI設(shè)計(jì)產(chǎn)品的感官體驗(yàn)提出意見，比較常見的意見有UI設(shè)計(jì)產(chǎn)品界面中雖然圖形相對(duì)華麗充實(shí)，但圖形卻缺少一定的內(nèi)涵；圖形包含的內(nèi)容比較多，但各類圖片、圖形結(jié)構(gòu)混亂，感官體驗(yàn)較差；色彩搭配過于簡(jiǎn)單平凡，無法真正引起用戶關(guān)注。在UI設(shè)計(jì)中，色彩及其余方面的視覺設(shè)計(jì)問題是必定會(huì)存在的，設(shè)計(jì)方需要不斷發(fā)現(xiàn)問題、不斷進(jìn)行改善，以此滿足不同時(shí)期的用戶需求。

結(jié)語

綜上所述，無論是色彩結(jié)構(gòu)還是視覺思維都是當(dāng)今時(shí)代下UI設(shè)計(jì)中比較重要的部分，在進(jìn)行UI設(shè)計(jì)時(shí)，設(shè)計(jì)方首先要做到的是對(duì)用戶的行為習(xí)慣及視覺思維進(jìn)行初步考量，在滿足用戶使用需求的基礎(chǔ)上持續(xù)滿足用戶的視覺需求，提升用戶交互體驗(yàn)。而在UI設(shè)計(jì)的色彩結(jié)構(gòu)方面，色彩極大程度上代表著作品的美感，色彩運(yùn)用的好壞是考驗(yàn)一個(gè)設(shè)計(jì)師功底的最重要知識(shí)點(diǎn)，設(shè)計(jì)師需要在設(shè)計(jì)過程中及日常生活中不斷提升配色能力，針對(duì)UI設(shè)計(jì)色彩結(jié)構(gòu)內(nèi)容進(jìn)行長(zhǎng)期自我訓(xùn)練，在市面上尋找時(shí)下比較成功的UI設(shè)計(jì)成果，做到多觀察、多學(xué)習(xí)與多請(qǐng)教，同時(shí)也要從二維空間設(shè)計(jì)逐步向3D交互設(shè)計(jì)邁進(jìn)，將能夠解決UI設(shè)計(jì)現(xiàn)存問題的3D交互設(shè)計(jì)（如圖4）作為未來發(fā)展的主要方向，通過UI設(shè)計(jì)的色彩構(gòu)成與視覺心理不斷增強(qiáng)用戶的交互體驗(yàn)，令研發(fā)及生產(chǎn)的UI設(shè)計(jì)產(chǎn)品真正做到滿足大眾的品味。

圖4 3D交互設(shè)計(jì)