產品狀態原型是什么意思 產品原型設計


什么是Axure及產品原型
axure RP是一款快速原型設計工具,它不需要任何編程或寫代碼基礎,就可以設計出交互效果良好的產品原型,常用于互聯網產品設計、網頁設計、UI設計等領域 。
作為一款熱門的原型設計工具,它可以完成很多紙和筆畫不出來的事情,特別是高交互的頁面,用動畫效果展現讓人瞬間清楚你要表達的內容 。
原型:用線條、圖形描繪出的產品框架,也稱線框圖 。
原型設計在整個產品流程中處于最重要的位置,有著承上啟下的作用 。何出此言?原型設計之前需求或是功能信息都相對抽象,原型設計的過程就是將抽象信息轉化為具象信息的過程,之后的產品需求文檔(PRD)是對原型設計中的版塊、界面、元素及它們之間的執行邏輯進行描述和說明 。所以說,原型設計的重要性無可替代,產品經理應當要對此有絕對的控制和駕馭能力 。
話說回來,原型設計雖然很重要也應當是有限度的,原型設計的作用有以下幾點:
1、因為是原型是需求和功能的具象化表達,所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路 。
2、因為原型相較于UI稿來說修改更方便,所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率 。
“原型”是什么意思?
什么是原型和設計?
原型:用線條、圖形描繪出的產品框架,也稱線框圖 。
設計:綜合考慮產品目標、功能需求場景、用戶體驗等因素,對產品的各版塊、界面和元素進行的合理性排序過程 。
原型設計的重要性是怎樣?
產品階段:Idea→需求采集→功能結構→原型設計→產品需求文檔(PRD文檔)→Roadmap
原型設計在整個產品流程中處于最重要的位置,有著承上啟下的作用 。何出此言?原型設計之前需求或是功能信息都相對抽象,原型設計的過程就是將抽象信息轉化為具象信息的過程,之后的產品需求文檔(PRD)是對原型設計中的版塊、界面、元素及它們之間的執行邏輯進行描述和說明 。所以說,原型設計的重要性無可替代,產品經理應當要對此有絕對的控制和駕馭能力 。
話說回來,原型設計雖然很重要也應當是有限度的,原型設計的作用有以下幾點:
1、因為是原型是需求和功能的具象化表達,所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路 。
2、因為原型相較于UI稿來說修改更方便,所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率 。
原型設計的類型和工具有哪些?
1、手繪原形(草圖)
所需工具:鉛筆、橡皮、白紙
鉛筆相比于中性筆的好處在于方便修改,白紙的好處在于安靜的隨心所欲,不過對于移動產品的設計來說,本人傾向于使用印有手機框架的白紙上繪制,以便于快速進入情景狀態,也能對首屏的界面分配做到心中有數 。
PS:給草圖(App)拍照,配合POP使用,也可以實現交互效果,有興趣的童鞋可以試下 。
由于草圖的非正式性,多使用原型設計的前期論證階段(功能設計可行性),個人也比較喜歡先畫草圖(紙上推演)再畫工具原型(完善) 。
2、工具原型
所需工具:Axure RP(推薦)、Justmind(App)、Keynote(最近比較火,適用于Mac OS)
多說一句,凡是軟件(不論PC或是App),我都建議用最新版,產品經理更應該如此 。
Axure RP無論是PC端產品經理還是App產品經理都會比較熟悉,通過工具繪制的產品原型已經比較正式,如果添加了色彩和交互動作(高保真),可以與最終產品形態無異 。
在這里有必要說一下原型有沒有必要做到高保真的狀態,個人觀點是:沒有需要,就沒有必要;時間寬裕,做交互但不加顏色 。
原型的目標在于清楚的表達產品的設計理念和功能的執行邏輯,所以我認為能夠達到這個目標的原型都是合格的,在原型中加入色彩和交互的目的無非是讓產品經理與技術的溝通更加順暢 。再說,PRD的作用也是交付給技術,完整的PRD應當包括功能需求、線框原型、PRD描述、UI稿、UE演示和修訂記錄 。產品經理階段的原型就高保真了,是不是PRD就不用寫了呢?視覺設計師的UI稿根據高保真原型來設計?那交互設計師的呢?(多數公司沒有該職位)
多一些時間,用來觀察用戶、分析需求、重視(用戶體驗)細節……

產品狀態原型是什么意思
這里有三條關于原型的定義:


  • 用線條、圖形描繪出的產品框架,也稱線框圖 。

  • 交互設計的結果輸出,可能是一張紙上的幾張圖;原型代表著交互設計的結果,當最終實現的時候,交互流程會和原型保持一致;可以理解為草稿或者叫做參照物

  • 原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式 。就本質而言,原型是一種溝通工具 。


另外說說,原型設計目的主要有兩點:
1、溝通: 因為是原型是需求和功能的具象化表達,所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路 。雖然需求文檔也是可以滿足溝通需求的,通過用例將交互寫到設計描述文檔中,但是原型可以更詳細地解釋交互 。
2、測試:因為原型相較于UI稿來說修改更方便,所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率 。沒有哪一家互聯網公司可以不經過測試,就直接上產品和服務 。原型在識別問題、減少風險、節省成本等方面有著不可替代的價值 。
另外,目前比較好用的在線原型設計工具有Marvel,Invision,墨刀等等 。

產品經理必備技能 | 如何畫原型
產品經理當然要會畫原型啦~
聊聊怎么畫原型吧!
在畫原型之前,更重要的事情,就是畫 頁面流程圖 和 信息架構圖 !假如你沒有這些東西,就開始畫原型,那么等著你的就是沒完沒了的改改改 。
頁面流程圖是以用戶視角,看流程合理性 。通常適合于跳轉比較復雜的產品功能,如電商、社交產品 。
為什么要畫頁面流程:
(1)是交互設計/原型設計的基本依據,是邏輯基礎 。如果你都沒想好頁面流轉的順序,那么你畫的原型一定不是可以確定下來的版本
(2)代表了用戶的操作過程,先畫頁面流程圖能迅速發現體驗問題 。有了頁面流程圖,你可以設身處地想象用戶在使用產品時的操作流程,發現其中可能出現的問題
(3)突出頁面重點元素與邏輯關系,提升原型的設計效率 。很多頁面不是全新頁面,而是在原有頁面做一些修改,如果你知道頁面流轉順序,那么會給你畫原型減輕很多工作量
頁面流程圖包含:
(1)四方形:業務流程中的四方形部分,異常流程或彈層通常用菱形表示
(2)流向:主干流向和輔助流向
(3)重點元素:每個流程中,重點要體現和表達的內容是什么
畫頁面流程圖的工具:
(1)Axure:畫了頁面流程圖可以緊接著畫原型
(2)ppt:方便講解
【產品狀態原型是什么意思 產品原型設計】 需要注意的地方:
(1)回歸業務流程,明確主線:頁面流程一定來自于業務流程,一般為業務流程中的方形部分 。異常流程一般為彈層或彈窗提示 。業務流程畫的好,頁面流程就簡單 。
(2)明確頁面中的重點元素:功能在頁面中,有哪些是需要表現元素 。增加異常流程的處理邏輯 。增加輔助的幫助頁面 。考慮下游觸發點(按鈕/鏈接/滑動...) 。
(3)溝通與優化:首先要盡可能窮舉涉及的頁面,然后做減法,有些頁面合并或刪除 。通過原型草圖,優化調整頁面關鍵元素 。與UI、UE、前端研發多溝通會有更好的效果 。
頁面流程圖一般規則:
頁面流程圖例:
一個具體案例:
業務流程:
頁面流程:
主要是分離出了普通用戶的操作流程,加異常處理 。
對于普通用戶的關鍵頁面和關鍵流向:
頁面流程圖:
(1)分離出5個頁面,確定流程流向
(2)固定元素,例如在“1購物車”中,“提交訂單”就是下游觸發點,點擊后流向下一個頁面;在“2輸入優惠碼”中有關鍵元素“填寫優惠碼”,另外還有下游觸發點“確認訂單”...
(3)針對每個頁面去畫對應的原型圖
信息架構圖,以產品視角,看包含多少功能點 。適合于層級分明的,如音樂產品、新聞客戶端、閱讀類產品等 。
信息架構圖例1:
有了頁面流程圖或信息架構圖,現在終于可以開始畫原型啦 。首先,什么是產品原型設計?
產品原型,俗稱 線框圖,大概就是草圖的意思吧 。它是產品落地的關鍵點,是從虛擬概念到用戶接觸的節點 。同時也是產品經理產出的關鍵內容,上傳下達,上給老板,下給UI、UE同事 。
產品從原型到上線的流程:
大公司的產品經理只需要做手繪和低保真的部分,小公司可能還要兼職交互設計...
案例:
好的原型有什么特點:
(1)整體:頁面結構清晰、跳轉關系明確、與業務流程一致、完整表達用戶需求
(2)獨立頁面:功能元素明確有序、位置關系清晰、不同狀態變化清晰
(3)交互設計:清晰的交互邏輯、一致交互方式、界面統一
常用工具:
(1)紙筆:自己畫畫,快速學習和定位
(2)白板:多人討論
(3)軟件Axure/Sketch/墨刀:產出正式文檔
案例:
(1)研究流程:業務流程->頁面流程
(2)確定頁面框架:大概確定頁面布局和大的框架
(3)畫原型:畫模塊,確定交互細節
注意事項:
(1)盡可能用真實比例、真實文案,使元素更真實,也避免在需求評審時被之一 。盡可能真實模擬極端情況,并示例清楚 。
(2)緊扣需求主體,不橫生枝節 。如果原型需要增加新功能,一定要是來源于需求,并且要考慮后端數據來源 。
(3)不要上顏色!原型就用黑白灰,不要給UI、UE挖坑
(4)目錄樹清晰,閱讀流暢
(5)保存修改記錄,關鍵修改重新保存文件
畫/改原型的時間盡量控制在20%工作時間之內,否則就要問問自己是不是哪里出問題了哦 。
產品需求想明白了沒???
產品流程理清楚了沒???
手繪草圖畫了沒???
手繪草圖和Boss確認了沒???
產品原型設計基本原則(2)
手繪-----------低保真-------------高保真---------UI設計------>上線
做什么確定干不干確定元素交互設計-------視覺設計
做不做自己思考其他產品運營......UE/UXUI
產品需求沒想明白之前、產品流程沒理清楚之前、沒有手繪之前,不要碰axure
在你沒把草圖和Boss過了基本確定之前 。不要碰axure
1.明確本次需求的用戶與場景;2.認真研究需求的業務流程圖;3.完成頁面流程與目錄
4.確定頁面框架;5.確定交互細節、串聯;6.討論迭代細節修正;7.定義細節上的規則
備注:畫原型改原型的時間盡量控制在20%以內,原型修改通常是因為需求沒封閉
1.先手繪,在上軟件
2.真實比例,真實文案
真實比例、真實字號會讓元素更真實
真是文案可以避免在需求評審的時候被質疑
真實模擬可能出現的極端情況,并示例清楚
3.不要上顏色
原型就用灰白即可,不用上顏色;做的太漂亮,坑UI/UE; 太漂亮的調整會舍不得刪除;
備注:如果在上顏色的情況下一定要溝通,界面的顏色最好定義好前期,后面改動費時間,界面不統一的話(個人體會)
4.目錄樹足夠清晰 閱讀流暢
5.修改記錄,關鍵修改重新保存文件留歷史版本及時長傳服務器或者云盤避免丟失,有日期,不要覆蓋保存
6.緊扣需求主題不橫生枝節
如果原型需要增加新功能,先考慮后端數據來源
不要為了“長得好看”而增加新模塊
7.設計大牛如何稱為
努力畫、認真畫、重復、方法、多看設計的書達到思想上的交流
產品原型工具有哪些
產品原型工具有Pixso協同設計,PencilProject等,其中推薦選擇Pixso協同設計,該工具不僅是一站式產品設計協作工具,更是一款專業的UI/UX設計工具 。更多矢量網格、布爾運算、樣式創建、智能排版等高階功能,組件級自動布局,增加或刪除內容都無需手動調整,智能排版,且自適應不同屏幕尺寸 。使設計師真正專注于創造本身 。
Pixso通過內網本地服務器部署,確保團隊敏感數據和核心業務數據私有化,直接在原型基礎上,快速邀請團隊成員開啟設計協作,自動生成切圖標注,打開瀏覽器就能獲取CSS、iOS、Android代碼片段,還能根據團隊配置,進行定制化功能開發,自定義管理權限,規避數據泄露風險 。
想要了解更多關于產品原型工具的相關信息,推薦選擇Pixso協同設計 。該工具無縫銜接以往工作,支持Sketch、XD、SVG等文件導入導出,自由進行Sketch的文件格式轉換 。并且,文件自動保存到云端,一鍵回溯到任意歷史版本,再也不用擔心文件丟失 。素材庫集成眾多大廠優秀的設計系統,所有UI設計師均可直接拖拽復用,從此省去大量模塊化設計環節的重復勞動 。
關于產品原型和產品原型設計的內容就分享到這兒!更多實用知識經驗,盡在 m.apearl.cn