最近在做產(chǎn)品設(shè)計(jì)時(shí)，遇到了一個(gè)非常典型的設(shè)計(jì)失敗案例。這個(gè)案例反應(yīng)了一些老生常談的問(wèn)題，我覺(jué)得非常有意思。

好看的設(shè)計(jì)未必好用

我負(fù)責(zé)的是一款秀場(chǎng)類(lèi)產(chǎn)品，近期要在移動(dòng)端中添加一個(gè)模塊，模塊主要的功能是展示主播的錄播視頻。下面展示一下原型圖和效果圖的對(duì)比。

我的原型圖中，采用了最簡(jiǎn)單常用的布局方式，而UI設(shè)計(jì)師拿到需求以后，覺(jué)得這樣做實(shí)在死板，想做一些和其他競(jìng)品的差異化。所以，將視頻封面放在了右邊，視頻標(biāo)題、主播名稱(chēng)、點(diǎn)贊數(shù)放在了左邊。當(dāng)效果圖出來(lái)時(shí)，我第一眼感覺(jué)是漂亮，精致，整體效果非常不錯(cuò)。領(lǐng)導(dǎo)看了以后，也覺(jué)得視覺(jué)效果很棒。于是，效果圖一稿便通過(guò)審核，步入開(kāi)發(fā)。

然而，在開(kāi)發(fā)完成以后，我看著手機(jī)上的測(cè)試版，效果并不盡如人意。首先，成品并沒(méi)有效果圖那么漂亮。在仔細(xì)對(duì)比后才發(fā)現(xiàn)，原來(lái)效果圖漂亮的原因，很大程度上是因?yàn)閿[放的圖片非常漂亮。而實(shí)際產(chǎn)品中的主播，并沒(méi)有那么好看。這導(dǎo)致了看到實(shí)際產(chǎn)品后，有較大的落差感。

所以，建議UI設(shè)計(jì)師在出效果圖的時(shí)候，盡量擺放產(chǎn)品真實(shí)的內(nèi)容圖片。效果圖并不需要做得有多漂亮，而是需要在產(chǎn)品開(kāi)發(fā)前，模擬產(chǎn)品的真實(shí)樣子，保證產(chǎn)品內(nèi)容在最差的情況時(shí)，依然能有良好的視覺(jué)體驗(yàn)。

除了視覺(jué)落差感以外，我在深度體驗(yàn)產(chǎn)品時(shí)感覺(jué)到有些別扭。所有該顯示的信息都顯示出來(lái)了，那別扭的問(wèn)題一定是出現(xiàn)在布局上面。我開(kāi)始翻看競(jìng)品，想尋找問(wèn)題所在。

拿YY神曲的頁(yè)面來(lái)說(shuō)，雖然信息比較多，顯得有些雜亂，但是并沒(méi)有別扭的感覺(jué)。那為什么信息左右調(diào)換位置，就會(huì)產(chǎn)生別扭的感覺(jué)呢？

我開(kāi)始尋找將圖片右置的相關(guān)產(chǎn)品，比如：今日頭條、ZAKER、一點(diǎn)資訊、央視新聞、騰訊新聞等?？赐暌院?，發(fā)現(xiàn)采用這種布局方式的，大多是新聞?lì)惖腁PP。

于是，我第一次開(kāi)始深入地分析頁(yè)面布局問(wèn)題。

首先分析：為什么新聞?lì)惖腁PP的圖片要放在右邊？

如上圖所示，每條信息的元素有：新聞標(biāo)題、新聞來(lái)源、點(diǎn)擊次數(shù)、熱度以及新聞圖片。

那這些元素對(duì)于用戶(hù)來(lái)說(shuō)，優(yōu)先級(jí)是什么樣的呢？首先，拿新聞來(lái)說(shuō)，標(biāo)題的優(yōu)先級(jí)是非常高的，用戶(hù)判斷是否看這個(gè)新聞的第一元素通常都是標(biāo)題。這是很早以前用戶(hù)閱讀報(bào)紙時(shí)就養(yǎng)成的習(xí)慣?；谶@個(gè)原因，新聞?lì)怉PP標(biāo)題的優(yōu)先級(jí)大于圖片的優(yōu)先級(jí)是沒(méi)有問(wèn)題的。

那現(xiàn)在回過(guò)頭來(lái)再看看我自己的APP，分析一下用戶(hù)的閱讀順序。

首先要說(shuō)的是對(duì)于秀場(chǎng)類(lèi)產(chǎn)品，圖片絕對(duì)是第一視覺(jué)焦點(diǎn)。用戶(hù)篩選信息，絕不會(huì)逐字逐句瀏覽，而是大腦進(jìn)行關(guān)鍵信息檢索，過(guò)濾次要信息。用戶(hù)“第一視覺(jué)區(qū)域”是沒(méi)有問(wèn)題的，用戶(hù)第一眼看這個(gè)頁(yè)面肯定是被此區(qū)域吸引。接著用戶(hù)掃視“①版塊分類(lèi)”的標(biāo)題欄后，下面重點(diǎn)來(lái)了。

用戶(hù)視線會(huì)掃描整塊信息條，圖片肯定是第一優(yōu)先級(jí)的信息，用戶(hù)通過(guò)圖片來(lái)判斷：

• 足夠吸引，點(diǎn)擊進(jìn)入；
• 有點(diǎn)吸引，需要查看此視頻的其他信息來(lái)判斷；
• 完全不吸引，跳轉(zhuǎn)下一條信息。

拋開(kāi)第一種情況，當(dāng)用戶(hù)覺(jué)得此視頻封面是自己稍微感興趣的東西，那么用戶(hù)需要閱讀其他信息來(lái)確定自己是否喜歡。此時(shí)用戶(hù)的視線由“②視頻封面”跳轉(zhuǎn)到“③視頻標(biāo)題”然后向下掃視其他“④次要信息”。如果在判斷此視頻自己沒(méi)興趣后，用戶(hù)會(huì)繼續(xù)向下掃視，焦點(diǎn)又會(huì)跳到下一條信息的“⑤視頻封面”。然后重復(fù)以上路徑，循環(huán)掃視。

最后導(dǎo)致的結(jié)果就是：用戶(hù)以從右往左的一種順序?yàn)g覽內(nèi)容，違反從左往右的閱讀習(xí)慣。

總結(jié)：

其實(shí)，在產(chǎn)品設(shè)計(jì)中，追求創(chuàng)新、追求差異化是非常值得鼓勵(lì)的事情。但有時(shí)候?yàn)榱藢ふ也町惢?，而?dǎo)致用戶(hù)使用成本增加是需要產(chǎn)品經(jīng)理細(xì)細(xì)斟酌的事情。在某一行業(yè)尚未成熟時(shí)，創(chuàng)新一款A(yù)PP是比較簡(jiǎn)單的，因?yàn)樾袠I(yè)內(nèi)并沒(méi)有一個(gè)大致的標(biāo)準(zhǔn)，也沒(méi)有太多用戶(hù)習(xí)慣的需要注意。但當(dāng)行業(yè)趨于成熟，眾多產(chǎn)品涌現(xiàn)時(shí)，任何一點(diǎn)點(diǎn)微創(chuàng)新都難能可貴。

在這里還想說(shuō)一個(gè)問(wèn)題，就是大家在效果圖審核時(shí)，常常會(huì)說(shuō)：我感覺(jué)這個(gè)頁(yè)面有點(diǎn)別扭，我覺(jué)得這個(gè)交互動(dòng)畫(huà)有點(diǎn)不舒服。這到底是為什么呢？這種別扭到底是怎么產(chǎn)生的呢？我想這種別扭一定是視覺(jué)或交互傳達(dá)出的信息有悖于個(gè)人的日常感知。如果有一個(gè)頁(yè)面，很多人都覺(jué)得別扭的話(huà)，那很可能是某個(gè)地方設(shè)計(jì)有問(wèn)題。也許有些問(wèn)題是顯而易見(jiàn)的，也許有些問(wèn)題是深層次的問(wèn)題。如果是深層次問(wèn)題就需要產(chǎn)品、UI設(shè)計(jì)師或者交互設(shè)計(jì)師細(xì)致地去尋找問(wèn)題。存在的問(wèn)題并不可怕，最可怕的是問(wèn)題隱藏起來(lái)，而產(chǎn)品經(jīng)理卻毫無(wú)感知。

本文由 @臻龍?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。