在很多的時候我們做設(shè)計的時候都會忽略一些基本的設(shè)計原則挂洛,很多設(shè)計師即使做了很多年的設(shè)計也不能完全說清楚設(shè)計的原則闪金,設(shè)計全憑感覺滑频,至于為什么這樣去設(shè)計很難有很合理的解釋抄囚。俗話說九層之臺始于壘土澜术,可見基礎(chǔ)是多么的重要羹唠,設(shè)計也是一樣惫皱,我們都需要打好扎實的基礎(chǔ)叙量。而今天說要說的設(shè)計原則是根據(jù)著名圖書《寫給大家看的設(shè)計》一書來寫的。
01 詳解四大設(shè)計原則
今天為大家詳細講解《寫給大家看的設(shè)計》一書中提到四大基本原則:親密隘庄、對齊踢步、重復(fù)、對比
親密:
指的是將彼此相關(guān)聯(lián)的項丑掺,在空間的角度上更靠近些获印。比如微信在發(fā)現(xiàn)頁面中相似的類目靠的更近,我們的心理默認認為靠的更加近的是同一類別的的信息街州;相反的兼丰,如果沒有運用親密性的原則,整個微信的信息就看起來非常的混亂唆缴。
對齊:
對齊的根本目的是使頁面統(tǒng)一而且有條理鳍征。然而對齊分為物理對齊和視覺對齊,物理對齊指的是我們可以用物理直線來衡量是否對齊面徽;而視覺對齊指視覺感官上的對齊蟆技,它基本上所用在的地方是一些物理對齊不能帶給我們對齊的感覺的特殊情況之下。那么視覺對齊一般在什么情況下我們能用到呢斗忌?
【01】圖形和圖形之間的視覺對齊
一般出現(xiàn)的是在一個為具有收縮感而另一個不具收縮感的情況之下质礼,比如說正方形和圓形。那么如何解決這個問題呢织阳,我們只需要遵循以下的原則:將有收縮感的物體稍微放大一點可以和沒有收縮感的物體達到平衡眶蕉。
【02】文字和文字之間的視覺對齊
文字和文字分為三種情況。一種是中文和中文的對齊唧躲,因為中文是屬于方塊字造挽,所以物理對齊基本就可以了;第二種是英文和英文的對齊弄痹,如圖上所示饭入,英文字體有些是屬于收縮感字體,所以我們這時就需要進行視覺的對齊肛真,如果英文都不是收縮感字體的話谐丢,我們只需要進行物理的對齊;第三種就是中文和英文的對齊蚓让,處理的方式和第三種情況想類似乾忱。
【03】圖形和文字之間的視覺對齊
圖形和文字之間的對齊分為兩種情況。一種是權(quán)重比較小的線條圖形和文字的對齊历极,這種情況我們只需要將具有收縮感的圖形放大或者移動幾個像素就可以達到視覺的平衡窄瘟。另一種是權(quán)重比較大的塊狀圖形,這種情況下我們只需要進行物理對齊就行了趟卸,因為塊狀的物理權(quán)重比文字大蹄葱,可以彌補上視覺的不平衡感氏义。
重復(fù):
重復(fù)的目的是統(tǒng)一,并增強視覺效果图云,但要避免過多地重復(fù)一個元素惯悠,讓人感覺不太舒服。比如盒馬APP首頁的界面琼稻,在盒我搶的版塊就運用了重復(fù)的原則,整體看起來非常的統(tǒng)一饶囚、和諧
對比:
對比效果可以通過字體選擇帕翻、線寬、顏色萝风、形狀等來增加對比重要的是對比一定要強烈嘀掸。比如這張banner就運用了文字對比和顏色對比的原則,banner的信息層次就區(qū)分的非常明顯规惰,很好的展現(xiàn)了要表現(xiàn)的主體內(nèi)容睬塌。
02 案例操作
說完了原則,我就帶大家一起來進行案例的實際操作來展示這四大原則的用法歇万,首先我們先分析這個界面存在的一些問題:
1揩晴、頭部區(qū)域給人很壓抑的感覺
2、常用的操作入口贪磺,應(yīng)該重點突出硫兰,但是現(xiàn)在卻很平
3、信息沒有做區(qū)分寒锚、版面顯得很空
4劫映、菜單欄五個欄目太擁擠了,圖標不統(tǒng)一刹前,而且選中的黃色在白色上面特別的不明顯
文章到此就已經(jīng)結(jié)束了泳赋,感謝大家的閱讀,希望能已經(jīng)講清楚《寫給大家看的設(shè)計書》中的四大原則的內(nèi)容喇喉,關(guān)注我們祖今,我們會為大家?guī)砀郩I知識體系系列的文章內(nèi)容。