指示性設(shè)計(jì)元素設(shè)計(jì)幫你提升用戶體驗(yàn)

2022-02-10 點(diǎn)擊量：

日常生活中，當(dāng)有人向你問路時(shí)，最好的辦法就是給他們指出方向和路線。在web和app界面設(shè)計(jì)中也一樣，設(shè)計(jì)師可以利用各種指示性設(shè)計(jì)元素引導(dǎo)用戶，幫助用戶找到自己想要的內(nèi)容或完成某項(xiàng)必要的操作。

本文就UI界面中常見的指示性設(shè)計(jì)元素做了一些整理，希望可以幫助到各位設(shè)計(jì)師。

什么是指示性設(shè)計(jì)元素？

眾所周知，道路上的指示標(biāo)志是用來指示車輛和行人該如何通行。同理，在UI界面中，指示性設(shè)計(jì)元素就是用來告知、引導(dǎo)、指示用戶的設(shè)計(jì)元素，因此，只要是在視覺上可以提示特定的交互或內(nèi)容，從而讓用戶更快、更輕松地注意到，比如CTA按鈕，文本提示等，都屬于指示性設(shè)計(jì)元素。

指示性設(shè)計(jì)元素是如何影響用戶體驗(yàn)的？

大多數(shù)情況下，往往只需要幾秒鐘時(shí)間，用戶就已經(jīng)決定了要不要使用你的產(chǎn)品。因此，頁面的邏輯是否清晰，結(jié)構(gòu)是否明確，重點(diǎn)是否突出，指示性元素的引導(dǎo)是否合理就顯得非常重要。

指示性設(shè)計(jì)元素是我們今天討論的重點(diǎn)，它對(duì)用戶體驗(yàn)的影響是多方面的，使用正確的指示性設(shè)計(jì)元素可以：

方便用戶快速瀏覽頁面

加強(qiáng)頁面視覺層次感

提供更便利的導(dǎo)航

提高頁面轉(zhuǎn)化率

關(guān)于指示性元素和用戶體驗(yàn)之間的問題，CXL Lnsitute曾經(jīng)做過一個(gè)很有名的實(shí)驗(yàn)。這個(gè)研究小組做了很多個(gè)不同版本的落地頁面來進(jìn)行測(cè)試，嘉瑞廣告，根據(jù)用戶行為收集了大量的用戶交互數(shù)據(jù)，并進(jìn)行了準(zhǔn)確分析，發(fā)現(xiàn)不同的設(shè)計(jì)對(duì)用戶行為、用戶在頁面的停留時(shí)間以及頁面轉(zhuǎn)化率都大有影響。

CXL Lnsitute用于測(cè)試的落地頁面如下：

1）界面中人物視線偏移表單：

2）界面中人物視線聚焦在表單:

3）界面中有箭頭指向表單：

4）界面中沒有任何指示性設(shè)計(jì)元素：

5）界面中通過深色背景突出表單：

6）界面中有一個(gè)三角指向表單：

測(cè)試結(jié)果顯示，落地頁的熱點(diǎn)圖差距非常巨大。

首先，帶有手繪箭頭的頁面熱點(diǎn)圖如下：

該頁面用戶的停留時(shí)間最長(zhǎng)，并且表單的點(diǎn)擊次數(shù)最多。

其次，人物視線偏離表單的頁面熱點(diǎn)圖如下：

該頁面，用戶的注意力也完全脫離了表單。

可見，指示性設(shè)計(jì)元素對(duì)用戶行為和頁面的轉(zhuǎn)化率有著非常重大的影響。

常見的指示性設(shè)計(jì)元素 一、箭頭（Arrows）

箭頭是最受歡迎的指示設(shè)計(jì)元素之一，它通用、明顯、易懂。不同年齡、不同文化、不同教育程度以及不同技術(shù)涵養(yǎng)的人都可以理解。前面提到的CXL Lnsitute的測(cè)試也驗(yàn)證了這一點(diǎn)。

家居裝飾電子商務(wù)網(wǎng)站

使用箭頭作為交互元素的視覺提示：

外賣網(wǎng)站

左右各有一個(gè)箭頭，提示用戶可以選擇更多：

Dance Academy著陸頁

使用箭頭提示用戶頁面在水平方向上存在交互:

Tubik Studio團(tuán)隊(duì)設(shè)計(jì)的網(wǎng)站

底部箭頭提示用戶可以滾動(dòng)鼠標(biāo)瀏覽頁面：

二、手型（Pointers）