編輯導(dǎo)語(yǔ)：如何讓用戶更加清晰地獲取信息？這需要產(chǎn)品設(shè)計(jì)在UI或UX設(shè)計(jì)上多下功夫。其中，預(yù)先定義好顏色調(diào)色板、讓設(shè)計(jì)保持一致性也十分重要。本篇文章里，作者總結(jié)了如何提升UI及UX設(shè)計(jì)效果的幾個(gè)小技巧，一起來(lái)看一下。

預(yù)先定義好顏色調(diào)色板，這事很重要。

編者按：用戶對(duì)產(chǎn)品的體驗(yàn)來(lái)自直觀感受。所以UI/UX往往對(duì)產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗(yàn)會(huì)讓強(qiáng)大的功能失去效力。

但怎么才能提高UI/UX設(shè)計(jì)的效果呢？不一定需要你掌握豐富全面的設(shè)計(jì)知識(shí)，有時(shí)候一點(diǎn)點(diǎn)的小改變就能令設(shè)計(jì)大為改觀。

Marc Andrew總結(jié)了36個(gè)改進(jìn)UI/UX設(shè)計(jì)的小技巧，分成6篇系列文章刊出，此為第四篇，希望能夠幫助到你。原文發(fā)表在Medium上，標(biāo)題是：UI & UX micro-tips: Volume four。

2個(gè)卡片設(shè)計(jì)樣例。一個(gè)的形狀、文本樣式等均不匹配，另一個(gè)的形狀、文本樣式等是匹配的。

相關(guān)閱讀：

• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全（一）
• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全（二）
• 人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全（三）

在創(chuàng)作實(shí)用、易于理解且華麗的 UI 時(shí)，只需要做一點(diǎn)點(diǎn)的調(diào)整馬上就可以改進(jìn)設(shè)計(jì)。

在這篇系列文章的第4篇中，我會(huì)給大家再帶來(lái)6個(gè)容易實(shí)踐的 UI 和 UX 小技巧。

有了這些，你不費(fèi)吹灰之力就能改進(jìn)設(shè)計(jì)和用戶體驗(yàn)。

那就開(kāi)始吧……

一、要跟設(shè)計(jì)元素保持一致

2個(gè)卡片設(shè)計(jì)樣例。一個(gè)的形狀、文本樣式等均不匹配，另一個(gè)的形狀、文本樣式等是匹配的。

人是習(xí)慣的產(chǎn)物，所以會(huì)預(yù)期產(chǎn)品用自己熟悉的方式呈現(xiàn)。

我們希望在瀏覽網(wǎng)站或app時(shí)對(duì)方始終都能保持一致，對(duì)于設(shè)計(jì)來(lái)說(shuō)這是需要遵循的一個(gè)基本原則。

布局、圖標(biāo)、顏色以及按鈕等都是如此，不要超出用戶的預(yù)期。

要保持一致，減少混淆，并改善用戶體驗(yàn)。

二、留白，大塊地留白

2個(gè)卡片設(shè)計(jì)示例。其中一個(gè)元素?cái)D在一起，靠得太緊密了，另一個(gè)安排了更多的空白，營(yíng)造出更好的空間設(shè)計(jì)。

留白，負(fù)空間。

一樣的東西，不一樣的標(biāo)題。

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

給設(shè)計(jì)留白是最簡(jiǎn)單的改進(jìn)方法之一，立竿見(jiàn)影，會(huì)讓你的作品更有呼吸感，看起來(lái)更精致。

三、開(kāi)頭段落要風(fēng)格化樣式，好吸引用戶

2個(gè)文本內(nèi)容的樣例。左邊這個(gè)開(kāi)頭段落的樣式跟其余部分內(nèi)容的樣式相同，右邊這個(gè)開(kāi)頭段落的樣式跟其余部分的樣式不同。

如果你要設(shè)計(jì)的是長(zhǎng)格式的內(nèi)容，比方說(shuō)博客文章/文章的話，那么把讀者吸引到內(nèi)容這里就是必不可少的工作了。

在實(shí)現(xiàn)這一目標(biāo)時(shí)，開(kāi)篇段落外觀的重要性一點(diǎn)都不亞于內(nèi)容本身。

只需要進(jìn)行簡(jiǎn)單的調(diào)整，比方說(shuō)設(shè)置不一樣的字體大小、行高、粗細(xì)或者顏色，就可以改善讀者的第一印象。

四、面向掃描儀的設(shè)計(jì)，段落的篇幅要短

2個(gè)文本內(nèi)容的樣例。左邊這個(gè)段落篇幅很冗長(zhǎng)，右邊這個(gè)則是把段落分解成了更小的段落。

在處理長(zhǎng)篇內(nèi)容的時(shí)候，這是一種很實(shí)用的技巧，盡量讓這些段落保持簡(jiǎn)短有力。

我們現(xiàn)在人人都是掃描儀，都希望能盡快消化信息。

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

五、定義好顏色調(diào)色板，讓你的設(shè)計(jì)能夠保持一致性

2個(gè)卡片設(shè)計(jì)示例。一個(gè)由不同的撞色組成，另一個(gè)則更加優(yōu)雅，運(yùn)用了精致的色彩調(diào)色板。

想要?jiǎng)?chuàng)作出更專業(yè)的用戶界面嗎？那就定義好你的顏色調(diào)色板。

可別隨隨便便選擇了大量顏色填充設(shè)計(jì)之后還想指望效果能夠達(dá)到最好。

要從一開(kāi)始就建立一個(gè)強(qiáng)大的顏色調(diào)色板，然后保持下去。這么做可以避免頭痛的問(wèn)題，并讓整個(gè)設(shè)計(jì)增加一致性。

六、使用 8pt的網(wǎng)格系統(tǒng)時(shí)，圖標(biāo)的放置要保持一致

2 個(gè)圖標(biāo)集的樣例。一個(gè)圖標(biāo)排列不規(guī)則，另一個(gè)圖標(biāo)擺放得很完美。

使用圖標(biāo)和 8pt 網(wǎng)格系統(tǒng)時(shí)，你會(huì)發(fā)現(xiàn)大多數(shù)設(shè)計(jì)得好的圖標(biāo)集都會(huì)有能夠放進(jìn)長(zhǎng)寬為8的倍數(shù)的框架里面的圖標(biāo)（也就是 16×16、24×24、32×32 等）。

有時(shí)候，只是偶爾情況下，未必就得這樣。

否則的話，請(qǐng)確保插入到設(shè)計(jì)當(dāng)中的任何圖標(biāo)都能夠放進(jìn)8pt 網(wǎng)格值（比如 24×24）的容器里面。

這么做會(huì)讓你的圖標(biāo)在設(shè)計(jì)當(dāng)中保持一致。

作者：Marc Andrew，譯者：boxi

來(lái)源：https://www.36kr.com/p/1302302407657864

本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。