給大家分享三個關(guān)于視覺設(shè)計的小技巧。
運用格式塔理論
每位設(shè)計師都應(yīng)該了解格式塔理論和視覺感知原則。格式塔理論在20世紀初由德國心理學(xué)家提出,提出了人們組織視覺經(jīng)驗的理論化方法。如今,設(shè)計師使用格式塔原則作為一種更有效的加強信息的視覺上聯(lián)系的設(shè)計框架。
“我們可能會減弱有效的聯(lián)系,選擇高影響的格式塔圖片匹配目標用戶?!?—? Gregg Berryman
Smashing Magazine已經(jīng)解釋了格式塔理論的規(guī)則,所以我將會多給你們舉實例去理解。
主體/背景
通常來說,背景是指主體(目標)存在于背景上面的(當(dāng)物體重疊時,通常把小的看作背景之上的主體)。目的是保持注意力在這個主體上并且能明顯的區(qū)別于所在背景。利用高對比度的顏色設(shè)計將會建立強烈的主體/背景關(guān)系,當(dāng)然,低對比度的顏色將會削減他們之間的關(guān)系。新人設(shè)計頁面時,應(yīng)該保持背景的簡潔(可適當(dāng)運用淺純色或細微紋理)并且目標不要運用過多種顏色。
接近性
在視覺上,利用接近性可以將目標分組。可以結(jié)合運用顏色使分組更明確。與接近性相反,空間留白,也可以加強分組或是隔離不相關(guān)的元素。
相似性
相似的物體會被認為是相關(guān)的。相似的物體可以擁有相同的顏色,形狀,尺寸大小,或是朝著相同的方向。運用相似性原理可以使相關(guān)的物體產(chǎn)生緊密的關(guān)聯(lián)性。
連續(xù)性
人的視線會隨著線,曲線或者按順序放置的目標保持連續(xù)的觀察。當(dāng)連續(xù)的目標被其他主體打斷,我們的眼睛會自然而然認為這些主體之間是不同的實體(不屬于一組)。運用顏色可以加強連續(xù)性和連貫性。
封閉性
不完整的主體,或是有留白導(dǎo)致不完全封閉的物體,會被大腦感知為是完整的物體,大腦自動填補了空白處。設(shè)計師可以利用這條封閉性原則去創(chuàng)造引人注目的圖形。
建立視覺分層系統(tǒng)
視覺分層系統(tǒng)是可以更有次序的組織相關(guān)信息部分,該系統(tǒng)的建立基于布局中組織好的組件(排版,線,形狀,圖像,顏色和空間)。按照視覺分層系統(tǒng)去設(shè)計和創(chuàng)作將會讓用戶無間隙有次序的瀏覽所需傳達的信息。舉個例子,讓我們一起看看Airbnb網(wǎng)站是如何設(shè)計網(wǎng)站的排版部分:
當(dāng)你看到這個頁面時,會先看到哪部分并且是按照什么次序呢?如果你不確定答案,可以嘗試把這頁面變成黑白色。并留意自己的眼睛是如何放大化黑暗(更具飽和度)的組成部分。
視覺分層系統(tǒng)是建立在組成部分合理安排的基礎(chǔ)上,優(yōu)先顯示的信息在前,次要的信息在后。這會經(jīng)常作為一個練習(xí) — 在商業(yè)目標下權(quán)衡用戶的需求。對于Airbnb來說,商業(yè)目標就是當(dāng)用戶需要尋找地方去住時,去讓用戶創(chuàng)建一個關(guān)聯(lián)的賬戶。換句話說,在頁面上商業(yè)目標勝過用戶所需。
一個好的視覺分層系統(tǒng)和構(gòu)成可以使你的視線流暢的瀏覽完整體布局。一個視覺分層不足的系統(tǒng)會讓你對所傳達的信息產(chǎn)生誤解和困惑。
讓我們來看下面3個案例:
練習(xí)建立視覺分層系統(tǒng)。對于可調(diào)整的組成部分,我有下面幾個建議:
字體 — 更大和更粗的字體可以抓住人的視線,但對于標題來說你應(yīng)該盡可能保守的使用這個方法。分割線 — 線幫助將信息分組,提供了布局,彌補了尷尬的空白空間。顏色 — 更暗和更具飽和度的顏色容易引起人們的關(guān)注。圖像 — 圖片可以是很具吸引力的,但是要盡量遠離攝影??臻g留白 — 留白會是你的好幫手。利用留白可以將信息分組或是單獨隔離(強調(diào))一件重要的事情。
如果你需要幫助自己理解視覺設(shè)計組件的標準,Steven Bradley寫了一些很精彩的文章,可以參考,線,顏色,形狀和空間。
檢查你使用的字體
設(shè)計師應(yīng)該確信文字的清晰性和易讀性。年齡越大,我將會對這些字體更加缺乏耐心,比如說超難解讀的,超細,淺色字體等。關(guān)于文字排版這里有一些很棒的建議你可以記住:
開頭空兩個文字
一個文字(又名字形體系)就是設(shè)定了具體字號大小和粗細的文字。Jon Tan解釋說:
“就拿使用Georgia字體來舉例,“常規(guī)體Georgia字”,“斜體Georgia字”,“粗體Georgia字”和“粗斜體Georgia字”,在我的認知中,這些字體構(gòu)成了Georgia字形系統(tǒng)”。
經(jīng)驗告訴我們,用一種標題主題字體和另一種字體作為內(nèi)容主體字體,但在一個頁面布局中最好不要多于2到3種字體。一般來說,標題或類型越多(引用,鏈接等),你就需要運用更多的字體。下圖所示的例子,是運用2種不同的字形系統(tǒng)中(Lucida Grande and Cambria) 的7種字體。
在Hongkiat網(wǎng)站上面的字體工具尋找最匹配的字體。有很多設(shè)計師用Google字體,因為網(wǎng)站上有818種免費的字體形式可供挑選。還有一些設(shè)計師訂閱付費服務(wù),比如MyFonts或是Fonts.com。
內(nèi)容主體使用的最小字是14px
我曾經(jīng)加入了“微小的文字更時髦”的陣營。在看過了使用者掙扎的讀我設(shè)計出的12px的字的內(nèi)容后,發(fā)現(xiàn)14px為易讀的最小字號。現(xiàn)如今,網(wǎng)頁設(shè)計的趨勢是字號變得更大,如同文章中已證明21px的字作為主體內(nèi)容文字大小。除了你需要強調(diào)一些事情的情況,如頁面要公告免責(zé)聲明。你可以查看Christian Miller的作品,關(guān)于為什么你的內(nèi)容字體太小。
行高=1.5-2倍字號
行高指的是段落中句與句之間空白的高度。如果這個值太小會使讀者感到文章行與行間太密集,文字都擠在一起的感覺,行高值太大的話會導(dǎo)致句與句之間被切割一樣,瀏覽時會感覺不連貫。
“一個使用單倍行距的閱讀段,會導(dǎo)致許多人認知上的閱讀障礙。使用1.5到2倍間的間距,可以讓人們在剛結(jié)束閱讀一行后,更容易開始下一行?!薄?/span>w3c.org
除了行高,段高是指段落之間的空白數(shù)量。根據(jù)W3C的Web內(nèi)容可訪問性指南,你應(yīng)該設(shè)置段落之間的高度大于1.5倍行距。
最佳句子字符數(shù)-66個字符
每個句子中的字符數(shù)是保證可讀性的關(guān)鍵。一個句子中字符數(shù)過長連讀會困難,當(dāng)然太短的話會打破閱讀的節(jié)奏。許多設(shè)計師把元素排版風(fēng)格作為最佳句子字符數(shù)的商業(yè)標準。
任何使用45-75個字符是廣泛的情況-這個字符數(shù)量范圍被認為是單欄布局中使用襯線字體大小的頁面,令人滿意的長度。一行66個字符(包括字母和空格)被廣泛認為是很理想的情況?!?Robert Bringhurst
W3C的Web內(nèi)容可訪問性指南加強了這一標準,闡述一個句子可以容納“不超過80個字符和符號。”
其他的視覺設(shè)計小技巧學(xué)習(xí)配色理論規(guī)則。綜合考慮顏色的使用基準。如果不是你非常喜歡圖形創(chuàng)作,你可以使用免費的圖標素材網(wǎng)站,會使你的創(chuàng)作加快速度,例如Material Icons, Ionicon,或Noun Project等。當(dāng)你想垂直居中一個目標,把它先置于較真正的居中點稍偏上的位置,再去調(diào)整它,可以避免視覺錯覺。
- 優(yōu)化人才招聘系統(tǒng):提升員工績效與企業(yè)發(fā)展
- 人才系統(tǒng)在校園招聘中的應(yīng)用與實踐
- 優(yōu)化招聘成效:如何評價騎士人才系統(tǒng)性能?
- 人才系統(tǒng)在小企業(yè)中的應(yīng)用
- 騎士人才招聘系統(tǒng):市場領(lǐng)導(dǎo)者還是追趕者?
- 騎士人才招聘系統(tǒng):打造企業(yè)招聘的新時代
- 人才系統(tǒng)招聘技術(shù)的變遷及其發(fā)展前景
- 人才招聘系統(tǒng):如何提升招聘效率
- 企業(yè)如何選擇適合自己的人才招聘系統(tǒng)呢?
- 互聯(lián)網(wǎng)招聘系統(tǒng)優(yōu)勢與挑戰(zhàn)并存
