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

2021-6-30    seo達人



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

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

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

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

1.間距

2.大小

3.樣式

4.顏色

 

1.間距

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

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

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

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

這樣會存在什么問題?

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

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

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

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

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

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

 

2.大小

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

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

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

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

這樣就可以很明確!

 

3.樣式

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

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

圖標源自追波

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

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

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

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

 

4.顏色

下面兩組顏色:

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

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

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

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

我們再來一個例子!

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

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

這就是基于“明確“這個點,進行的需求優(yōu)化。

 

總結

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

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

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

 

原文地址:菜心設計鋪(公眾號)

作者:菜心設計鋪


轉載請注明:學UI網》做設計有一道及格線,標準肯定是“它”

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png


文章來源:站酷   作者:陳皮Celia 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔