提高視覺設(shè)計(jì)能力的三種方法

4 評(píng)論 17039 瀏覽 83 收藏 13 分鐘

文章將為大家分享三個(gè)關(guān)于視覺設(shè)計(jì)的小技巧!一起看看吧!

當(dāng)我看過了許多初級(jí)設(shè)計(jì)師的作品集后,我注意到一種發(fā)展趨勢(shì)。設(shè)計(jì)師(大多數(shù)來自培訓(xùn)機(jī)構(gòu))都把重點(diǎn)集中在UX,傳播和普及Design Thinking的思想觀念。他們?nèi)狈σ环N把生活的感受融進(jìn)設(shè)計(jì)的能力,同時(shí),作品集內(nèi)容也很單調(diào),就類似于美術(shù)學(xué)校中玻璃櫥窗中展示的基本作品。

2017年4月,Glassdoor的一項(xiàng)快速研究表明了很多企業(yè)開始雇傭產(chǎn)品設(shè)計(jì)師去任職端到端的設(shè)計(jì)。

伴隨著困難和錯(cuò)誤,我開始了我的職業(yè)生涯,作為一名平面設(shè)計(jì)師,學(xué)習(xí)布局和結(jié)構(gòu)排版的方法。反觀我的職業(yè)歷程,自從我開始做第一個(gè)學(xué)校的項(xiàng)目后我取得了很大的進(jìn)步:

幸運(yùn)的是,隨著時(shí)間的的積累,可以逐步提高視覺設(shè)計(jì)能力!這是我近期的一個(gè)項(xiàng)目:

好了,接下來我將給大家分享三個(gè)關(guān)于視覺設(shè)計(jì)的小技巧。

建立視覺分層系統(tǒng)

視覺分層系統(tǒng)是可以更有次序的組織相關(guān)信息部分,該系統(tǒng)的建立基于布局中組織好的組件(排版,線,形狀,圖像,顏色和空間)。按照視覺分層系統(tǒng)去設(shè)計(jì)和創(chuàng)作將會(huì)讓用戶無間隙有次序的瀏覽所需傳達(dá)的信息。舉個(gè)例子,讓我們一起看看Airbnb網(wǎng)站是如何設(shè)計(jì)網(wǎng)站的排版部分:

當(dāng)你看到這個(gè)頁面時(shí),會(huì)先看到哪部分并且是按照什么次序呢?如果你不確定答案,可以嘗試把這頁面變成黑白色。并留意自己的眼睛是如何放大化黑暗(更具飽和度)的組成部分。

視覺分層系統(tǒng)是建立在組成部分合理安排的基礎(chǔ)上,優(yōu)先顯示的信息在前,次要的信息在后。這會(huì)經(jīng)常作為一個(gè)練習(xí) — 在商業(yè)目標(biāo)下權(quán)衡用戶的需求。對(duì)于Airbnb來說,商業(yè)目標(biāo)就是當(dāng)用戶需要尋找地方去住時(shí),去讓用戶創(chuàng)建一個(gè)關(guān)聯(lián)的賬戶。換句話說,在頁面上商業(yè)目標(biāo)勝過用戶所需。

一個(gè)好的視覺分層系統(tǒng)和構(gòu)成可以使你的視線流暢的瀏覽完整體布局。一個(gè)視覺分層不足的系統(tǒng)會(huì)讓你對(duì)所傳達(dá)的信息產(chǎn)生誤解和困惑。

讓我們來看下面3個(gè)案例:

練習(xí)建立視覺分層系統(tǒng)。對(duì)于可調(diào)整的組成部分,我有下面幾個(gè)建議:

  • 字體?— 更大和更粗的字體可以抓住人的視線,但對(duì)于標(biāo)題來說你應(yīng)該盡可能保守的使用這個(gè)方法。
  • 分割線?— 線幫助將信息分組,提供了布局,彌補(bǔ)了尷尬的空白空間。
  • 顏色?— 更暗和更具飽和度的顏色容易引起人們的關(guān)注。
  • 圖像?— 圖片可以是很具吸引力的,但是要盡量遠(yuǎn)離攝影。
  • 空間留白?— 留白會(huì)是你的好幫手。利用留白可以將信息分組或是單獨(dú)隔離(強(qiáng)調(diào))一件重要的事情。

如果你需要幫助自己理解視覺設(shè)計(jì)組件的標(biāo)準(zhǔn),Steven Bradley寫了一些很精彩的文章,可以參考,線,顏色,形狀和空間。

運(yùn)用格式塔理論

每位設(shè)計(jì)師都應(yīng)該了解格式塔理論和視覺感知原則。格式塔理論在20世紀(jì)初由德國(guó)心理學(xué)家提出,提出了人們組織視覺經(jīng)驗(yàn)的理論化方法。如今,設(shè)計(jì)師使用格式塔原則作為一種更有效的加強(qiáng)信息的視覺上聯(lián)系的設(shè)計(jì)框架。

“我們可能會(huì)減弱有效的聯(lián)系,選擇高影響的格式塔圖片匹配目標(biāo)用戶?!?—? Gregg Berryman

Smashing Magazine已經(jīng)解釋了格式塔理論的規(guī)則,所以我將會(huì)多給你們舉實(shí)例去理解。

主體/背景

通常來說,背景是指主體(目標(biāo))存在于背景上面的(當(dāng)物體重疊時(shí),通常把小的看作背景之上的主體)。目的是保持注意力在這個(gè)主體上并且能明顯的區(qū)別于所在背景。利用高對(duì)比度的顏色設(shè)計(jì)將會(huì)建立強(qiáng)烈的主體/背景關(guān)系,當(dāng)然,低對(duì)比度的顏色將會(huì)削減他們之間的關(guān)系。新人設(shè)計(jì)頁面時(shí),應(yīng)該保持背景的簡(jiǎn)潔(可適當(dāng)運(yùn)用淺純色或細(xì)微紋理)并且目標(biāo)不要運(yùn)用過多種顏色。

接近性

在視覺上,利用接近性可以將目標(biāo)分組??梢越Y(jié)合運(yùn)用顏色使分組更明確。與接近性相反,空間留白,也可以加強(qiáng)分組或是隔離不相關(guān)的元素。

相似性

相似的物體會(huì)被認(rèn)為是相關(guān)的。相似的物體可以擁有相同的顏色,形狀,尺寸大小,或是朝著相同的方向。運(yùn)用相似性原理可以使相關(guān)的物體產(chǎn)生緊密的關(guān)聯(lián)性。

連續(xù)性

人的視線會(huì)隨著線,曲線或者按順序放置的目標(biāo)保持連續(xù)的觀察。當(dāng)連續(xù)的目標(biāo)被其他主體打斷,我們的眼睛會(huì)自然而然認(rèn)為這些主體之間是不同的實(shí)體(不屬于一組)。運(yùn)用顏色可以加強(qiáng)連續(xù)性和連貫性。

封閉性

不完整的主體,或是有留白導(dǎo)致不完全封閉的物體,會(huì)被大腦感知為是完整的物體,大腦自動(dòng)填補(bǔ)了空白處。設(shè)計(jì)師可以利用這條封閉性原則去創(chuàng)造引人注目的圖形。

檢查你使用的字體

設(shè)計(jì)師應(yīng)該確信文字的清晰性和易讀性。年齡越大,我將會(huì)對(duì)這些字體更加缺乏耐心,比如說超難解讀的,超細(xì),淺色字體等。關(guān)于文字排版這里有一些很棒的建議你可以記住:

開頭空兩個(gè)文字

一個(gè)文字(又名字形體系)就是設(shè)定了具體字號(hào)大小和粗細(xì)的文字。Jon Tan解釋說:

“就拿使用Georgia字體來舉例,“常規(guī)體Georgia字”,“斜體Georgia字”,“粗體Georgia字”和“粗斜體Georgia字”,在我的認(rèn)知中,這些字體構(gòu)成了Georgia字形系統(tǒng)”。

經(jīng)驗(yàn)告訴我們,用一種標(biāo)題主題字體和另一種字體作為內(nèi)容主體字體,但在一個(gè)頁面布局中最好不要多于2到3種字體。一般來說,標(biāo)題或類型越多(引用,鏈接等),你就需要運(yùn)用更多的字體。下圖所示的例子,是運(yùn)用2種不同的字形系統(tǒng)中(Lucida Grande and Cambria) 的7種字體。

在Hongkiat網(wǎng)站上面的字體工具尋找最匹配的字體。有很多設(shè)計(jì)師用Google字體,因?yàn)榫W(wǎng)站上有818種免費(fèi)的字體形式可供挑選。還有一些設(shè)計(jì)師訂閱付費(fèi)服務(wù),比如MyFonts或是Fonts.com。

內(nèi)容主體使用的最小字是14px

我曾經(jīng)加入了“微小的文字更時(shí)髦”的陣營(yíng)。在看過了使用者掙扎的讀我設(shè)計(jì)出的12px的字的內(nèi)容后,發(fā)現(xiàn)14px為易讀的最小字號(hào)?,F(xiàn)如今,網(wǎng)頁設(shè)計(jì)的趨勢(shì)是字號(hào)變得更大,如同文章中已證明21px的字作為主體內(nèi)容文字大小。除了你需要強(qiáng)調(diào)一些事情的情況,如頁面要公告免責(zé)聲明。你可以查看Christian Miller的作品,關(guān)于為什么你的內(nèi)容字體太小。

行高=1.5-2倍字號(hào)

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

“一個(gè)使用單倍行距的閱讀段,會(huì)導(dǎo)致許多人認(rèn)知上的閱讀障礙。使用1.5到2倍間的間距,可以讓人們?cè)趧偨Y(jié)束閱讀一行后,更容易開始下一行?!薄獁3c.org

除了行高,段高是指段落之間的空白數(shù)量。根據(jù)W3C的Web內(nèi)容可訪問性指南,你應(yīng)該設(shè)置段落之間的高度大于1.5倍行距。

最佳句子字符數(shù)-66個(gè)字符

每個(gè)句子中的字符數(shù)是保證可讀性的關(guān)鍵。一個(gè)句子中字符數(shù)過長(zhǎng)連讀會(huì)困難,當(dāng)然太短的話會(huì)打破閱讀的節(jié)奏。許多設(shè)計(jì)師把元素排版風(fēng)格作為最佳句子字符數(shù)的商業(yè)標(biāo)準(zhǔn)。

任何使用45-75個(gè)字符是廣泛的情況-這個(gè)字符數(shù)量范圍被認(rèn)為是單欄布局中使用襯線字體大小的頁面,令人滿意的長(zhǎng)度。一行66個(gè)字符(包括字母和空格)被廣泛認(rèn)為是很理想的情況。—?Robert Bringhurst

W3C的Web內(nèi)容可訪問性指南加強(qiáng)了這一標(biāo)準(zhǔn),闡述一個(gè)句子可以容納“不超過80個(gè)字符和符號(hào)?!?/p>

其他的視覺設(shè)計(jì)小技巧

  1. 學(xué)習(xí)配色理論規(guī)則。
  2. 綜合考慮顏色的使用基準(zhǔn)。
  3. 如果不是你非常喜歡圖形創(chuàng)作,你可以使用免費(fèi)的圖標(biāo)素材網(wǎng)站,會(huì)使你的創(chuàng)作加快速度,例如Material Icons,?Ionicon,或Noun Project等。
  4. 當(dāng)你想垂直居中一個(gè)目標(biāo),把它先置于較真正的居中點(diǎn)稍偏上的位置,再去調(diào)整它,可以避免視覺錯(cuò)覺。

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

 

翻譯:Chleese

作者:Jules Cheung

原文:3 way to Improve Your Visual Design Skills

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)習(xí)了,感謝作者。不過作為產(chǎn)品一枚,有什么系統(tǒng)化的提高視覺設(shè)計(jì)能力的書或者理論推薦嗎

    來自廣東 回復(fù)
  2. 關(guān)于7種字體的解釋,挺難理解的,幾乎找不到實(shí)際存在這么多字體的界面吧,尤其在app設(shè)計(jì)中

    來自廣東 回復(fù)
  3. 不錯(cuò)的好文,相比其他文章有意義的多。

    來自浙江 回復(fù)