ui視覺設計常用軟體是什麼（ui設計風格有哪幾種）
是什麼讓一個網站變得好看？漂亮的設計需要遵循最終的設計規則嗎？ 答案：是的，但你必須知道如何發現它們包含的重複視覺化UI元素。
在這篇文章中，您將瞭解：
- 五大主要視覺元素
- 如何識別它們（帶示例）
- 關於如何在實踐中使用它們的五個技巧
UI中的視覺元素是什麼？
視覺元素（甚至藝術元素）構成任何型別的視覺傳達的基本構件，如線條、形狀、顏色、紋理和圖案，就像語言中的單詞一樣，它們本身的意義是有限的，但是一旦你開始將它們組合起來，你就可以講述無數的故事。
學習好的視覺系統就像學習一門新的語言。 為了理解它們，你需要一點一點地檢查它們，直到你找到它們最基本的元素。 這就是我們使用者體驗公司的設計師在專案中的工作方式。 讓我們來看看每個人的一些例子。
1. 線條: 視覺引導
與數學不同，設計中的線條可以有寬度和深度。 實際上，這種視覺元素構成了它們中最通用的元素，因為它可以顯示許多其他形狀、圖案和紋理。
我們可以用線條來引導我們的眼睛看向某些事物，或者把事物彼此分開。 它甚至可以提出完全抽象的概念，如時間(長或短)或節奏(直或波)。
在這個示例中，水平線將文章的主要部分相互分離，但在向下滾動頁面時也會產生節奏。 ( 來源: misplaced.design )
形狀: 空間的幻覺
形狀由一條或多條線組成，但由於其定義的邊界，它們與周圍的環境截然不同。 他們可以走出二維世界，創造空間和深度的錯覺。
當前的極簡主義時代使得二維世界更加普遍。然而，每次您在CTA按鈕上放置一個投影時，您就會產生這種錯覺！
幾何形狀和有機形狀提供了一種不同的分組方式。 幾何意味著秩序和可預測性，在使用者體驗中很重要。另一方面，在我們的眼中，有機形式顯得更加自然和人性化。
來源: conference.awwwards
我喜歡一個微妙的變化可以使簡單的形狀，如矩形變得有趣。 在上面的例子中，影象的角度不同於周圍的紅色矩形。 反過來，這在兩者之間創造了一種有趣的張力。
這三個物件之間的位置和大小差異使組合具有動態性，有助於建立層次結構。
顏色: 情緒的主要觸發器
當然，這個元素也不能單獨存在。 顏色需要一個存在的平臺。 請記住，不同的顏色不一定會引發積極或消極的情緒，只是引發不同的情緒。
想想中性色（黑色、白色、灰色）、刺激更多情緒的暖色（紅色）和冷色（藍色），它們能更快地讓我們平靜下來。 但更復雜的是，顏色不僅僅意味著它本身， 他們也互相影響。
如何組合顏色可以增強網站的資訊。 單色、類比色、互補色和三色組成了四種基本配色方案。
1. 單色
單色方案使用一種主色調，所有色調從白色到黑色。 人們經常在強調內容本身的簡約主義網站上使用它。 電子商務時尚品牌通常都是很好的例子。
2. 類比色
在色輪上，類比色彼此相鄰。 在下面的例子中，Forest 使用了不同深淺的綠色和藍色來建立一個和諧的外觀。 我們經常在自然界中發現這種方案（想象一個真實的森林），這就解釋了它的視覺吸引力。
3. 互補色
互補色在色輪上是相對的，這些配對使得彼此更加鮮明——相互對比看起來更加生動。
在這裡，黃色的CTA按鈕與深紫色的背景相比顯得非常明亮。粗體的白色段落使這種對比更加鮮明。 不管你喜歡還是討厭，這些顏色組合都會引起你的注意。
來源: flixxo
4. 三元色
三元配色方案使用三種主要顏色完美地平衡彼此， 它們在色環上形成一個正三角形。
對於擁有大量使用者的網站來說，這是一個安全的選擇，它給人一種平靜、和諧的感覺，沒有驚喜。 Slack 使用了這個方案的紫黃綠調色盤。 這裡的一切都很平衡，元素之間不會相互壓制。
來源: Slack
紋理: 模仿現實世界
由於設計網站將我們鎖定在2D空間，我們只能模仿現實生活中的紋理。 視覺紋理給人二維表面紋理的錯覺。 我們只能通過眼睛而不是手來感知它。
來源: chiran-omoire
我們可以使用圖片作為顯示紋理的強大工具。
在這個例子中，粗糙的灰色茶壺和茶葉與前景中精緻的白色茶杯形成了有趣的對比。 圖片的強烈對稱性引導我們的視線轉向中間，在那裡一杯清香的綠茶正等著我們品嚐。
使用者介面模式: 重複的力量
在一個介面上重複一個主題（或紋理）會建立一個圖案。它們看起來可以是自然的或是人為的，有機的或幾何的，重複的或隨機的。
來源: intercom
對講機網站使用明亮和豐富多彩的圖案相互疊加，創造一個有趣和友好的基調。 這些圖案有一種手工製作的感覺，就像有人開始用蠟筆塗鴉一樣。 但是，請注意頁面的主色調仍然是白色，以確保內容仍然是主要焦點。
我希望當你偶然發現一個很酷的網站時，這些例子能幫助你更加留意視覺元素！
使用 UI 元素的5個技巧
1. 堅持品牌指導方針和基調
不同的行業決定你如何使用視覺效果， 我們根據瀏覽主頁的幾秒鐘來判斷一個網站的可信度。
你會相信一家在網站上使用瘋狂紋理和粉色插圖的律師事務所嗎？
你會有顧慮的。 當然，你可以創新，但是你必須準確定位品牌，同類別產品應與競爭對手定位相同。 視覺效果應該始終尊重公司的行業和價值觀。
2. 總是用系統思考
視覺一致性是關鍵，因為它可以幫助使用者瀏覽你的網站並記住你的品牌。它也表示質量。 如果你真的花時間去考慮你網站上的小細節，這意味著你可能也提供了一個精心設計的產品。 一致性也意味著，面對無窮無盡的視覺元素組合，你應該有選擇性地使用它們。
如果你使用概述的圖示集，請堅持使用它，使用兩到三種顏色及其主色調。
一個新的登陸頁面不一定能提供一個很好的理由來引入第三種色調。 這些東西看起來微不足道，但它們累積起來就能發揮效果。
3. 確保內容排在第一位
視覺效果有助於更好地傳達品牌資訊。 不要僅僅為了美化你的網站而使用它們（儘管這是一個很酷的好處，但它可以確保訪問者會留在你的網站上閱讀你的內容）。雖然書面文字可以闡述內容，但插圖可以直觀展現內容，尤其是一個複雜的想法。
視覺效果可以讓你更深入地瞭解你的產品，表達你的品牌個性，並幫助傳達你的想法。但是使用者仍然需要找到他們想要的東西。用你的內容賦予人們價值。 書面內容和視覺效果都有自己的位置，但兩者缺一不可。
4. 尊重負空間
我們把設計元素之間的區域稱為負空間或留白。 不要讓”白色”這個詞欺騙了你，讓它成為你心中渴望的任何顏色。
但是，記住一件事: 空白並不意味著浪費空間。 人們總是匆匆忙忙，想盡快在頁面中找到自己想找尋的內容。
把關於你產品的所有資訊都塞進一頁紙裡，結果是沒有任何內容會脫穎而出。引導頁面訪問者看到最重要的資訊，你希望他們理解頁面內容並消除任何干擾因素。 負空間可以在這方面對你有所幫助: 當大腦處理新資訊的時候，它可以讓疲憊的眼睛稍微休息一下。
5. 實驗
視覺化元素可以被證明是非常通用的，並且視覺化的東西可以有多種好的解決方案。 不要回避嘗試多個解決方案，只要確保測試哪個效能更好。它可以是像登陸頁面這樣的小事情，也可以是你如何定位你的品牌。
Slack 就是一個最新的例子：
他們的新標誌震驚了全世界的設計界。 我不想討論這個問題，只想提一下 Slack 也有了一個新的網站設計。 他們取而代之的是非常有說服力、有趣、年輕的版本。 新版本使用了更多真實人物和工作場所的圖片，並專注於大型企業和案例研究。
保持不變的是顏色、友好的基調、簡單的導航系統和對人們一起工作的關注。 Slack 正在嘗試成長。
原文作者：Zsofia Paszternak
原文地址：
https://uxstudioteam.com/ux-blog/visual-elements/
編譯作者：ShmilyJ |合肥 | UI設計師（微信ID：ShmilyJ91）
編輯整理：三分設翻譯特工隊（微信ID：sanfen-design）
本文由 @三分設 翻譯釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議