網(wǎng)站建設中的元素幫您提升用戶(hù)體驗感發(fā)布者：本站     時(shí)間：2021-01-26 14:01:51

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

指示性設計元素是如何影響用戶(hù)體驗的？
大多數情況下，往往只需要幾秒鐘時(shí)間，用戶(hù)就已經(jīng)決定了要不要使用你的產(chǎn)品。因此，頁(yè)面的邏輯是否清晰，結構是否明確，重點(diǎn)是否突出，指示性元素的引導是否合理就顯得非常重要。

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

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

1）界面中人物視線(xiàn)偏移表單：

2）界面中人物視線(xiàn)聚焦在表單:

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

4）界面中沒(méi)有任何指示性設計元素：

5）界面中通過(guò)深色背景突出表單

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

指示性設計元素幫你提升用戶(hù)體驗

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

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

指示性設計元素幫你提升用戶(hù)體驗

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

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

指示性設計元素幫你提升用戶(hù)體驗

該頁(yè)面，用戶(hù)的注意力也完全脫離了表單。

可見(jiàn)，指示性設計元素對用戶(hù)行為和頁(yè)面的轉化率有著(zhù)非常重大的影響。

 

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

 

家居裝飾電子商務(wù)網(wǎng)站
使用箭頭作為交互元素的視覺(jué)提示：


外賣(mài)網(wǎng)站
左右各有一個(gè)箭頭，提示用戶(hù)可以選擇更多：

Dance Academy著(zhù)陸頁(yè)
使用箭頭提示用戶(hù)頁(yè)面在水平方向上存在交互:

Tubik Studio團隊設計的網(wǎng)站
底部箭頭提示用戶(hù)可以滾動(dòng)鼠標瀏覽頁(yè)面：

二、手型（Pointers）
如果你不想用箭頭這類(lèi)具有強指示性的元素，可以考慮使用手型提示?；叵胍幌?，如果有人想讓你看某樣東西的時(shí)候，他是不是會(huì )用手直接指向該物體？在web或app界面中也一樣，想要引起用戶(hù)注意，也可以用“手”直接指出來(lái)。這樣，不僅可以把指示性元素和整體的視覺(jué)效果融為一體，還非常巧妙地提供了優(yōu)雅的視覺(jué)提示。


某招聘藝術(shù)家平臺的著(zhù)陸頁(yè)
使用了插畫(huà)元素，不僅提升了界面的美觀(guān)度，插畫(huà)人物的視線(xiàn)和手勢也正好指向了關(guān)鍵信息和CTA。

某郵件服務(wù)登錄頁(yè)面
該頁(yè)面的指示性設計元素實(shí)在很巧妙，不易發(fā)覺(jué)，卻又能把全部的注意力都集中到一點(diǎn)上——FREE SIGN UP。如果你仔細觀(guān)察，每個(gè)元素，無(wú)論是紙飛機的朝向，還是花朵延伸的方向，全部都指向了CTA。

行李托運網(wǎng)站登陸頁(yè)面
使用了插圖，人物和飛機都指向了頂部最右側的CTA，也就是BOOK YOUR TRANSFER這個(gè)按鈕。

郵件管理系統登錄頁(yè)面
該頁(yè)面的人物手勢和其他構圖元素，都把重點(diǎn)指向了首頁(yè)大標語(yǔ)。

三、視線(xiàn)（Eye line）
視線(xiàn)是建立在人類(lèi)自然反應之上的一種強大的指向方式。當看到別人的目光集中在某個(gè)點(diǎn)或某個(gè)物體上時(shí)，我們會(huì )自然而然地產(chǎn)生好奇心，他們在看什么？人類(lèi)的這個(gè)心理反應經(jīng)常被用在視覺(jué)內容設計中，包括攝影、插圖等，最后在UI界面也被廣泛使用。

美發(fā)美容公司網(wǎng)站主頁(yè)
使用了首頁(yè)大圖，該模特的視線(xiàn)向下方看，視線(xiàn)的焦點(diǎn)停留在CTA上約會(huì )應用程序的登錄頁(yè)面
使用了帶有文本的插圖，人物的視線(xiàn)正在看向文本內容。

銷(xiāo)售發(fā)飾的電子商務(wù)網(wǎng)站
使用了精美的插圖，界面中人物的視線(xiàn)集中在首頁(yè)標語(yǔ)上。

四、視覺(jué)提示
箭頭可以提示用戶(hù)進(jìn)行某種交互，很多其他元素也可以用于提示用戶(hù)，比如，表示交互類(lèi)型的圖標或插圖。此外，鼠標還可以提示用戶(hù)滾動(dòng)頁(yè)面，手勢動(dòng)畫(huà)可以提示用戶(hù)滑動(dòng)，總之，他們都可以幫助用戶(hù)順利地了解和探索你的頁(yè)面。

某建筑設計工作室的網(wǎng)站
底部有一個(gè)鼠標形狀的圖標，告知用可以嘗試向下滾動(dòng)：

五、呈現部分內容
交互過(guò)程中可能出現這樣的問(wèn)題，當頁(yè)面布局看起來(lái)很完整并且滾動(dòng)鼠標時(shí)無(wú)法加載更多內容時(shí)，用戶(hù)會(huì )以為他們已經(jīng)看到了全部?jì)热荨?br />
對于這種情況，有一個(gè)很棒的解決辦法，可以在屏幕上可見(jiàn)區域的最下方顯示的一部分內容，這樣，用戶(hù)就不會(huì )遺漏任何重要信息了。
時(shí)裝模特網(wǎng)站
網(wǎng)頁(yè)的底部區域展示了部分照片，提示用戶(hù)可以滾動(dòng)查看更多：
外賣(mài)網(wǎng)站
在頁(yè)面底部顯示菜品的一部分，提示用戶(hù)可以滾動(dòng)查看更多；此外，使用箭頭作為方向提示，告知用戶(hù)水平方向上也會(huì )看到更多信息：

總結
以上就是本次分享的一些指示性設計元素，其實(shí)這類(lèi)的設計元素還在不斷的創(chuàng )新中，如果你有更多的想法，歡迎和我們交流?？傊?，盡管指示性設計元素的表現方式多種多樣，但它們最終的目的都是引導用戶(hù)，為用戶(hù)提供更好的用戶(hù)體驗。設計師在設計過(guò)程中，自始至終都要銘記這一點(diǎn)。