• EN
香港:(852)3749 9734
廣州: (020)3834 3713
info@inspirr.com

新聞資料

盤點UI設計中一些必備「小套路」 怎樣的界面才不會顯亂

優秀的UI界面設計,對產品提升用戶體驗滿意度,和用戶對產品粘度都有着非常重要的作用。但很多網頁設計師朋友總覺得自己的界面不夠精緻、層次亂糟糟等,怎麼看怎麼不順眼。可能你缺少這些UI設計「小套路」,幫你解決這些煩惱。

盤點UI設計中一些必備「小套路」

套路一:字體字號的運用

1. 字體:

如果你的產品同時適配安卓和IOS,推薦使用蘋方字體設計;如果IOS端和安卓端分開設計,那就推薦IOS使用蘋方字體,安卓使用思源黑體。有些網頁設計師非常喜歡使用蘭亭黑系列,這就需要注意了,由於蘭亭黑系列字號偏大,會導致設計稿和還原效果差別大,不建議使用。

2. 字號

在實際設計過程中,需要看具體情況選字號,如果文字較多,分級複雜,這就會涉及到多種字號混排,同樣也考驗設計師對字體字號的運用,具體做法:

1) 不同層級的文字字號不能太接近;

2) 頁面出現大段文字時,盡量選用標準字重的字體;

3) 相同層級的內容字體字號應保持一致。

套路二:顏色運用

設計規範里往往會給一個品牌色、幾個輔助色、幾個黑白色等供我們使用,但真正運用的時候未必那麼容易,這是就需要:

1. 黑白灰

1) 避免使用純黑色:在黑色中加一點點的色彩傾向,會讓界面看起來更自然;

2) 文字排版:文字顏色可用不同灰度拉開對比,把信息層級區分開來。

2. 彩色

1) UI設計里的631原則:即主色調:次要色調:強調色調=6:3:1。通常品牌色不要超過整頁面的30%,色彩比重太多會讓界面顯得很躁,而且容易造成秩序混亂。

2) 漸變色小技巧:漸變色在當下非常流行,如果你對調漸變色不是太懂,可以嘗試:先確定顏色,然後打開色盤,在相鄰顏色左右各取一個,然後把左側顏色的明度提高,把右側顏色明度降低,這樣的漸變色看起就會舒服很多。

套路三:陰影的運用

陰影是UI設計中不可或缺的部分,即使在超扁平風格盛行的現在,UI設計師也沒有停止對陰影的喜愛。從視覺上看,陰影為二維界面增加厚度,讓用戶把界面和現實世界關聯起來,有助於用戶理解界面的各個模塊意義和交互方式。

1. 垂直偏移陰影效果更自然

一般光源都會在物體偏上的位置,而投影則會在物體偏下的位置。

2. 用陰影分割比描邊更優雅

用投影分割界面,不會分散用戶的注意力,而且還讓內容更聚焦。

3. 陰影不一定是黑色的

不同環境色對陰影的顏色也會有影響。

4. 彌散陰影

彌散陰影和普通陰影的區別是物體與光源的相對大小不同,而且給用戶傳達的感覺也不同,通常彌散陰影會給一種精緻的感覺,適合做精緻圖標或小控件。

套路四:留白的運用

留白指的是某個區域是空的,沒有別的裝飾和元素。正確的留白能讓界面更有節奏、更精緻,層級更清晰,閱讀更輕鬆。留白方式:

1. 文字1.5行間距:這是給讀者最舒服的閱讀體驗。

2. 親密關係法:關聯大的元素留白小些,關聯小的元素留白大些。

3. 元素大小適中:合適的元素大小能讓界面會呼吸。

其實,UI設計的小套路還有很多,這裏就不一一細說了,如果你還有什麼好的UI設計方法,不妨一起交流一下。