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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 利用 Gestalt 法則

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

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

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

內(nèi)容／背景

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

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

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

相似性

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

連續(xù)性

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

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

封閉性

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

3 檢查你的字體！

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

從這兩種字體開始

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

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

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

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

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

Why your body text is too small?。

行高 = 字體的 1.5 ～ 2 倍

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

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

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

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

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

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

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

— 全文完 —

感謝閱讀！

原文：3 ways to improve your visual design skills

來源：medium

作者：Jules Cheung

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

題圖由譯者提供