本文講述了過度設(shè)計(jì)會(huì)傷害用戶的體驗(yàn)感，產(chǎn)品經(jīng)理應(yīng)該如何配合團(tuán)隊(duì)設(shè)計(jì)出滿足用戶真實(shí)需求的產(chǎn)品，如果你感興趣的話，不妨看看吧。

“設(shè)計(jì)是解決問題的過程，而不僅僅是制造漂亮的東西。”

上面這句話是唐納德 ? 諾曼在《設(shè)計(jì)心理學(xué)》一書中所表達(dá)的觀點(diǎn)，眾所周知，唐納德 ? 諾曼是全球知名的設(shè)計(jì)師，還是全球知名的用戶體驗(yàn)研究機(jī)構(gòu)——尼爾森諾曼集團(tuán)(NNG)的聯(lián)合創(chuàng)始人。

所以，我們可以說(shuō)，創(chuàng)造用戶價(jià)值是設(shè)計(jì)者的天職。

咱們產(chǎn)品經(jīng)理作為產(chǎn)品設(shè)計(jì)人員，天天與需求打交道，似乎每時(shí)每刻都在創(chuàng)造用戶價(jià)值，不過，根據(jù)鏡同學(xué)的觀察，不少產(chǎn)品同學(xué)其實(shí)都沒有真正理解這個(gè)設(shè)計(jì)內(nèi)核，總是習(xí)慣追逐于漂亮的東西。

但其實(shí)，抽象業(yè)務(wù)場(chǎng)景、解決用戶痛點(diǎn)，遠(yuǎn)比華麗的界面、復(fù)雜的交互要更有價(jià)值，這個(gè)道理很樸素也很深刻：用戶需要的從來(lái)都不是好看的皮囊，而是能解決其真實(shí)需求、與其共鳴的靈魂。

從這個(gè)角度來(lái)重新理解產(chǎn)品設(shè)計(jì)，很多現(xiàn)象背后的困惑、不解瞬間便豁然開朗，與此同時(shí)，這個(gè)價(jià)值標(biāo)尺不僅可以用來(lái)衡量高質(zhì)量、有實(shí)效的產(chǎn)品設(shè)計(jì)，更能篩選過濾出低價(jià)值、逆常識(shí)的偽需求。

我們一起來(lái)討論下。

一、云閃付：字體顏色帶來(lái)的逆更新

“云閃付”是我常用的APP之一。

除了偶爾薅個(gè)本地羊毛、領(lǐng)個(gè)優(yōu)惠券之外，鏡同學(xué)使用相對(duì)高頻的功能就是”信用卡還款“，因?yàn)槲移綍r(shí)也在使用好幾張信用卡，而使用云閃付來(lái)進(jìn)行管理和還款極為方便，畢竟其背后主體可是中國(guó)銀聯(lián)股份有限公司。

就在前幾天，我發(fā)現(xiàn)云閃付更新了新版本，而“信用卡還款”這個(gè)模塊也有一些變動(dòng)，這個(gè)變動(dòng)若單從業(yè)務(wù)邏輯來(lái)看，可以說(shuō)是零更新；但若從用戶體驗(yàn)上來(lái)看，我個(gè)人覺得變動(dòng)還是很大的。

注意，鏡同學(xué)一直說(shuō)的都是變動(dòng)，而不是升級(jí)，因?yàn)樵谖铱磥?lái)，這次更新是退化、是逆更新。

大家可以先看下對(duì)比圖：

仔細(xì)對(duì)比后，我們可以清晰的看到，這個(gè)頁(yè)面的設(shè)計(jì)更新主要有四點(diǎn)：

①新增“分期”和“還款”按鈕，即，按鈕位置由原二級(jí)頁(yè)面前置在該一級(jí)頁(yè)面，用以提高用戶轉(zhuǎn)化率；

②隱藏了“到期還款日”這個(gè)字段。

③“剩余應(yīng)還金額”由醒目的紅色字體，變?yōu)楹谏煮w。

④更新后的卡片頂部區(qū)域增加了漸變色，而且這個(gè)漸變色是獲取的銀行l(wèi)ogo色，如，第二個(gè)卡片頂部區(qū)域是橘色，因?yàn)槠桨层y行l(wèi)ogo是橘色；第三個(gè)則是中信銀行的深紅。

OK，接下來(lái)咱們從產(chǎn)品設(shè)計(jì)角度來(lái)做個(gè)簡(jiǎn)要的分析：

首先，新增“分期”和“還款”按鈕，用以提高業(yè)務(wù)轉(zhuǎn)化，這個(gè)本無(wú)可厚非，但過多的操作按鈕會(huì)造成用戶焦慮，尤其是在多卡片呈現(xiàn)上，一個(gè)頁(yè)面幾乎都是按鈕，非常影響用戶體驗(yàn)。

其次，這次更新主要體現(xiàn)在視覺效果上，更新前紅色的“還款金額”和紅色的“到期前預(yù)警”都是非常高價(jià)值的，因?yàn)樵谶@個(gè)頁(yè)面，用戶核心訴求就是還款管理：用戶需要清晰地看到欠款金額和到期還款日，以便做還款計(jì)劃等。

再者，也是很重要的一點(diǎn)，更新后的設(shè)計(jì)因?yàn)榘粹o過多，并且按鈕顏色過于鮮艷，極易造成用戶視覺上的錯(cuò)亂，當(dāng)然，如果只有一個(gè)卡片，或許沒太大影響，但過多的卡片一定會(huì)帶來(lái)用戶焦慮。

最后，所謂根據(jù)logo的漸變色，其實(shí)也是過度設(shè)計(jì)，回到文章開頭的一句話，好的設(shè)計(jì)是解決問題，而不是一味制造漂亮的東西，還是同樣的場(chǎng)景，如果10多個(gè)卡片，那這個(gè)頁(yè)面花紅柳綠的，完全沒有視覺中心。

你看，似乎只是更新了頁(yè)面顏色、優(yōu)化了視覺設(shè)計(jì)，但用戶其實(shí)會(huì)有很大的體驗(yàn)落差，原因就在于沒有從真實(shí)需求場(chǎng)景出發(fā)，我甚至高度懷疑該頁(yè)面的UX設(shè)計(jì)師沒有充分理解該場(chǎng)景，只是割裂地做所謂的精致設(shè)計(jì)。

二、簡(jiǎn)約是極致的復(fù)雜

鏡同學(xué)以為，用戶體驗(yàn)設(shè)計(jì)不僅是個(gè)連貫、協(xié)同的過程，更是踐行科學(xué)方法論的應(yīng)用過程，同樣的，視覺對(duì)體驗(yàn)設(shè)計(jì)的影響也是系統(tǒng)性的，或者簡(jiǎn)單來(lái)說(shuō)，界面顏色怎么用是有邏輯規(guī)則的。

我之前在知識(shí)星球分享過一個(gè)典型的產(chǎn)品設(shè)計(jì)案例，為了更好地理解，不妨再討論一二，咱們可以先看下相關(guān)的設(shè)計(jì)對(duì)比圖：

【圖 -↑ 來(lái)源于網(wǎng)絡(luò)】

大家作為產(chǎn)品經(jīng)理，即便沒有很深的界面設(shè)計(jì)方法論，不懂得視覺設(shè)計(jì)所應(yīng)遵循的邏輯規(guī)則，但我相信通過左右兩個(gè)設(shè)計(jì)對(duì)比圖，大多數(shù)產(chǎn)品同學(xué)都能列出原圖的很多設(shè)計(jì)上的體驗(yàn)缺陷。

是的，不合理的視覺設(shè)計(jì)，本質(zhì)上就是體驗(yàn)缺陷。

對(duì)比這兩張?jiān)O(shè)計(jì)圖，我們可以發(fā)現(xiàn)這其實(shí)就是典型的視覺設(shè)計(jì)的應(yīng)用，當(dāng)然，你也可以簡(jiǎn)單地這樣理解：當(dāng)元件被應(yīng)用不合理的設(shè)計(jì)顏色，不僅會(huì)帶來(lái)的用戶體驗(yàn)落差，還可能會(huì)導(dǎo)致業(yè)務(wù)轉(zhuǎn)化受影響。

比如，觀察上圖中的左下角“Book now”按鈕就很容易發(fā)現(xiàn)：左圖其按鈕顏色淺、右圖則顏色深，顯然，右圖的用戶視覺中心則完全聚焦在該按鈕上，這必然會(huì)帶來(lái)更多的用戶轉(zhuǎn)化。

當(dāng)然，這個(gè)在視覺設(shè)計(jì)上是有個(gè)科學(xué)方法的，被稱作瞇眼測(cè)試（Squint Test），簡(jiǎn)單來(lái)說(shuō)就是，我們可以嘗試瞇著眼睛來(lái)看設(shè)計(jì)圖，需要最突出的元素就應(yīng)是主要?jiǎng)幼靼粹o，這也是視覺分層的設(shè)計(jì)邏輯之一。

再比如，左側(cè)圖片上很多顏色選用也不合邏輯，如，標(biāo)題采用了藍(lán)色，而藍(lán)色往往會(huì)被習(xí)慣理解為可點(diǎn)擊交互操作，顯然，這里的標(biāo)題并沒有點(diǎn)擊需求，這樣的顏色設(shè)計(jì)會(huì)誤導(dǎo)用戶。

事實(shí)上，我們應(yīng)該有目的的少量使用顏色，盡量避免純粹為了裝飾而使用顏色，因?yàn)槟菢油鶗?huì)讓人感到困惑和分心。

當(dāng)然，再分享一個(gè)簡(jiǎn)單而有效的方法，那就是我們可以將品牌顏色（統(tǒng)一視覺設(shè)計(jì)，一般會(huì)采用品牌顏色）應(yīng)用于交互式元素，如文本鏈接和按鈕。

這樣的設(shè)計(jì)簡(jiǎn)潔高效，能直接地告訴用戶什么是交互式的，什么是不交互的，盡量避免在非交互式元素上使用品牌顏色。

所以你看，視覺設(shè)計(jì)深刻影響著產(chǎn)品功能和用戶體驗(yàn)。

好了，通過上述兩個(gè)產(chǎn)品小案例，相信大家都能理解視覺對(duì)于用戶體驗(yàn)的價(jià)值，這還遺留一個(gè)問題，可能也是很多產(chǎn)品同學(xué)的疑問：這不應(yīng)該是UI/UX設(shè)計(jì)師或者視覺設(shè)計(jì)同學(xué)的工作嗎？

有一說(shuō)一，非要這樣講，的確也沒有什么毛病，但鏡同學(xué)想說(shuō)的是，產(chǎn)品同學(xué)最重要的職責(zé)是將需求價(jià)值最大化，這也意味著設(shè)計(jì)環(huán)節(jié)需要弱邊界的開放思維，多了解、應(yīng)用視覺設(shè)計(jì)方法論，才能使產(chǎn)品體驗(yàn)更細(xì)膩。

還有句話鏡同學(xué)之前也分享過很多次，那就是：只有深刻多元化，才能有效洞察業(yè)務(wù)場(chǎng)景、轉(zhuǎn)化客戶價(jià)值。

當(dāng)然，另一方面呢，對(duì)于部分中小公司來(lái)說(shuō)，由于缺乏高質(zhì)量的UX設(shè)計(jì)崗位（據(jù)某同學(xué)調(diào)研，一個(gè)殘酷的現(xiàn)實(shí)是，不少UX設(shè)計(jì)師都是美工水平），也反向倒逼產(chǎn)品owner必須得是多元化、復(fù)合型人才。

最后，再簡(jiǎn)單總結(jié)下，產(chǎn)品經(jīng)理即便不需要單獨(dú)決定設(shè)計(jì)的視覺顏色等，至少也需要與設(shè)計(jì)團(tuán)隊(duì)成員緊密合作，如，要把業(yè)務(wù)需求和產(chǎn)品設(shè)計(jì)講透，確保對(duì)方充分理解以便其深度發(fā)揮專業(yè)設(shè)計(jì)。

當(dāng)然，最好的方式或許就是共同討論并決定最適合產(chǎn)品的顏色方案，但設(shè)計(jì)共同的出發(fā)點(diǎn)一定是滿足用戶真實(shí)需求。

也正如摩天大樓之父、全球建筑師路易斯·沙利文所言：

“形式應(yīng)該遵循功能。”