人人都可以是設計師:UI&UX 小技巧大全 (四)

1 評論 6201 瀏覽 9 收藏 8 分鐘

編輯導語:如何讓用戶更加清晰地獲取信息?這需要產品設計在UI或UX設計上多下功夫。其中,預先定義好顏色調色板、讓設計保持一致性也十分重要。本篇文章里,作者總結了如何提升UI及UX設計效果的幾個小技巧,一起來看一下。

預先定義好顏色調色板,這事很重要。

編者按:用戶對產品的體驗來自直觀感受。所以UI/UX往往對產品的成敗有著直接的影響,糟糕的UI/UX體驗會讓強大的功能失去效力。

但怎么才能提高UI/UX設計的效果呢?不一定需要你掌握豐富全面的設計知識,有時候一點點的小改變就能令設計大為改觀。

Marc Andrew總結了36個改進UI/UX設計的小技巧,分成6篇系列文章刊出,此為第四篇,希望能夠幫助到你。原文發表在Medium上,標題是:UI & UX micro-tips: Volume four。

2個卡片設計樣例。一個的形狀、文本樣式等均不匹配,另一個的形狀、文本樣式等是匹配的。

相關閱讀:

在創作實用、易于理解且華麗的 UI 時,只需要做一點點的調整馬上就可以改進設計。

在這篇系列文章的第4篇中,我會給大家再帶來6個容易實踐的 UI 和 UX 小技巧。

有了這些,你不費吹灰之力就能改進設計和用戶體驗。

那就開始吧……

一、要跟設計元素保持一致

2個卡片設計樣例。一個的形狀、文本樣式等均不匹配,另一個的形狀、文本樣式等是匹配的。

人是習慣的產物,所以會預期產品用自己熟悉的方式呈現。

我們希望在瀏覽網站或app時對方始終都能保持一致,對于設計來說這是需要遵循的一個基本原則。

布局、圖標、顏色以及按鈕等都是如此,不要超出用戶的預期。

要保持一致,減少混淆,并改善用戶體驗。

二、留白,大塊地留白

2個卡片設計示例。其中一個元素擠在一起,靠得太緊密了,另一個安排了更多的空白,營造出更好的空間設計。

留白,負空間。

一樣的東西,不一樣的標題。

這是我給你的建議。留白或大方或適度都行,但是要用好。

給設計留白是最簡單的改進方法之一,立竿見影,會讓你的作品更有呼吸感,看起來更精致。

三、開頭段落要風格化樣式,好吸引用戶

2個文本內容的樣例。左邊這個開頭段落的樣式跟其余部分內容的樣式相同,右邊這個開頭段落的樣式跟其余部分的樣式不同。

如果你要設計的是長格式的內容,比方說博客文章/文章的話,那么把讀者吸引到內容這里就是必不可少的工作了。

在實現這一目標時,開篇段落外觀的重要性一點都不亞于內容本身。

只需要進行簡單的調整,比方說設置不一樣的字體大小、行高、粗細或者顏色,就可以改善讀者的第一印象。

四、面向掃描儀的設計,段落的篇幅要短

2個文本內容的樣例。左邊這個段落篇幅很冗長,右邊這個則是把段落分解成了更小的段落。

在處理長篇內容的時候,這是一種很實用的技巧,盡量讓這些段落保持簡短有力。

我們現在人人都是掃描儀,都希望能盡快消化信息。

盡可能以簡短、清晰的段落呈現你的文案,這是一種很可靠的方式,能讓用戶更好地閱讀和消化信息。

五、定義好顏色調色板,讓你的設計能夠保持一致性

2個卡片設計示例。一個由不同的撞色組成,另一個則更加優雅,運用了精致的色彩調色板。

想要創作出更專業的用戶界面嗎?那就定義好你的顏色調色板。

可別隨隨便便選擇了大量顏色填充設計之后還想指望效果能夠達到最好。

要從一開始就建立一個強大的顏色調色板,然后保持下去。這么做可以避免頭痛的問題,并讓整個設計增加一致性。

六、使用 8pt的網格系統時,圖標的放置要保持一致

2 個圖標集的樣例。一個圖標排列不規則,另一個圖標擺放得很完美。

使用圖標和 8pt 網格系統時,你會發現大多數設計得好的圖標集都會有能夠放進長寬為8的倍數的框架里面的圖標(也就是 16×16、24×24、32×32 等)。

有時候,只是偶爾情況下,未必就得這樣。

否則的話,請確保插入到設計當中的任何圖標都能夠放進8pt 網格值(比如 24×24)的容器里面。

這么做會讓你的圖標在設計當中保持一致。

 

作者:Marc Andrew,譯者:boxi

來源:https://www.36kr.com/p/1302302407657864

本文由 @神譯局 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很有細節,學到了!

    來自安徽 回復