【視覺設(shè)計基礎(chǔ)】 四個設(shè)計原則

在很多的時候我們做設(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)一刹前,而且選中的黃色在白色上面特別的不明顯


改造后的界面


親密和對齊原則的運用


重復(fù)和對比原則的運用


文章到此就已經(jīng)結(jié)束了泳赋,感謝大家的閱讀,希望能已經(jīng)講清楚《寫給大家看的設(shè)計書》中的四大原則的內(nèi)容喇喉,關(guān)注我們祖今,我們會為大家?guī)砀郩I知識體系系列的文章內(nèi)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拣技,一起剝皮案震驚了整個濱河市衅鹿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌过咬,老刑警劉巖大渤,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異掸绞,居然都是意外死亡泵三,警方通過查閱死者的電腦和手機耕捞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烫幕,“玉大人俺抽,你說我怎么就攤上這事〗下” “怎么了磷斧?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長捷犹。 經(jīng)常有香客問我弛饭,道長,這世上最難降的妖魔是什么萍歉? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任侣颂,我火速辦了婚禮,結(jié)果婚禮上枪孩,老公的妹妹穿的比我還像新娘憔晒。我一直安慰自己,他們只是感情好蔑舞,可當(dāng)我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布拒担。 她就那樣靜靜地躺著,像睡著了一般攻询。 火紅的嫁衣襯著肌膚如雪澎蛛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天蜕窿,我揣著相機與錄音谋逻,去河邊找鬼。 笑死桐经,一個胖子當(dāng)著我的面吹牛毁兆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播阴挣,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼气堕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了畔咧?” 一聲冷哼從身側(cè)響起茎芭,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎誓沸,沒想到半個月后梅桩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡拜隧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年宿百,在試婚紗的時候發(fā)現(xiàn)自己被綠了趁仙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡垦页,死狀恐怖雀费,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情痊焊,我是刑警寧澤盏袄,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站薄啥,受9級特大地震影響辕羽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜罪佳,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一逛漫、第九天 我趴在偏房一處隱蔽的房頂上張望黑低。 院中可真熱鬧赘艳,春花似錦、人聲如沸克握。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽菩暗。三九已至掰曾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間停团,已是汗流浹背旷坦。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佑稠,地道東北人秒梅。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像舌胶,于是被迫代替她去往敵國和親捆蜀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,955評論 2 355

推薦閱讀更多精彩內(nèi)容