在很多的時(shí)候我們做設(shè)計(jì)的時(shí)候都會(huì)忽略一些基本的設(shè)計(jì)原則,很多設(shè)計(jì)師即使做了很多年的設(shè)計(jì)也不能完全說清楚設(shè)計(jì)的原則,設(shè)計(jì)全憑感覺,至于為什么這樣去設(shè)計(jì)很難有很合理的解釋。
俗話說九層之臺(tái)始于壘土,可見基礎(chǔ)是多么的重要,設(shè)計(jì)也是一樣,我們都需要打好扎實(shí)的基礎(chǔ)。而今天說要說的設(shè)計(jì)原則是根據(jù)著名圖書《寫給大家看的設(shè)計(jì)》一書來寫的。
01/
詳解四大設(shè)計(jì)原則
今天為大家詳細(xì)講解《寫給大家看的設(shè)計(jì)》一書中提到四大基本原則:親密、對(duì)齊、重復(fù)、對(duì)比
親密:
指的是將彼此相關(guān)聯(lián)的項(xiàng),在空間的角度上更靠近些。比如微信在發(fā)現(xiàn)頁(yè)面中相似的類目靠的更近,我們的心理默認(rèn)認(rèn)為靠的更加近的是同一類別的的信息;相反的,如果沒有運(yùn)用親密性的原則,整個(gè)微信的信息就看起來非常的混亂。
對(duì)齊:
對(duì)齊的根本目的是使頁(yè)面統(tǒng)一而且有條理。然而對(duì)齊分為物理對(duì)齊和視覺對(duì)齊,物理對(duì)齊指的是我們可以用物理直線來衡量是否對(duì)齊;而視覺對(duì)齊指視覺感官上的對(duì)齊,它基本上所用在的地方是一些物理對(duì)齊不能帶給我們對(duì)齊的感覺的特殊情況之下。那么視覺對(duì)齊一般在什么情況下我們能用到呢?
【01】圖形和圖形之間的視覺對(duì)齊
一般出現(xiàn)的是在一個(gè)為具有收縮感而另一個(gè)不具收縮感的情況之下,比如說正方形和圓形。那么如何解決這個(gè)問題呢,我們只需要遵循以下的原則:將有收縮感的物體稍微放大一點(diǎn)可以和沒有收縮感的物體達(dá)到平衡。
【02】文字和文字之間的視覺對(duì)齊
文字和文字分為三種情況。一種是中文和中文的對(duì)齊,因?yàn)橹形氖菍儆诜綁K字,所以物理對(duì)齊基本就可以了;第二種是英文和英文的對(duì)齊,如圖上所示,英文字體有些是屬于收縮感字體,所以我們這時(shí)就需要進(jìn)行視覺的對(duì)齊,如果英文都不是收縮感字體的話,我們只需要進(jìn)行物理的對(duì)齊;第三種就是中文和英文的對(duì)齊,處理的方式和第三種情況想類似。
【03】圖形和文字之間的視覺對(duì)齊
圖形和文字之間的對(duì)齊分為兩種情況。一種是權(quán)重比較小的線條圖形和文字的對(duì)齊,這種情況我們只需要將具有收縮感的圖形放大或者移動(dòng)幾個(gè)像素就可以達(dá)到視覺的平衡。另一種是權(quán)重比較大的塊狀圖形,這種情況下我們只需要進(jìn)行物理對(duì)齊就行了,因?yàn)閴K狀的物理權(quán)重比文字大,可以彌補(bǔ)上視覺的不平衡感。
重復(fù):
重復(fù)的目的是統(tǒng)一,并增強(qiáng)視覺效果,但要避免過多地重復(fù)一個(gè)元素,讓人感覺不太舒服。比如盒馬APP首頁(yè)的界面,在盒我搶的版塊就運(yùn)用了重復(fù)的原則,整體看起來非常的統(tǒng)一、和諧。
對(duì)比:
對(duì)比效果可以通過字體選擇、線寬、顏色、形狀等來增加對(duì)比重要的是對(duì)比一定要強(qiáng)烈。比如這張banner就運(yùn)用了文字對(duì)比和顏色對(duì)比的原則,banner的信息層次就區(qū)分的非常明顯,很好的展現(xiàn)了要表現(xiàn)的主體內(nèi)容。
02/
案例操作
說完了原則,我就帶大家一起來進(jìn)行案例的實(shí)際操作來展示這四大原則的用法,首先我們先分析這個(gè)界面存在的一些問題:
頭部區(qū)域給人很壓抑的感覺
常用的操作入口,應(yīng)該重點(diǎn)突出,但是現(xiàn)在卻很平
信息沒有做區(qū)分、版面顯得很空
菜單欄五個(gè)欄目太擁擠了,圖標(biāo)不統(tǒng)一,而且選中的黃色在白色上面特別的不明顯
改造后的界面
親密和對(duì)齊原則的運(yùn)用
重復(fù)和對(duì)比原則的運(yùn)用
全部評(píng)論