淺析視覺界面交互設(shè)計原理

吳寅

摘 要：隨著數(shù)字時代的快速發(fā)展，中國智造在全世界不斷深入，科學(xué)技術(shù)迅猛發(fā)展，硬件設(shè)備不斷提升，軟件行業(yè)逐漸壯大。界面交互設(shè)計也越來越受人們的關(guān)注。一個優(yōu)秀的產(chǎn)品需要設(shè)計理念和品牌形象的進(jìn)一步提升。只有這樣，才能為用戶提供更加適合的交互與視覺體驗。運用美學(xué)原理向使用者展示了合理的功能和視覺設(shè)計。

關(guān)鍵詞：視覺設(shè)計；交互設(shè)計；UI；用戶界面

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A DOI：10.15913/j.cnki.kjycx.2017.12.042

1 UI設(shè)計

國際上認(rèn)為UI是在人機交互領(lǐng)域中的一門重要學(xué)科。而人機交互設(shè)計實質(zhì)上是設(shè)計協(xié)調(diào)人與計算機共同工作時產(chǎn)生的矛盾，以最高效的方式滿足人安全、效率、舒適需求的學(xué)科。用戶界面以其工作流程的角度可以分為輸入和輸出。輸入是指一個人如何將他的需求或愿望告訴計算機，輸出表示計算機如何將它的計算結(jié)果和需要傳達(dá)給用戶。

2 UI設(shè)計的要素

2.1 顏色

易識別的文字、和諧的色塊、易用性的按鈕可營造出舒適的使用環(huán)境。配色應(yīng)針對不同用戶群體的心理，不同的色彩方案具有不同的感情特征，會對人的心理狀態(tài)和視覺感受造成不同的影響。顏色種類不易過多，基于視覺分析，配色復(fù)雜會降低閱讀的速度。

2.2 文字

文字是界面中極其重要的組成部分，文字傳遞了大量的微信息。字字相連可成文本，成組可成為圖形、符號。比如，在書本雜志等印刷品150dpi-300dpi高分辨率中，正文字體主要采用有襯線的宋體。而顯示器的72dpi的低分辨率一般都用黑體或者微軟雅黑，如果改為宋體當(dāng)正文，文字襯線反而會妨礙閱讀，易導(dǎo)致視覺疲勞。

2.3 圖標(biāo)

圖標(biāo)分為標(biāo)志與按鈕，使用戶通過形狀和色彩清晰地了解信息的分類和操作界面中的圖標(biāo)。用戶經(jīng)常使用的工具欄的圖標(biāo)與下拉菜單需要與文字信息相結(jié)合使用。除了具備功能價值，圖標(biāo)在傳遞品牌屬性上還會起到宣傳作用。

3 UI設(shè)計的原則

“設(shè)計第一，開發(fā)第二”。設(shè)計首先考慮的是用戶如何交互，而不是技術(shù)問題。如何使軟件界面更加美觀、更易操作，首先可對這些相關(guān)視覺元素的設(shè)計進(jìn)行分類分析。界面設(shè)計中一般包括布局、交互層次、視覺等元素，而這些元素的應(yīng)用不僅要準(zhǔn)確地傳達(dá)信息，還能定位每位用戶心理，并正確地引導(dǎo)用戶持續(xù)關(guān)注和使用下去。界面布局即在有限的屏幕空間內(nèi)科學(xué)、合理地編排一定量的信息，比如，最重要的元素應(yīng)放在其他元素的上方或左側(cè)突出的地方，視覺元素應(yīng)在固定位置擺放信息與圖形按鈕。

隨著硬件設(shè)備的提升，移動互聯(lián)網(wǎng)向著需要低配置、高效能、個性化和優(yōu)質(zhì)用戶體驗的方向發(fā)展。目前，通過成功的例子看，扁平化的交互界面要比其他樣式更容易處理，先從字面詮釋“扁平化”，與之相對應(yīng)是“結(jié)構(gòu)層級”。

3.1 結(jié)構(gòu)層級減少

一個好的設(shè)計任務(wù)是建立在結(jié)構(gòu)的“扁平化”上的，即對有效的信息減少層級、精簡結(jié)構(gòu)，功能表達(dá)方式直白等等都是使交互扁平化的手段。層級結(jié)構(gòu)減少，交互步驟必然減少，無疑讓用戶的使用效率得到了提高。

3.2 快捷方式

以智能手機界面的快捷菜單為例，在任意界面上，只要滑動手指就能從底部劃出一個快捷菜單，可設(shè)置藍(lán)牙和震動等。對于一個新用戶而言，如何簡單地在新界面中操作，這都是值得我們研究的課題。

3.3 減少點按

點按是個機械動作，一個動作重復(fù)多次會使用戶記憶模糊。記憶的功能是由大腦完成的，當(dāng)人們需要記憶一些必須由身體參與的技能和運動時，除了通過大腦進(jìn)行記憶之外，肌肉自身也自覺啟動記憶功能。一個用戶離開系統(tǒng)一段時間，如果他們能很好地回憶起界面，則說明軟件成功了一大半。比如，在蘋果的ios7系統(tǒng)中，關(guān)閉后臺程序時，只需要手指輕輕往上一滑就關(guān)閉了，這與我們生活中丟棄動作非常吻合。

3.4 信息直觀、有序

現(xiàn)在的移動設(shè)備繁多，傳遞的信息量大，設(shè)計師需要精簡繁雜多余的元素，讓信息更直觀、明確地展示給用戶。我們應(yīng)在確定產(chǎn)品主要功能構(gòu)架后進(jìn)行分類，分類雖然不能降低產(chǎn)品的易用度，但能幫助用戶分析產(chǎn)品，這有利于整理互聯(lián)網(wǎng)中的大量信息，讓用戶能快速找到自己想要的信息。

3.5 信息反饋

扁平化中的重點是及時的信息反饋與提示功能，比如，注重用戶使用界面的過程、界面在用戶操作出錯時的提醒、優(yōu)化反饋信息的易讀性，從而讓用戶清晰地了解如何繼續(xù)使用下去。

4 優(yōu)雅的視覺設(shè)計

視覺設(shè)計對品牌、用戶體驗都具有推動作用。優(yōu)秀的設(shè)計作品具有簡單明確、傳達(dá)功能準(zhǔn)確的特點。在設(shè)計中好的字體也起著點明主題的作用。用戶界面的設(shè)計不要輕視美學(xué)方面的因素，視覺設(shè)計也不是簡單的涂鴉，它可以有很多細(xì)節(jié)，也可以表現(xiàn)質(zhì)感和動感，這需要設(shè)計師耐心去發(fā)現(xiàn)。

5 結(jié)束語

目前，設(shè)計專業(yè)正在快速發(fā)展，如何使界面軟件能更加有效地滿足用戶心理需求，做出用戶喜愛的界面，讓用戶積極參與界面交互，是當(dāng)下設(shè)計師需要考慮的問題。

參考文獻(xiàn)

[1]王璞.用戶界面設(shè)計的人性化[D].長春：東北師范大學(xué)，2007.

[2]古賀直樹.好設(shè)計不簡單UI設(shè)計師必須了解的那些事[M]. 北京：人民郵電出版社，2014.

[3]Jeff Johnson.認(rèn)知與設(shè)計：理解UI設(shè)計準(zhǔn)則[M].北京：人民郵電出版社，2014.

〔編輯：張思楠〕

文章編號：2095-6835（2017）12-0043-01