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

16 評論 84012 瀏覽 452 收藏 15 分鐘

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

主題

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

?背景

在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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 現在很多產品都靠嘴皮子,不干實事,還老師左右設計師的設計風格,什么字號大點,顏色亮點,真煩

    來自上海 回復
  2. 產品菜鳥,剛才被設計師懟原型圖,現在深刻的體會到原型圖一定要畫好,之前都是大概的思路和手繪草圖就OK,現在做新的系統,這樣操作有點走不通了。打算開始臨摹原型圖了,希望以后畫的能讓UI看懂吧。

    來自廣東 回復
  3. 產品經理更注重頁面的邏輯和顯示內容,處理方式,對于顏色或者最終效果一般美工UI會考慮,除非美工能力不行,我認為這是互補的,但是原型,大部分不用高仿真,雖然我們單位現在比較惡心,每次都用他們的組件,搭建一個奇丑無比的,但是產品更注重邏輯及易用是無可厚非的

    來自北京 回復
  4. 產品不是應該偏向于產品規劃嗎?花這么大力氣去做交互設計師或者Ui設計師干的活干嘛…本末倒置,對美學和交互有自己的見解,設計時參與進去不就好了

    回復
    1. 你可以多到幾家公司開展項目,再深思一下~ ^_^

      來自北京 回復
  5. 文章中參數 是指什么?

    來自廣東 回復
  6. 這基本上是產品職能邊界模糊的團隊在搞事情..

    來自北京 回復
  7. 個人覺得這篇文章偏向交互設計師的工作,但以后可以在畫原型時考慮一下文章中說的面,學到了。
    收獲>心態的打造,不理解作者為什么會得出【以上3點的前提下可以建立如下好處:在開發介入前即可進行“不存在的產品迭代”】的結論,就是為什么那3點會和產品迭代直接建立聯系。只是想知道原因,沒有批判的意思。

    來自廣東 回復
    1. ?? 因為開發做出來的效果,便是原型的效果,也就是說 可以再原型上模擬用戶的操作,以及業務流程的運作

      來自廣東 回復
    2. 我明白你說的意思了。是“產品迭代”這個詞有歧義。謝謝回復!

      來自廣東 回復
  8. 做交互設計的時候,也要看具體公司的情況,有時候美術設計對整體風格的沒有把握,我也會提一些視覺方面的建議。
    不過有些美術設計能力比較強,自己都會考慮到交互方面,甚至全盤自己包攬交互方面的工作。還是得看實際情況,項目的大小,還有公司成員的素質等方面,來界定交互設計師的工作邊界在哪里吧。
    樓主的總結得很好呀,順便問一下能方便提供一下您的臨摹案子,借鑒參考一下。 ??

    來自浙江 回復
  9. 學習了 :mrgreen:

    來自江西 回復
  10. 你這是設計干的活吧,產品畫原型不會考慮字體顏色這些的

    來自四川 回復
    1. 你現在還會這樣覺著嗎?^_^

      來自北京 回復
    2. 是的,依然不考慮,產品考慮的業務邏輯多了去了,這些忙不過來,專業的東西交給專業的人去做

      來自四川 回復
  11. 學到了!

    回復