3個(gè)細(xì)節(jié),輕松區(qū)分效果圖和原型圖

6 評(píng)論 21475 瀏覽 78 收藏 7 分鐘

產(chǎn)品設(shè)計(jì)是一個(gè)相對(duì)寬泛的概念,其中包含的內(nèi)容不勝枚舉。尤其對(duì)于新人小白來(lái)說(shuō),產(chǎn)品設(shè)計(jì)的分工分類(lèi)著實(shí)令他們頭痛。有些設(shè)計(jì)人員很多時(shí)候連自己畫(huà)的到底是什么都不知道。領(lǐng)導(dǎo)叫你畫(huà)個(gè)圖,結(jié)果拿過(guò)來(lái)一看:天哪!你畫(huà)了個(gè)什么?今天我們就來(lái)講一下,效果圖和原型圖,這對(duì)常常擾亂大家工作的完美CP。

首先,我們需要對(duì)兩者有一個(gè)充分的認(rèn)識(shí):

原型圖,是產(chǎn)品或數(shù)據(jù)系統(tǒng)的一個(gè)基本的實(shí)用模型,通常為示范目的或開(kāi)發(fā)程序的部份結(jié)構(gòu)。在一個(gè)完整的系統(tǒng)開(kāi)發(fā)生命周期中,需要設(shè)計(jì)原型模型,即建構(gòu)和測(cè)試系統(tǒng)的一個(gè)基本版本,如果必要的話還要重復(fù)修改,直到達(dá)成一個(gè)完整的一個(gè)可接受的原型。原型圖存在的意義,就是能夠在開(kāi)發(fā)過(guò)程中充分的表達(dá)出設(shè)計(jì)師的意圖的思想。

效果圖,顧名思義,是帶有視覺(jué)效果的圖片。這一類(lèi)圖片往往是UI設(shè)計(jì)師們已經(jīng)處理過(guò)的成圖,用于展現(xiàn)近乎于真實(shí)產(chǎn)品的效果。產(chǎn)品效果圖是一種設(shè)計(jì)師表現(xiàn)自己創(chuàng)意的方式,同時(shí),優(yōu)秀的效果圖可以客觀的加深用戶(hù)對(duì)于產(chǎn)品的認(rèn)識(shí)和理解,體現(xiàn)出產(chǎn)品的價(jià)值所在。

從概念上來(lái)說(shuō),效果圖和原型圖還是相差比較遠(yuǎn)的,通過(guò)一下幾個(gè)細(xì)節(jié),我們就可以區(qū)分出效果圖和原型圖:

一、通過(guò)顏色分辨

原型圖的顏色以黑白為主,當(dāng)然,灰度原型也是原型圖家族中的名門(mén)貴族。為什么原型圖的顏色會(huì)是如此的單調(diào)?原因很簡(jiǎn)單:其一,原型設(shè)計(jì)師并非UI設(shè)計(jì)師,如果在原型圖中加入了大量的色彩,那么這就會(huì)很容易的影響到UI設(shè)計(jì)師的思考和創(chuàng)作;其二,原型圖面對(duì)的是開(kāi)發(fā)人員而非客戶(hù),這一階段重視的東西是邏輯概念和交互方式,并不是顏色。

一般情況下,效果圖色彩更加豐富些。如果一款產(chǎn)品的效果圖的色彩運(yùn)用和原型圖相差無(wú)幾,除非是有意而為之,不然這位設(shè)計(jì)師也絕對(duì)是low的可以了。作為產(chǎn)品成型之前的“漂亮臉蛋”,效果圖的色彩必須是經(jīng)過(guò)設(shè)計(jì)師考慮研究、用心琢磨過(guò)的。也只有這樣,才能拿出令人滿(mǎn)意的效果。

二、通過(guò)圖標(biāo)分辨

現(xiàn)在的原型圖設(shè)計(jì)過(guò)程中,很多時(shí)候都會(huì)涉及到圖標(biāo)的設(shè)計(jì)和使用。而從嚴(yán)格意義上來(lái)講,原型圖內(nèi)是不需要出現(xiàn)圖標(biāo)的,圖標(biāo)位置方塊代替。原因其實(shí)和上一點(diǎn)基本相同,那就是要在原型設(shè)計(jì)中盡可能的降低對(duì)其他同事的影響,比如UI設(shè)計(jì)師。當(dāng)然,現(xiàn)在的原型設(shè)計(jì)工具中普遍都提供了一些比較簡(jiǎn)單實(shí)用的圖標(biāo)。這些圖標(biāo)樣式相對(duì)簡(jiǎn)單,代表的含義也比較直接。這樣既省去了文字描述的繁瑣,也最大程度地降低了對(duì)于設(shè)計(jì)師的干擾。

而效果圖在這方面有著更多的講究,類(lèi)似圖標(biāo)的細(xì)節(jié)往往決定著一個(gè)效果圖的成敗,而一個(gè)效果圖的成敗,有很大程度上左右這這款產(chǎn)品的命脈。所以,效果圖中的圖標(biāo),即便是精雕細(xì)琢,也請(qǐng)你不要大驚小怪。一個(gè)優(yōu)秀的設(shè)計(jì)師,能夠在效果圖的每一個(gè)細(xì)枝末節(jié)都體現(xiàn)出自己的創(chuàng)造力。

三、通過(guò)注釋分辨

從我個(gè)人的理解來(lái)說(shuō),一張真正優(yōu)秀的效果圖,是不需要注釋就能說(shuō)明一切問(wèn)題的。既然效果圖是一種面向用戶(hù)的產(chǎn)品表現(xiàn)形式,那么就應(yīng)當(dāng)通過(guò)設(shè)計(jì)和畫(huà)面把基本問(wèn)題全部解釋清楚。除非是特殊情況,否則文字注釋的隨意出現(xiàn),一定會(huì)使得設(shè)計(jì)師的身價(jià)大打折扣。

但是原型就不同了。如果只是單純的線框圖,那么沒(méi)有文字說(shuō)明的話,幾乎就沒(méi)什么價(jià)值。如果是帶有交互的原型設(shè)計(jì),那么文字說(shuō)明和注釋的量相對(duì)來(lái)說(shuō)會(huì)少很多,但絕對(duì)不會(huì)一點(diǎn)沒(méi)有。很多情況下,從時(shí)間成本和操作成本上考慮,簡(jiǎn)單的文字有時(shí)會(huì)有更高的實(shí)際效果。

其實(shí),通過(guò)以上三點(diǎn)我們可以總結(jié)一個(gè)判斷的標(biāo)準(zhǔn),即:以邏輯為主導(dǎo)、以好用為準(zhǔn)則的原型圖和以視覺(jué)為主導(dǎo)、以好看為準(zhǔn)則的效果圖??赐赀@些之后,有沒(méi)有想明白,昨天你畫(huà)的那個(gè),到底是什么?

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我能說(shuō)我們公司的UI只是用PS出原型的高保真嘛,以前一直有誤解UI的設(shè)計(jì)能力(。。。),原來(lái)是自己?jiǎn)栴}…

    來(lái)自江蘇 回復(fù)
  2. ????

    回復(fù)
  3. 今天就深刻體會(huì)了,原型中用的是默認(rèn)圖標(biāo)按鈕,設(shè)計(jì)出來(lái)的都是藍(lán)色按鈕。

    回復(fù)
  4. 嗯,產(chǎn)品和UI各司其職??

    回復(fù)
  5. 贊同,我就有一次不小心放了一個(gè)圖標(biāo),被美女UI設(shè)計(jì)師約談了,從此不再犯了。

    來(lái)自北京 回復(fù)
  6. ??

    來(lái)自湖南 回復(fù)