起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識就改個字體顏色，怎么這么傷害用戶體驗？
本文講述了過度設計會傷害用戶的體驗感，產品經理應該如何配合團隊設計出滿足用戶真實需求的產品，如果你感興趣的話，不妨看看吧。
“設計是解決問題的過程，而不僅僅是制造漂亮的東西。”
上面這句話是唐納德 ? 諾曼在《設計心理學》一書中所表達的觀點，眾所周知，唐納德 ? 諾曼是全球知名的設計師，還是全球知名的用戶體驗研究機構——尼爾森諾曼集團(NNG)的聯合創始人。
所以，我們可以說，創造用戶價值是設計者的天職。
咱們產品經理作為產品設計人員，天天與需求打交道，似乎每時每刻都在創造用戶價值，不過，根據鏡同學的觀察，不少產品同學其實都沒有真正理解這個設計內核，總是習慣追逐于漂亮的東西。
但其實，抽象業務場景、解決用戶痛點，遠比華麗的界面、復雜的交互要更有價值，這個道理很樸素也很深刻：用戶需要的從來都不是好看的皮囊，而是能解決其真實需求、與其共鳴的靈魂。
從這個角度來重新理解產品設計，很多現象背后的困惑、不解瞬間便豁然開朗，與此同時，這個價值標尺不僅可以用來衡量高質量、有實效的產品設計，更能篩選過濾出低價值、逆常識的偽需求。
我們一起來討論下。
一、云閃付：字體顏色帶來的逆更新
“云閃付”是我常用的APP之一。
除了偶爾薅個本地羊毛、領個優惠券之外，鏡同學使用相對高頻的功能就是”信用卡還款“，因為我平時也在使用好幾張信用卡，而使用云閃付來進行管理和還款極為方便，畢竟其背后主體可是中國銀聯股份有限公司。
就在前幾天，我發現云閃付更新了新版本，而“信用卡還款”這個模塊也有一些變動，這個變動若單從業務邏輯來看，可以說是零更新；但若從用戶體驗上來看，我個人覺得變動還是很大的。
注意，鏡同學一直說的都是變動，而不是升級，因為在我看來，這次更新是退化、是逆更新。
大家可以先看下對比圖：
仔細對比后，我們可以清晰的看到，這個頁面的設計更新主要有四點：
①新增“分期”和“還款”按鈕，即，按鈕位置由原二級頁面前置在該一級頁面，用以提高用戶轉化率；
②隱藏了“到期還款日”這個字段。
③“剩余應還金額”由醒目的紅色字體，變為黑色字體。
④更新后的卡片頂部區域增加了漸變色，而且這個漸變色是獲取的銀行logo色，如，第二個卡片頂部區域是橘色，因為平安銀行logo是橘色；第三個則是中信銀行的深紅。
OK，接下來咱們從產品設計角度來做個簡要的分析：
首先，新增“分期”和“還款”按鈕，用以提高業務轉化，這個本無可厚非，但過多的操作按鈕會造成用戶焦慮，尤其是在多卡片呈現上，一個頁面幾乎都是按鈕，非常影響用戶體驗。
其次，這次更新主要體現在視覺效果上，更新前紅色的“還款金額”和紅色的“到期前預警”都是非常高價值的，因為在這個頁面，用戶核心訴求就是還款管理：用戶需要清晰地看到欠款金額和到期還款日，以便做還款計劃等。
再者，也是很重要的一點，更新后的設計因為按鈕過多，并且按鈕顏色過于鮮艷，極易造成用戶視覺上的錯亂，當然，如果只有一個卡片，或許沒太大影響，但過多的卡片一定會帶來用戶焦慮。
最后，所謂根據logo的漸變色，其實也是過度設計，回到文章開頭的一句話，好的設計是解決問題，而不是一味制造漂亮的東西，還是同樣的場景，如果10多個卡片，那這個頁面花紅柳綠的，完全沒有視覺中心。
你看，似乎只是更新了頁面顏色、優化了視覺設計，但用戶其實會有很大的體驗落差，原因就在于沒有從真實需求場景出發，我甚至高度懷疑該頁面的UX設計師沒有充分理解該場景，只是割裂地做所謂的精致設計。
二、簡約是極致的復雜
鏡同學以為，用戶體驗設計不僅是個連貫、協同的過程，更是踐行科學方法論的應用過程，同樣的，視覺對體驗設計的影響也是系統性的，或者簡單來說，界面顏色怎么用是有邏輯規則的。
我之前在知識星球分享過一個典型的產品設計案例，為了更好地理解，不妨再討論一二，咱們可以先看下相關的設計對比圖：
【圖 -↑ 來源于網絡】
大家作為產品經理，即便沒有很深的界面設計方法論，不懂得視覺設計所應遵循的邏輯規則，但我相信通過左右兩個設計對比圖，大多數產品同學都能列出原圖的很多設計上的體驗缺陷。
是的，不合理的視覺設計，本質上就是體驗缺陷。
對比這兩張設計圖，我們可以發現這其實就是典型的視覺設計的應用，當然，你也可以簡單地這樣理解：當元件被應用不合理的設計顏色，不僅會帶來的用戶體驗落差，還可能會導致業務轉化受影響。
比如，觀察上圖中的左下角“Book now”按鈕就很容易發現：左圖其按鈕顏色淺、右圖則顏色深，顯然，右圖的用戶視覺中心則完全聚焦在該按鈕上，這必然會帶來更多的用戶轉化。
當然，這個在視覺設計上是有個科學方法的，被稱作瞇眼測試（Squint Test），簡單來說就是，我們可以嘗試瞇著眼睛來看設計圖，需要最突出的元素就應是主要動作按鈕，這也是視覺分層的設計邏輯之一。
再比如，左側圖片上很多顏色選用也不合邏輯，如，標題采用了藍色，而藍色往往會被習慣理解為可點擊交互操作，顯然，這里的標題并沒有點擊需求，這樣的顏色設計會誤導用戶。
事實上，我們應該有目的的少量使用顏色，盡量避免純粹為了裝飾而使用顏色，因為那樣往往會讓人感到困惑和分心。
當然，再分享一個簡單而有效的方法，那就是我們可以將品牌顏色（統一視覺設計，一般會采用品牌顏色）應用于交互式元素，如文本鏈接和按鈕。
這樣的設計簡潔高效，能直接地告訴用戶什么是交互式的，什么是不交互的，盡量避免在非交互式元素上使用品牌顏色。
所以你看，視覺設計深刻影響著產品功能和用戶體驗。
好了，通過上述兩個產品小案例，相信大家都能理解視覺對于用戶體驗的價值，這還遺留一個問題，可能也是很多產品同學的疑問：這不應該是UI/UX設計師或者視覺設計同學的工作嗎？
有一說一，非要這樣講，的確也沒有什么毛病，但鏡同學想說的是，產品同學最重要的職責是將需求價值最大化，這也意味著設計環節需要弱邊界的開放思維，多了解、應用視覺設計方法論，才能使產品體驗更細膩。
還有句話鏡同學之前也分享過很多次，那就是：只有深刻多元化，才能有效洞察業務場景、轉化客戶價值。
當然，另一方面呢，對于部分中小公司來說，由于缺乏高質量的UX設計崗位（據某同學調研，一個殘酷的現實是，不少UX設計師都是美工水平），也反向倒逼產品owner必須得是多元化、復合型人才。
最后，再簡單總結下，產品經理即便不需要單獨決定設計的視覺顏色等，至少也需要與設計團隊成員緊密合作，如，要把業務需求和產品設計講透，確保對方充分理解以便其深度發揮專業設計。
當然，最好的方式或許就是共同討論并決定最適合產品的顏色方案，但設計共同的出發點一定是滿足用戶真實需求。
也正如摩天大樓之父、全球建筑師路易斯·沙利文所言：
“形式應該遵循功能。”
專欄作家
產品大峽谷，公眾號：產品大峽谷，人人都是產品經理專欄作家。七年B端產品經理，供應鏈物流與金融領域，擅長需求設計、業務指導、商業觀察等。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
云閃付不算敗筆，本次的需求核心就是提高分期業務的轉化…
個人認為云閃付的更新很好。原因：
1、焦慮就不用還款了嗎？
設計本質是傳達信息，把應還多少，還有多久到期直觀表達出來，是符合設計本質的。
焦慮是因為這個傳達方式，還是因為被傳達的信息本身，這個是需要作者重新思考的。
2、這個頁面功能最重要的是幫助你管理貸款，而不是幫你緩解焦慮
不可否認有人看到了信息之后會焦慮，是否說明貸款額不在用戶能力范圍內？
應該大部分人打開頁面是為了來還款，而不是來看著焦慮或者緩解焦慮的。
功能在很大程度上決定了視覺，為了提高轉化率，將兩個二級功能提高到一級頁面，強調一個主功能，所以使用了品牌色的填充按鈕，另一個使用了描邊型的輔助按鈕，在品牌色占比很大（大的紅色按鈕）的前提下，金額不宜再使用品牌色了，換成黑色是很合理的一個選項，改版很合理。
從一名UI設計師的角度看，并不認為云閃付的改版是逆更新
我不會很看得懂其中的優劣勢，你方便用大白話讓我理解一下嗎
整體功能層面的更新是有價值的，但是到期還款日取消是敗筆。字體紅變黑，從一般人角度上焦慮感沒有那么強列了，但是換個角度，對于紅色盲的人群變得更友好了，不會有那么強的不適感
是的，視覺改版確實有不足的地方，但是改版也有更多有價值的地方。比如漸變的卡片設計并不是如作者所說的過度設計，而是巧妙結合了不同銀行卡的品牌色添加的設計小細節提升了用戶體驗等。其次舊版存在更多的問題，但作者完全撇開了舊版的缺點只談改版存在的不足，草率地定義為負優化。。
在我看來就那兩個大按鈕 有點擾亂用戶體驗 但是問了提高業務轉化 也只能妥協。。
同為UI設計，我贊同你的看法
兩位，我覺得你們說的有道理。我不是UI設計，我只是普通用戶，我也真的用云閃付（輕度用戶），我覺得新版那兩個按鈕實在是不太友好，幾乎把“還錢，快還錢！”寫在臉上。然后用戶為什么沒有還錢的原因或者理由，這個UI是不在乎的。。。你們說的對，為了轉化率，新版是有優勢的，但是單純談用戶體驗，如果疊加上沒有防誤觸，新版本很糟糕。