把你的工作當(dāng)作一門(mén)手藝，因?yàn)榭傆幸恍┠隳芨倪M(jìn)的東西?？考?lì)自己成為一個(gè)更好設(shè)計(jì)師。

上周，我的一位讀者發(fā)了一個(gè)問(wèn)題：如何成為一個(gè)好的視覺(jué)設(shè)計(jì)師？

正如我在想如何回答這個(gè)問(wèn)題一樣。最近我決定自學(xué)普通話。當(dāng)談到學(xué)習(xí)新的語(yǔ)言時(shí)，你首先要從基礎(chǔ)知識(shí)開(kāi)始。名詞、代詞和動(dòng)詞的構(gòu)成是傳達(dá)一個(gè)復(fù)雜想法的基礎(chǔ)。

語(yǔ)言是人們彼此交流方式的一種概念。視覺(jué)設(shè)計(jì)是一種視覺(jué)語(yǔ)言。學(xué)習(xí)視覺(jué)設(shè)計(jì)與學(xué)習(xí)一門(mén)新的語(yǔ)言沒(méi)有什么不同。

好的視覺(jué)設(shè)計(jì)師并不是天生的。他們是后天養(yǎng)成的。成為好的視覺(jué)設(shè)計(jì)師的關(guān)鍵是需要嚴(yán)謹(jǐn)?shù)?。如果你下意識(shí)地努力，你將會(huì)提升為視覺(jué)設(shè)計(jì)師。

這里有一些你應(yīng)該掌握的基礎(chǔ)知識(shí)，可以把你的視覺(jué)設(shè)計(jì)提升到一個(gè)新的高度。

原理1：回歸基本類(lèi)型

你可以通過(guò)查看他們的排版來(lái)告訴很多設(shè)計(jì)師。因?yàn)檫@個(gè)類(lèi)型是設(shè)計(jì)的基礎(chǔ)。

Type as?imagery

你可以利用類(lèi)型創(chuàng)建整個(gè)設(shè)計(jì)。也可以將類(lèi)型設(shè)計(jì)作為基礎(chǔ)，從選擇的字體中獲取微妙的隊(duì)列。為了改進(jìn)設(shè)計(jì)中的排版，首先要學(xué)習(xí)基礎(chǔ)知識(shí)。

開(kāi)發(fā)描述類(lèi)型的詞匯表。了解跟蹤，字距和領(lǐng)先意義等術(shù)語(yǔ)。文章?A Beautifully Illustrated Glossary Of Typographic Terms You Should Know是學(xué)習(xí)這些術(shù)語(yǔ)的一個(gè)很好的視覺(jué)資源。

然后，如果你想全面了解如何將排版應(yīng)用于網(wǎng)絡(luò)，請(qǐng)看?Web Typography: The Elements?of?Typographic Style Applied to the Web。

Font pairing can make or break a?design

最后，學(xué)習(xí)如何配對(duì)字體。?FontWolf和?FontPair是個(gè)很大的資源。將字體配對(duì)可以大大改變?cè)O(shè)計(jì)的動(dòng)態(tài)。

原理2：利用空間創(chuàng)造平衡

間距有助于在你的設(shè)計(jì)中建立垂直和水平運(yùn)動(dòng)。它是創(chuàng)建視覺(jué)層次和形成元素之間的關(guān)鍵因素。

Create balance and visual?harmony

你可以隨時(shí)查看Behance和?Dribbble等網(wǎng)站，了解如何使用空間元素。但主要的是利用空間開(kāi)發(fā)自己的直覺(jué)來(lái)創(chuàng)造視覺(jué)的平衡和和諧。

學(xué)習(xí)排版時(shí)，你要注意到間距的重要性。調(diào)整字體間距是開(kāi)發(fā)你的眼間距的很大鍛煉。因此，我建議你嘗試KernType這個(gè)游戲，這可以把你的字距調(diào)整解決方案與打字機(jī)的解決方案進(jìn)行比較。

Simplification of award winning poster by Craig?Welsh

另一項(xiàng)有助于開(kāi)發(fā)你的眼睛的練習(xí)如下：利用現(xiàn)有的設(shè)計(jì)，繪制x和y軸，將設(shè)計(jì)簡(jiǎn)化為基本形狀，分析設(shè)計(jì)如何平衡，然后重新排列元素。密切關(guān)注負(fù)面空間如何影響元素的平衡。

原理3：使用大小建立視覺(jué)層次

當(dāng)創(chuàng)建視覺(jué)層次結(jié)構(gòu)時(shí)，規(guī)模是必須條件。通過(guò)利用大小來(lái)傳達(dá)元素之間的視覺(jué)關(guān)系，建立流程。

規(guī)?；蔷W(wǎng)格有可用性的原因之一。通過(guò)網(wǎng)格使元素的比例大小表達(dá)的更具有重要性。

一旦確定了一個(gè)元素的大小，請(qǐng)?jiān)谄渌袑?shí)例中保持相同。在設(shè)計(jì)上，一致性是王者。

Use size to establish visual hierarchy

這是一個(gè)有助于開(kāi)發(fā)你眼睛大小的練習(xí)。

關(guān)鍵是要求反饋。

Sketch或wireframe的登錄頁(yè)面。然后讓朋友看看你的設(shè)計(jì)。讓他們?nèi)Τ鲎疃嗟脑?。然后，讓他們根?jù)視覺(jué)重量對(duì)圓圈的元素進(jìn)行編號(hào)。結(jié)果是你預(yù)期的嗎？

做這個(gè)練習(xí)時(shí)，請(qǐng)注意以下幾點(diǎn)：

• 目標(biāo)網(wǎng)頁(yè)的轉(zhuǎn)化目標(biāo)是什么？ 你如何優(yōu)化以達(dá)到你的目標(biāo)？
• 不同元素之間的關(guān)系是什么？ 你想強(qiáng)調(diào)的是什么元素？
• 你的布局成功是否引導(dǎo)用戶瀏覽頁(yè)面？

原理4：利用顏色傳達(dá)意義

顏色扮演很多角色。它傳達(dá)意義，創(chuàng)造情感共鳴，并使設(shè)計(jì)統(tǒng)一。

Color helps convey meaning in?design

為深入了解色彩，你可以讀我的文章Designing in Color。以下是文章的幾個(gè)要點(diǎn)。

• 在選擇調(diào)色板之前確定你的設(shè)計(jì)目的。好的設(shè)計(jì)使其調(diào)色板與其目的相一致。
• 確定你的受眾人群。人們對(duì)顏色的看法不同。色彩根據(jù)人們的個(gè)人喜好、文化教養(yǎng)和經(jīng)歷對(duì)人們產(chǎn)生不同的影響。
• 選擇調(diào)色板時(shí)，簡(jiǎn)單化是關(guān)鍵。選擇中性背景顏色。然后選擇主要和次要重音顏色。最后根據(jù)你的其他顏色，為不同的用戶界面狀態(tài)選擇一個(gè)錯(cuò)誤和成功的顏色。

一旦你對(duì)色彩理論的基礎(chǔ)知識(shí)有了很好的了解，顏色就會(huì)落到實(shí)驗(yàn)和迭代之中。 積極嘗試突破您的舒適區(qū)，并嘗試新的調(diào)色板。

這是一個(gè)有助于開(kāi)發(fā)你的眼睛顏色的練習(xí)。

花時(shí)間為你周?chē)氖挛锞幹普{(diào)色板，如照片，雜志和你最喜愛(ài)的節(jié)目。然后利用現(xiàn)有的設(shè)計(jì)并應(yīng)用新的調(diào)色板。

注意到它是如何改變?cè)O(shè)計(jì)的語(yǔ)氣和基調(diào)。它的改變是否有意義？

把你的工作當(dāng)作一門(mén)手藝，因?yàn)榭傆幸恍┠隳芨倪M(jìn)的東西。靠激勵(lì)自己成為一個(gè)更好設(shè)計(jì)師。

原文地址：https://medium.freecodecamp.com/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda

原文作者：Jonathan Z. White

譯者：SKYUI

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