最近在做產品設計時，遇到了一個非常典型的設計失敗案例。這個案例反應了一些老生常談的問題，我覺得非常有意思。

好看的設計未必好用

我負責的是一款秀場類產品，近期要在移動端中添加一個模塊，模塊主要的功能是展示主播的錄播視頻。下面展示一下原型圖和效果圖的對比。

原型圖

效果圖

我的原型圖中，采用了最簡單常用的布局方式，而UI設計師拿到需求以后，覺得這樣做實在死板，想做一些和其他競品的差異化。所以，將視頻封面放在了右邊，視頻標題、主播名稱、點贊數放在了左邊。當效果圖出來時，我第一眼感覺是漂亮，精致，整體效果非常不錯。領導看了以后，也覺得視覺效果很棒。于是，效果圖一稿便通過審核，步入開發。

然而，在開發完成以后，我看著手機上的測試版，效果并不盡如人意。首先，成品并沒有效果圖那么漂亮。在仔細對比后才發現，原來效果圖漂亮的原因，很大程度上是因為擺放的圖片非常漂亮。而實際產品中的主播，并沒有那么好看。這導致了看到實際產品后，有較大的落差感。

所以，建議UI設計師在出效果圖的時候，盡量擺放產品真實的內容圖片。效果圖并不需要做得有多漂亮，而是需要在產品開發前，模擬產品的真實樣子，保證產品內容在最差的情況時，依然能有良好的視覺體驗。

除了視覺落差感以外，我在深度體驗產品時感覺到有些別扭。所有該顯示的信息都顯示出來了，那別扭的問題一定是出現在布局上面。我開始翻看競品，想尋找問題所在。

拿YY神曲的頁面來說，雖然信息比較多，顯得有些雜亂，但是并沒有別扭的感覺。那為什么信息左右調換位置，就會產生別扭的感覺呢？

YY神曲

我開始尋找將圖片右置的相關產品，比如：今日頭條、ZAKER、一點資訊、央視新聞、騰訊新聞等。看完以后，發現采用這種布局方式的，大多是新聞類的APP。

于是，我第一次開始深入地分析頁面布局問題。

首先分析：為什么新聞類的APP的圖片要放在右邊？

如上圖所示，每條信息的元素有：新聞標題、新聞來源、點擊次數、熱度以及新聞圖片。

那這些元素對于用戶來說，優先級是什么樣的呢？首先，拿新聞來說，標題的優先級是非常高的，用戶判斷是否看這個新聞的第一元素通常都是標題。這是很早以前用戶閱讀報紙時就養成的習慣。基于這個原因，新聞類APP標題的優先級大于圖片的優先級是沒有問題的。

那現在回過頭來再看看我自己的APP，分析一下用戶的閱讀順序。

首先要說的是對于秀場類產品，圖片絕對是第一視覺焦點。用戶篩選信息，絕不會逐字逐句瀏覽，而是大腦進行關鍵信息檢索，過濾次要信息。用戶“第一視覺區域”是沒有問題的，用戶第一眼看這個頁面肯定是被此區域吸引。接著用戶掃視“①版塊分類”的標題欄后，下面重點來了。

用戶視線會掃描整塊信息條，圖片肯定是第一優先級的信息，用戶通過圖片來判斷：1、足夠吸引，點擊進入；2、有點吸引，需要查看此視頻的其他信息來判斷；3、完全不吸引，跳轉下一條信息。

拋開第一種情況，當用戶覺得此視頻封面是自己稍微感興趣的東西，那么用戶需要閱讀其他信息來確定自己是否喜歡。此時用戶的視線由“②視頻封面”跳轉到“③視頻標題”然后向下掃視其他“④次要信息”。如果在判斷此視頻自己沒興趣后，用戶會繼續向下掃視，焦點又會跳到下一條信息的“⑤視頻封面”。然后重復以上路徑，循環掃視。

最后導致的結果就是：用戶以從右往左的一種順序瀏覽內容，違反從左往右的閱讀習慣。

總結：

其實，在產品設計中，追求創新、追求差異化是非常值得鼓勵的事情。但有時候為了尋找差異化，而導致用戶使用成本增加是需要產品經理細細斟酌的事情。在某一行業尚未成熟時，創新一款APP是比較簡單的，因為行業內并沒有一個大致的標準，也沒有太多用戶習慣的需要注意。但當行業趨于成熟，眾多產品涌現時，任何一點點微創新都難能可貴。

在這里還想說一個問題，就是大家在效果圖審核時，常常會說：我感覺這個頁面有點別扭，我覺得這個交互動畫有點不舒服。這到底是為什么呢？這種別扭到底是怎么產生的呢？我想這種別扭一定是視覺或交互傳達出的信息有悖于個人的日常感知。如果有一個頁面，很多人都覺得別扭的話，那很可能是某個地方設計有問題。也許有些問題是顯而易見的，也許有些問題是深層次的問題。如果是深層次問題就需要產品、UI設計師或者交互設計師細致地去尋找問題。存在的問題并不可怕，最可怕的是問題隱藏起來，而產品經理卻毫無感知。

總結

以上是生活随笔為你收集整理的一个视觉交互设计失败的案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。