本文是一位同學(xué)提供的總結(jié)。這篇文章也希望給新人朋友一些啟發(fā)：我們畫原型圖并不只是畫圖而已，畫原型圖已經(jīng)等同于在設(shè)計(jì)產(chǎn)品了，要思考的內(nèi)容也很多。如果你已經(jīng)掌握了一種成熟的原型圖繪制方法，可以和他一樣進(jìn)行訓(xùn)練，相信會有不小的收獲的。

主題

通過為期一周的原型圖繪制練習(xí)，深刻理解原型圖設(shè)計(jì)的核心，為自己產(chǎn)品道路未來發(fā)展打好堅(jiān)實(shí)基礎(chǔ)。

?背景

在6天中臨摹了7款成熟產(chǎn)品（包含36氪、網(wǎng)易云音樂、微博、騰訊視頻、In、支付寶、美拍），共18個(gè)頁面。

收獲

心態(tài)的打造

產(chǎn)品經(jīng)理工作最容易被人忽視的誤區(qū)之一：敷衍、無所謂的心態(tài)畫原型圖。

在設(shè)計(jì)原型圖時(shí)就必須以嚴(yán)謹(jǐn)、認(rèn)真的心態(tài)去面對。很多初級產(chǎn)品經(jīng)理或者從事多年產(chǎn)品的人都忽視了原型圖設(shè)計(jì)這個(gè)最基礎(chǔ)也最重要的能力，產(chǎn)品經(jīng)理本來輸出內(nèi)容就不多，多數(shù)情況都是原型圖和需求文檔。

在“人人都是產(chǎn)品經(jīng)理”這個(gè)大旗下，繪制原型是一個(gè)多么簡單又基礎(chǔ)的工作，只要會使用axure工具就可以畫原型了（連程序猿都可以辦到）。但原型圖和需求文檔是產(chǎn)品經(jīng)理最基本的輸出，因?yàn)榛?、簡單，卻又包含了最深刻的原理在里面—-設(shè)計(jì)的過程和想法的表達(dá)。

在我練習(xí)原型圖一周后深刻認(rèn)識到原型圖的重要性，并總結(jié)了以下心得：

1. 借鑒成熟產(chǎn)品時(shí)學(xué)會思考別人產(chǎn)品的設(shè)計(jì)原理，不要僅是簡單的抄襲和模仿，卻不知為何這樣設(shè)計(jì)；這樣做有兩個(gè)問題：其一是我們沒去分析別人為什么這么做，在不同場景下設(shè)計(jì)方式不一定適合所有情況，也許在你的產(chǎn)品里就不適用，反而起到反效果；再者是只會簡單的模仿，其實(shí)你就永遠(yuǎn)比別的產(chǎn)品慢一步，并且你會漸漸喪失作為一個(gè)產(chǎn)品人最核心的能力—-深入思考。
2. ?面對同類產(chǎn)品的不同設(shè)計(jì)方案時(shí)，學(xué)會對比分析，從布局方式、視角順序、參數(shù)選擇等去綜合思考；
3. 忌諱浮躁、不認(rèn)真、不思考、機(jī)械抄襲的設(shè)計(jì)方案；
4. ?在以上3點(diǎn)的前提下可以建立如下好處：在開發(fā)介入前即可進(jìn)行“不存在的產(chǎn)品迭代”，而非等到產(chǎn)品開發(fā)上線后再去思考如何迭代；靠原型圖進(jìn)行推演模擬用戶使用場景和用戶感受。
5. 如果沒有正確的去面對原型圖設(shè)計(jì)，必然導(dǎo)致設(shè)計(jì)的原型都是粗糙和敷衍的，是無法做到“不存在的產(chǎn)品迭代”這個(gè)核心理念的。

文章詳情頁設(shè)計(jì)分析

在臨摹資訊產(chǎn)品的資訊詳情頁時(shí)，就遇到了最典型的同類產(chǎn)品在資訊詳情頁的不同設(shè)計(jì)理念，對比今日頭條和36氪兩種設(shè)計(jì)方案之后，才發(fā)現(xiàn)原型設(shè)計(jì)的真正偉大之處是一種妙不可言的感悟和體會，只有在用心去透徹分析和理解設(shè)計(jì)的原理才會發(fā)現(xiàn)一切核心都在細(xì)節(jié)微妙處。

產(chǎn)品經(jīng)理常常喜歡把用戶體驗(yàn)掛在嘴邊，而真正的體驗(yàn)則都是從細(xì)節(jié)做起，我們都學(xué)會了去說的更好而不知道如何做好，體驗(yàn)到底該怎么做？可以細(xì)化到一句文案的順序變化、詞語的調(diào)整，都會導(dǎo)致用戶對產(chǎn)品體驗(yàn)發(fā)生質(zhì)的轉(zhuǎn)變，產(chǎn)品設(shè)計(jì)就是把細(xì)節(jié)打造完美，而打造細(xì)節(jié)就在于不停的去通過不同設(shè)計(jì)方案的對比、分析、思考得出最優(yōu)設(shè)計(jì)方案，也即一個(gè)打磨產(chǎn)品原型的過程。

我們以資訊詳情頁在設(shè)計(jì)菜單欄和標(biāo)題時(shí)的四種方案來做分析講解；四種方案分別如下：

• 深色標(biāo)題欄+標(biāo)題居中
• 深色標(biāo)題欄+標(biāo)題左對齊
• 透明標(biāo)題欄+標(biāo)題居中
• 透明標(biāo)題欄+標(biāo)題左對齊

首先看無標(biāo)題欄設(shè)計(jì)（透明標(biāo)題欄）這種方式，它在產(chǎn)品設(shè)計(jì)中是不常見的，一般產(chǎn)品做法都會把頂部標(biāo)題欄用深色做突出，為的是讓用戶視角更好的注意到標(biāo)題欄去操作一些重要功能。而透明標(biāo)題欄的設(shè)計(jì)好處在于通過借助顏色的使用（顏色跟內(nèi)容底層一致），讓用戶感覺不到標(biāo)題欄的存在，可以在產(chǎn)品整體視角空間上顯得更加“寬廣”一點(diǎn)，而標(biāo)題欄的存在會壓縮人們的視角空間，將應(yīng)用面積變小了（舉個(gè)栗子：網(wǎng)易云音樂把皮膚換成白色）。

而在資訊詳情頁中，“透明標(biāo)題欄”的設(shè)計(jì)方式所傳達(dá)的視角效果就完全不一樣了，因?yàn)橥该鳂?biāo)題欄的設(shè)計(jì)在這里會讓人覺得文章標(biāo)題并不在“頂部”，而是在“頂部偏下”的位置，因?yàn)椤吧厦媸强盏摹?，并且因?yàn)椤吧厦媸强盏摹苯o了一種內(nèi)容的視角延長，在標(biāo)題“暗示”上就顯得弱化了（舉個(gè)栗子：36氪）。

反例就是今日頭條，通過“深色標(biāo)題欄”的設(shè)計(jì)就會讓人認(rèn)為文章標(biāo)題已經(jīng)在“頂部”。

在上圖中我們可發(fā)現(xiàn)，36氪和今日頭條的標(biāo)題設(shè)計(jì)方案也有細(xì)微差別。36氪的標(biāo)題是居中設(shè)計(jì)，這樣的設(shè)計(jì)原理是因?yàn)椴灰?guī)則形狀所產(chǎn)生的割裂感能把標(biāo)題和正文內(nèi)容非常明顯的進(jìn)行區(qū)分，而今日頭條的標(biāo)題左對齊設(shè)計(jì)方式則無法達(dá)到不規(guī)則性質(zhì)所產(chǎn)生的視角效果。

從這里我們可以發(fā)現(xiàn)，沒有一種設(shè)計(jì)方案是絕對正確或適應(yīng)所有產(chǎn)品應(yīng)用場景的，通過在不同產(chǎn)品同樣的“透明標(biāo)題欄”設(shè)計(jì)，所產(chǎn)生的效果是不一樣的。

同類產(chǎn)品的不同布局

在很多時(shí)候我們也很容易忽視這樣一個(gè)事實(shí)：即同行業(yè)、相同目標(biāo)用戶的同類產(chǎn)品，也需要考慮其產(chǎn)品的不同點(diǎn)導(dǎo)致最終產(chǎn)品的不同設(shè)計(jì)方案和最終展現(xiàn)形態(tài)。不同點(diǎn)主要會在這幾個(gè)方面：產(chǎn)品核心價(jià)值觀不同、產(chǎn)品定位不同、產(chǎn)品核心功能不同、應(yīng)用場景不同。

繼續(xù)來舉個(gè)栗子：

同是音樂類產(chǎn)品的網(wǎng)易云音樂和QQ音樂，我們仔細(xì)觀察也會發(fā)現(xiàn)很有意思的地方。云音樂跟QQ音樂最大的區(qū)別在于核心功能上，云音樂核心功能是推薦，QQ音樂是搜索。

由于產(chǎn)品價(jià)值觀和核心功能的不同，造就了他們在設(shè)計(jì)方案上的天差地別。云音樂的搜索功能是在操作最不方便且處于視角盲區(qū)的右上角，但即使如此也不影響云音樂整體的產(chǎn)品架構(gòu)，因?yàn)樵埔魳泛诵墓δ茉谕扑]，而不需要通過頻繁的使用搜索功能才能找到自己喜歡的音樂。而QQ音樂則把搜索功能以搜索框的形式放在了頂部菜單欄的中間，從視角上更突出該功能的重要性。

產(chǎn)品顏色

在大量成熟的產(chǎn)品中，我們也可發(fā)現(xiàn)一些關(guān)于顏色的使用規(guī)律，雖然產(chǎn)品色彩搭配是由UI來負(fù)責(zé)，但最終產(chǎn)品整體呈現(xiàn)效果還是需要我們產(chǎn)品經(jīng)理來審核把關(guān)。

在色彩的選擇上最忌諱把設(shè)計(jì)圖要求做的各種好看和酷炫，其實(shí)設(shè)計(jì)師和普通人一樣，都有自己的審美觀，一味追求漂亮和酷炫，而忽視特定的用戶、特定的場景、特定的需求，這樣的設(shè)計(jì)圖方案是無法為用戶創(chuàng)造任何價(jià)值的。

通過觀察和臨摹多個(gè)成熟產(chǎn)品發(fā)現(xiàn)好的產(chǎn)品一定是非常突出和容易識別產(chǎn)品主色調(diào)的，在色彩上同樣講究簡約原則。一般情況產(chǎn)品不會超過3種色彩搭配，顏色過于復(fù)雜，會加強(qiáng)人們對于信息的辨識難度，造成不必要的信息干擾。

如何分析一款產(chǎn)品

市面上成熟的產(chǎn)品可以給予我們參考和借鑒的意義，給予我們自己設(shè)計(jì)產(chǎn)品做出方案上的引導(dǎo)，但是如何去分析一款產(chǎn)品并結(jié)合到自己的產(chǎn)品上則成了關(guān)鍵。我總結(jié)了這幾個(gè)繪制原型圖的核心維度：頁面布局、核心功能位置、視角順序及視角落腳點(diǎn)、參數(shù)的選擇及位置（參數(shù)選擇圍繞需求、核心功能、產(chǎn)品動機(jī)來決定）、元素間層次關(guān)系。

元素關(guān)系可以通過顏色、大小和形狀的不同來進(jìn)行區(qū)分，具體在原型設(shè)計(jì)中可以通過間隔線區(qū)分、系統(tǒng)底層留白、不同顏色板塊區(qū)分等方法來打造清晰的元素間層次關(guān)系，讓相關(guān)聯(lián)的元素排列在一起，使得產(chǎn)品的整體層次感更加有條理。

原型繪制的小細(xì)節(jié)

原型設(shè)計(jì)初始階段不建議使用最深的顏色來表達(dá)，給顏色降一維，讓真正需要使用深色去突出某功能時(shí)留出一定空間。

臨摹作品展示

資訊詳情頁4種方案對比

透明標(biāo)題欄+標(biāo)題居中，透明標(biāo)題欄+標(biāo)題左對齊

深色標(biāo)題欄+標(biāo)題居中，深色標(biāo)題欄+標(biāo)題左對齊

過程感悟

為什么要畫原型圖

1. 繪制的過程=設(shè)計(jì)的過程；繪制的結(jié)果=想法的表達(dá)；
2. 注重設(shè)計(jì)時(shí)的思考過程，如何更好表達(dá)對產(chǎn)品的理念和想法，而不是機(jī)械抄襲；
3. 認(rèn)識不同設(shè)計(jì)方案的原理、作用和使用場景，通過多種設(shè)計(jì)方案對比和分析，擴(kuò)展自己原型設(shè)計(jì)的素材，應(yīng)對將來設(shè)計(jì)產(chǎn)品時(shí)有靈活方案的選擇；
4. ?進(jìn)一步熟練掌握參數(shù)選擇、頁面布局、功能位置、視角順序、元素關(guān)系等核心技能；
5. 從原型設(shè)計(jì)中可初步簡單體會產(chǎn)品的取舍之道；

怎么畫原型圖

1. 認(rèn)知模型：根據(jù)產(chǎn)品核心功能和功能結(jié)構(gòu)，思考頁面整體布局，功能的擺放位置，如何突出核心功能，如何建立視覺順序，如何建立元素層次關(guān)系，如何選擇重要參數(shù)；
2. 繪制原則：先動手，再思考；
3. 采用素材：基本素材（線、框、字）；
4. 隱藏素材（距離、顏色、大小、圖案、透明度、位置）；
5. ?繪制過程：原型整體框架搭建（系統(tǒng)底層→頂部操作層→內(nèi)容底層→元素層）；
6. 頁面設(shè)計(jì)流程是由布局→參數(shù)→元素關(guān)系（思考邏輯是正向流程，分析驗(yàn)證則是反過來，如果元素關(guān)系不滿足就修改參數(shù)，參數(shù)不滿足就修改布局）；
7. 原型圖的核心：設(shè)計(jì)的過程和想法的表達(dá)、參數(shù)的選擇、視角順序。

文末

任何一個(gè)越基礎(chǔ)的技能越核心，因?yàn)樵交A(chǔ)越具有通用性，所有高階技能都是由基礎(chǔ)技能演變升級而來，而很多讓人心血膨脹的高段位技能因?yàn)樘珜I(yè)反而不具有通用性，只能解決某個(gè)固定的問題。打好堅(jiān)實(shí)基礎(chǔ)是我們身為產(chǎn)品經(jīng)理必修之路，為未來的成長建立正確的認(rèn)知，切勿因?yàn)楦≡?、看不起的自傲心態(tài)而走向認(rèn)知上的彎路。

#專欄作家#

枯葉，微信公眾號：枯葉咖啡館。人人都是產(chǎn)品經(jīng)理專欄作家。近6年經(jīng)驗(yàn)的產(chǎn)品經(jīng)理，擅長社交、社區(qū)、細(xì)分群體挖掘。

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

題圖來自 Pexels，基于 CC0 協(xié)議