做設計有一道及格線,標準肯定是“它” 上榜經歷2020年9月28日 180期站酷文章總榜第15名

做設計有一道及格線,標準肯定是“它” 上榜經歷2020年9月28日 180期站酷文章總榜第15名

做設計有一道及格線,標準肯定是“它”,教程,菜心輕量文,原創文章站酷網,中國設計師互動平台。

很多設計師容易犯一個錯:設計不明確

設計一旦不明確,就容易讓用戶產生疑惑,甚至認為出現了bug!

我的原則就是,要么不做變化,要做咱就做的徹底一點,明確一點!

我從以下方面舉幾個例子:

1.間距

2.大小

3.樣式

4.顏色

1.間距

當信息內容需要區隔的時候,最常用的兩種方式:

一種是加一條細細的分割線;

另一種是加一條粗粗的分割塊:

我們有一次在加分割塊的時候就出現了一個小失誤,把分割塊設定為4pt:

這樣會存在什麼問題?

會讓用戶懷疑,這是粗一點的線條?還是細一點的色塊?

所以為了避免這樣情況的發生,線條就細點0.5pt,色塊就粗點10pt(反正稍微大一點就行),明確一點:

再比如之前有一個小案例,大概的信息是這樣排版的:

不細看也沒啥大問題,但是仔細觀察就會發現,在間距方面有一定的優化空間。圖上有六條信息,實際是三組,如果間距不做徹底,就會讓人感覺是獨立的六組,但如果把間距做的徹底一點:

這樣就可以很明確看出,這是三組信息,而不僅僅只是六條信息。

所以要么就不分組,既然分了,就分的徹底一點!

2.大小 

界面內信息有很多,這麼多信息,有些需要強調,有些可以弱化。

很簡答一個例子,有時候大字後面需要跟一個小字,如果你沒區分開就是這樣的效果:

這樣就很不明確,到底是做了大小變化?還是出現了bug?

所以盡量把二者區分開,比如大小對比、顏色區分、粗細變化:

這樣就可以很明確!

3.樣式

前短時間有位讀者朋友發我一組圖標,圖標源自追波,我覺得整體做的還可以,但是有一個樣式上的小細節可以優化下。

整體圖標樣式都是有厚度的,但是郵件這個圖標看起來就有些猶豫,想表達厚度,但是又沒表達清楚:

圖標源自追波

所以可以讓厚度的寬度加大,並且把側面的顏色和正面區分開,這樣就可以把厚度更明確的表達出來。

再比如之前做過一個引導頁,需要做一個影帶,最開始做的是這樣的:

不知道的還以為是個手錶帶,所以必須要仔細觀察影帶的特徵,並將其明確的表達出來,比如兩邊的孔是方形的,整體材質要軟一下等等:

這樣表達才明確,用戶才不會困惑!

4.顏色

下面兩組顏色:

左面這組可以很好的突出一個顏色,而右面這組就很難突出某一個顏色。

在界面設計中,有很多場景下,會有多個按鈕,我們需要強調其中一個,就需要採用這種徹底的對比方式:

而不是讓人模凌兩可,分不清主次的方式:

明確一點,用戶就不困惑了。

我們再來一個例子!

其實工作上有很多優化需求都是基於“明確”這個點展開的,前一陣子做的一個排行榜獎牌標識的優化,我們看看原來的樣式,就是因為顏色對比度不夠,產生數字看不清的情況:

在這樣的背景下,我們就可以拉大顏色對比度,讓數字更清晰、更明確:

這就是基於“明確“這個點,進行的需求優化。

總結

今天講的都是做設計不夠明確的小案例,也是很多朋友容易忽略的問題。

ios有一條設計原則就是清晰,清晰的本質就是做的足夠徹底,該強調的強調,該弱化的弱化,比如他們超級醒目的大標題:

當我們能把設計做的足夠明確、足夠有節奏感的時候,就可以減少一定的稚嫩,使設計更穩更成熟!

希望能給大家帶來一些啟發!

長點心,比啥都強!
點個贊,更強!

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。