我臨摹了7款產品的原型,總結出這些原型圖經驗

本文是一位同學提供的總結。這篇文章也希望給新人朋友一些啟發：我們畫原型圖並不只是畫圖而已，畫原型圖已經等同於在設計產品了，要思考的內容也很多。如果你已經掌握了一種成熟的原型圖繪製方法，可以和他一樣進行訓練，相信會有不小的收穫的。

主題

通過為期一周的原型圖繪製練習，深刻理解原型圖設計的核心，為自己產品道路未來發展打好堅實基礎。

 背景

在6天中臨摹了7款成熟產品（包含36氪、網易雲音樂、微博、騰訊視頻、In、支付寶、美拍），共18個頁面。

收穫

心態的打造

產品經理工作最容易被人忽視的誤區之一：敷衍、無所謂的心態畫原型圖。

在設計原型圖時就必須以嚴謹、認真的心態去面對。很多初級產品經理或者從事多年產品的人都忽視了原型圖設計這個最基礎也最重要的能力，產品經理本來輸出內容就不多，多數情況都是原型圖和需求文檔。

在「人人都是產品經理」這個大旗下，繪製原型是一個多麼簡單又基礎的工作，只要會使用axure工具就可以畫原型了（連程序猿都可以辦到）。但原型圖和需求文檔是產品經理最基本的輸出，因為基本、簡單，卻又包含了最深刻的原理在裡面—-設計的過程和想法的表達。

在我練習原型圖一周後深刻認識到原型圖的重要性，並總結了以下心得：

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

文章詳情頁設計分析

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

產品經理常常喜歡把用戶體驗掛在嘴邊，而真正的體驗則都是從細節做起，我們都學會了去說的更好而不知道如何做好，體驗到底該怎麼做？可以細化到一句文案的順序變化、詞語的調整，都會導致用戶對產品體驗發生質的轉變，產品設計就是把細節打造完美，而打造細節就在於不停的去通過不同設計方案的對比、分析、思考得出最優設計方案，也即一個打磨產品原型的過程。

我們以資訊詳情頁在設計菜單欄和標題時的四種方案來做分析講解；四種方案分別如下：

• 深色標題欄+標題居中
• 深色標題欄+標題左對齊
• 透明標題欄+標題居中
• 透明標題欄+標題左對齊

首先看無標題欄設計（透明標題欄）這種方式，它在產品設計中是不常見的，一般產品做法都會把頂部標題欄用深色做突出，為的是讓用戶視角更好的注意到標題欄去操作一些重要功能。而透明標題欄的設計好處在於通過藉助顏色的使用（顏色跟內容底層一致），讓用戶感覺不到標題欄的存在，可以在產品整體視角空間上顯得更加「寬廣」一點，而標題欄的存在會壓縮人們的視角空間，將應用面積變小了（舉個慄子：網易雲音樂把皮膚換成白色）。

而在資訊詳情頁中，「透明標題欄」的設計方式所傳達的視角效果就完全不一樣了，因為透明標題欄的設計在這裡會讓人覺得文章標題並不在「頂部」，而是在「頂部偏下」的位置，因為「上面是空的」，並且因為「上面是空的」給了一種內容的視角延長，在標題「暗示」上就顯得弱化了（舉個慄子：36氪）。

反例就是今日頭條，通過「深色標題欄」的設計就會讓人認為文章標題已經在「頂部」。

在上圖中我們可發現，36氪和今日頭條的標題設計方案也有細微差別。36氪的標題是居中設計，這樣的設計原理是因為不規則形狀所產生的割裂感能把標題和正文內容非常明顯的進行區分，而今日頭條的標題左對齊設計方式則無法達到不規則性質所產生的視角效果。

從這裡我們可以發現，沒有一種設計方案是絕對正確或適應所有產品應用場景的，通過在不同產品同樣的「透明標題欄」設計，所產生的效果是不一樣的。

同類產品的不同布局

在很多時候我們也很容易忽視這樣一個事實：即同行業、相同目標用戶的同類產品，也需要考慮其產品的不同點導致最終產品的不同設計方案和最終展現形態。不同點主要會在這幾個方面：產品核心價值觀不同、產品定位不同、產品核心功能不同、應用場景不同。

繼續來舉個慄子：

同是音樂類產品的網易雲音樂和QQ音樂，我們仔細觀察也會發現很有意思的地方。雲音樂跟QQ音樂最大的區別在於核心功能上，雲音樂核心功能是推薦，QQ音樂是搜索。

由於產品價值觀和核心功能的不同，造就了他們在設計方案上的天差地別。雲音樂的搜索功能是在操作最不方便且處於視角盲區的右上角，但即使如此也不影響雲音樂整體的產品架構，因為雲音樂核心功能在推薦，而不需要通過頻繁的使用搜索功能才能找到自己喜歡的音樂。而QQ音樂則把搜索功能以搜索框的形式放在了頂部菜單欄的中間，從視角上更突出該功能的重要性。

產品顏色

在大量成熟的產品中，我們也可發現一些關於顏色的使用規律，雖然產品色彩搭配是由UI來負責，但最終產品整體呈現效果還是需要我們產品經理來審核把關。

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

通過觀察和臨摹多個成熟產品發現好的產品一定是非常突出和容易識別產品主色調的，在色彩上同樣講究簡約原則。一般情況產品不會超過3種色彩搭配，顏色過於複雜，會加強人們對於信息的辨識難度，造成不必要的信息幹擾。

如何分析一款產品

市面上成熟的產品可以給予我們參考和借鑑的意義，給予我們自己設計產品做出方案上的引導，但是如何去分析一款產品並結合到自己的產品上則成了關鍵。我總結了這幾個繪製原型圖的核心維度：頁面布局、核心功能位置、視角順序及視角落腳點、參數的選擇及位置（參數選擇圍繞需求、核心功能、產品動機來決定）、元素間層次關係。

元素關係可以通過顏色、大小和形狀的不同來進行區分，具體在原型設計中可以通過間隔線區分、系統底層留白、不同顏色板塊區分等方法來打造清晰的元素間層次關係，讓相關聯的元素排列在一起，使得產品的整體層次感更加有條理。

原型繪製的小細節

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

臨摹作品展示

資訊詳情頁4種方案對比

透明標題欄+標題居中，透明標題欄+標題左對齊

深色標題欄+標題居中，深色標題欄+標題左對齊

過程感悟

為什麼要畫原型圖

1. 繪製的過程=設計的過程；繪製的結果=想法的表達；
2. 注重設計時的思考過程，如何更好表達對產品的理念和想法，而不是機械抄襲；
3. 認識不同設計方案的原理、作用和使用場景，通過多種設計方案對比和分析，擴展自己原型設計的素材，應對將來設計產品時有靈活方案的選擇；
4.  進一步熟練掌握參數選擇、頁面布局、功能位置、視角順序、元素關係等核心技能；
5. 從原型設計中可初步簡單體會產品的取捨之道；

怎麼畫原型圖

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

文末

任何一個越基礎的技能越核心，因為越基礎越具有通用性，所有高階技能都是由基礎技能演變升級而來，而很多讓人心血膨脹的高段位技能因為太專業反而不具有通用性，只能解決某個固定的問題。打好堅實基礎是我們身為產品經理必修之路，為未來的成長建立正確的認知，切勿因為浮躁、看不起的自傲心態而走向認知上的彎路。

#專欄作家#

枯葉，微信公眾號：枯葉咖啡館。人人都是產品經理專欄作家。近6年經驗的產品經理，擅長社交、社區、細分群體挖掘。

本文原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基於 CC0 協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}