「UI設計」UI介面設計基本視覺元素

UI介面由多個不同的基本視覺元素組成的。它們透過圖形的組合、色彩的搭配、材質和風格的統一、合理的佈局構成一個完整的介面效果。優秀的基本視覺元素是UI介面成功的基礎。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

在UI介面中,圖示就是放置在主螢幕上的應用圖示,使用者可以透過單擊圖示來啟動應用,它是整個應用品牌的重要組成部分。使用者在看到圖示的時候便建立起對該應用的第一印象,並以此評判應用的品質作用以及可靠性,美觀的圖示有助於增加App的吸引力。

「UI設計」UI介面設計基本視覺元素

與Logo不同,圖示透過視覺設計提供資訊和引導,而Logo則是品牌資訊的展示,圖示體積小巧,它的設計要求更加精確,更加一目瞭然地呈現在使用者面前。通常圖示的畫素更精準。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

按鈕是UI介面設計和互動設計的基本元素。它們是使用者互動的時候,和系統溝通交流的核心元件,是圖形化介面中最早出現的元素,也是最為常見的一種互動物件。

「UI設計」UI介面設計基本視覺元素

當用戶面對UI介面時,使用者基於以往的經驗和視覺對當前UI介面中的元素進行判斷。設計按鈕時,需要合適的視覺符號,如尺寸、形狀、顏色、陰影等,來幫助使用者理解按鈕。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

開關在移動UI介面中是經常會遇到的一個控制元件,它能夠對介面中某個功能或設定進行開啟和關閉。這也是一個使用者非常好理解的元素。因為它很好地模仿了現實世界裡人們熟悉的開關概念。

「UI設計」UI介面設計基本視覺元素

關於這個元素的設計,特別要注意的是“開”和“關”的狀態在視覺上需要有明顯差別。這樣能避免使用者花時間去研究開關的狀態,很多種的形式對比或者切換動畫都可以解決這個問題,從而設計出很好的使用者體驗。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

進度條是使用者在進入某個介面或者進入某個程式的過程中,應用程式為了緩衝和載入資訊所顯示出來的控制元件。它主要顯示出當前載入的百分比,讓使用者掌握相關的資料和進度。不管是在移動App端,還是PC端,進度條的應用都非常廣形式也多種多樣。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

在內容繁雜的介面中,搜尋欄通常是最常用的基本視覺元素。當用戶遇到相對複雜的介面時,他們會立即尋找搜尋欄達到搜尋資訊的目的。在進行介面設計時,可以考慮放置一個搜尋欄以方便使用者操作。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

列表佈局不同於網格佈局,這種導航模式簡單地由一個元素與另元素按字母順序、數字順序,甚至是隨機的順序排列組成。在使用垂直滾動選單時,列表框非常適合給使用者操作和閱讀。

「UI設計」UI介面設計基本視覺元素

列表可以有很多不同的變體,比如產品列表甚至是下拉選單,列表佔用的空間比網格少。如果內容文字繁多,可選擇列表佈局。

「UI設計」UI介面設計基本視覺元素

「UI設計」UI介面設計基本視覺元素

在一個移動裝置的App應用程式中,標籤欄能夠實現在不同的檢視或者功能之間的切換操作,以及瀏覽不同類別的資料。它的存在讓介面資訊更加規範和系統。

「UI設計」UI介面設計基本視覺元素

這裡需要注意的是,標籤欄和工具欄的不同是,標籤欄讓使用者在不同的子任務、檢視和模式中進行切換;工具欄放置著用於操作當前螢幕中各物件。

「UI設計」UI介面設計基本視覺元素