編輯導(dǎo)語：產(chǎn)品的設(shè)計(jì)應(yīng)當(dāng)讓用戶始終清楚事項(xiàng)的發(fā)生，重要的元素也應(yīng)當(dāng)置于用戶一目了然的位置，直觀且清晰的設(shè)計(jì)往往能提升用戶的使用體驗(yàn)。本篇文章里，作者繼續(xù)總結(jié)了提升產(chǎn)品設(shè)計(jì)效果的幾個(gè)小技巧，一起來看一下。

重要的位置，要留給重要的元素。

編者按：用戶對產(chǎn)品的體驗(yàn)來自直觀感受。所以UI/UX往往對產(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 five。

2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。

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

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

相關(guān)閱讀：

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

我們開始吧……

一、如果用的是Type Scales和Grids的話，變通一下也是可以的

2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。

設(shè)計(jì)要講規(guī)矩，我是遵守規(guī)則的忠實(shí)粉絲，比方說Type Scale或者一直都很出色的8pt Grid系統(tǒng)我是遵守的。

但有時(shí)候最好不要太過教條主義，不要Scale 或 Grid告訴你該怎么做就怎么做，重要的是看怎么做更好看。

請記住，規(guī)則是可以變通的，有時(shí)候偶爾也是可以打破的。

做一個(gè)打破規(guī)則的叛逆者。

二、讓表單上的錯(cuò)誤消息有幫助且易于理解

2 個(gè)表單字段樣例。一個(gè)顯示的是帶有基本錯(cuò)誤消息的字段，另一個(gè)顯示了更詳細(xì)的錯(cuò)誤消息。

使用表單的時(shí)候，要盡量確保錯(cuò)誤消息說清楚出了什么問題，以及如何補(bǔ)救。

始終要讓用戶了解到具體情況。

要讓這些錯(cuò)誤消息對用戶有幫助，不要讓用戶蒙在鼓里。

三、在APP加載的時(shí)候，應(yīng)該盡量告訴用戶正在發(fā)生了什么事情

APP的 2 個(gè)加載屏幕樣例。一個(gè)空空如也，沒有加載提示，另一個(gè)展示了更詳細(xì)的加載指示器。

展示APP元素的框架可以幫助你快速地向用戶溝通應(yīng)用的布局，并讓用戶放寬心，知道有什么事情正在發(fā)生，而不是死機(jī)。

系統(tǒng)狀態(tài)可見性是需要遵循的重要原則，這讓用戶能夠了解正在發(fā)生的事情。

不要讓用戶玩猜謎游戲。要從一開始就讓他們了解情況。

四、通知用戶如果他們應(yīng)用某個(gè)動(dòng)作將會(huì)發(fā)生什么

APP的 2 個(gè)通知樣例。一個(gè)提供的信息非?；荆硪粋€(gè)在模態(tài)內(nèi)部提供了更詳細(xì)的描述。

在進(jìn)行應(yīng)用可能會(huì)產(chǎn)生后果的特定操作之前，始終都要先詳細(xì)告知用戶。

這尤其適用于某些會(huì)產(chǎn)生不可逆轉(zhuǎn)后果的操作，比方說永久性刪除某些內(nèi)容。

讓用戶知道將會(huì)發(fā)生什么，并要求他們在按下那個(gè)寫著“刪除互聯(lián)網(wǎng)”的紅色大按鈕之前再三確認(rèn)自己要這么做。

五、確保最重要的屏幕在標(biāo)簽欄有優(yōu)先位置

2 個(gè)標(biāo)簽欄樣例。上面這個(gè)展示的是不太重要的圖標(biāo)，下面這個(gè)展示的是更重要的圖標(biāo)。

APP的標(biāo)簽欄可是屏幕這塊房地產(chǎn)的黃金地段，所以請明智使用。

要把你的標(biāo)簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標(biāo)里面。

小小的標(biāo)簽欄只能留給重要的東西。

六、不要把重要操作隱藏在下拉菜單里面。重要操作得放在前面，核心的位置！

2個(gè)桌面導(dǎo)航的樣例。一個(gè)是注冊和登錄按鈕隱藏在下拉菜單里面，另一個(gè)在菜單以外放置了 2 個(gè)按鈕，而且就放在頂部導(dǎo)航欄旁邊。

是的，我時(shí)不時(shí)還會(huì)在桌面視圖里面看到這種情況發(fā)生。

用戶需要采取的基本操作（也就是注冊或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。

把這些重要操作放在訪問便利的位置，并應(yīng)該放在用戶預(yù)期最應(yīng)該出現(xiàn)的地方。

作者：Marc Andrew，譯者：boxi

來源：https://www.36kr.com/p/1302313074821767

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

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