四個(gè)設(shè)計(jì)基本法,讓任何人都能做出好設(shè)計(jì)

0 評論 3373 瀏覽 13 收藏 14 分鐘

本文適用于非設(shè)計(jì)師,如果想自己了解關(guān)于設(shè)計(jì)行業(yè)的一些標(biāo)準(zhǔn),自己上手去做一些設(shè)計(jì)的話,可以來看看~

是設(shè)計(jì)師就不用看了。

本文適用場景/人群:內(nèi)容創(chuàng)作者但是又沒有打算花錢請?jiān)O(shè)計(jì)師去幫忙設(shè)計(jì);公司HR小姐姐突然又要發(fā)新款招聘海報(bào),但是一時(shí)半會兒沒有設(shè)計(jì)師同事有空幫忙;明明不懂設(shè)計(jì)但是必須去參加設(shè)計(jì)評審(領(lǐng)導(dǎo)您好!)所以最好有幾招放在兜里;最近想換工作花了不少心思去設(shè)計(jì)簡歷,但是又對自己的設(shè)計(jì)不太自信的人群等等……

不適用:短期內(nèi)希望提高設(shè)計(jì)水平,畢竟這是不可能的,但是設(shè)計(jì)中總有一些原則性的東西,如果能夠當(dāng)作鐵則一般去遵守,至少能夠保持60分的輸出。自從作為一個(gè)設(shè)計(jì)學(xué)生開始,就一直有不同的朋友會問你意見,怎樣把ta的這個(gè)那個(gè)弄得好看些。加上近幾年不間斷的溪水抓魚似的設(shè)計(jì)評審,發(fā)現(xiàn)有些問題會重復(fù)出現(xiàn),無論是業(yè)余選手還是初級設(shè)計(jì)師的作品??偨Y(jié)這些重復(fù)錯(cuò)誤,得出以下四條設(shè)計(jì)原則。

我知道~你以為這又是一篇什么“201x最新設(shè)計(jì)趨勢”、“25條簡單設(shè)計(jì)原則讓你成為好設(shè)計(jì)師”之類的罐頭湯。是的這也是那一回事,不過我只有四條。

這四條原則可以幫你做出亮光閃閃的設(shè)計(jì)?不會。但是可以幫你做出干凈、溝通準(zhǔn)確、易懂的、人人愿意與之發(fā)生交互的好設(shè)計(jì)。

所謂的專業(yè)其實(shí)就是保證穩(wěn)定水平的輸出,對吧?

也許也有人快速掃完加粗字體大標(biāo)題之后發(fā)現(xiàn),這些不就是平面設(shè)計(jì)基礎(chǔ)嗎?!

  • 首先是學(xué)校里學(xué)過的理論,在具體的工作場景中忘了,很正常,想想自己是如何為了早點(diǎn)完成任務(wù)下班而沒有把真理越辯越明的一次次。
  • 其次是任何形式的視覺溝通媒介,難道就是在用同樣的手法去解決同樣的核心問題嗎?

如何搞定眼睛、操控注意力?四個(gè)設(shè)計(jì)基本法,讓任何人都能做出好設(shè)計(jì)

對比

保證元素與元素之間有足夠的對比度。

原因是,如果兩個(gè)元素之間有稍微的不一樣,但是不一樣的程度特別輕微,則會引起人眼睛天然的生厭感、消極情緒。有點(diǎn)類似于“恐怖谷理論”:人會對越和自己相像的機(jī)器人(或類人的物體)越有好感,但是相似程度如果超過了臨界點(diǎn),會突然間引起人們的厭惡甚至恐懼感。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

原因是什么不得而知,但是回想一下自己的生活經(jīng)驗(yàn)好像也的確是這樣。所以,上策就是元素與元素之間要不就是完全設(shè)計(jì)成一樣,要不就把它們做得相當(dāng)?shù)牟灰粯印?/p>

影響對比度,一般從以下幾個(gè)方向去考慮:

用色:暗色上面用淺色,或者反過來

例如,盡量回避使用一些灰度接近的前后組合,或者灰度很高的不同顏色的組合。這些組合都是讓人們打從心里面不愿去讀或者與之發(fā)生交互的。除非你本來的設(shè)計(jì)意圖就是希望被忽略。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

大?。夯ハ嗫拷膬蓚€(gè)元素一定需要遵守的一點(diǎn),要不設(shè)計(jì)成一樣的大小,否則就應(yīng)該有明確的、可以被感知的大小差異。

例如,兩個(gè)不同的字段擺在一起,如果一個(gè)是32pt另一個(gè)是36pt,會讓人有莫名其妙抓狂、發(fā)火的奇效;而另一邊18pt和36pt在一起,則會顯得和諧且錯(cuò)落有致。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

權(quán)重:和大小一樣,要不就設(shè)置成一樣的權(quán)重,否則就采取差異較大的組合

就好像常見的“bold”和“black”的差距其實(shí)就算是擺在一起也是難以被感知出來,但是就是容易給人別扭的感覺,因?yàn)椴恢朗遣皇亲约貉劬Φ膯栴}。至少差距級別要拉大到“l(fā)ight”和“bold”的差異。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

風(fēng)格與斜體:道理也是一樣,但是還是有必要提醒一下不要把兩種不同風(fēng)格的斜體擺在一起。

很多時(shí)候我們都希望用斜體起到強(qiáng)調(diào)字段的作用,或者反過來是想降低它的重要性,重點(diǎn)都是要把它和環(huán)境內(nèi)容區(qū)分開。但是當(dāng)兩個(gè)挨著的元素我們都希望把它各自單獨(dú)區(qū)分開,這是不可能的,應(yīng)該重新思考一下自己的信息優(yōu)先級與內(nèi)容策略了。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

一致性

在產(chǎn)品設(shè)計(jì)的領(lǐng)域,保持一致性的必要性可能已經(jīng)過很多次了,幾乎誰都可以沖口而出說出“因?yàn)橐档陀脩魧W(xué)習(xí)成本啊” 云云。

但是為什么保持一致性能夠降低用戶學(xué)習(xí)成本?保持一致性又是怎樣達(dá)到降低用戶學(xué)習(xí)成本這個(gè)目的?

不略略深挖一下這個(gè)問題,很容易就變成了教條主義。

保持一致性:保證近似的元素以近似的形態(tài)出現(xiàn)。

原因:

  1. 保持一致性可以讓元素與元素之間的關(guān)系變得簡單一眼可以快速辨認(rèn),最重要的是我們就有機(jī)會可以輕易地把重要的東西加以強(qiáng)調(diào)。反過來,如果元素設(shè)計(jì)方式變化無常沒有一致性,用戶的注意力就難以被引導(dǎo)至我們希望被留意到的那一個(gè)點(diǎn)上。
  2. 系統(tǒng)性、合理地保持了一致性,能夠讓設(shè)計(jì)提升信任度、安全感,也能很好地讓設(shè)計(jì)產(chǎn)出有那種“被精心設(shè)計(jì)過”的感覺。

保持一致性可以從以下一些要素著手:

  • 字體、字體風(fēng)格
  • 顏色組合
  • 網(wǎng)格系統(tǒng) / 柵格化系統(tǒng)
  • 對齊
  • 純粹裝飾作用的畫面元素
  • 等等

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

尤其當(dāng)你需要設(shè)計(jì)一個(gè)系列元素會同時(shí)出現(xiàn)時(shí),更加需要保持一致性。例如公眾號文章的列表圖片、vlog的視頻主圖,保持一定的一致性并且每個(gè)元素都遵守著,能夠讓你輕松從業(yè)余選手中站得高一點(diǎn)。

奧卡姆剃刀法則

人話:減少視覺噪音。

你的設(shè)計(jì)里面所用的元素種類越少則越好。

所有和受眾溝通的媒介諸如一張海報(bào)、一份簡歷、一個(gè)app界面等等都帶著兩類目的:信息溝通目的、感情調(diào)動目的。受眾的大腦在接受你的設(shè)計(jì)向他發(fā)出的溝通請求過程中,來自你設(shè)計(jì)的輸入越多越則重載,而我們原本要溝通的東西則會隨著一堆信息垃圾而一起變得模糊而難以被消化。新手常犯的一個(gè)錯(cuò)誤尤其在于對裝飾性元素的把控上(字體、顏色、陰影、邊框、線條、icon、紋理等等),裝飾性元素原則上講應(yīng)該越少越好。每增加一個(gè)都要給自己一個(gè)清晰的理由、一個(gè)對設(shè)計(jì)目的有裨益的理由,否則就不要添加新的裝飾性元素。

如果2個(gè)元素可以搞定就別用3個(gè),10個(gè)可以搞定不要用11個(gè)。不得不用很多的元素才能完成你的設(shè)計(jì)目標(biāo)?那就應(yīng)該反思回溯你的設(shè)計(jì)目標(biāo)是否合理了。

什么東西都可以拿來剃刀一下,不妨試試。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

空間

很多情況下會被一知半解地玩壞成了“留白”、“呼吸感”這些近乎玄學(xué)的說法。

我嘗試說說人話:空間感的設(shè)計(jì),實(shí)際就是我們怎樣安排一個(gè)對象的位置,在溝通效果上帶來的抽象但直接的影響。

da-daaa-!You got it 有沒有

而空間處理的實(shí)際作用是:處理好一個(gè)對象的位置擺放、周圍的空間以及它與另一個(gè)對象的距離關(guān)系,除了能有效降低設(shè)計(jì)的復(fù)雜程度,還能使該對象看起來更加舒服、更讓人愿意與之交互。

在設(shè)計(jì)中的空間處理,可以留意這三件事情:

(1)靠近 = 相關(guān)

兩個(gè)對象靠得比較近,往往會被感知為它們之間的相關(guān)程度高于與其他對象的關(guān)系。

顯而易見的這一點(diǎn)往往經(jīng)常容易被忽略,在我從業(yè)以來還見過不少專業(yè)設(shè)計(jì)師在自己的設(shè)計(jì)中不知道出于什么原因就無視了這一點(diǎn)。但我認(rèn)為這一條可以稱作是鐵則(尤其在信息、交互雙向溝通目的性很強(qiáng)的界面設(shè)計(jì)領(lǐng)域),沒有任何理由可以凌駕之上。

若干簡單的例子:

字與字之間的間距應(yīng)該明顯大于行與行之間的間距,而行與行之間的間距應(yīng)該明顯大于段與段之間的間距。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

元素與元素如果有成組的關(guān)系,那么它們之間距離就應(yīng)該明顯小于它們與群組邊界的距離。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

便簽、支撐性元素應(yīng)該盡量靠近它們的所指對象,并與其它元素拉開明顯關(guān)系。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

(2)負(fù)空間(又稱留白)

留白的手法并不是用來幫助你的設(shè)計(jì)平白無故duang一下的提高逼格的,別誤會。

和奧卡姆剃刀法則同出一撤,對于重要的元素,給予盡量多的負(fù)空間留白,無非就是為了它能夠從信息雜訊中跳脫出來,讓受者最短時(shí)間留意到該元素的特點(diǎn)、接收到要被溝通的信息。

在有限的空間里面期待表達(dá)過多的信息量最終都是要失敗的。同時(shí)聽三首歌然后默寫歌詞這種應(yīng)該出現(xiàn)在最強(qiáng)大腦真人秀里面的題目,而非對一個(gè)設(shè)計(jì)的要求。

非設(shè)計(jì)師也能看得懂的設(shè)計(jì)原則

“像蘋果官網(wǎng)那樣大氣”是很多領(lǐng)導(dǎo)、老板常提出的網(wǎng)頁設(shè)計(jì)要求,但是同時(shí)希望你能夠在第一屏里面展示3個(gè)主推產(chǎn)品、4個(gè)業(yè)務(wù)板塊還有5個(gè)合作部門的入口。

(3)重要性和次序

不怕被你見笑,我連這種近乎是常識的點(diǎn)都提了,因?yàn)檫@是串聯(lián)起以上種種技巧的根本準(zhǔn)則。

最重要的東西,給予最重要的位置、最多的空間,其他依照排序安排過去。大多數(shù)情況下這個(gè)就是斷舍離的過程,不停通過反思而發(fā)現(xiàn)自己原來覺得重要的東西其實(shí)并沒有那么重要的過程。

結(jié)束了!恭喜你已經(jīng)掌握了什么是設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)了,這里提到的以外的東西,還是交給一個(gè)設(shè)計(jì)師吧。

 

作者:HaoH,公眾號:HaoH 大鬼西歸

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!