咨詢熱線：
Dribbble，國(guó)內(nèi)比較追捧的媒體。上面聚集了很多項(xiàng)目的視覺設(shè)計(jì)圖，有的配色很漂亮，有的表現(xiàn)手法很新穎（一定程度上會(huì)激發(fā)我們靈感的火花），但我們?cè)诓涣私庠O(shè)計(jì)場(chǎng)景、目標(biāo)的情況下是無法判斷出這樣的視覺設(shè)計(jì)是否最終解決了用戶的問題。脫離業(yè)務(wù)場(chǎng)景的設(shè)計(jì)是沒有生命力的更談不上產(chǎn)品體驗(yàn)、服務(wù)體驗(yàn)，只有視覺和體驗(yàn)統(tǒng)一起來才能更好的占有市場(chǎng)，設(shè)計(jì)才具備了商業(yè)價(jià)值。
一、什么是視覺設(shè)計(jì)
人所獲得的信息近80%來自視覺，是一種官能。
隨著時(shí)代的進(jìn)步，視覺設(shè)計(jì)從傳統(tǒng)行業(yè)走向互聯(lián)網(wǎng)時(shí)代，環(huán)境的變遷使視覺設(shè)計(jì)的流行趨勢(shì)經(jīng)歷了從商業(yè)美術(shù)、工藝美術(shù)、印刷美術(shù)設(shè)計(jì)、裝潢設(shè)計(jì)、平面設(shè)計(jì)、界面設(shè)計(jì)等幾大階段，從關(guān)注數(shù)覺表現(xiàn)到關(guān)注視覺傳達(dá)，生死點(diǎn)從展示手段到是否得到并留住用戶。
視覺已然成為一種溝通現(xiàn)實(shí)與虛擬的媒介
當(dāng)我們拿到一個(gè)app時(shí)，第一眼看到的是有形的視覺即界面，我們通過界面上的按鈕和頁(yè)面跳轉(zhuǎn)完成我們的操作，當(dāng)它能夠滿足我們操作的時(shí)候，我們會(huì)說這個(gè)app還行，如果能很順手或者超出預(yù)期的完成我們想要的操作時(shí)，我們就會(huì)對(duì)app產(chǎn)生依賴。反之，我們會(huì)覺得這個(gè)app好爛，刪掉、再見。然而當(dāng)我們對(duì)一個(gè)app不滿時(shí)，我們一般會(huì)覺得app/產(chǎn)品不夠好，而不是視覺不夠漂亮。這個(gè)時(shí)候視覺已然不是單純的視覺，它背后承載了產(chǎn)品功能和數(shù)據(jù)邏輯。
好的視覺設(shè)計(jì)能夠做到視覺傳達(dá)與產(chǎn)品目標(biāo)的統(tǒng)一
傳統(tǒng)行業(yè)，當(dāng)設(shè)計(jì)出來的一個(gè)水杯沒有購(gòu)買時(shí)，不能帶來商業(yè)價(jià)值，這個(gè)水杯的設(shè)計(jì)就沒有價(jià)值�；ヂ�(lián)網(wǎng)行業(yè)，當(dāng)一個(gè)app設(shè)計(jì)出來，沒有能力去吸引用戶或者留住用戶，這個(gè)app的設(shè)計(jì)就是失敗的。想要贏就必須要了解用戶，了解什么樣的功能才能滿足用戶，這些功能要怎么樣通過視覺正確效率的傳達(dá)給用戶，至關(guān)重要。
要做出好設(shè)計(jì)，功能和視覺都要有，并且做到結(jié)合的唯一性才能走的更遠(yuǎn)。
舉個(gè)簡(jiǎn)單的例子，tb購(gòu)買流程中，如果通過視覺強(qiáng)化突出購(gòu)買功能做到視覺傳達(dá)和產(chǎn)品目標(biāo)一致的。醒目的橙色提交訂單按鈕一目了然。
但實(shí)際工作中往往過于強(qiáng)調(diào)設(shè)覺，而忽略了產(chǎn)品本身，這樣很容易陷入炫技的誤區(qū)。錘子設(shè)置語(yǔ)言的設(shè)計(jì)就是一個(gè)很好的反例。對(duì)于設(shè)置語(yǔ)言這樣一個(gè)非常少用到的功能，卻用了如此明顯的視覺表現(xiàn)方式，致使整個(gè)界面的重心失衡，雖然對(duì)于切換語(yǔ)言這個(gè)問題的解決方案的處理還不錯(cuò)，但視覺表現(xiàn)重心和產(chǎn)品重心不一致。
二、什么是用戶體驗(yàn)
用戶體驗(yàn)，UE/UX，用戶體驗(yàn)是一種純主觀的在用戶使用一個(gè)產(chǎn)品（服務(wù)）的過程中建立起來的心理感受。
簡(jiǎn)單來說，產(chǎn)品體驗(yàn)是場(chǎng)景＋用戶＋任務(wù)過程產(chǎn)生的，牽扯到內(nèi)容、用戶界面、操作流程、功能設(shè)計(jì)、服務(wù)等多個(gè)方面的用戶使用感覺。這也是一個(gè)產(chǎn)品成功的主要因素。
（來源于互聯(lián)網(wǎng)）
互聯(lián)網(wǎng)時(shí)代初期人們對(duì)用戶體驗(yàn)的理解更傾向于產(chǎn)品體驗(yàn)，隨著競(jìng)爭(zhēng)激烈的日益加劇和產(chǎn)品差異化越來越小，人們對(duì)體驗(yàn)的要求也越來越高，視覺設(shè)計(jì)也從單純的滿足產(chǎn)品需求上升到服務(wù)于用戶設(shè)計(jì)的高度，產(chǎn)品體驗(yàn)也更為廣闊的上升到創(chuàng)新體驗(yàn)。比如為什么支付寶的生活圈和微信的朋友圈如此之像，就是沒人用呢？
這里還是提一下，用戶體驗(yàn)的5要素，視覺的比重20%，而且越來越和業(yè)務(wù)、交互、體驗(yàn)融為一體。界面一旦被功能串起來變產(chǎn)生了交互，在交互的過程中也就產(chǎn)生了體驗(yàn)。一個(gè)優(yōu)秀的設(shè)計(jì)師就是能夠?qū)⒔缑妗⒔换�、體驗(yàn)融為一體去考慮，權(quán)衡布局、簡(jiǎn)化設(shè)計(jì)、清晰梳理判斷整體頁(yè)面結(jié)構(gòu)，而不是陷入一個(gè)單角色里不能自拔。
三、視覺設(shè)計(jì)為什么要與用戶體驗(yàn)統(tǒng)一
好的設(shè)計(jì)總是能帶來好的體驗(yàn)，默默無聞地為用戶服務(wù)的，比如iOS鍵盤能夠動(dòng)態(tài)的調(diào)整觸摸熱區(qū)，使每個(gè)按鍵上下左右的間隙都成為了該按鍵的有效觸碰面積，從而提高了輸入精確度。這個(gè)設(shè)計(jì)默默地每天為每一位用戶服務(wù)著。
通過蘋果鍵盤設(shè)計(jì)的案例，我們可以看出設(shè)計(jì)表現(xiàn)隨著對(duì)模塊功能設(shè)計(jì)目的的清晰而與體驗(yàn)越來越統(tǒng)一。徹底解決了用戶抱怨蘋果鍵盤誤操作嚴(yán)重的問題。
再看一個(gè)列表的案例
任何app中都少不了列表，設(shè)計(jì)師在設(shè)計(jì)列表的時(shí)候也是絞盡腦汁想設(shè)計(jì)的新穎獨(dú)特一些，可以理解漂亮的視覺在一定程度是可以討好用戶，但是是不是漂亮的視覺就可以留住用戶呢？答案是否定的。設(shè)計(jì)目的是為了帶來更好的用戶體驗(yàn)，而不是僅僅好看。
為什么要有列表？
展示商品，實(shí)現(xiàn)轉(zhuǎn)化，這是最終的商業(yè)目的。沒有商業(yè)價(jià)值的設(shè)計(jì)是沒有價(jià)值的。
展示商品是個(gè)重要的中間環(huán)節(jié)，如何才能通過展示商品幫助達(dá)成轉(zhuǎn)化呢？在物質(zhì)豐富、競(jìng)爭(zhēng)激烈、產(chǎn)品差異越來越小的場(chǎng)景下，我們必須把思路從擺東西出來賣轉(zhuǎn)變成幫助用戶找到他們想要的商品。
產(chǎn)品思路：展示商品－方便用戶瀏覽－幫助用戶快捷、舒適的找到自己想到的東西－購(gòu)買轉(zhuǎn)化
設(shè)計(jì)師思路：展示商品－美觀的展示
目標(biāo)不一致導(dǎo)致用戶看到的界面和體驗(yàn)也一致。
為什么要這樣設(shè)計(jì)列表？
具體到商品的信息一般來說包括：商品名稱、商品圖片、價(jià)格、折扣、 評(píng)價(jià)、購(gòu)買數(shù)量。。。。不同商品參數(shù)略有差異，但是商品名稱、商品圖片、價(jià)格可以說3要素了。這些參數(shù)位置的擺放影響用戶的視覺線。
目前很多產(chǎn)品卡結(jié)構(gòu)所建立的閱讀順序是“s”彎，大量的瀏覽會(huì)比較疲勞。
圖片比文字更能吸引用戶到注意，所以當(dāng)價(jià)格距離圖片越近時(shí)，這種垂直的閱讀方式會(huì)更節(jié)約閱讀成本。有興趣的可以了解下費(fèi)茨(Fitts)定律。
以淘寶為例，去年吧應(yīng)該在聚劃算上還有價(jià)格在右邊的案例，今年已經(jīng)全部統(tǒng)一產(chǎn)品卡價(jià)格位置，統(tǒng)一用戶閱讀體驗(yàn)。
只有視覺與體驗(yàn)統(tǒng)一了，才能具備更強(qiáng)的競(jìng)爭(zhēng)力
只有視覺與體驗(yàn)統(tǒng)一了，傳達(dá)產(chǎn)品真正的目標(biāo)
只有視覺與體驗(yàn)統(tǒng)一了，更好的為用戶解決問題
四、如何統(tǒng)一
設(shè)計(jì)師要懂商業(yè)
優(yōu)秀的設(shè)計(jì)師要有能力在達(dá)成產(chǎn)品功能的同時(shí)做到視覺的美觀。設(shè)計(jì)師要有產(chǎn)品思維。不要把自己定位在美，好看上。借用一張明性很好人體圖，只有了解整體的經(jīng)絡(luò)組織和骨骼才知道皮膚為什么長(zhǎng)這樣。
設(shè)計(jì)規(guī)范要全面
一般情況下的設(shè)計(jì)規(guī)范，涉及了顏色、文字、控件、布局、圖標(biāo)等視覺感官上的規(guī)定，而對(duì)于在什么場(chǎng)景下適配什么樣的設(shè)計(jì)以及交互行為卻沒有一個(gè)統(tǒng)一的設(shè)定。這樣就導(dǎo)致了大家雖然都游走在規(guī)范里，帶來的用戶體驗(yàn)卻是不一致的。
以彈窗為例，在什么場(chǎng)景下使用模態(tài)，什么場(chǎng)景非模態(tài)，模態(tài)必須要點(diǎn)擊按鈕關(guān)閉還是點(diǎn)擊屏幕任意地方關(guān)閉？不同的設(shè)計(jì)人員對(duì)接不同開發(fā)的時(shí)候如果沒有對(duì)用戶場(chǎng)景和交互行為有明顯說明的情況下很難在一個(gè)app里面做到視覺和體驗(yàn)的統(tǒng)一。
對(duì)于非模態(tài)或者toast而言，在日常場(chǎng)景和支付場(chǎng)景下視覺上有無區(qū)分，什么場(chǎng)景下需要簡(jiǎn)潔提示，什么場(chǎng)景下需要配合一些動(dòng)畫來更體貼的說明情況，同樣如果沒有完整的規(guī)范，就很難在視覺設(shè)計(jì)和用戶體驗(yàn)上做到統(tǒng)一。
視覺評(píng)審的正確標(biāo)準(zhǔn)
規(guī)范有了，那么在日常的工作當(dāng)中，如何評(píng)價(jià)一些視覺設(shè)計(jì)是好的還是不好的，個(gè)人認(rèn)為不光要有標(biāo)準(zhǔn)還應(yīng)該有主次順序。
結(jié)構(gòu)清晰
邏輯流暢
體驗(yàn)統(tǒng)一
美觀
上面提到過，當(dāng)界面作為用戶直面的媒介時(shí)，他所承擔(dān)的責(zé)任是幫助用戶簡(jiǎn)單、快速、愉悅的解決問題，如果沒有解決問題那就是在制造問題，這樣的產(chǎn)品是不會(huì)因?yàn)槊烙^而留住用戶。從體驗(yàn)的5要素來說，視覺表現(xiàn)或者美觀也只是占了20%。
大道至簡(jiǎn)，一句話總結(jié)下
正確的目標(biāo)導(dǎo)向，合理的產(chǎn)品思維，全面的設(shè)計(jì)規(guī)范，合理的審核機(jī)制，才能帶來視覺與體驗(yàn)的統(tǒng)一，讓設(shè)計(jì)更具有商業(yè)價(jià)值。
作者：湖湖 途牛UED
轉(zhuǎn)自：人人都是產(chǎn)品經(jīng)理
優(yōu)化咨詢
在線客服1號(hào)