界面平平無奇?3招教你做出高級感界面(附自查清單)

工作中,咱們每個人或多或少都會碰上極簡風格的設(shè)計,但很多朋友都會有一個疑惑:為啥別人的界面舒服又高級,但我卻做不出人家的感覺呢?

其實,極簡風格也有一定的套路,今天我會以一套手表 UI 為例,從造型、色彩、排版 3 個點與你分享。

更多UI干貨:

一、造型

1. 造型簡潔,以基礎(chǔ)型為主

畫面中的圖形元素,不要選太復(fù)雜的造型,咱們優(yōu)先挑選一些偏基礎(chǔ)型的圖形作為主視覺,這樣能保證咱們的頁面風格不會出現(xiàn)大的問題。

界面平平無奇?3招教你做出高級感界面(附自查清單)

2. 大而整的造型

在設(shè)計某些控件的時候,如果覺得畫面整體元素比較零碎,可以嘗試使用大而整的元素,這樣畫面可能會變的更高級,結(jié)構(gòu)也會顯得更加整體~

界面平平無奇?3招教你做出高級感界面(附自查清單)

3. 簡約而不簡單,相似卻不重復(fù)

在某些數(shù)據(jù)可視化的頁面中,可能會同時出現(xiàn)多個數(shù)據(jù)展示,咱們在做此類頁面的時候就很容易復(fù)用相同元素。這樣做出來的頁面可能就會顯得呆板和粗糙。

就算相同類型的元素,咱們也可以做出不一樣的造型形式感,會讓你的頁面顯得更加高級耐看。

界面平平無奇?3招教你做出高級感界面(附自查清單)

如果場景中元素較少,無法從重復(fù)性上下手時,咱們也可以從造型本身做文章,將原本的元素增加細節(jié),提升高級感。

界面平平無奇?3招教你做出高級感界面(附自查清單)

二、色彩

1. 主色比例克制

雖然我們提到可以使用大而整的造型,但在一些功能性頁面中一定要把控好主色在畫面中的比例,盡量不要超過 30%。

界面平平無奇?3招教你做出高級感界面(附自查清單)

咱們要記住,主色只是作為一種點綴色,如果比例過大,則會放大用戶對色彩的性格感知,甚至出現(xiàn)對狀態(tài)判斷錯誤的情況。

2. 主色的唯一性

顏色做減法,在整套色彩體系中,不要出現(xiàn)多個主色的情況,因為它會削弱咱們極簡的風格感知。

界面平平無奇?3招教你做出高級感界面(附自查清單)

3. 色彩的層次

色彩層次是靠對比出來的,一個顏色調(diào)的再好看,通篇都是它,只會讓人感覺到沉悶。適當融入黑白灰,畫面會更加耐看。

界面平平無奇?3招教你做出高級感界面(附自查清單)

三、排版

1. 元素精簡

當畫面中的元素具有相同屬性,或者有非必須元素存在的時候,盡量精簡同屬性的元素,減少元素種類,用最少的元素傳達最清晰的信息。

比如左邊的藍牙頁面,雖然功能闡述的很清晰了,但是由于元素數(shù)量太多,算上標題、圖標、button 以及裝飾元素,整整有 5 個元素,就顯得不夠高級和極簡。

界面平平無奇?3招教你做出高級感界面(附自查清單)

如何優(yōu)化,最首要的是明確這個頁面要做什么。

元素雖多,但主要功能就是“連接藍牙”這個動作,那咱們是不是能把標題和 button 作結(jié)合,“立即連接”改為“連接藍牙”;

其次,“藍牙連接手機”的圖形說明其實并無必要,咱們只需要強調(diào)“藍牙”這個功能即可。

這樣一來,原本 4 個元素的頁面,咱們用 2 個元素就搞定了,整體頁面也顯得更加高效和簡潔。

2. 留白與呼吸感

不要把畫面鋪滿,過滿的元素并不會讓人感覺整體飽滿,而是會帶來壓抑的感知。適當留白可增加頁面透氣感,讓畫面更加耐看。

界面平平無奇?3招教你做出高級感界面(附自查清單)

3. 邏輯統(tǒng)一

當咱們確定了一種排版邏輯,就盡量不要去更改它。

比如我們確定的邏輯是上方顯示內(nèi)容/數(shù)據(jù),下方顯示操作按鍵,那么我們所有功能頁就需要統(tǒng)一這個邏輯,不然使用體驗上就會有割裂感。

界面平平無奇?3招教你做出高級感界面(附自查清單)

四、極簡風格設(shè)計自查清單

我總結(jié)了一份極簡風格設(shè)計自查清單,當你在做此類手表 UI 風格設(shè)計的時候,可以對照這份自查清單,看看自己的設(shè)計是否還有優(yōu)化空間:

界面平平無奇?3招教你做出高級感界面(附自查清單)

總結(jié)

咱們來看看對比,是不是更耐看了?

界面平平無奇?3招教你做出高級感界面(附自查清單)

極簡風格的本質(zhì)是用最少的元素傳達最清晰的信息,而非單純追求“空”或“少”。關(guān)鍵在于找到功能可見性與視覺克制的黃金平衡點,始終以用戶的核心需求為設(shè)計錨點。

歡迎關(guān)注作者的微信公眾號:「菜心設(shè)計鋪」

界面平平無奇?3招教你做出高級感界面(附自查清單)

收藏 50
點贊 80

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。