是什么使一個網站有吸引力？我們很少停下來分析原因。出色漂亮的設計是否遵循最終的設計規(guī)則？答案是肯定的，但是作為設計師的你必須知道如何識別它們所包含的重復出現的視覺元素!

 在今天的這篇文章中，你將了解：

- 五個主要視覺元素

- 如何識別它們（帶有示例）

- 如何在實踐中使用它們的五個技巧

視覺元素是什么？

視覺元素（或者說是藝術元素）構成了任何類型的視覺交流的基本構件，例如線條，形狀，顏色，紋理和圖案。就像語言中的單詞一樣，它們本身的意義是有限的，但是一旦你把它們組合在一起，你就可以講述無數個故事。研究好的視覺系統(tǒng)就像學習一門新的語言，為了理解它們，你需要逐個檢查它們，直到找到它們最基本的元素。這就是我們公司的設計師在其項目中的工作方式，讓我們來看看每一個例子吧。

 1  線 ：視覺指導

與數學不同，設計中的線條也可以有寬度和深度。實際上，這個視覺元素是所有元素中最通用的，因為它可以暗示許多其他形狀、模式和紋理。我們可以用線條來引導我們的眼睛去看某物，或者將某物與其他事物分開。它甚至可以提出完全抽象的概念，如時間(長或短)或節(jié)奏(直或波)。

來源：misplaced.design

在此示例中，水平線將文章的主要部分彼此分開，但在向下滾動頁面時也會產生節(jié)奏。

 2  形狀：對空間的幻想

形狀由一條或多條線組成，但是由于其定義的邊界，它們在環(huán)境中脫穎而出。它們可以走出二維世界，創(chuàng)造出空間和深度的錯覺。當前的極簡主義時代使得堅持2D更為普遍。但是，每當你在CTA按鈕上添加陰影時，你都會產生這種錯覺！幾何形狀和有機形狀提供了一種不同的分組方式。幾何學意味著秩序和可預測性，在用戶體驗中非常重要。另一方面，在我們看來，有機的形式更自然、更人性化。

資料來源：conference.awwwards

一個微妙的變化可以使簡單的形狀（如矩形）變得有趣。在上面的例子中，圖像的角度與周圍紅色矩形的角度不同。反過來，這在兩者之間產生了有趣的張力。這三個對象之間的位置和大小差異使得組合是動態(tài)的，并有助于創(chuàng)建層次結構。

 3  顏色：情感的主要誘因

當然，這個元素也不能單獨存在。顏色需要一個平臺才能存在。請記住，不同的顏色不一定會引發(fā)積極或消極的情緒，它只是不同的情緒。想想中性色(黑色、白色、灰色)，暖色(紅色)更刺激，冷色(藍色)更能讓我們平靜下來。讓事情變得更復雜的是，顏色本身并不意味著什么。它們也相互作用。如何組合顏色可以增強你的網站的信息。單色、類似、互補和三色系構成四種基本色系。我建議你使用Canva的色輪來幫助你選擇正確的顏色組合。

圖源：https://www.網址未加載/colors/color-wheel/

· 單色

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

·類似顏色

在色輪上，類似的顏色彼此相鄰。在下面的例子中，Forest使用了不同深淺的綠色和藍色來創(chuàng)建一個和諧的外觀。我們經常在自然界中找到這種方案(想象一個真實的森林)，這可以解釋其視覺吸引力。

資料來源：forestadmin

·互補色

互補色在色輪上是相對的。這些配對會使彼此更顯目——其中一個在配對的旁邊看起來更生動。如下圖示例，黃色的CTA按鈕與深紫色的背景相比顯得格外明亮。醒目的白色段落使這種對比更加鮮明。不管你喜不喜歡，這些色彩組合都能引起人們的注意。

資料來源：flixxo

·三色系顏色

三色系使用三種主要的顏色，可以使彼此完美平衡。它們在色輪上形成一個等邊三角形。對于擁有大量用戶的網站來說，這是一個安全的選擇，它可以帶來平靜，和諧的外觀，而不會帶來任何驚喜。Slack使用這種方案與其紫色-黃色-綠色調色板一起使用。一切都在這里達到平衡，元素之間不會相互壓倒。

資料來源：Slack

 4  紋理：模仿現實世界 

由于設計網站將我們鎖定在2D空間中，因此我們只能模擬現實世界的紋理。視覺紋理給人一種二維表面紋理的錯覺。我們只能用眼睛感知它，而不是用手。

資料來源：chiran-omoire

我們可以使用圖片作為顯示紋理的強大工具。在上面這個例子中，粗糙的灰色茶壺和茶葉與前景中精致的白色茶杯形成了有趣的對比。畫面的強烈對稱性將我們的視線引向中間，一杯完美的綠茶正等著我們。

 5  模式：重復的力量

重復一個圖案(或紋理)在一個表面創(chuàng)建一個模式。它們可以是自然的或人造的，有機的或幾何的，重復的或隨機的。

 資料來源：intercom

intercom彼此之間使用明亮多彩的圖案來營造有趣而友好的語氣。這些圖案有手工制作的感覺，就像有人開始用蠟筆涂鴉一樣。但是，請注意頁面的主色仍然是白色，確保內容仍然是主要焦點。 

使用UI元素的5個技巧 

 1  遵守品牌準則和語氣

不同的行業(yè)決定了你如何使用視覺效果,我們判斷一個網站的可信度是基于瀏覽主頁的幾秒鐘.你會相信一個在他們的網站上使用了瘋狂的紋理和粉紅色插圖的律師事務所嗎?你會有顧慮。當然，你可以創(chuàng)新，但你必須把你的品牌定位在與競爭對手相同的領域。視覺效果應該始終尊重公司所處的的行業(yè)和價值觀。

 2   總是在系統(tǒng)中思考

視覺一致性是關鍵。因為它可以讓你的用戶更可能的瀏覽你的網站，記住你的品牌。它也代表著你們的實力和能力。如果你真的花時間去考慮你網站上的小細節(jié)，這意味著你可能也正在創(chuàng)造一個精心設計的產品。一致性還意味著面對無窮無盡的視覺元素組合，你應該有選擇地選擇它們。如果你使用一個輪廓圖標集，堅持使用它。使用兩到三種主色調。一個新的登錄頁面不一定能提供一個很好的理由來引入第三個,這些事情可能看起來微不足道，但它們是卻很有意義。

 3  確保內容優(yōu)先

視覺效果有助于更好地傳達品牌信息。不要僅僅為了美化你的網站而使用它們(即使這是一個很酷的設計，它可以確保訪問者會停留在你的網站上閱讀你的內容)。雖然你可以通過寫作來表達一些東西，也可以通過插圖來表達，尤其是一個復雜的想法。視覺可以讓你對你的產品有更深入的了解，表達品牌的個性，并幫助傳達你所想表達的的情感。但是用戶仍然需要找到他們要找的東西。用你的內容給人們帶來價值。書面內容和視覺效果都有它們的位置，二者配合缺一不可。

 4   尊重負空間。

我們稱設計元素之間的區(qū)域為負空間或空白。不要讓“白色”這個詞欺騙你;讓它成為你心中渴望的任何顏色。但是請記住一件事:留白并不意味著浪費空間。人們總是匆匆忙忙，想盡快找到東西.把你產品的每一點信息都塞進一個頁面，沒有什么會脫穎而出。引導訪問者的視線，讓他們了解最重要的信息，并消除任何干擾因素。負空間可以幫助你:當大腦處理新信息時，它可以讓疲憊的眼睛休息一下

 5  實驗

視覺元素可以被證明是多種多樣的，而將某物可視化可以有多種好的解決方案。不要回避嘗試多個解決方案，只要確保測試哪一個性能更好。它可以是一個小的東西，比如一個登陸頁面，或者你如何定位你的品牌。Slack給我們舉了一個最近的例子。他們的新標識震驚了全世界的設計界。我不想討論這個問題，只是提一下Slack也有了一個新的網站設計。它們取代了非常具有說明性的、有趣的和年輕的那個設計。新版本使用了更多的真實人物和工作場所的圖片，專注于案例研究和更大的企業(yè)。但很多東西都保持不變:顏色、友好的語音語調、簡單的導航系統(tǒng)、對人們一起工作的關注。

我希望這些示例可以幫助您在偶然發(fā)現一個酷網站時更加注意視覺元素！