視覺在UI設計中應該怎麼運用呢?

  • 作者:由 匿名使用者 發表于 攝影
  • 2022-08-03

視覺在UI設計中應該怎麼運用呢?環球青藤 2019-10-22

您好,首先要知道UI中的視覺元素是什麼?

視覺元素(甚至藝術元素)構成任何型別的視覺傳達的基本構件,如線條、形狀、顏色、紋理和圖案,就像語言中的單詞一樣,它們本身的意義是有限的,但是一旦開始將它們組合起來,就可以講述無數的故事。

1、線條: 視覺引導

與數學不同,設計中的線條可以有寬度和深度。 實際上,這種視覺元素構成了它們中最通用的元素,因為它可以顯示許多其他形狀、圖案和紋理。

可以用線條來引導我們的眼睛看向某些事物,或者把事物彼此分開。 它甚至可以提出完全抽象的概念,如時間(長或短)或節奏(直或波)

2、形狀: 空間的幻覺

形狀由一條或多條線組成,但由於其定義的邊界,它們與周圍的環境截然不同。 可以走出二維世界,創造空間和深度的錯覺。

當前的極簡主義時代使得二維世界更加普遍。然而,每次在CTA按鈕上放置一個投影時,就會產生這種錯覺!

幾何形狀和有機形狀提供了一種不同的分組方式。 幾何意味著秩序和可預測性,在使用者體驗中很重要。另一方面,在我們的眼中,有機形式顯得更加自然和人性化。

3、顏色: 情緒的主要觸發器

顏色需要一個存在的平臺,不同的顏色不一定會引發積極或消極的情緒,只是引發不同的情緒。

想想中性色(黑色、白色、灰色)、刺激更多情緒的暖色(紅色)和冷色(藍色),它們能更快地讓我們平靜下來。 但更復雜的是,顏色不僅僅意味著它本身, 他們也互相影響。

二、如何組合顏色可以增強網站的資訊:

單色、類比色、互補色和三色組成了四種基本配色方案。

1、單色

單色方案使用一種主色調,所有色調從白色到黑色。 人們經常在強調內容本身的簡約主義網站上使用它。 電子商務時尚品牌通常都是很好的例子。

2、類比色

在色輪上,類比色彼此相鄰。 在下面的例子中,Forest 使用了不同深淺的綠色和藍色來建立一個和諧的外觀。 我們經常在自然界中發現這種方案(想象一個真實的森林),這就解釋了它的視覺吸引力。

3、互補色

互補色在色輪上是相對的。 這些配對使得彼此更加鮮明——相互對比看起來更加生動。 在這裡,黃色的CTA按鈕與深紫色的背景相比顯得非常明亮。粗體的白色段落使這種對比更加鮮明。不管你喜歡還是討厭,這些顏色組合都會引起你的注意

4、三元色

三元配色方案使用三種主要顏色完美地平衡彼此。 它們在色環上形成一個正三角形。 對於擁有大量使用者的網站來說,這是一個安全的選擇,它給人一種平靜、和諧的感覺

三、紋理: 模仿現實世界

由於設計網站將我們鎖定在2D空間,我們只能模仿現實生活中的紋理。 視覺紋理給人二維表面紋理的錯覺。 我們只能透過眼睛而不是手來感知它,也可以使用圖片作為顯示紋理的強大工具

四、使用者介面模式: 重複的力量

在一個介面上重複一個主題(或紋理)會建立一個圖案。它們看起來可以是自然的或是人為的,有機的或幾何的,重複的或隨機的

對講機網站使用明亮和豐富多彩的圖案相互疊加,創造一個有趣和友好的基調。 這些圖案有一種手工製作的感覺,就像有人開始用蠟筆塗鴉一樣。 但是,請注意頁面的主色調仍然是白色,以確保內容仍然是主要焦點。

如若不明白可以詳細瞭解,希望這些能幫助您更加留意視覺元素

視覺在UI設計中應該怎麼運用呢?雲和資料 2019-12-24

視覺在UI設計中的應用:首先我們要看物理尺寸和視覺感知的尺寸然後是不同形狀的正確佈局需要記住的幾點是:視覺重點是我們人眼感知物體的尺寸和意義的方式,它是沒有必要和實際物理尺寸相同的。各種形狀需要更大的確保與正方形的icon視覺重量上一致Icon區域需要為視覺平衡流出一些空白的區域。

對於一組或者是系列的icon來說是非常有必要的下面看一下UI設計的學習線路圖:其實視覺設計的話包含的範圍是非常之廣的,至於如何把視覺在ui設計中靈活運用,最主要的要看下你設計的產品,以及你對產品的分析思考了,只有你對整個產品分析透徹了,才能讓你的視覺做的更加符合主題,體驗度更加的好,從而得到更好的口碑!所謂的視覺設計,就是運用圖形、顏色、文字的組合給人以視覺上的衝擊。

好的視覺體驗在UI設計中起到主導作用。UI設計最重要的是什麼?是使用者使用的舒適度,也就是我們常說的使用者體驗。當我們使用一款APP時,第一的感官體驗就是視覺,然後才是互動。

Top