文章分享了提升視覺設(shè)計(jì)能力的3個(gè)小技巧，希望能給你帶來幫助。

在篩選了數(shù)百份初級(jí)設(shè)計(jì)師的簡(jiǎn)歷之后，我發(fā)現(xiàn)一個(gè)通用的問題。設(shè)計(jì)師，尤其是初級(jí)設(shè)計(jì)師，都非常關(guān)注 UX 以及被很多咨詢公司傳播的設(shè)計(jì)思維。他們都非常缺乏將生活中的事物引入設(shè)計(jì)中的能力，簡(jiǎn)歷中的作品千篇一律地展示了他們?cè)谒囆g(shù)學(xué)校里學(xué)到的視覺設(shè)計(jì)功底。

截止2017年4月，Glassdoor 的調(diào)查結(jié)果顯示，很多公司傾向于招聘具有端到端設(shè)計(jì)能力的產(chǎn)品設(shè)計(jì)師。

我是以平面設(shè)計(jì)師的身份進(jìn)入設(shè)計(jì)行業(yè)的，經(jīng)過反復(fù)的試錯(cuò)，我了解到布局和構(gòu)圖的藝術(shù)。從我的設(shè)計(jì)作品里也能反映我這幾年的設(shè)計(jì)歷程，這是我在學(xué)校里的第一個(gè)作品：

幸好，視覺設(shè)計(jì)能力會(huì)隨著經(jīng)驗(yàn)的增多而提升。這是我最近的作品：

我已經(jīng)非常注重布局和構(gòu)圖

今天，我將要分享提升視覺設(shè)計(jì)能力的三個(gè)小技巧。

1 建立視覺層次結(jié)構(gòu)

視覺層次結(jié)構(gòu)是根據(jù)信息的相對(duì)重要程度組織信息，并通過在布局上排列各個(gè)部分（排版、線條、形狀、顏色、圖片和留白）。通過強(qiáng)大的視覺層次和視覺構(gòu)圖做設(shè)計(jì)，可以引導(dǎo)用戶的視線。例如，我們可以看看 Airbnb 是在他們的網(wǎng)站是怎么對(duì)各個(gè)部分進(jìn)行排放的：

如上圖，你的眼睛會(huì)先看到哪部分，再看到哪部分呢？如果你不確定，那我們可以先把圖片轉(zhuǎn)成黑白色再試一次。相信你已經(jīng)注意到你的眼睛是最先看到飽和度更明顯的部分。

視覺層次結(jié)構(gòu)是通過組件的位置來確定優(yōu)先級(jí)的，從而使得用戶可以先看到高優(yōu)先級(jí)的組件，最后看到低優(yōu)先級(jí)的組件。要做到這一點(diǎn)，需要平衡用戶需求和商業(yè)目標(biāo)。對(duì)于
Airbnb 來說，商業(yè)目標(biāo)是增加注冊(cè)用戶數(shù)，而用戶需求是用戶想要找到住宿的地方。換句話說，從這個(gè)頁面的設(shè)計(jì)來看，業(yè)務(wù)需求勝過用戶需求。

強(qiáng)大的視覺層次和構(gòu)圖會(huì)通過布局引導(dǎo)用戶的視線。而視覺層次不佳會(huì)導(dǎo)致溝通不暢。

下圖是視覺層次不佳的例子：

通過使用不同風(fēng)格的設(shè)計(jì)組件的方式來實(shí)現(xiàn)視覺層次效果，并在感覺沒有頭緒的時(shí)候嘗試黑白色的設(shè)計(jì)組件。這是一些組件的小技巧：

• 字體：大號(hào)加粗的字體會(huì)吸引用戶的注意力，但是要謹(jǐn)慎使用標(biāo)題。
• 線條：線條有助于信息的分組展示，同時(shí)它也可以填補(bǔ)尷尬的留白空間。
• 顏色：深色以及飽和度高的顏色有助于吸引用戶的注意力。
• 形狀：簡(jiǎn)單的形狀（如：圓形、三角形、正方形）看上去更加美觀。
• 圖片：圖片可以非常誘人，但不要使用有版權(quán)的圖片。
• 留白：設(shè)計(jì)中經(jīng)常使用留白來分隔信息或突出顯示重要的信息。

如果你沒有視覺設(shè)計(jì)組件的基礎(chǔ)知識(shí)，Steven Bradley 曾經(jīng)寫過這方面的文章 ：

• lines-線條
• color-顏色
• shapes-形狀
• space- 留白

2 利用 Gestalt 法則

所有的設(shè)計(jì)師都應(yīng)該了解?Gestalt Theory?以及人們視覺感知的法則。Gestalt Theory 是德國的心理學(xué)家在 20 世紀(jì)初發(fā)展起來的，他們?yōu)槿藗冮_展視覺體驗(yàn)提供了理論依據(jù)。現(xiàn)在的設(shè)計(jì)師都把 Gestalt 法則當(dāng)成視覺溝通的有效框架。

通過將目標(biāo)受眾與高影響力的 Gestalt 圖片相匹配，我們可以縮短有效溝通的距離?！狦regg Berryman

Smashing Magazine已經(jīng)解釋了Gestalt Theory 的原理，所以，我們把重點(diǎn)放在案例上。

內(nèi)容／背景

一般來說，背景就是指內(nèi)容的背景。設(shè)計(jì)的目標(biāo)就是保證用戶關(guān)注內(nèi)容，并且可以明確區(qū)分內(nèi)容和背景。使用高對(duì)比度的顏色可以明確的區(qū)分內(nèi)容和背景，但是使用低對(duì)比度的顏色則無法達(dá)到這種效果。設(shè)計(jì)新手應(yīng)該盡可能保證背景的簡(jiǎn)單（使用淺色背景或者微妙的紋理背景），并且盡量減少內(nèi)容的顏色數(shù)量。

內(nèi)容的接近程度 Proximity

人們會(huì)自然地將鄰近的物體自動(dòng)歸為一組。如果鄰近的內(nèi)容比較接近，說明了同一個(gè)問題，那我們可以使用不同的顏色使他們成為一組，這樣用戶也不會(huì)產(chǎn)生多的聯(lián)想。當(dāng)然，不同間距或者留白也能體現(xiàn)這種關(guān)系。

相似性

人們會(huì)自然地認(rèn)為看起來相似的物體是相關(guān)的。相似的物體一般具有相似的顏色、形狀、大小或者方向。使用相似的外觀可以讓實(shí)際相關(guān)的物體看上去相關(guān)。

連續(xù)性

人眼會(huì)根據(jù)順序觀察線條、曲線或者其它物體。當(dāng)連續(xù)性的物體和其它物體相關(guān)時(shí)，我們會(huì)自然地認(rèn)為這是兩個(gè)不同的物體。在設(shè)計(jì)時(shí)可以使用顏色進(jìn)一步加強(qiáng)人眼的這種感覺。

我們會(huì)自然地將其它物體從連續(xù)性的物體中分出來。

封閉性

當(dāng)我們看到不完整的物體或者不完全封閉的空間時(shí)，我們的大腦會(huì)自動(dòng)填補(bǔ)缺失的部分，從而使得我們認(rèn)為它們是完整的。設(shè)計(jì)師可以使用封閉性原則在視覺上創(chuàng)造更加引人注目的圖形。

3 檢查你的字體！

設(shè)計(jì)師應(yīng)該確保文字清晰易讀。隨著我的年齡越來越大，我越來越對(duì)字體小、顏色淺的文字失去耐心。在文字這方面，出版社有很多很好的經(jīng)驗(yàn)：

從這兩種字體開始

字體是具有特定大小和重量的字體樣式。Jon Tan 是這么說的：

經(jīng)驗(yàn)法則是使用一個(gè)標(biāo)題字體和一個(gè)正文字體，并且每個(gè)布局中的字體不超過 3 個(gè)。如果你有很多的標(biāo)題或樣式（引號(hào)，鏈接等），那么你就需要更多的字體。Medium 使用了兩種字體樣式（Lucida Grande和Cambria）和 7種字體。

通過 Hongkiat 字體工具找到合適的字體樣式。很多設(shè)計(jì)師使用 Google 字體樣式，因?yàn)樗?818 種字體樣式可供選擇，最重要的是它免費(fèi)。當(dāng)然，也有一些設(shè)計(jì)師付費(fèi)使用 MyFonts 或者 Fonts.com 的字體樣式。

內(nèi)容的最小字體為 14px

我曾經(jīng)非常喜歡極細(xì)的字體。當(dāng)我發(fā)現(xiàn)很多用戶很努力地想要看清我 12px 大小的字體時(shí)，我就不再有這種心態(tài)，同時(shí)我發(fā)現(xiàn) 14px 為最小字體有助于提高內(nèi)容的可讀性。而且現(xiàn)在的 WEB 設(shè)計(jì)趨勢(shì)是字體越來越大，比如這篇文章的最小字體是 21px。當(dāng)然也有例外，當(dāng)你想要閱讀類似免責(zé)聲明的內(nèi)容時(shí)，你會(huì)發(fā)現(xiàn)字體是比 21px 還要小的。當(dāng)然你也可以看一下 Christian Miller 的文章

Why your body text is too small?。

行高 = 字體的 1.5 ～ 2 倍

行高是段落中句子之間的空間大小。如果行高太小，會(huì)使文字內(nèi)容看上去很擁擠；行高太大，會(huì)讓文字內(nèi)容看上去不相關(guān)。

許多具有認(rèn)知障礙的人很難閱讀單倍行距的文字內(nèi)容。如果行高為 1.5 倍或者 2 倍，則會(huì)使他們更易于閱讀?！獁3c.org

當(dāng)然，除了行高，短落與段落之間也有間距。根據(jù) W3C的網(wǎng)頁內(nèi)容可訪問性準(zhǔn)則（?W3c’s web content accessibility guidelines），我們應(yīng)該將段落高度設(shè)置為行高的 1.5 倍以上。

最佳行字符數(shù)：66 個(gè)字符

每行的字符數(shù)是保證可讀性的關(guān)鍵因素。如果一行字符數(shù)太多，用戶很難集中注意力看完；如果一行字符數(shù)太短，則會(huì)打斷用戶的閱讀節(jié)奏。因此，許多設(shè)計(jì)師認(rèn)為The Elements of Typographic Style是最佳字符數(shù)的行業(yè)標(biāo)準(zhǔn)：

45 到 75 個(gè)字符的行長(zhǎng)度對(duì)用戶來說是最合適的閱讀長(zhǎng)度。66 個(gè)字符（包括數(shù)字和空格）的長(zhǎng)度普遍認(rèn)為是最理想的?！?Robert Bringhurst

W3c的網(wǎng)頁內(nèi)容可訪問性準(zhǔn)則也強(qiáng)化了這一標(biāo)準(zhǔn)，它說的是行長(zhǎng)度應(yīng)該不超過80個(gè)字符或字”。

— 全文完 —

感謝閱讀！

原文：3 ways to improve your visual design skills

來源：medium

作者：Jules Cheung

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

題圖由譯者提供