中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

是什么讓一個網(wǎng)站變得好看？漂亮的設(shè)計(jì)需要遵循最終的設(shè)計(jì)規(guī)則嗎？ 答案：是的，但你必須知道如何發(fā)現(xiàn)它們包含的重復(fù)可視化UI元素。

在這篇文章中，您將了解：

• 五大主要視覺元素
• 如何識別它們（帶示例）
• 關(guān)于如何在實(shí)踐中使用它們的五個技巧

UI中的視覺元素是什么？

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

學(xué)習(xí)好的視覺系統(tǒng)就像學(xué)習(xí)一門新的語言。 為了理解它們，你需要一點(diǎn)一點(diǎn)地檢查它們，直到你找到它們最基本的元素。 這就是我們用戶體驗(yàn)公司的設(shè)計(jì)師在項(xiàng)目中的工作方式。 讓我們來看看每個人的一些例子。

1. 線條: 視覺引導(dǎo)

與數(shù)學(xué)不同，設(shè)計(jì)中的線條可以有寬度和深度。 實(shí)際上，這種視覺元素構(gòu)成了它們中最通用的元素，因?yàn)樗梢燥@示許多其他形狀、圖案和紋理。

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

在這個示例中，水平線將文章的主要部分相互分離，但在向下滾動頁面時也會產(chǎn)生節(jié)奏。 ( 來源: misplaced.design )

形狀: 空間的幻覺

形狀由一條或多條線組成，但由于其定義的邊界，它們與周圍的環(huán)境截然不同。 他們可以走出二維世界，創(chuàng)造空間和深度的錯覺。

當(dāng)前的極簡主義時代使得二維世界更加普遍。然而，每次您在CTA按鈕上放置一個投影時，您就會產(chǎn)生這種錯覺！

幾何形狀和有機(jī)形狀提供了一種不同的分組方式。 幾何意味著秩序和可預(yù)測性，在用戶體驗(yàn)中很重要。另一方面，在我們的眼中，有機(jī)形式顯得更加自然和人性化。

來源: conference.awwwards

我喜歡一個微妙的變化可以使簡單的形狀，如矩形變得有趣。 在上面的例子中，圖像的角度不同于周圍的紅色矩形。 反過來，這在兩者之間創(chuàng)造了一種有趣的張力。

這三個對象之間的位置和大小差異使組合具有動態(tài)性，有助于創(chuàng)建層次結(jié)構(gòu)。

顏色: 情緒的主要觸發(fā)器

當(dāng)然，這個元素也不能單獨(dú)存在。 顏色需要一個存在的平臺。 請記住，不同的顏色不一定會引發(fā)積極或消極的情緒，只是引發(fā)不同的情緒。

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

如何組合顏色可以增強(qiáng)網(wǎng)站的信息。 單色、類比色、互補(bǔ)色和三色組成了四種基本配色方案。

1. 單色

單色方案使用一種主色調(diào)，所有色調(diào)從白色到黑色。 人們經(jīng)常在強(qiáng)調(diào)內(nèi)容本身的簡約主義網(wǎng)站上使用它。 電子商務(wù)時尚品牌通常都是很好的例子。

2. 類比色

在色輪上，類比色彼此相鄰。 在下面的例子中，F(xiàn)orest 使用了不同深淺的綠色和藍(lán)色來創(chuàng)建一個和諧的外觀。 我們經(jīng)常在自然界中發(fā)現(xiàn)這種方案（想象一個真實(shí)的森林），這就解釋了它的視覺吸引力。

3. 互補(bǔ)色

互補(bǔ)色在色輪上是相對的，這些配對使得彼此更加鮮明——相互對比看起來更加生動。

在這里，黃色的CTA按鈕與深紫色的背景相比顯得非常明亮。粗體的白色段落使這種對比更加鮮明。 不管你喜歡還是討厭，這些顏色組合都會引起你的注意。

來源: flixxo

4. 三元色

三元配色方案使用三種主要顏色完美地平衡彼此， 它們在色環(huán)上形成一個正三角形。

對于擁有大量用戶的網(wǎng)站來說，這是一個安全的選擇，它給人一種平靜、和諧的感覺，沒有驚喜。 Slack 使用了這個方案的紫黃綠調(diào)色板。 這里的一切都很平衡，元素之間不會相互壓制。

來源: Slack

紋理: 模仿現(xiàn)實(shí)世界

由于設(shè)計(jì)網(wǎng)站將我們鎖定在2D空間，我們只能模仿現(xiàn)實(shí)生活中的紋理。 視覺紋理給人二維表面紋理的錯覺。 我們只能通過眼睛而不是手來感知它。

來源: chiran-omoire

我們可以使用圖片作為顯示紋理的強(qiáng)大工具。

在這個例子中，粗糙的灰色茶壺和茶葉與前景中精致的白色茶杯形成了有趣的對比。 圖片的強(qiáng)烈對稱性引導(dǎo)我們的視線轉(zhuǎn)向中間，在那里一杯清香的綠茶正等著我們品嘗。

用戶界面模式: 重復(fù)的力量

在一個界面上重復(fù)一個主題（或紋理）會創(chuàng)建一個圖案。它們看起來可以是自然的或是人為的，有機(jī)的或幾何的，重復(fù)的或隨機(jī)的。

來源: intercom

對講機(jī)網(wǎng)站使用明亮和豐富多彩的圖案相互疊加，創(chuàng)造一個有趣和友好的基調(diào)。 這些圖案有一種手工制作的感覺，就像有人開始用蠟筆涂鴉一樣。 但是，請注意頁面的主色調(diào)仍然是白色，以確保內(nèi)容仍然是主要焦點(diǎn)。

我希望當(dāng)你偶然發(fā)現(xiàn)一個很酷的網(wǎng)站時，這些例子能幫助你更加留意視覺元素！

使用 UI 元素的5個技巧

1. 堅(jiān)持品牌指導(dǎo)方針和基調(diào)

不同的行業(yè)決定你如何使用視覺效果， 我們根據(jù)瀏覽主頁的幾秒鐘來判斷一個網(wǎng)站的可信度。

你會相信一家在網(wǎng)站上使用瘋狂紋理和粉色插圖的律師事務(wù)所嗎？

你會有顧慮的。 當(dāng)然，你可以創(chuàng)新，但是你必須準(zhǔn)確定位品牌，同類別產(chǎn)品應(yīng)與競爭對手定位相同。 視覺效果應(yīng)該始終尊重公司的行業(yè)和價值觀。

2. 總是用系統(tǒng)思考

視覺一致性是關(guān)鍵，因?yàn)樗梢詭椭脩魹g覽你的網(wǎng)站并記住你的品牌。它也表示質(zhì)量。 如果你真的花時間去考慮你網(wǎng)站上的小細(xì)節(jié)，這意味著你可能也提供了一個精心設(shè)計(jì)的產(chǎn)品。 一致性也意味著，面對無窮無盡的視覺元素組合，你應(yīng)該有選擇性地使用它們。

如果你使用概述的圖標(biāo)集，請堅(jiān)持使用它，使用兩到三種顏色及其主色調(diào)。

一個新的登陸頁面不一定能提供一個很好的理由來引入第三種色調(diào)。 這些東西看起來微不足道，但它們累積起來就能發(fā)揮效果。

3. 確保內(nèi)容排在第一位

視覺效果有助于更好地傳達(dá)品牌信息。 不要僅僅為了美化你的網(wǎng)站而使用它們（盡管這是一個很酷的好處，但它可以確保訪問者會留在你的網(wǎng)站上閱讀你的內(nèi)容）。雖然書面文字可以闡述內(nèi)容，但插圖可以直觀展現(xiàn)內(nèi)容，尤其是一個復(fù)雜的想法。

視覺效果可以讓你更深入地了解你的產(chǎn)品，表達(dá)你的品牌個性，并幫助傳達(dá)你的想法。但是用戶仍然需要找到他們想要的東西。用你的內(nèi)容賦予人們價值。 書面內(nèi)容和視覺效果都有自己的位置，但兩者缺一不可。

4. 尊重負(fù)空間

我們把設(shè)計(jì)元素之間的區(qū)域稱為負(fù)空間或留白。 不要讓”白色”這個詞欺騙了你，讓它成為你心中渴望的任何顏色。

但是，記住一件事: 空白并不意味著浪費(fèi)空間。 人們總是匆匆忙忙，想盡快在頁面中找到自己想找尋的內(nèi)容。

把關(guān)于你產(chǎn)品的所有信息都塞進(jìn)一頁紙里，結(jié)果是沒有任何內(nèi)容會脫穎而出。引導(dǎo)頁面訪問者看到最重要的信息，你希望他們理解頁面內(nèi)容并消除任何干擾因素。 負(fù)空間可以在這方面對你有所幫助: 當(dāng)大腦處理新信息的時候，它可以讓疲憊的眼睛稍微休息一下。

5. 實(shí)驗(yàn)

可視化元素可以被證明是非常通用的，并且可視化的東西可以有多種好的解決方案。 不要回避嘗試多個解決方案，只要確保測試哪個性能更好。它可以是像登陸頁面這樣的小事情，也可以是你如何定位你的品牌。

Slack 就是一個最新的例子：

他們的新標(biāo)志震驚了全世界的設(shè)計(jì)界。 我不想討論這個問題，只想提一下 Slack 也有了一個新的網(wǎng)站設(shè)計(jì)。 他們?nèi)《氖欠浅Ｓ姓f服力、有趣、年輕的版本。 新版本使用了更多真實(shí)人物和工作場所的圖片，并專注于大型企業(yè)和案例研究。

保持不變的是顏色、友好的基調(diào)、簡單的導(dǎo)航系統(tǒng)和對人們一起工作的關(guān)注。 Slack 正在嘗試成長。

原文作者：Zsofia Paszternak

原文地址：https://uxstudioteam.com/ux-blog/visual-elements/

編譯作者：ShmilyJ |合肥 | UI設(shè)計(jì)師（微信ID：ShmilyJ91）

編輯整理：三分設(shè)翻譯特工隊(duì)（微信ID：sanfen-design）

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議