Dribbble，國內(nèi)比較追捧的媒體。上面聚集了很多項目的視覺設計圖，有的配色很漂亮，有的表現(xiàn)手法很新穎（一定程度上會激發(fā)我們靈感的火花），但我們在不了解設計場景、目標的情況下是無法判斷出這樣的視覺設計是否最終解決了用戶的問題。脫離業(yè)務場景的設計是沒有生命力的更談不上產(chǎn)品體驗、服務體驗，只有視覺和體驗統(tǒng)一起來才能更好的占有市場，設計才具備了商業(yè)價值。

一、什么是視覺設計

人所獲得的信息近80%來自視覺，是一種官能。

隨著時代的進步，視覺設計從傳統(tǒng)行業(yè)走向互聯(lián)網(wǎng)時代，環(huán)境的變遷使視覺設計的流行趨勢經(jīng)歷了從商業(yè)美術(shù)、工藝美術(shù)、印刷美術(shù)設計、裝潢設計、平面設計、界面設計等幾大階段，從關(guān)注數(shù)覺表現(xiàn)到關(guān)注視覺傳達，生死點從展示手段到是否得到并留住用戶。
視覺已然成為一種溝通現(xiàn)實與虛擬的媒介

當我們拿到一個app時，第一眼看到的是有形的視覺即界面，我們通過界面上的按鈕和頁面跳轉(zhuǎn)完成我們的操作，當它能夠滿足我們操作的時候，我們會說這個app還行，如果能很順手或者超出預期的完成我們想要的操作時，我們就會對app產(chǎn)生依賴。反之，我們會覺得這個app好爛，刪掉、再見。然而當我們對一個app不滿時，我們一般會覺得app/產(chǎn)品不夠好，而不是視覺不夠漂亮。這個時候視覺已然不是單純的視覺，它背后承載了產(chǎn)品功能和數(shù)據(jù)邏輯。

好的視覺設計能夠做到視覺傳達與產(chǎn)品目標的統(tǒng)一

傳統(tǒng)行業(yè)，當設計出來的一個水杯沒有購買時，不能帶來商業(yè)價值，這個水杯的設計就沒有價值。互聯(lián)網(wǎng)行業(yè)，當一個app設計出來，沒有能力去吸引用戶或者留住用戶，這個app的設計就是失敗的。想要贏就必須要了解用戶，了解什么樣的功能才能滿足用戶，這些功能要怎么樣通過視覺正確效率的傳達給用戶，至關(guān)重要。

要做出好設計，功能和視覺都要有，并且做到結(jié)合的唯一性才能走的更遠。

舉個簡單的例子，tb購買流程中，如果通過視覺強化突出購買功能做到視覺傳達和產(chǎn)品目標一致的。醒目的橙色提交訂單按鈕一目了然。

但實際工作中往往過于強調(diào)設覺，而忽略了產(chǎn)品本身，這樣很容易陷入炫技的誤區(qū)。錘子設置語言的設計就是一個很好的反例。對于設置語言這樣一個非常少用到的功能，卻用了如此明顯的視覺表現(xiàn)方式，致使整個界面的重心失衡，雖然對于切換語言這個問題的解決方案的處理還不錯，但視覺表現(xiàn)重心和產(chǎn)品重心不一致。

二、什么是用戶體驗

用戶體驗，UE/UX，用戶體驗是一種純主觀的在用戶使用一個產(chǎn)品（服務）的過程中建立起來的心理感受。

簡單來說，產(chǎn)品體驗是場景＋用戶＋任務過程產(chǎn)生的，牽扯到內(nèi)容、用戶界面、操作流程、功能設計、服務等多個方面的用戶使用感覺。這也是一個產(chǎn)品成功的主要因素。

（來源于互聯(lián)網(wǎng)）

互聯(lián)網(wǎng)時代初期人們對用戶體驗的理解更傾向于產(chǎn)品體驗，隨著競爭激烈的日益加劇和產(chǎn)品差異化越來越小，人們對體驗的要求也越來越高，視覺設計也從單純的滿足產(chǎn)品需求上升到服務于用戶設計的高度，產(chǎn)品體驗也更為廣闊的上升到創(chuàng)新體驗。比如為什么支付寶的生活圈和微信的朋友圈如此之像，就是沒人用呢？

這里還是提一下，用戶體驗的5要素，視覺的比重20%，而且越來越和業(yè)務、交互、體驗融為一體。界面一旦被功能串起來變產(chǎn)生了交互，在交互的過程中也就產(chǎn)生了體驗。一個優(yōu)秀的設計師就是能夠?qū)⒔缑妗⒔换?、體驗融為一體去考慮，權(quán)衡布局、簡化設計、清晰梳理判斷整體頁面結(jié)構(gòu)，而不是陷入一個單角色里不能自拔。

三、視覺設計為什么要與用戶體驗統(tǒng)一

好的設計總是能帶來好的體驗，默默無聞地為用戶服務的，比如iOS鍵盤能夠動態(tài)的調(diào)整觸摸熱區(qū)，使每個按鍵上下左右的間隙都成為了該按鍵的有效觸碰面積，從而提高了輸入精確度。這個設計默默地每天為每一位用戶服務著。

通過蘋果鍵盤設計的案例，我們可以看出設計表現(xiàn)隨著對模塊功能設計目的的清晰而與體驗越來越統(tǒng)一。徹底解決了用戶抱怨蘋果鍵盤誤操作嚴重的問題。

再看一個列表的案例

任何app中都少不了列表，設計師在設計列表的時候也是絞盡腦汁想設計的新穎獨特一些，可以理解漂亮的視覺在一定程度是可以討好用戶，但是是不是漂亮的視覺就可以留住用戶呢？答案是否定的。設計目的是為了帶來更好的用戶體驗，而不是僅僅好看。

為什么要有列表？

展示商品，實現(xiàn)轉(zhuǎn)化，這是最終的商業(yè)目的。沒有商業(yè)價值的設計是沒有價值的。

展示商品是個重要的中間環(huán)節(jié)，如何才能通過展示商品幫助達成轉(zhuǎn)化呢？在物質(zhì)豐富、競爭激烈、產(chǎn)品差異越來越小的場景下，我們必須把思路從擺東西出來賣轉(zhuǎn)變成幫助用戶找到他們想要的商品。

產(chǎn)品思路：展示商品－方便用戶瀏覽－幫助用戶快捷、舒適的找到自己想到的東西－購買轉(zhuǎn)化

設計師思路：展示商品－美觀的展示

目標不一致導致用戶看到的界面和體驗也一致。

為什么要這樣設計列表？

具體到商品的信息一般來說包括：商品名稱、商品圖片、價格、折扣、 評價、購買數(shù)量。。。。不同商品參數(shù)略有差異，但是商品名稱、商品圖片、價格可以說3要素了。這些參數(shù)位置的擺放影響用戶的視覺線。

目前很多產(chǎn)品卡結(jié)構(gòu)所建立的閱讀順序是“s”彎，大量的瀏覽會比較疲勞。

圖片比文字更能吸引用戶到注意，所以當價格距離圖片越近時，這種垂直的閱讀方式會更節(jié)約閱讀成本。有興趣的可以了解下費茨(Fitts)定律。

以淘寶為例，去年吧應該在聚劃算上還有價格在右邊的案例，今年已經(jīng)全部統(tǒng)一產(chǎn)品卡價格位置，統(tǒng)一用戶閱讀體驗。

• 只有視覺與體驗統(tǒng)一了，才能具備更強的競爭力
• 只有視覺與體驗統(tǒng)一了，傳達產(chǎn)品真正的目標
• 只有視覺與體驗統(tǒng)一了，更好的為用戶解決問題

四、如何統(tǒng)一

設計師要懂商業(yè)

優(yōu)秀的設計師要有能力在達成產(chǎn)品功能的同時做到視覺的美觀。設計師要有產(chǎn)品思維。不要把自己定位在美，好看上。借用一張明性很好人體圖，只有了解整體的經(jīng)絡組織和骨骼才知道皮膚為什么長這樣。

設計規(guī)范要全面

一般情況下的設計規(guī)范，涉及了顏色、文字、控件、布局、圖標等視覺感官上的規(guī)定，而對于在什么場景下適配什么樣的設計以及交互行為卻沒有一個統(tǒng)一的設定。這樣就導致了大家雖然都游走在規(guī)范里，帶來的用戶體驗卻是不一致的。

以彈窗為例，在什么場景下使用模態(tài)，什么場景非模態(tài)，模態(tài)必須要點擊按鈕關(guān)閉還是點擊屏幕任意地方關(guān)閉？不同的設計人員對接不同開發(fā)的時候如果沒有對用戶場景和交互行為有明顯說明的情況下很難在一個app里面做到視覺和體驗的統(tǒng)一。

對于非模態(tài)或者toast而言，在日常場景和支付場景下視覺上有無區(qū)分，什么場景下需要簡潔提示，什么場景下需要配合一些動畫來更體貼的說明情況，同樣如果沒有完整的規(guī)范，就很難在視覺設計和用戶體驗上做到統(tǒng)一。

視覺評審的正確標準

規(guī)范有了，那么在日常的工作當中，如何評價一些視覺設計是好的還是不好的，個人認為不光要有標準還應該有主次順序。

• 結(jié)構(gòu)清晰
• 邏輯流暢
• 體驗統(tǒng)一
• 美觀

上面提到過，當界面作為用戶直面的媒介時，他所承擔的責任是幫助用戶簡單、快速、愉悅的解決問題，如果沒有解決問題那就是在制造問題，這樣的產(chǎn)品是不會因為美觀而留住用戶。從體驗的5要素來說，視覺表現(xiàn)或者美觀也只是占了20%。

大道至簡，一句話總結(jié)下

正確的目標導向，合理的產(chǎn)品思維，全面的設計規(guī)范，合理的審核機制，才能帶來視覺與體驗的統(tǒng)一，讓設計更具有商業(yè)價值。

作者：湖湖 ?途牛UED

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