視覺設(shè)計:重在視覺表現(xiàn)上,提高產(chǎn)品的用戶體驗

0 評論 14372 瀏覽 36 收藏 12 分鐘

對于一個優(yōu)秀的產(chǎn)品來說,視覺設(shè)計是重要的組成部分。

視覺在整個設(shè)計流程中是一個兩極分化的一環(huán),它常被認為是對設(shè)計進行多余的雕琢,只不過是為了取悅老板們的糖衣炮彈。又或者,通常對于初級設(shè)計師,他們甚至認為視覺設(shè)計是偉大設(shè)計的終極目標:如果看上去很華麗,那就是好設(shè)計,如果看上去很丑,那用戶肯定不會喜歡。

然而,視覺設(shè)計既不是一個無關(guān)緊要的部分,也不是一個作為衡量一個好設(shè)計的終極目標。視覺設(shè)計是通過特定設(shè)計的插畫和圖形去傳達信息的一種手法,有意思的排版,讓人共鳴的圖標,有說服力的顏色,舒服的間距和布局,還有很多其他的“小卻重要的細節(jié)”。

視覺設(shè)計是著力于視覺表現(xiàn)上來提高產(chǎn)品的用戶體驗。在概念上來說,這是非常簡單的一件事,但是為什么我們不愿意在視覺設(shè)計上花那么多精力呢?然后誰應該在這個過程中參與進來?此外,我們應該從什么時候開始?現(xiàn)在就讓我們從“為什么”開始,再從何時開始,以及如何開始進行闡述。

為什么視覺設(shè)計很重要

視覺設(shè)計的重要性源自方方面面。首先最顯而易見的是,你的視覺設(shè)計決定了用戶在使用產(chǎn)品時對其產(chǎn)生的第一印象。研究表明,用戶只需要 50ms即可對一個產(chǎn)品產(chǎn)生第一判斷。也許有些令人吃驚,然而,事實是視覺設(shè)計不僅是用戶對產(chǎn)品的第一印象,甚至它可以被認為是對產(chǎn)品最重要的印象。

消費者研究發(fā)現(xiàn),用戶在看到網(wǎng)站時,視覺呈現(xiàn)比起其網(wǎng)站內(nèi)容更加影響網(wǎng)站的可信度。此外,視覺設(shè)計是設(shè)計師建立品牌形象最重要的渠道。一個好的信息架構(gòu)當然是重要的,但它卻不能像精心考慮、非常聰明的視覺設(shè)計那樣傳達“星球大戰(zhàn)”或者“Huggies”(譯者注:Huggies 是一個嬰兒尿不濕的品牌 )要傳達的東西。

案例一:多鄰國網(wǎng)站(著名的語言學習類的網(wǎng)站),他的視覺設(shè)計向人傳達了親切、積極、可靠的的感覺。

案例二:Galbally & O’Bryan’s 首頁(律師事務(wù)所),作為一個堅持高質(zhì)量且有一定聲譽的法律機構(gòu)。它的視覺設(shè)計是干凈利落、優(yōu)雅且高度專業(yè)的。想象一下要是與案例一的視覺系統(tǒng)交換一下,將會帶來什么影響?

還有一個支持視覺設(shè)計重要性的現(xiàn)實原因。盡管做出一套糟糕的視覺設(shè)計可能是一個設(shè)計師在工作中犯的最不起眼的錯誤,然而這個錯誤卻可能是最容易被人察覺的 。讓我們從相反的角度想:如果用戶感覺一個產(chǎn)品“土”,那么無論怎么講,這個產(chǎn)品就是“土”的。用戶不喜歡,就不太可能去買。僅管叫我萬惡的資本家,但是我覺得這是非常重要的。(順便說一下,我就是萬惡的資本家)

案例三:這個美國聯(lián)合保健的網(wǎng)站的視覺設(shè)計真的有鼓勵你去相信他們和你的醫(yī)療和財政信息?

基本上,你產(chǎn)品的樣子將會是用戶第一件重視的事情,這個一個非常容易抓住的點,我們要好好把握。

由誰來做

我們已經(jīng)說明了視覺設(shè)計是設(shè)計過程中非常重要的一部分。此外,我們也非常同意設(shè)計作為一個過程,當東西完成時,不管是好的方面還是壞的方面,都是團隊里每個成員的的成果。那么從這個邏輯上看來,視覺設(shè)計也能被任何一個人所影響。

然而,從某種程度來說,視覺設(shè)計是相比其他更有專業(yè)化元素的活兒。它需要更多的技巧——如何把自己的創(chuàng)意實現(xiàn)出來——像PS和Sketch這樣的工具可是一點也不簡單的,正因如此,讓專業(yè)的設(shè)計師來做可能會比讓普通人來做更好一些。視覺設(shè)計師使用的工具和技巧并不是很直觀的,讓那些非設(shè)計人員來做效率也不會高,我們可能會討厭(就像在喝蛋黃醬和葡萄汁混在一起的飲料那樣的討厭)人們說設(shè)計師僅僅只是讓東西做的更加好看,但是在視覺設(shè)計領(lǐng)域,我們并不會像平時那樣顯得無足輕重。

案例四:對于普通大眾來說Photoshop就像希臘神話一樣遙不可及。

何時進行

視覺設(shè)計在什么時候很重要?一直。我們已經(jīng)談過這個。我們需要注意的是,無論是優(yōu)雅的還是“聯(lián)邦政府”似的設(shè)計,每個產(chǎn)品開發(fā)的整個生命周期都需要讓設(shè)計參與進來。視覺設(shè)計也是設(shè)計的一部分,因此視覺設(shè)計應該從產(chǎn)品開發(fā)的第一天就參與進來,直到最終完成。

話雖如此,我們依然需要知道的是視覺設(shè)計在工作流程中是需要在后面才開始進行的,老實說,這樣做才是明智的,因為:

  1. 視覺設(shè)計的交付物感覺永遠也做不完,要做到像素級的完美是非?;ㄙM時間的。而且,當需要迭代和轉(zhuǎn)變產(chǎn)品方向時,它的速度也完全沒法和線框圖階段比,甚至沒法和原型階段比。
  2. 視覺設(shè)計是一個很巨大的部分,我們稱之為“個性設(shè)計”。產(chǎn)品的個性將很大一部分影響該產(chǎn)品的視覺設(shè)計,然而從迭代和視覺設(shè)計都是一個非?;ㄙM精力的過程,一些精明的設(shè)計師將會節(jié)省在視覺設(shè)計這個過程中的產(chǎn)出直到產(chǎn)品開始有自己的框架結(jié)構(gòu)。

怎樣進行

這個執(zhí)行的過程應該是經(jīng)過認真的思考然后再去做的,在所有偉大的設(shè)計中,視覺設(shè)計幾乎很少是偶然迸發(fā)出來的。然而在這里我也并沒有時間去告訴你怎樣去用PS或Sketch,和一些排版布局的規(guī)則與色彩理論。我會給你幾個在設(shè)計過程中一點應該注意的地方,他們可能可以引導你做出一些好的視覺設(shè)計:

1. 搞清楚你面對的情況

盡可能早地從你的客戶那里搞到他們的設(shè)計規(guī)范(style guides)或者品牌規(guī)范(brand guidelines),別浪費時間去做那些最后注定要返工的東西(連那些簡單的視覺情緒版“moodboards”都不要去弄)。如果有的話甚至應該第一天就去問客戶要這些東西,現(xiàn)在去要總不會比干了幾個月再去要這些東西更難。

譯者注:有時候設(shè)計師會先收集一些圖片文字之類的東西弄出一個合集,作為設(shè)計的參考和靈感來源,這類東西叫做moodboard。具體介紹可參考:點擊查看

2、找出你是在為誰設(shè)計

我知道你一直是這樣做的,因為你是個優(yōu)秀的設(shè)計師,優(yōu)秀的設(shè)計師從來不會跳過產(chǎn)品設(shè)計的調(diào)研部分。所以提早了解了他們利益相關(guān)者和用戶就可以在接下來的設(shè)計過程中知道怎樣才可以博取他們的眼球。

3、提早的開始你的視覺設(shè)計

收集情緒板,建立出產(chǎn)品的個性,甚至是記下一些形容詞,這些東西將成為你在后面再為產(chǎn)品進行視覺設(shè)計的基礎(chǔ)。確保這些調(diào)研中得同時確保他們和客戶的品牌保持一致(如果他們存在的話)保持一致,確保不在最后關(guān)頭再來處理這事。

4、幫助客戶理解你的視覺設(shè)計成果

視覺設(shè)計產(chǎn)出,是一個非常緩慢的過程,不要浪費時間和你客戶的錢,去建立更多有需要的東西。搭建一個或多個原型,盡快開始編程實現(xiàn)(或是實物產(chǎn)品,如果你搞的定的話) 。告訴客戶這些事臨時的內(nèi)部用的測試版本,真實的視覺效果已經(jīng)在產(chǎn)品開發(fā)過程中了,而不是僅僅存在于PS的源文件里。

5、準備好為何如此設(shè)計的理由

還記得我們談過研究階段?在這個地方理解利益相關(guān)者,用戶,市場將會派上用場。記住你的行為要像一個專業(yè)的設(shè)計師。如果你選擇黃綠色作為按鈕,那么黃綠色一定是這個按鈕的最佳選擇。 如果這僅僅是你的直覺,并沒有什么理由,那么為它找到一個理由,如果這找不到任何可以支撐的理由,先想想你這么設(shè)計是否是對的,如果你確定是對的而且找不到任何理由的話,編一個吧,編的好點。

總結(jié)

視覺并不是設(shè)計的全部,但是他是優(yōu)秀產(chǎn)品不可或缺的一部分。它傳達了很多會讓用戶覺得舒適、迷人、令人滿意的感受??梢宰屪约河心康男缘脑琰c開始構(gòu)思這個過程。這能讓你在設(shè)計的過程中保證質(zhì)量,并且,可以提前準備好產(chǎn)品的發(fā)展方向。要將這些都做好,還有很長的路要走,那么上路吧!

 

原文作者:David Rhyne, Why Visual Design Is More Than Meets the Eye.

原文地址:https://uxmag.com/articles/why-visual-design-is-more-than-meets-the-eye

譯者:Esic

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!