UI界面設計中展示的美學原理

UI界面設計中展示的美學原理UI界面設計中展示的美學原理本文關鍵詞：美學，界面設計，原理，展示，UI

UI界面設計中展示的美學原理本文簡介：摘要：隨著軟件設計的快速開展，界面設計逐漸成為產品的重要賣點。當下，互聯(lián)網(wǎng)的運用范圍越來越廣泛，UI界面設計也越來越受重視。簡潔美觀、色彩奔放、舒適友好的扁平化界面設計作為一種鮮明的美學風格，能給人帶來較好的感官享受，提升產品價值，滿足人們的多元化需求。關鍵詞：軟件交互；界面設計；扁平化；

UI界面設計中展示的美學原理本文內容：

摘要：隨著軟件設計的快速開展，界面設計逐漸成為產品的重要賣點。當下，互聯(lián)網(wǎng)的運用范圍越來越廣泛，UI界面設計也越來越受重視。簡潔美觀、色彩奔放、舒適友好的扁平化界面設計作為一種鮮明的美學風格，能給人帶來較好的感官享受，提升產品價值，滿足人們的多元化需求。

關鍵詞：軟件交互；界面設計；扁平化；

UI是用戶界面〔UserInterface〕的縮寫。UI設計是指人機交互的媒介，包括用戶操作的流程設計、操作標準及界面美觀的圖形設計，包括可用性及可行性分析、GUI〔圖形用戶軟件界面設計〕、界面用戶的相關測試等。

在產品的交互中，能最直接能看到、感受到的就是軟件界面的色彩、風格和操作。界面設計大致包括三個方面：界面的外觀設計、界面的交互設計以及界面設計的交互合理性和易用性。

一、交互設計及UI扁平化設計特征

交互設計從可用性和用戶體驗兩個層面進展分析，關注"以人為本";的用戶需求。交互產品的界面是人機信息交互的樞紐，是人和產品或效勞的一種互動形式，通過用戶的操作過程，到達用戶的使用目的或是高效使用產品。

UI扁平化設計特征有五種。一是回絕特效，即所有元素都不加修飾，如陰影、斜面、突起、漸變等，圖片框、按鈕、導航欄都盡量保持簡潔。設計中的各層級中沒有明顯的區(qū)分模塊，如背景圖、前景圖、按鈕、文本、導航等。

二是簡單元素，即使用簡單的UI元素，如按鈕和圖標，常用矩形、圓形、方形等簡單的形狀。元素間互相獨立并盡量到達簡單直觀的效果，還可通過文字圖形的空間組合，表達和諧與美。

三是注重排版。扁平化設計要求元素更簡單，排版就顯得更為重要。字體和字形通過版式來區(qū)分各模塊。通過排版引導客戶，交互模塊元素注重增強易用性和交互性。

四是重視色彩。扁平化設計中，界面擁有更大膽的色彩。UI界面中一般不多于3種色彩，但是在扁平化設計中平均會使用6至8種顏色，而且色彩更純、色彩更有活力。

五是追求極簡。UI扁平化設計中應盡量防止不必要的修飾，保持最簡單的色彩、文本、圖形。

二、美學在UI扁平化設計中的表現(xiàn)

〔一〕整體與簡約

在設計中，整體決定局部，局部依從于整體，兩者相輔相成，互為作用。在互聯(lián)網(wǎng)的時代，界面構成要素中除了文字和圖像以外，還包含聲音、視頻和動畫等新興的多媒體元素，其在增加了UI界面生動性的同時，也使界面設計者考慮更多的合理性運用。點、線、面根本形態(tài)作為UI設計中的視覺傳達要素，共同構成了軟件界面交互設計，但是整個版面并非是各類元素的簡單相加，元素間互相聯(lián)絡、互相制約以到達傳達信息的目的。

UI扁平化設計應以精簡為準那么貫穿于整個設計中，精簡并不是指內容少，而是注重重點的表達，在視覺上也要遵循用戶的視覺邏輯。設計前期，設計師理解界面內容和性質后，需要對整個布局進展構思，簡單畫出根本框架，并且與客戶和開發(fā)人員進展有效的溝通，最終確定界面的根本雛形和流程，從整體的構思再到細節(jié)的局部，從每個表格、按鈕、菜單等細節(jié)元素再到整體的效果。

在很多扁平化的UI交互設計中可以看到假設隱假設現(xiàn)的幽靈按鈕。所謂的幽靈按鈕，其實就是無填充色的透明按鈕，多以非常簡潔的線條和圓角組成，不加修飾的功能說明直接襯托在按鈕上。幽靈按鈕為了讓用戶很快找到按鈕的位置，多沒有修飾和特效，為起到聚焦效果，設計時可適當調整按鈕的大小，或將按鈕懸浮在圖片背景上、動畫上等，或排版的時候將其放在較醒目的位置。

在UI的布局中，常見的有標題正文型、左右框架型、上下框架型、封面型、Flash型、綜合框架型等。目前，F(xiàn)lash型采用非常流行的Flash動畫效果畫面，頁面內容隨時間變化，所表達的信息更豐富，具有較強的現(xiàn)代感和視覺沖擊力。有的設計感極強，可以跟傳統(tǒng)的多媒體相提并論。通常人們在看到新事物時，自然會通過聯(lián)想將舊有經歷與之對應。但是無論用什么樣的框架，都應該遵循最根本的規(guī)律和原那么，相關設計通常把標識信息放在界面的左上方位置，版權說明信息那么習慣性地放在界面的最下方。

留白是中國傳統(tǒng)藝術創(chuàng)作的常用表達方式，其源自中國的書畫，為了使畫面更協(xié)調、更美麗，藝術家在某些地方有意留出空間，增加美感，給人以無限想象的空間。留白也經常被運用在軟件交互的界面設計中，特別是導航欄、菜單欄、彈出窗口等，通過對圖形化、符號化的細節(jié)把握，每個模塊的簡化設計都需要經過科學的測試和檢驗。設計師通過扁平化版式設計賦予界面更多境界。一個優(yōu)秀的界面設計師應有足夠的文化底蘊和專業(yè)知識，方能在簡潔而不簡單的UI界面設計上施展藝術才能。

〔二〕相似性

界面上的有一些碎片化的單一設計元素，通過歸納和分類可以找到其共性。相似性可以幫助設計師用關聯(lián)性組織設計元素，而關聯(lián)性可以是顏色、大小、形狀或方向。在扁平化的界面設計中，通過切換界面，每一個元素就像是一棵樹上的葉子，每一片葉子都有顏色、大小、形狀、紋理上的變化，但同時也具有相似性和整體性。它們既是單一的個體，又在整體中互相作用、互相聯(lián)絡。用戶在交互過程中，感受到的不僅是樹的高大魁梧，同時也能欣賞到樹葉的婀娜多姿。

如微信的界面，設計比擬簡潔和平實。所有的元素如按鈕、菜單在風格和色彩上保持一致，用戶可以很明晰快速地找到目的。

在界面排版設計中，設計師通過展示元素之間的關聯(lián)性或者非關聯(lián)性，傳遞有組織、有聯(lián)絡的使用感。在一些大型的新聞類界面設計中，除了最上面的導航欄，整體大多被區(qū)塊分成兩個局部：左邊和右邊被明晰區(qū)分為兩個獨立的元素：左邊局部是圖文并茂的頭條新聞，右側是閱讀最多的新聞布局。盡管每個局部提供一樣的功能--展示閱讀的文章和圖片，但因為左邊的面積大，自然會引導讀者花更多精力去關注頭條新聞欄目。

在界面的布局設計時，設計師常以區(qū)塊化分割界面布局。有的直接用線條和圖片來區(qū)分，也有通過留白、色塊等藝術手段來切分界面，給用戶明晰的使用順序，并且能防止一些用戶視線混亂和迷失方向，感受到界面設計排版的舒適閱讀快感。比方，鏈接可以使頁面和應用實現(xiàn)一些根本的內部交流，它們必須和周圍的其他元素區(qū)分開來，而且有必要更加明顯。文本鏈接中也存在幾種相似性，在款式、上下文、類別和目的上的差異；在邊欄和主題之間都在相似性原那么下統(tǒng)一被定義。

〔三〕接近性

在任何一個軟件界面中，設計師都會把一些互相接近、有關聯(lián)的元素聚集起來，組團后形成模塊單元。在某一個UI界面中，主界面、二級頁面、三級頁面以及彈出界面，各層級的風格款式都會保持高度接近，并且在字體款式、配色、操作流程上保持相似性。假設一個界面中有一級標題、二級標題和三級標題，雖然有可能出如今不同的界面中，但是設計師在設計過程中會通過標題的背風光、標題的字體款式或者標題的大小來區(qū)別三者之間的關系，做到有間隔的層級感，同時也要保持相關性。

假設界面上有很多操作按鈕，在排版時需要考慮其功能、作用、重要性和操作方法等。在扁平化設計中，用色彩來區(qū)分按鈕的層級關系是最常用的方法。設計師可提煉最有沖擊力的顏色作為主要按鈕的顏色。在次級按鈕的顏色選擇上那么要根據(jù)主要按鈕的色彩調整色相、飽和度等色值，也可通過調整按鈕大小或者在按鈕文本說明上進展區(qū)分。如設計按鈕款式，分為默認、懸浮、觸發(fā)、已訪問四種款式。從配色和外形上都有標準統(tǒng)一，能使用戶一目了然，進步可識別度，同時又要有細微的區(qū)分。好比一個按鈕的效果，當鼠標挪動到它上面有顏色的變化，當用戶點擊時有凹進去的效果，這樣的交互設計很符合人們需要。

層級的接近性原那么在設計上可以讓用戶非常簡單地去操作界面，能有效進步工作效率。用戶的一切需求應隨著界面的不斷切換實現(xiàn)交互。如文字排版，用簡單的CSS款式就能實現(xiàn)層級關系，最重要的是要在整個設計中都能考慮到這個原那么，并將其運用于全局之中。

〔四〕圖底關系

在空間設計中用得最多的就是圖底關系。在界面層級關系中，可以把它看成是本書，一層層地疊加實現(xiàn)界面效果。最前面的頁為前景，最后面的是背景。在整個界面中，用戶視覺的起點最接近自己的元素。在UI設計中，設計師充分運用色彩、排版把前景、景以及中間的很多頁面區(qū)別開來，讓用戶一目了然。用戶的需求也是通過視覺的層級來傳遞，借助自然的視覺途徑進展操作。比方，為了強調主要內容可以把背景設計成模糊虛化的效果，讓內容和背景有效別離，還可以調整內容上的文字大小、增強文字色彩色彩的比照度、選擇較粗的字體等方法。

如一個很復雜的界面布局效果，其中包括圖片、文本、顏色和形狀的組合，那么可運用圖底關系將各元素的構造有效模塊化，雖然很復雜，但看上去很明晰。這些不同的元素可以快速定義什么是連續(xù)的內容〔圖〕以及什么是連續(xù)的構造和背景〔底〕.

在設計過程中，設計師必須充分考慮到界面布局標準及合理化，按照人們自上而下、從左往右的閱讀習慣，常用的按鍵功能圖標要確定用戶操作的挪動范圍和間隔，防止鼠標反復挪動帶來的負面影響。扁平化界面整體應簡潔易用、現(xiàn)代時尚，主要功能操作是交互的核心所在，不常用的操作區(qū)域可設計收縮模塊或暫時隱藏。這樣既滿足了用戶的操作流程，也能進步軟件交互的效率。

結語

扁平化的界面設計拋棄了傳統(tǒng)的注重視覺刺激，不具有審美的持續(xù)性。表達了用戶對于美及使用的需求。設計師應以人為本，更加注重對軟件產品本身的功能、信息的表達。在UI的開展歷程中如何將視覺設計、美學原理以及軟件交互的設計標準有效結合，更合理地開發(fā)設計功能與產品有效的互動結合，設計出符合人們審美的創(chuàng)新產品，將是UI信息設計將來需要解決的課題和不斷努力研究的方向。

參考文獻

【1】庫爾特-考夫卡。格式塔心理學原理[M].黎煒，譯。杭州：浙江教育出版社，1999.

【2】史蒂夫-克魯格。網(wǎng)站可用性測試及優(yōu)化指南[M].袁國忠，譯。北京：人民郵電出版社，2022.

【3】尼爾森。打造高可用性的挪動產品[M].牛