產(chǎn)品的好壞體驗(yàn)，只有用了才知道效果如何，下面是筆者以開(kāi)通QQ音樂(lè)會(huì)員為例子進(jìn)行分析，一起往下看，筆者分享的內(nèi)容了解更多吧！

在使用不同的產(chǎn)品時(shí)，會(huì)有不同的體驗(yàn)，好的產(chǎn)品設(shè)計(jì)能讓用戶覺(jué)得愉快，不好的產(chǎn)品設(shè)計(jì)會(huì)給用戶帶來(lái)糟糕的感受。

我就是來(lái)改善這些不好的體驗(yàn)的，一起來(lái)看看吧～

一、用戶操作場(chǎng)景

在開(kāi)通QQ音樂(lè)會(huì)員時(shí)，選擇 3 個(gè)月套餐后，沒(méi)感覺(jué)到頁(yè)面的變化，以為自己沒(méi)有選中套餐，于是重復(fù)操作選擇 3 個(gè)月套餐。

經(jīng)過(guò)多次來(lái)回切換選擇套餐后，才發(fā)現(xiàn)頁(yè)面的確認(rèn)支付按鈕會(huì)隨著選中的套餐不同，價(jià)格也會(huì)呈現(xiàn)不同。

原來(lái)不是我沒(méi)選中，而是頁(yè)面的選中效果太弱，導(dǎo)致我很難感知到已經(jīng)選中套餐。

二、產(chǎn)品診斷分析

1. 分析套餐卡片

1）app 呈現(xiàn)的樣式

• 選中套餐前：卡片的邊緣線框顏色呈現(xiàn)淺灰色。
• 選中套餐后：卡片的邊緣線框顏色呈現(xiàn)綠色，與【豪華綠鉆】套餐頁(yè)面的主題色一致，線框粗細(xì)無(wú)變化。

2）用戶實(shí)操感知

當(dāng)用戶的手機(jī)屏幕亮度較低，或者用戶所處的環(huán)境光線較弱時(shí)，很難察覺(jué)到選中后線框的顏色變化。除非用戶把手機(jī)亮度調(diào)至高亮，并且視線緊盯著套餐卡片，才可能感知到選中后的變化。

2. 分析支付按鈕

1）app 呈現(xiàn)的樣式

• 選中套餐前：app幫用戶做了選擇，默認(rèn)選擇第一個(gè)【連續(xù)包月】套餐，價(jià)格顯示為 15 元。
• 選中套餐后：用戶主動(dòng)選擇【3 個(gè)月】套餐，價(jià)格實(shí)時(shí)變化顯示為 45 元。

2）用戶實(shí)操感知

用戶在實(shí)際操作過(guò)程中，右手選擇左右居中的套餐時(shí)，確認(rèn)支付按鈕被手擋住了右半部分，剛好遮住價(jià)格展示。所以用戶較難感知到套餐被選中后按鈕價(jià)格變化。

3. 診斷問(wèn)題

從套餐卡片和支付按鈕兩個(gè)方面分析，app 中呈現(xiàn)的樣式與用戶實(shí)操感知是有差距的。設(shè)計(jì)師以為這樣可以讓用戶感知到，實(shí)際上用戶很難感知到。這樣的情況，在實(shí)際工作中不少見(jiàn)。

要避免該情況的發(fā)生，在需求前期需要多調(diào)研了解需求場(chǎng)景的根本問(wèn)題。在開(kāi)發(fā)過(guò)程中可以考慮通過(guò)A/B測(cè)試驗(yàn)證效果，上線后對(duì)比哪種方式更利于用戶使用。產(chǎn)品是不斷迭代的過(guò)程，在產(chǎn)品發(fā)布到生產(chǎn)投入用戶使用后，多收集用戶的使用反饋，為后續(xù)迭代提升獲取更多有效、有幫助的信息。

如果條件可以，產(chǎn)品設(shè)計(jì)師可以在現(xiàn)場(chǎng)悄悄地觀察用戶的操作過(guò)程，觀察用戶有沒(méi)有遇到阻礙和疑惑點(diǎn)?；蛘撸ㄟ^(guò)線上埋點(diǎn)數(shù)據(jù)分析用戶的使用。

分析思考??：用戶為什么不在選擇套餐后直接支付呢？為什么會(huì)多次來(lái)回切換套餐卡片？是因?yàn)檎也坏街Ц栋粹o？還是因?yàn)檫x擇套餐的過(guò)程中遇到困惑？

三、產(chǎn)品改善建議

QQ音樂(lè)的會(huì)員套餐分為三種類型：【豪華綠鉆】、【超級(jí)會(huì)員】、【視聽(tīng)會(huì)員】。下面，結(jié)合app現(xiàn)有的頁(yè)面交互方式，考慮如何提升用戶感知度。

1. 優(yōu)化方案一

體驗(yàn)發(fā)現(xiàn)在【超級(jí)會(huì)員】套餐頁(yè)選中套餐后的效果，相比【豪華綠鉆】套餐頁(yè)要更明顯。

1）對(duì)比【超級(jí)會(huì)員】與【豪華綠鉆】套餐被選中后的效果的不同點(diǎn)

a.套餐卡片邊框線條粗細(xì)不同，【超級(jí)會(huì)員】套餐線框?qū)挾仁恰竞廊A綠鉆】套餐的兩到三倍，顏色變化明顯，選中后的效果突出。

b.支付按鈕展示的位置不同，【超級(jí)會(huì)員】支付按鈕在頁(yè)面底部，右手選擇套餐時(shí)不會(huì)被手擋住。而【豪華綠鉆】支付按鈕跟隨套餐卡片展示，右手選擇套餐時(shí)，會(huì)被手擋住。

2）優(yōu)化方案

用戶在選擇套餐時(shí)，與頁(yè)面產(chǎn)生交互的過(guò)程中，眼隨心動(dòng)，用戶此時(shí)內(nèi)心想著選擇套餐，所以視線首先聚焦在選中后的卡片上面，其次會(huì)關(guān)注支付按鈕的變化。用戶的感知強(qiáng)度，在第一視覺(jué)沖擊中更能體現(xiàn)。

考慮在第一視覺(jué)上增強(qiáng)用戶感知，結(jié)合app 整體設(shè)計(jì)風(fēng)格、視覺(jué)、交互效果的一致性考慮，【豪華綠鉆】套餐選中后的邊框線條的粗細(xì)，可以與超級(jí)會(huì)員保持一致，從而突出選中后的狀態(tài)，增強(qiáng)用戶感知。

該方案能增強(qiáng)用戶感知，能初步解決選中套餐后無(wú)法感知的問(wèn)題，但第一視覺(jué)沖擊沒(méi)有特別明顯。

2. 優(yōu)化方案二

為了更加凸顯套餐被選中后的效果，可以參考【視聽(tīng)會(huì)員】頁(yè)選中視頻 VIP 后的交互效果。

• 選中前：視頻圖標(biāo)樣式較小。
• 選中后：視頻圖標(biāo)樣式被放大。

用戶在選擇套餐時(shí)，圖標(biāo)被放大，給用戶帶來(lái)第一視覺(jué)沖擊。當(dāng)某個(gè)事物的變化越明顯時(shí)，用戶更容易感知到。

參考該效果，在【豪華綠鉆】頁(yè)選中套餐后，可以放大套餐卡片，從而提升用戶感知度。

3. 對(duì)比兩個(gè)方案，擇優(yōu)選擇

以上兩個(gè)優(yōu)化方案，都是通過(guò)增強(qiáng)界面的視覺(jué)效果來(lái)提升用戶感知度。

對(duì)比兩個(gè)優(yōu)化方案，從用戶感知強(qiáng)烈程度來(lái)看，方案二更能體現(xiàn)套餐被選中后的效果。

如果要采用方案二，那么【豪華綠鉆】、【超級(jí)會(huì)員】頁(yè)套餐選中后的效果，需考慮會(huì)員套餐模塊整體設(shè)計(jì)風(fēng)格的一致性，考慮選中后的效果統(tǒng)一按放大卡片樣式優(yōu)化處理。

四、應(yīng)用設(shè)計(jì)原理

這里應(yīng)用到尼爾森可用性原則中的“可見(jiàn)性原則”，可見(jiàn)性是指：將系統(tǒng)中的重要功能信息以及當(dāng)前狀態(tài)和反饋顯示在頁(yè)面上，讓用戶能清晰地了解當(dāng)前的系統(tǒng)狀態(tài)和可用選項(xiàng)，可以快速找到需要的信息并提供即時(shí)的反饋。

避免使用戶感到困惑和迷失。有助于贏得用戶信任，這對(duì)于產(chǎn)生良好的用戶體驗(yàn)來(lái)說(shuō)至關(guān)重要。

在案例場(chǎng)景中，是通過(guò)增強(qiáng)界面的視覺(jué)效果來(lái)提升用戶感知度，讓用戶清晰地了解會(huì)員套餐被選中的狀態(tài)。

五、總結(jié)：

1. 在產(chǎn)品設(shè)計(jì)時(shí)，若想要提升用戶的感知度，可以通過(guò)增強(qiáng)界面的視覺(jué)效果來(lái)提升。在進(jìn)行產(chǎn)品體驗(yàn)優(yōu)化時(shí)，先“向內(nèi)看”，優(yōu)先考慮產(chǎn)品內(nèi)的同類型事件，交互樣式和效果的呈現(xiàn)是否一致。如果 A 模塊比 B 模塊呈現(xiàn)的效果更好，更貼合用戶的使用場(chǎng)景，那么可以優(yōu)化 B 模塊，向 A 模塊的效果靠齊。
2. 產(chǎn)品設(shè)計(jì)需考慮整體設(shè)計(jì)風(fēng)格一致，便于用戶辨別同類型的事件，這是保障用戶體驗(yàn)的重要前提。讓絕大多數(shù)約定俗成的規(guī)則和流程都被用戶不自覺(jué)地印在大腦中，約定俗成的慣例讓用戶不需要重新學(xué)習(xí)某個(gè)平臺(tái)上新的東西，降低學(xué)習(xí)成本。