提高視覺設計能力的三種方法

原文：3 way to Improve Your Visual Design Skills

原文地址：http://heydesigner.com/blog/improving-visual-design-skills/

作者：Jules Cheung

翻譯：Chleese

為新人提供一些視覺設計小技巧

當我看過了許多初級設計師的作品集後，我注意到一種發展趨勢。設計師（大多數來自培訓機構）都把重點集中在UX，傳播和普及Design Thinking的思想觀念。他們缺乏一種把生活的感受融進設計的能力，同時，作品集內容也很單調，就類似於美術學校中玻璃櫥窗中展示的基本作品。

2017年4月，Glassdoor的一項快速研究表明了很多企業開始僱傭產品設計師去任職端到端的設計。

伴隨著困難和錯誤，我開始了我的職業生涯，作為一名平面設計師，學習布局和結構排版的方法。反觀我的職業歷程，自從我開始做第一個學校的項目後我取得了很大的進步：

幸運的是，隨著時間的的積累，可以逐步提高視覺設計能力！這是我近期的一個項目：

好了，接下來我將給大家分享三個關於視覺設計的小技巧。

建立視覺分層系統

視覺分層系統是可以更有次序的組織相關信息部分，該系統的建立基於布局中組織好的組件（排版，線，形狀，圖像，顏色和空間）。按照視覺分層系統去設計和創作將會讓用戶無間隙有次序的瀏覽所需傳達的信息。舉個例子，讓我們一起看看Airbnb網站是如何設計網站的排版部分：

當你看到這個頁面時，會先看到哪部分並且是按照什麼次序呢？如果你不確定答案，可以嘗試把這頁面變成黑白色。並留意自己的眼睛是如何放大化黑暗（更具飽和度）的組成部分。

視覺分層系統是建立在組成部分合理安排的基礎上，優先顯示的信息在前，次要的信息在後。這會經常作為一個練習 — 在商業目標下權衡用戶的需求。對於Airbnb來說，商業目標就是當用戶需要尋找地方去住時，去讓用戶創建一個關聯的賬戶。換句話說，在頁面上商業目標勝過用戶所需。

一個好的視覺分層系統和構成可以使你的視線流暢的瀏覽完整體布局。一個視覺分層不足的系統會讓你對所傳達的信息產生誤解和困惑。

讓我們來看下面3個案例：

練習建立視覺分層系統。對於可調整的組成部分，我有下面幾個建議：

• 字體 — 更大和更粗的字體可以抓住人的視線，但對於標題來說你應該儘可能保守的使用這個方法。
• 分割線 — 線幫助將信息分組，提供了布局，彌補了尷尬的空白空間。
• 顏色 — 更暗和更具飽和度的顏色容易引起人們的關注。
• 圖像 — 圖片可以是很具吸引力的，但是要盡量遠離攝影。
• 空間留白 — 留白會是你的好幫手。利用留白可以將信息分組或是單獨隔離（強調）一件重要的事情。

如果你需要幫助自己理解視覺設計組件的標準，Steven Bradley寫了一些很精彩的文章，可以參考，線，顏色，形狀和空間。

運用格式塔理論

每位設計師都應該了解格式塔理論和視覺感知原則。格式塔理論在20世紀初由德國心理學家提出，提出了人們組織視覺經驗的理論化方法。如今，設計師使用格式塔原則作為一種更有效的加強信息的視覺上聯繫的設計框架。

「我們可能會減弱有效的聯繫，選擇高影響的格式塔圖片匹配目標用戶。」 —? Gregg Berryman

Smashing Magazine已經解釋了格式塔理論的規則，所以我將會多給你們舉實例去理解。

主體/背景

通常來說，背景是指主體（目標）存在於背景上面的（當物體重疊時，通常把小的看作背景之上的主體）。目的是保持注意力在這個主體上並且能明顯的區別於所在背景。利用高對比度的顏色設計將會建立強烈的主體/背景關係，當然，低對比度的顏色將會削減他們之間的關係。新人設計頁面時，應該保持背景的簡潔（可適當運用淺純色或細微紋理）並且目標不要運用過多種顏色。

接近性

在視覺上，利用接近性可以將目標分組。可以結合運用顏色使分組更明確。與接近性相反，空間留白，也可以加強分組或是隔離不相關的元素。

相似性

相似的物體會被認為是相關的。相似的物體可以擁有相同的顏色，形狀，尺寸大小，或是朝著相同的方向。運用相似性原理可以使相關的物體產生緊密的關聯性。

連續性

人的視線會隨著線，曲線或者按順序放置的目標保持連續的觀察。當連續的目標被其他主體打斷，我們的眼睛會自然而然認為這些主體之間是不同的實體（不屬於一組）。運用顏色可以加強連續性和連貫性。

封閉性

不完整的主體，或是有留白導致不完全封閉的物體，會被大腦感知為是完整的物體，大腦自動填補了空白處。設計師可以利用這條封閉性原則去創造引人注目的圖形。

檢查你使用的字體

設計師應該確信文字的清晰性和易讀性。年齡越大，我將會對這些字體更加缺乏耐心，比如說超難解讀的，超細，淺色字體等。關於文字排版這裡有一些很棒的建議你可以記住:

開頭空兩個文字

一個文字（又名字形體系）就是設定了具體字型大小大小和粗細的文字。Jon Tan解釋說:

「就拿使用Georgia字體來舉例，「常規體Georgia字」，「斜體Georgia字」，「粗體Georgia字」和「粗斜體Georgia字」，在我的認知中，這些字體構成了Georgia字形系統」。

經驗告訴我們，用一種標題主題字體和另一種字體作為內容主體字體，但在一個頁面布局中最好不要多於2到3種字體。一般來說，標題或類型越多(引用，鏈接等)，你就需要運用更多的字體。下圖所示的例子，是運用2種不同的字形系統中(Lucida Grande and Cambria) 的7種字體。

在Hongkiat網站上面的字體工具尋找最匹配的字體。有很多設計師用Google字體，因為網站上有818種免費的字體形式可供挑選。還有一些設計師訂閱付費服務，比如MyFonts或是http://Fonts.com。

內容主體使用的最小字是14px

我曾經加入了「微小的文字更時髦」的陣營。在看過了使用者掙扎的讀我設計出的12px的字的內容後，發現14px為易讀的最小字型大小。現如今，網頁設計的趨勢是字型大小變得更大，如同文章中已證明21px的字作為主體內容文字大小。除了你需要強調一些事情的情況，如頁面要公告免責聲明。你可以查看Christian Miller的作品，關於為什麼你的內容字體太小。

行高=1.5-2倍字型大小

行高指的是段落中句與句之間空白的高度。如果這個值太小會使讀者感到文章行與行間太密集，文字都擠在一起的感覺，行高值太大的話會導致句與句之間被切割一樣，瀏覽時會感覺不連貫。

「一個使用單倍行距的閱讀段，會導致許多人認知上的閱讀障礙。使用1.5到2倍間的間距，可以讓人們在剛結束閱讀一行後，更容易開始下一行。」—http://w3c.org

除了行高，段高是指段落之間的空白數量。根據W3C的Web內容可訪問性指南，你應該設置段落之間的高度大於1.5倍行距。

最佳句子字元數-66個字元

每個句子中的字元數是保證可讀性的關鍵。一個句子中字元數過長連讀會困難，當然太短的話會打破閱讀的節奏。許多設計師把元素排版風格作為最佳句子字元數的商業標準。

任何使用45-75個字元是廣泛的情況-這個字元數量範圍被認為是單欄布局中使用襯線字體大小的頁面，令人滿意的長度。一行66個字元(包括字母和空格)被廣泛認為是很理想的情況。—?Robert Bringhurst

W3C的Web內容可訪問性指南加強了這一標準，闡述一個句子可以容納「不超過80個字元和符號。」

其他的視覺設計小技巧

1. 學習配色理論規則。
2. 綜合考慮顏色的使用基準。
3. 如果不是你非常喜歡圖形創作，你可以使用免費的圖標素材網站，會使你的創作加快速度，例如Material Icons， Ionicon，或Noun Project等。
4. 當你想垂直居中一個目標，把它先置於較真正的居中點稍偏上的位置，再去調整它，可以避免視覺錯覺。

以上是我初次翻譯的成品，感謝Jules的文章，感謝你的觀看。

總有人要贏，為什麼不是你呢？因為你沒有努力

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：