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

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

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

間距

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

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

這樣會存在什么問題?

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

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

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

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

2. 大小

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

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

做設計有一道及格線,標準肯定是它!

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

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

做設計有一道及格線,標準肯定是它!

這樣就可以很明確!

3. 樣式

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

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

做設計有一道及格線,標準肯定是它!

△ 圖標源自追波

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

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

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

4. 顏色

下面兩組顏色:

做設計有一道及格線,標準肯定是它!

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

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

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

我們再來一個例子!

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

做設計有一道及格線,標準肯定是它!

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

做設計有一道及格線,標準肯定是它!

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

總結

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

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

做設計有一道及格線,標準肯定是它!

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

歡迎關注作者的微信公眾號:「菜心設計鋪」

做設計有一道及格線,標準肯定是它!

收藏 47
點贊 58

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。