視覺設(shè)計(jì)基礎(chǔ):四個(gè)設(shè)計(jì)原則

3 評(píng)論 17280 瀏覽 96 收藏 7 分鐘

關(guān)于視覺設(shè)計(jì)的四個(gè)原則,可以通過(guò)該本文來(lái)了解一下。

在很多的時(shí)候我們做設(shè)計(jì)的時(shí)候都會(huì)忽略一些基本的設(shè)計(jì)原則,很多設(shè)計(jì)師即使做了很多年的設(shè)計(jì)也不能完全說(shuō)清楚設(shè)計(jì)的原則,設(shè)計(jì)全憑感覺,至于為什么這樣去設(shè)計(jì)很難有很合理的解釋。

俗話說(shuō)九層之臺(tái)始于壘土,可見基礎(chǔ)是多么的重要,設(shè)計(jì)也是一樣,我們都需要打好扎實(shí)的基礎(chǔ)。而今天說(shuō)要說(shuō)的設(shè)計(jì)原則是根據(jù)著名圖書《寫給大家看的設(shè)計(jì)》一書來(lái)寫的。

?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è)微信的信息就看起來(lái)非常的混亂。

對(duì)齊:

對(duì)齊的根本目的是使頁(yè)面統(tǒng)一而且有條理。然而對(duì)齊分為物理對(duì)齊和視覺對(duì)齊,物理對(duì)齊指的是我們可以用物理直線來(lái)衡量是否對(duì)齊;而視覺對(duì)齊指視覺感官上的對(duì)齊,它基本上所用在的地方是一些物理對(duì)齊不能帶給我們對(duì)齊的感覺的特殊情況之下。那么視覺對(duì)齊一般在什么情況下我們能用到呢?

【01】圖形和圖形之間的視覺對(duì)齊

一般出現(xiàn)的是在一個(gè)為具有收縮感而另一個(gè)不具收縮感的情況之下,比如說(shuō)正方形和圓形。那么如何解決這個(gè)問(wèn)題呢,我們只需要遵循以下的原則:將有收縮感的物體稍微放大一點(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)視覺效果,但要避免過(guò)多地重復(fù)一個(gè)元素,讓人感覺不太舒服。比如盒馬APP首頁(yè)的界面,在盒我搶的版塊就運(yùn)用了重復(fù)的原則,整體看起來(lái)非常的統(tǒng)一、和諧。

對(duì)比:

對(duì)比效果可以通過(guò)字體選擇、線寬、顏色、形狀等來(lái)增加對(duì)比重要的是對(duì)比一定要強(qiáng)烈。比如這張banner就運(yùn)用了文字對(duì)比和顏色對(duì)比的原則,banner的信息層次就區(qū)分的非常明顯,很好的展現(xiàn)了要表現(xiàn)的主體內(nèi)容。

?02 案例操作

說(shuō)完了原則,我就帶大家一起來(lái)進(jìn)行案例的實(shí)際操作來(lái)展示這四大原則的用法,首先我們先分析這個(gè)界面存在的一些問(wèn)題:

  • 頭部區(qū)域給人很壓抑的感覺
  • 常用的操作入口,應(yīng)該重點(diǎn)突出,但是現(xiàn)在卻很平
  • 信息沒有做區(qū)分、版面顯得很空
  • 菜單欄五個(gè)欄目太擁擠了,圖標(biāo)不統(tǒng)一,而且選中的黃色在白色上面特別的不明顯

改造后的界面

親密和對(duì)齊原則的運(yùn)用

重復(fù)和對(duì)比原則的運(yùn)用

文章到此就已經(jīng)結(jié)束了,感謝大家的閱讀,希望能已經(jīng)講清楚《寫給大家看的設(shè)計(jì)書》中的四大原則的內(nèi)容。

 

本文由 @小凡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我覺得 你把后來(lái)的英文 換成中文再比對(duì)一下比較好 ,風(fēng)格的差異 可能和產(chǎn)品的屬性也有關(guān)系,單純的從設(shè)計(jì)美學(xué)的角度上來(lái)說(shuō)的話,可能有些偏頗

    來(lái)自北京 回復(fù)
    1. 確實(shí),英文上本身上就會(huì)影響設(shè)計(jì)上的感官,考慮不足

      來(lái)自上海 回復(fù)
  2. 沙發(fā)

    來(lái)自上海 回復(fù)