產品的好壞體驗，只有用了才知道效果如何，下面是筆者以開通QQ音樂會員為例子進行分析，一起往下看，筆者分享的內容了解更多吧！

在使用不同的產品時，會有不同的體驗，好的產品設計能讓用戶覺得愉快，不好的產品設計會給用戶帶來糟糕的感受。

我就是來改善這些不好的體驗的，一起來看看吧～

一、用戶操作場景

在開通QQ音樂會員時，選擇 3 個月套餐后，沒感覺到頁面的變化，以為自己沒有選中套餐，于是重復操作選擇 3 個月套餐。

經過多次來回切換選擇套餐后，才發現頁面的確認支付按鈕會隨著選中的套餐不同，價格也會呈現不同。

原來不是我沒選中，而是頁面的選中效果太弱，導致我很難感知到已經選中套餐。

二、產品診斷分析

1. 分析套餐卡片

1）app 呈現的樣式

• 選中套餐前：卡片的邊緣線框顏色呈現淺灰色。
• 選中套餐后：卡片的邊緣線框顏色呈現綠色，與【豪華綠鉆】套餐頁面的主題色一致，線框粗細無變化。

2）用戶實操感知

當用戶的手機屏幕亮度較低，或者用戶所處的環境光線較弱時，很難察覺到選中后線框的顏色變化。除非用戶把手機亮度調至高亮，并且視線緊盯著套餐卡片，才可能感知到選中后的變化。

2. 分析支付按鈕

1）app 呈現的樣式

• 選中套餐前：app幫用戶做了選擇，默認選擇第一個【連續包月】套餐，價格顯示為 15 元。
• 選中套餐后：用戶主動選擇【3 個月】套餐，價格實時變化顯示為 45 元。

2）用戶實操感知

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

3. 診斷問題

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

要避免該情況的發生，在需求前期需要多調研了解需求場景的根本問題。在開發過程中可以考慮通過A/B測試驗證效果，上線后對比哪種方式更利于用戶使用。產品是不斷迭代的過程，在產品發布到生產投入用戶使用后，多收集用戶的使用反饋，為后續迭代提升獲取更多有效、有幫助的信息。

如果條件可以，產品設計師可以在現場悄悄地觀察用戶的操作過程，觀察用戶有沒有遇到阻礙和疑惑點?；蛘?，通過線上埋點數據分析用戶的使用。

分析思考??：用戶為什么不在選擇套餐后直接支付呢？為什么會多次來回切換套餐卡片？是因為找不到支付按鈕？還是因為選擇套餐的過程中遇到困惑？

三、產品改善建議

QQ音樂的會員套餐分為三種類型：【豪華綠鉆】、【超級會員】、【視聽會員】。下面，結合app現有的頁面交互方式，考慮如何提升用戶感知度。

1. 優化方案一

體驗發現在【超級會員】套餐頁選中套餐后的效果，相比【豪華綠鉆】套餐頁要更明顯。

1）對比【超級會員】與【豪華綠鉆】套餐被選中后的效果的不同點

a.套餐卡片邊框線條粗細不同，【超級會員】套餐線框寬度是【豪華綠鉆】套餐的兩到三倍，顏色變化明顯，選中后的效果突出。

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

2）優化方案

用戶在選擇套餐時，與頁面產生交互的過程中，眼隨心動，用戶此時內心想著選擇套餐，所以視線首先聚焦在選中后的卡片上面，其次會關注支付按鈕的變化。用戶的感知強度，在第一視覺沖擊中更能體現。

考慮在第一視覺上增強用戶感知，結合app 整體設計風格、視覺、交互效果的一致性考慮，【豪華綠鉆】套餐選中后的邊框線條的粗細，可以與超級會員保持一致，從而突出選中后的狀態，增強用戶感知。

該方案能增強用戶感知，能初步解決選中套餐后無法感知的問題，但第一視覺沖擊沒有特別明顯。

2. 優化方案二

為了更加凸顯套餐被選中后的效果，可以參考【視聽會員】頁選中視頻 VIP 后的交互效果。

• 選中前：視頻圖標樣式較小。
• 選中后：視頻圖標樣式被放大。

用戶在選擇套餐時，圖標被放大，給用戶帶來第一視覺沖擊。當某個事物的變化越明顯時，用戶更容易感知到。

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

3. 對比兩個方案，擇優選擇

以上兩個優化方案，都是通過增強界面的視覺效果來提升用戶感知度。

對比兩個優化方案，從用戶感知強烈程度來看，方案二更能體現套餐被選中后的效果。

如果要采用方案二，那么【豪華綠鉆】、【超級會員】頁套餐選中后的效果，需考慮會員套餐模塊整體設計風格的一致性，考慮選中后的效果統一按放大卡片樣式優化處理。

四、應用設計原理

這里應用到尼爾森可用性原則中的“可見性原則”，可見性是指：將系統中的重要功能信息以及當前狀態和反饋顯示在頁面上，讓用戶能清晰地了解當前的系統狀態和可用選項，可以快速找到需要的信息并提供即時的反饋。

避免使用戶感到困惑和迷失。有助于贏得用戶信任，這對于產生良好的用戶體驗來說至關重要。

在案例場景中，是通過增強界面的視覺效果來提升用戶感知度，讓用戶清晰地了解會員套餐被選中的狀態。

五、總結：

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