淺析視覺界面交互設計原理

吳寅

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

關鍵詞：視覺設計；交互設計；UI；用戶界面

中圖分類號：TP393.092 文獻標識碼：A DOI：10.15913/j.cnki.kjycx.2017.12.042

1 UI設計

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

2 UI設計的要素

2.1 顏色

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

2.2 文字

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

2.3 圖標

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

3 UI設計的原則

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

隨著硬件設備的提升，移動互聯網向著需要低配置、高效能、個性化和優質用戶體驗的方向發展。目前，通過成功的例子看，扁平化的交互界面要比其他樣式更容易處理，先從字面詮釋“扁平化”，與之相對應是“結構層級”。

3.1 結構層級減少

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

3.2 快捷方式

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

3.3 減少點按

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

3.4 信息直觀、有序

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

3.5 信息反饋

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

4 優雅的視覺設計

視覺設計對品牌、用戶體驗都具有推動作用。優秀的設計作品具有簡單明確、傳達功能準確的特點。在設計中好的字體也起著點明主題的作用。用戶界面的設計不要輕視美學方面的因素，視覺設計也不是簡單的涂鴉，它可以有很多細節，也可以表現質感和動感，這需要設計師耐心去發現。

5 結束語

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

參考文獻

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

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

[3]Jeff Johnson.認知與設計：理解UI設計準則[M].北京：人民郵電出版社，2014.

〔編輯：張思楠〕

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