提高視覺(jué)設(shè)計(jì)能力的 3 個(gè)小技巧
文章分享了提升視覺(jué)設(shè)計(jì)能力的3個(gè)小技巧,希望能給你帶來(lái)幫助。
在篩選了數(shù)百份初級(jí)設(shè)計(jì)師的簡(jiǎn)歷之后,我發(fā)現(xiàn)一個(gè)通用的問(wèn)題。設(shè)計(jì)師,尤其是初級(jí)設(shè)計(jì)師,都非常關(guān)注 UX 以及被很多咨詢公司傳播的設(shè)計(jì)思維。他們都非常缺乏將生活中的事物引入設(shè)計(jì)中的能力,簡(jiǎn)歷中的作品千篇一律地展示了他們?cè)谒囆g(shù)學(xué)校里學(xué)到的視覺(jué)設(shè)計(jì)功底。
截止2017年4月,Glassdoor 的調(diào)查結(jié)果顯示,很多公司傾向于招聘具有端到端設(shè)計(jì)能力的產(chǎn)品設(shè)計(jì)師。
我是以平面設(shè)計(jì)師的身份進(jìn)入設(shè)計(jì)行業(yè)的,經(jīng)過(guò)反復(fù)的試錯(cuò),我了解到布局和構(gòu)圖的藝術(shù)。從我的設(shè)計(jì)作品里也能反映我這幾年的設(shè)計(jì)歷程,這是我在學(xué)校里的第一個(gè)作品:
幸好,視覺(jué)設(shè)計(jì)能力會(huì)隨著經(jīng)驗(yàn)的增多而提升。這是我最近的作品:
我已經(jīng)非常注重布局和構(gòu)圖
今天,我將要分享提升視覺(jué)設(shè)計(jì)能力的三個(gè)小技巧。
1 建立視覺(jué)層次結(jié)構(gòu)
視覺(jué)層次結(jié)構(gòu)是根據(jù)信息的相對(duì)重要程度組織信息,并通過(guò)在布局上排列各個(gè)部分(排版、線條、形狀、顏色、圖片和留白)。通過(guò)強(qiáng)大的視覺(jué)層次和視覺(jué)構(gòu)圖做設(shè)計(jì),可以引導(dǎo)用戶的視線。例如,我們可以看看 Airbnb 是在他們的網(wǎng)站是怎么對(duì)各個(gè)部分進(jìn)行排放的:
如上圖,你的眼睛會(huì)先看到哪部分,再看到哪部分呢?如果你不確定,那我們可以先把圖片轉(zhuǎn)成黑白色再試一次。相信你已經(jīng)注意到你的眼睛是最先看到飽和度更明顯的部分。
視覺(jué)層次結(jié)構(gòu)是通過(guò)組件的位置來(lái)確定優(yōu)先級(jí)的,從而使得用戶可以先看到高優(yōu)先級(jí)的組件,最后看到低優(yōu)先級(jí)的組件。要做到這一點(diǎn),需要平衡用戶需求和商業(yè)目標(biāo)。對(duì)于
Airbnb 來(lái)說(shuō),商業(yè)目標(biāo)是增加注冊(cè)用戶數(shù),而用戶需求是用戶想要找到住宿的地方。換句話說(shuō),從這個(gè)頁(yè)面的設(shè)計(jì)來(lái)看,業(yè)務(wù)需求勝過(guò)用戶需求。
強(qiáng)大的視覺(jué)層次和構(gòu)圖會(huì)通過(guò)布局引導(dǎo)用戶的視線。而視覺(jué)層次不佳會(huì)導(dǎo)致溝通不暢。
下圖是視覺(jué)層次不佳的例子:
通過(guò)使用不同風(fēng)格的設(shè)計(jì)組件的方式來(lái)實(shí)現(xiàn)視覺(jué)層次效果,并在感覺(jué)沒(méi)有頭緒的時(shí)候嘗試黑白色的設(shè)計(jì)組件。這是一些組件的小技巧:
- 字體:大號(hào)加粗的字體會(huì)吸引用戶的注意力,但是要謹(jǐn)慎使用標(biāo)題。
- 線條:線條有助于信息的分組展示,同時(shí)它也可以填補(bǔ)尷尬的留白空間。
- 顏色:深色以及飽和度高的顏色有助于吸引用戶的注意力。
- 形狀:簡(jiǎn)單的形狀(如:圓形、三角形、正方形)看上去更加美觀。
- 圖片:圖片可以非常誘人,但不要使用有版權(quán)的圖片。
- 留白:設(shè)計(jì)中經(jīng)常使用留白來(lái)分隔信息或突出顯示重要的信息。
如果你沒(méi)有視覺(jué)設(shè)計(jì)組件的基礎(chǔ)知識(shí),Steven Bradley 曾經(jīng)寫(xiě)過(guò)這方面的文章 :
2 利用 Gestalt 法則
所有的設(shè)計(jì)師都應(yīng)該了解?Gestalt Theory?以及人們視覺(jué)感知的法則。Gestalt Theory 是德國(guó)的心理學(xué)家在 20 世紀(jì)初發(fā)展起來(lái)的,他們?yōu)槿藗冮_(kāi)展視覺(jué)體驗(yàn)提供了理論依據(jù)?,F(xiàn)在的設(shè)計(jì)師都把 Gestalt 法則當(dāng)成視覺(jué)溝通的有效框架。
通過(guò)將目標(biāo)受眾與高影響力的 Gestalt 圖片相匹配,我們可以縮短有效溝通的距離?!狦regg Berryman
Smashing Magazine已經(jīng)解釋了Gestalt Theory 的原理,所以,我們把重點(diǎn)放在案例上。
內(nèi)容/背景
一般來(lái)說(shuō),背景就是指內(nèi)容的背景。設(shè)計(jì)的目標(biāo)就是保證用戶關(guān)注內(nèi)容,并且可以明確區(qū)分內(nèi)容和背景。使用高對(duì)比度的顏色可以明確的區(qū)分內(nèi)容和背景,但是使用低對(duì)比度的顏色則無(wú)法達(dá)到這種效果。設(shè)計(jì)新手應(yīng)該盡可能保證背景的簡(jiǎn)單(使用淺色背景或者微妙的紋理背景),并且盡量減少內(nèi)容的顏色數(shù)量。
內(nèi)容的接近程度 Proximity
人們會(huì)自然地將鄰近的物體自動(dòng)歸為一組。如果鄰近的內(nèi)容比較接近,說(shuō)明了同一個(gè)問(wèn)題,那我們可以使用不同的顏色使他們成為一組,這樣用戶也不會(huì)產(chǎn)生多的聯(lián)想。當(dāng)然,不同間距或者留白也能體現(xiàn)這種關(guān)系。
相似性
人們會(huì)自然地認(rèn)為看起來(lái)相似的物體是相關(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)人眼的這種感覺(jué)。
我們會(huì)自然地將其它物體從連續(xù)性的物體中分出來(lái)。
封閉性
當(dāng)我們看到不完整的物體或者不完全封閉的空間時(shí),我們的大腦會(huì)自動(dòng)填補(bǔ)缺失的部分,從而使得我們認(rèn)為它們是完整的。設(shè)計(jì)師可以使用封閉性原則在視覺(jué)上創(chuàng)造更加引人注目的圖形。
3 檢查你的字體!
設(shè)計(jì)師應(yīng)該確保文字清晰易讀。隨著我的年齡越來(lái)越大,我越來(lái)越對(duì)字體小、顏色淺的文字失去耐心。在文字這方面,出版社有很多很好的經(jīng)驗(yàn):
從這兩種字體開(kāi)始
字體是具有特定大小和重量的字體樣式。Jon Tan 是這么說(shuō)的:
經(jīng)驗(yàn)法則是使用一個(gè)標(biāo)題字體和一個(gè)正文字體,并且每個(gè)布局中的字體不超過(guò) 3 個(gè)。如果你有很多的標(biāo)題或樣式(引號(hào),鏈接等),那么你就需要更多的字體。Medium 使用了兩種字體樣式(Lucida Grande和Cambria)和 7種字體。
通過(guò) 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ì)是字體越來(lái)越大,比如這篇文章的最小字體是 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)頁(yè)內(nèi)容可訪問(wèn)性準(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ì)用戶來(lái)說(shuō)是最合適的閱讀長(zhǎng)度。66 個(gè)字符(包括數(shù)字和空格)的長(zhǎng)度普遍認(rèn)為是最理想的?!?Robert Bringhurst
W3c的網(wǎng)頁(yè)內(nèi)容可訪問(wèn)性準(zhǔn)則也強(qiáng)化了這一標(biāo)準(zhǔn),它說(shuō)的是行長(zhǎng)度應(yīng)該不超過(guò)80個(gè)字符或字”。
— 全文完 —
感謝閱讀!
原文:3 ways to improve your visual design skills
來(lái)源:medium
作者:Jules Cheung
本文由 @?Q_misky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖由譯者提供
小姐姐是真人才啊,能看出這篇文章融入了你多方面的技能,深有啟發(fā)!
眼睛看到那一部分,我覺(jué)得作者標(biāo)明的只是一個(gè)大趨勢(shì)。
不同人有不同的觀察習(xí)慣,比如我,可能被明顯的大圖吸引過(guò)后,就是先從簡(jiǎn)潔的標(biāo)題中獲取關(guān)鍵信息。