UI設(shè)計(jì)師須知的五大主要視覺元素,以及如何應(yīng)用

2021-05-07    分類: 網(wǎng)站建設(shè)

這篇文章主要講的是作為一個(gè)UI設(shè)計(jì)師,需知道五大主要視覺元素,以及如何識別和如何在實(shí)踐中使用他們的小技巧。
什么是UI中的視覺元素?
視覺元素構(gòu)成任何類型的視覺傳達(dá)的基本構(gòu)件,像是線條、形狀、顏色、紋理和圖案,這就像語言中的單詞一樣,它們本身的意義是十分有限的,但是如果你開始將它們組合起來,你便可以講述無數(shù)的故事。
學(xué)習(xí)視覺系統(tǒng)如同學(xué)習(xí)一門新的語言一樣。 為了能夠很好的理解它們,你要慢慢地檢查它們,一直到你發(fā)現(xiàn)它們最基本的元素為止。
線條: 視覺引導(dǎo)
設(shè)計(jì)跟數(shù)學(xué)視覺不同,因其設(shè)計(jì)中的線條可以有寬度和深度。而這樣的的深度和寬度就是視覺元素構(gòu)成了它們中最基礎(chǔ)的元素,因?yàn)樗軌蝻@示許多其他形狀、圖案和紋理。
我們可以用線條來引導(dǎo)我們看向某些事物,在或者把事物分開來。 它甚至可以提出完全抽象的概念,如時(shí)間長或短或、節(jié)奏直或波。
形狀: 空間的幻覺
形狀是由一條或者多條的線條組成的,但因其定義的邊界,它們與周圍的環(huán)境也是截然不同。 它們可以走出二維世界,創(chuàng)造空間和深度的錯(cuò)覺。
現(xiàn)在的極簡主義時(shí)代使得二維世界變得更加普遍。然而,每次你在CTA按鈕上放置一個(gè)投影時(shí),你就會(huì)有這樣的錯(cuò)覺!
幾何形狀和有機(jī)形狀提供了一種不一樣的分組方式。 其幾何意味著秩序和可預(yù)測性,這點(diǎn)在用戶體驗(yàn)中很重要。而另一方面,在我們的印象里,有機(jī)形式顯得更加自然和人性化。
顏色: 情緒的主要觸發(fā)器
然而這個(gè)元素也不可以單獨(dú)存在的。 顏色也是需要一個(gè)存在的平臺。要記住,不同的顏色不一定會(huì)引發(fā)積極或消極的情緒,而是引發(fā)不同的情緒。
像是中性色、更多情緒的暖色,它們可以更快地讓我們平靜下來。但是,顏色不單單意味著它本身, 他們同樣也是互相影響。
紋理: 模仿現(xiàn)實(shí)世界
因其設(shè)計(jì)網(wǎng)站將我們鎖定在2D空間,我們只模仿現(xiàn)實(shí)生活中的紋理。 視覺紋理給人二維表面紋理的錯(cuò)覺。 我們不能用手去感知而是去用眼睛。
用戶界面模式: 重復(fù)的力量
在一個(gè)界面上重復(fù)一個(gè)主題就會(huì)創(chuàng)建一個(gè)圖案。它們看起來可以是自然的或人為的,重復(fù)的或隨機(jī)的。有機(jī)地或幾何的。
使用 UI 元素的5個(gè)技巧
1. 堅(jiān)持品牌指導(dǎo)方針和基調(diào)
不同的行業(yè),視覺效果也是不同的, 我會(huì)根據(jù)瀏覽主頁的幾秒鐘來判斷一個(gè)網(wǎng)站的可信度。
當(dāng)你看到一家新聞?lì)惖木W(wǎng)站,用著色彩鮮艷的紋理和插圖,你還有興趣瀏覽下去嗎,當(dāng)然,你可以創(chuàng)新,但是你一定要準(zhǔn)確定位品牌,同類別產(chǎn)品應(yīng)與競爭對手定位相同。 視覺效果應(yīng)始終尊重公司的行業(yè)和價(jià)值觀。
2. 總是用系統(tǒng)思考
視覺是非常關(guān)鍵的,因其可以幫助用戶瀏覽你的網(wǎng)站并能夠記住你的品牌。它代表的是質(zhì)量。 如果你真的花時(shí)間去考慮你網(wǎng)站上的小細(xì)節(jié),這就說明你可能也提供了一個(gè)精心設(shè)計(jì)的產(chǎn)品。
3. 確保內(nèi)容排在第一位
視覺效果更有助于很好地傳達(dá)品牌信息。 千萬不要是為了美化你的網(wǎng)站而使用它們,盡管書面文字可以闡述內(nèi)容,但插圖可以直觀展現(xiàn)內(nèi)容,或一個(gè)復(fù)雜的想法。
4. 尊重負(fù)空間
我們把設(shè)計(jì)元素之間的區(qū)域稱為負(fù)空間或者留白。不要被白色所欺騙,讓它成為你心中渴望的任何顏色。
但是,要記住一件事, 空白并不意味著是浪費(fèi)空間。 人們總是很匆匆忙忙,想盡快在頁面中找到自己想找尋的內(nèi)容。
把關(guān)于你產(chǎn)品的所有信息都塞進(jìn)一頁紙里,導(dǎo)致的結(jié)果就是沒有任何內(nèi)容會(huì)脫穎而出。引導(dǎo)頁面訪問者看到最重要的信息,你希望他們理解頁面內(nèi)容并消除任何干擾因素。 負(fù)空間可以在這方面就會(huì)對你有所幫助: 當(dāng)大腦處理新信息的時(shí)候,它可以讓疲憊的眼睛稍微休息一下。
5. 實(shí)驗(yàn)
可視化元素可以被證明是很通用的,并且可視化的東西是有多種好的解決方案。 不要回避嘗試多個(gè)解決方案,你要確保測試哪個(gè)性能更好。這樣才能定位好你的品牌。

文章題目:UI設(shè)計(jì)師須知的五大主要視覺元素,以及如何應(yīng)用
分享網(wǎng)址:http://bm7419.com/news/112671.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、做網(wǎng)站、小程序開發(fā)微信公眾號、靜態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營