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

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

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

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

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

一、通過顏色分辨

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

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

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

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

而效果圖在這方面有著更多的講究，類似圖標(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)造力。

三、通過注釋分辨

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

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

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

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