產(chǎn)品原型三要素:產(chǎn)品老司機如何畫原型?

38 評論 64006 瀏覽 539 收藏 8 分鐘

當我們在畫原型時,我們是在畫什么?在討論這個問題之前,我們應該先明確一個最本質(zhì)的問題,就是我們畫原型的目的是什么?

原型是產(chǎn)品設計階段最終的交付物,產(chǎn)品經(jīng)理設計完成的原型要交付給研發(fā)團隊、UI團隊、UED團隊進行產(chǎn)品研發(fā)階段的相關工作。所以原型的目的就是讓接手下一個階段工作的小伙伴可以清晰了解產(chǎn)品經(jīng)理的產(chǎn)品設計思想,可以按照產(chǎn)品經(jīng)理規(guī)劃的愿景設計產(chǎn)品,避免打造出一款與最初設想截然相反的產(chǎn)出物。在一般產(chǎn)品流程中,原型都是與PRD文檔一起作為產(chǎn)出物出現(xiàn)的,不過PRD文檔不是本文的討論重點,本文的重點在于如何畫出一個簡潔、清晰易懂的原型。

本文將一份簡潔易懂的原型分為了三個部分:原型元素、元素注釋、功能埋點。這三部分適用于大部分的產(chǎn)品原型組成要素,當然還會有本文沒有涵蓋的內(nèi)容,可以根據(jù)具體產(chǎn)品具體場景個性化”增刪改查”。

一、原型元素

原型元素為原型當中組成的最基本元素,如原型當中的文字、按鈕、圖片等等。這其中依據(jù)元素是否會改變、是否可操作又細分成了三類。

1.1展現(xiàn)元素

展現(xiàn)元素為原型當中最基本的元素,文字、圖片等不會發(fā)生改變的元素。如原型中的標題、展示圖片等等。

1.2可操作元素

可操作元素指用戶在使用產(chǎn)品過程中,可以與用戶之間發(fā)生交互效果的元素。

(1)按鈕

按鈕是原型中比較常出現(xiàn)的元素,如表單的提交按鈕,內(nèi)容點贊按鈕等等。

(2)跳轉(zhuǎn)鏈接

跳轉(zhuǎn)鏈接指通過點擊會跳轉(zhuǎn)到相應頁面的元素,跳轉(zhuǎn)鏈接可以是文字、圖片,也可以是產(chǎn)品導航類鏈接,如APP當中的Tab標簽、功能跳轉(zhuǎn)以及返回、分享功能鏈接等等。

(3)多媒體元素

多媒體元素指產(chǎn)品原型當中需要對用戶展現(xiàn)的音頻、視頻以及動態(tài)圖片等多媒體內(nèi)容所使用的組件。

1.3輸入元素

輸入元素為用戶在使用產(chǎn)品時提供數(shù)據(jù)輸入功能的元素,最常見的有用戶注冊時需要填寫的表單數(shù)據(jù),或者是用戶回復、評論內(nèi)容的輸入框。

二、元素注釋

單純的元素羅列在原型是無法滿足產(chǎn)品研發(fā)團隊的需求,根據(jù)元素類型的不同和可能產(chǎn)生的不同狀態(tài),需要對相應的元素加以注釋,盡可能窮舉元素的所有可能出現(xiàn)的狀態(tài)和問題。

2.1元素規(guī)范

元素規(guī)范主要指元素在原型中的展現(xiàn)形式,如大小、位置、排版以及是否自適應屏幕等。另外針對于輸入元素,要明確輸入內(nèi)容的規(guī)則,對輸入內(nèi)容的驗證以及提示等。

2.2狀態(tài)轉(zhuǎn)換

狀態(tài)轉(zhuǎn)換針對于可操作元素而言,用戶對元素進行操作后,元素會出現(xiàn)幾種狀態(tài)。如用戶點擊點贊按鈕后,點贊數(shù)自動加一,點贊按鈕變成已贊,當再次點擊點贊按鈕時,點贊數(shù)自動減一,點贊按鈕回復初始狀態(tài)。

在描述元素狀態(tài)轉(zhuǎn)換時,一定要盡可能將所有可能出現(xiàn)的狀態(tài)窮舉羅列,并輔助說明狀態(tài)轉(zhuǎn)換的邏輯以及可能出現(xiàn)的問題。這樣做的目的在于讓研發(fā)團隊盡可能明確業(yè)務底層邏輯,減少bug出現(xiàn)的幾率。

2.3頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)指用戶點擊相應跳轉(zhuǎn)鏈接后會跳轉(zhuǎn)到指定頁面,這類注釋主要針對跳轉(zhuǎn)鏈接類元素,在注釋時注明要跳轉(zhuǎn)到的頁面。關于頁面跳轉(zhuǎn)設計,可以在產(chǎn)品流程設計中的頁面流程設計進行詳細規(guī)劃。

2.4交互說明

交互說明指用戶的某些行為是否會對產(chǎn)品產(chǎn)生影響,如資訊類產(chǎn)品在閱讀內(nèi)容詳情是,在當前頁面從右向左滑動就會自動閱讀下一篇文章。類似這類的交互動作,如單擊、雙擊、屏幕滑動等,如果你的產(chǎn)品對于這些交互有不同的表現(xiàn),也要在原型中進行相應的注釋。

三、功能埋點

在產(chǎn)品上線后對產(chǎn)品功能、流程進行數(shù)據(jù)分析時,如果需要從產(chǎn)品自身數(shù)據(jù)庫中提取數(shù)據(jù),就需要在產(chǎn)品設計階段對功能進行埋點。如對于電商原型頁面的功能埋點,在用戶點擊加入購物車、點擊結(jié)算等相關動作元素上進行埋點,利于后期對電商業(yè)務漏斗模型的數(shù)據(jù)分析統(tǒng)計提供數(shù)據(jù)支持。

對于功能的埋點一定要在定義數(shù)據(jù)關鍵指標時有所明確,這樣在畫原型時,可以對每一個頁面需要埋點的功能進行突出注釋。

四、實戰(zhàn)案例-BPApp

本案例中的原型選自之前產(chǎn)品經(jīng)理知識體系系列文章中的案例:BestProduct,下面僅選取了幾個頁面進行說明上面提到的畫原型技巧。

#專欄作家#

記小憶,人人都是產(chǎn)品經(jīng)理專欄作者,野蠻生長的產(chǎn)品經(jīng)理,運營商大數(shù)據(jù)產(chǎn)品實踐者,擅長從0-1搭建產(chǎn)品經(jīng)理知識體系。公眾號:PM龍門陣。

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

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這種好看的元件在哪哥網(wǎng)址下載,有鏈接嗎?AXURE自帶的不好看

    來自北京 回復
  2. 哈,看完還是不太會?你可能需要從Axure基礎開始學

    這里推薦你加Axure實戰(zhàn)班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    ?? 領取適合產(chǎn)品新人的原型設計大禮包哦,cc還會不定期分享Axure免費視頻課程呢!

    來自廣東 回復
  3. 因為你一上來就用了墨刀,如果你先學習axure或者是sketch,就會不屑用磨刀了

    來自浙江 回復
    1. 不要盲目的追求axure,墨刀也有墨刀的優(yōu)勢,要相互結(jié)合用,不同的項目或產(chǎn)品使用不同工具。便捷,準確的達到預期才是目的。

      回復
    2. axure是交互體驗做的最差的交互工具

      來自香港 回復
  4. zan

    來自江蘇 回復
  5. 本人B端新人一枚,不知道做了這些標注以后還有沒由必要把交互再做出來?比如登錄,這塊以注明密碼錯誤等相關信息,在畫交互時還有必要把每個情況都畫出來嗎?

    來自陜西 回復
    1. 畫原型的時候把自己能想到的異常情況都做出來,當然你是不可能做出全部的

      來自浙江 回復
    2. 項目時間緊 沒有那么多時間

      來自陜西 回復
    3. 開發(fā)會說:那要你產(chǎn)品干嘛的
      b端產(chǎn)品,用組件就好了,組件會解決一些通用的異常問題,但是具體的異常描述和情景,還是需要產(chǎn)品細想

      來自浙江 回復
  6. 這種原型是比較適合給開發(fā)看的,如果直接做成動態(tài)交互,開發(fā)很容易漏掉一些交互事件,但是面試的用人單位,就是喜歡你做成很牛逼的交互效果圖,我把原型標注好給面試官看,對方點來點去說怎么沒反應,我也是無語了。

    來自廣東 回復
  7. 比較認同樓主的思路,簡約的設計、嚴密的邏輯,加上清晰的思路,就足夠了。高保真什么炫技之類的原型,還是平時練習技能和熟悉軟件用用,這才是接地氣的原型設計。 :mrgreen:

    來自浙江 回復
    1. 需求描述的方式有很多種。原型,文檔,原型加文檔,表格等等,還是要看跟團隊配合的程度,自己的研發(fā)團隊適合那種方式,不過我很喜歡作者的方式,清晰

      回復
  8. 移動端墨刀會畫起來比較快,但是要復雜的交互還是離不開Axure

    來自江蘇 回復
  9. axure中要是有將標注一鍵隱藏的功能,就更好了

    來自上海 回復
    1. 可以的,我就是把所有的注釋變成一組,然后頁面角落放一個按鈕設置成點擊隱藏這個組就OK了 ??

      來自浙江 回復
    2. 其實axure上的每個控件都可以做備注的,在右上角的說明里寫就行了,演示的時候就會變成彈窗展示出來

      來自浙江 回復
  10. 用了一年墨刀,基礎還是AX,效果交互和流暢還是墨刀好

    來自北京 回復
  11. 通俗易懂~謝謝呢

    來自江西 回復
  12. 老司機把需求文檔都說一遍吧,光說原型~╮(╯▽╰)╭ ?

    來自廣東 回復
    1. 哈哈 好的呀,等下一篇更新吧

      來自北京 回復
  13. 作者文章寫的很好,特別是元素注釋里面將各個元素注意細節(jié)都講到了。作為新人有一點想請教各位,功能埋點是什么?作用是什么?

    來自湖北 回復
    1. 舉個例子,某一個頁面瀏覽量是1000,但頁面上提交按鈕的點擊量只有100,在進行數(shù)據(jù)統(tǒng)計分析時要通過業(yè)務流程去獲取用戶每一個行為的數(shù)據(jù)。在原型設計時要考慮是否要統(tǒng)計某些元素的點擊行為,有利于產(chǎn)品上線后對產(chǎn)品相關數(shù)據(jù)的采集和分析。

      來自北京 回復
    2. 大概懂了。就是功能埋點利于后期統(tǒng)計和總結(jié)功能使用率的數(shù)據(jù)。

      來自湖北 回復
  14. 還有你這是畫的蘋果手機的界面么?我看你還畫的電池電量啥的,是不是h5頁面就不用畫那些了?而且瀏覽器本身會有返回什么的。

    來自北京 回復
    1. 電量是手機自帶的工具欄,本文中原型是為了更形象生動,理論上你可以不畫的。

      來自北京 回復
  15. 我怎么都找不見連線、??這種組件呢?我畫起來老費勁了 ?? 急哭了啊

    來自北京 回復
    1. 額 說明你對axure用的不熟練,基礎組件里面會有標注元素。在axure最上面的工具欄有連接選項,點擊連接就可以做連線了。

      來自北京 回復
  16. 請問這個是用的什么原型工具?

    回復
    1. sketch和axure都可以實現(xiàn)的,ppt也可以

      回復
    2. axure

      回復
    3. 一看就是Axure,熟悉的連線,熟悉的Icon。。。

      來自上海 回復
    4. 哈哈,一看就是老司機

      來自北京 回復
  17. 同問,連接線是有現(xiàn)成的元件嗎

    來自四川 回復
    1. axure選擇連接就有了

      回復
    2. 帶數(shù)字的圓圈是自己放上去的嗎?

      來自四川 回復
    3. 對呀,都是axure里面自帶的組件

      來自北京 回復
    4. 哈哈,老司機談不上,只是在設計過4個產(chǎn)品的PRD之后,感覺原型要輕量級一點兒。有些時候PM還是要從“just原型PM”逐漸升級上去的。上文說的幾個PRD要素很精辟,贊起來!

      來自上海 回復