視覺語言就像其他任何形式的交流一樣。

　　在“語言”是指口頭或書面交流的地方，視覺語言更進(jìn)一步地與特定社區(qū)建立聯(lián)系。從顏色到樣式到照片或插圖的類型等元素都可以確定品牌或公司的名稱。這些視覺元素以人們理解的結(jié)構(gòu)化和常規(guī)方式將一組聯(lián)系在一起。

　　視覺語言包括網(wǎng)站或品牌的書面和口頭元素，以及用戶可以在屏幕上看到的每種設(shè)計(jì)技術(shù)，照片，圖標(biāo)，LOGO和物品。用戶常常不知道視覺語言。他們只是知道，當(dāng)他們看到你的網(wǎng)站或品牌時(shí)，就會(huì)認(rèn)識(shí)到它。

　　這是創(chuàng)建用戶可以理解的視覺語言的方法。

　　1.建立調(diào)色板

　　強(qiáng)烈的調(diào)色板是用戶的識(shí)別工具。使用與品牌或網(wǎng)站相關(guān)的知名顏色時(shí);用戶知道他們?cè)谀睦?。他們不?huì)在龐大的網(wǎng)絡(luò)世界中迷失，因?yàn)槟阋呀?jīng)直觀地告訴了他們與之交互的網(wǎng)站或品牌。

　　此調(diào)色板不應(yīng)該是你網(wǎng)站唯一的。它需要得到普遍應(yīng)用，并與品牌所做的一切相關(guān)聯(lián)——線上、社交媒體、包裹或包裝、名片。

　　此外，調(diào)色板應(yīng)增強(qiáng)品牌價(jià)值。

　　考慮一下快餐店麥當(dāng)勞的顏色：黃色和紅色。顏色代表幸福(黃色)和饑餓(紅色)。你有多少次看到這個(gè)品牌沒有“金色拱門”或包裝上帶有紅色的東西?

　　2.創(chuàng)建排版層次結(jié)構(gòu)

　　與為你的品牌選擇字體一樣重要的是，確定字體的使用方式。

　　排版層次結(jié)構(gòu)為你與用戶交談，低語(小字體)還是大吼大叫(大寫大寫字母)設(shè)置了基調(diào)。沒有正確或錯(cuò)誤的交流方式;知道什么對(duì)你的合伙人有用。

　　建立排版比例的訣竅是，每個(gè)級(jí)別都應(yīng)與之前和之后的級(jí)別足夠不同，這樣很容易看到文本中的變化。

　　Airbnb具有獨(dú)特的排版比例，具有標(biāo)準(zhǔn)化的排版尺寸和重量。該標(biāo)準(zhǔn)化還擴(kuò)展到調(diào)色板和間距，以形成堅(jiān)實(shí)的視覺語言。

　　3.建立網(wǎng)格

　　元素的間距和位置與元素本身一樣重要。你的視覺身份是否整潔有序，還是比較混亂?

　　你的網(wǎng)格回答了這個(gè)問題。

　　FreeCodeCamp很好地解釋了這種結(jié)構(gòu)：

　　模塊化結(jié)構(gòu)提供了與整個(gè)工程團(tuán)隊(duì)協(xié)作的可能性。因此，它可以快速生產(chǎn)適用于所有平臺(tái)的產(chǎn)品。如果你從消息的角度創(chuàng)建概念設(shè)計(jì)，那么集成方法將更加有用。

　　簡(jiǎn)而言之，網(wǎng)格的復(fù)雜性或簡(jiǎn)單性與你溝通了什么?

　　4.創(chuàng)建組件庫

　　從按鈕到圖標(biāo)再到卡片或彈出窗口，創(chuàng)建一個(gè)組件庫，使設(shè)計(jì)中元素的所有使用保持一致。

　　按鈕不應(yīng)在一頁上為藍(lán)色圓圈，而在另一頁上不應(yīng)為紅色正方形。圖標(biāo)在一頁上不應(yīng)為線條樣式，而在另一頁上不應(yīng)為全彩色。這種不一致可能使用戶質(zhì)疑他們是否錯(cuò)誤地離開了你的網(wǎng)站。

　　一個(gè)好的組件庫包括在設(shè)計(jì)和使用規(guī)則中構(gòu)建頁面所需的所有元素-每個(gè)設(shè)備的大小和比例，以及iOS和Android設(shè)備的調(diào)整。

　　雖然在前端構(gòu)建通用組件似乎是一件大事，但在稍后的開發(fā)過程中卻可以輕松創(chuàng)建新頁面。

　　5.強(qiáng)調(diào)圖像風(fēng)格

　　無論你是使用照片，視頻還是插圖，創(chuàng)建和維護(hù)圖像樣式都非常重要。這是用戶會(huì)記住并與你的網(wǎng)站或品牌相關(guān)聯(lián)的最強(qiáng)大的視覺資產(chǎn)之一。

　　這種風(fēng)格與照片裁剪有關(guān)，包括緊密與寬，濾鏡的使用，視頻的速度和構(gòu)圖風(fēng)格。

　　在下面查看Smashmallow中的多個(gè)元素。即使未分組，它們也包含將圖像與品牌聯(lián)系起來的共同元素。(不是每個(gè)圖像上都有熱氣球。)此圖像樣式確定了該公司的名稱以及他們與用戶的聯(lián)系方式。

　　6.動(dòng)畫制作規(guī)則

　　動(dòng)畫元素也應(yīng)遵循一組基本規(guī)則。他們移動(dòng)得快還是慢?他們是獨(dú)自移動(dòng)還是僅在懸停狀態(tài)下移動(dòng)?

　　這些交互也有助于建立視覺識(shí)別。動(dòng)畫可以為項(xiàng)目設(shè)置基調(diào)。使用或不使用，他們可以說出很多關(guān)于你是誰以及你想成為什么樣的人的信息。

　　從下面的Dribbble拍攝的這張莫吉托具有圓周運(yùn)動(dòng)。考慮使用相同視覺語言的其他動(dòng)畫的外觀。它們也可能以相同的循環(huán)方式和相似的速度移動(dòng)。

　　7.匹配單詞和視覺效果

　　為了使視覺語言有效，它必須與設(shè)計(jì)中使用的實(shí)際語言相匹配。如果單詞和視覺元素不匹配，則可能會(huì)使用戶感到困惑。

　　元素應(yīng)該協(xié)同工作以創(chuàng)建一個(gè)整體的通信包，所有通信都強(qiáng)調(diào)同一件事。

　　下面的史蒂芬妮(Steffany)使用顏色、女性標(biāo)志和文字來顯示她的網(wǎng)站的所有內(nèi)容。這些作品協(xié)同工作以創(chuàng)建整體圖片，并且不會(huì)與不同的文本和視覺消息競(jìng)爭(zhēng)。

　　8.忠于自己

　　視覺語言只有在可信的情況下才能起作用。它必須代表你和誰。

　　你能想象sesame street沒有角色嗎?這將是非常困難的。

　　該品牌的整體視覺識(shí)別圍繞Big Bird和Elmo等品牌建立。設(shè)計(jì)的每一點(diǎn)都體現(xiàn)了這一點(diǎn)。為了進(jìn)一步聯(lián)系電視節(jié)目和卡通人物的視覺識(shí)別，請(qǐng)注意在網(wǎng)站設(shè)計(jì)中如何同時(shí)使用兩者。這有助于從視覺上將幻想和現(xiàn)實(shí)融合在一起，以維護(hù)品牌的形象。

　　9.保持一致

　　一旦為視覺語言制定了一套指南，請(qǐng)遵循這些指南。在構(gòu)建視覺語言時(shí)，最大的失誤是不一致。

　　FreeCodeCamp指出，一種設(shè)計(jì)語言應(yīng)回答以下問題。它們也是你是否尊重視覺效果的基準(zhǔn)。

　　●我們使用什么顏色?

　　●LOGO放在哪里?

　　●是否在其他地方使用了這種模式?

　　●最新的文檔是什么?

　　●我們?nèi)绾沃谱鬟@個(gè)動(dòng)畫?

　　●這是來自組件庫嗎?

　　請(qǐng)注意，Corby可以肯定這些問題的答案。LOGO放置在同一位置，始終使用一致的顏色，并且以相同方式使用圖案/動(dòng)畫。

　　10.制定樣式指南并加以實(shí)施

　　建立一種視覺語言并將其編纂。

　　然后由某人負(fù)責(zé)執(zhí)行。你的身份太重要了，不能碰運(yùn)氣。人類天生就是視覺。視覺語言可能是將用戶連接到你的網(wǎng)站或品牌的最強(qiáng)大的元素之一。