新手教程：抖音APP原型圖制作

該產品原型圖是本人在決定學習產品經理相關知識后繪制的第一個產品原型圖，旨在熟悉產品原型圖制作方法和制作流程、以及學習行業優秀產品的設計理念和改進說明。該原型圖制作和交互說明存在較多的疏漏，虛心歡迎各位產品大牛批評指正。

原型圖制作信息

抖音APP產品結構圖

抖音APP從產品設計上來看主要分為6大模塊，分別是登錄、首頁、關注、發布視頻、消息管理、我共計6個模塊，每個模塊對應不同的內容，從頁面層級上來繪制抖音APP的產品結構圖簡單如下：

產品原型圖大致也是按照上述產品結構圖繪制，該原型圖主要展示抖音APP主要功能頁面及交互流程，細節頁面和交互未做詳細繪制。

抖音APP原型圖制作

登錄

首頁

關注

發布

消息

我

總結

原型圖繪制個人經驗總結

對于產品新手來說，初期臨摹繪制產品原型圖時，多使用Axure軟件的輔助線和頁面截圖來輔助繪制，可快速定位元件位置和大小，能更快完成元件的繪制和位置擺放，對于新手來說比較友好；將圖片大小修改成與原型圖頁面大小一致的尺寸，通過X軸和Y軸輔助線快速繪制元件。

需要重復使用的元件或者頁面，通過創建母版可極大提高原型圖繪制速度，若需要修改同一頁面元件的樣式，直接修改母版樣式即可。

繪制好的原型圖多使用組合功能，以防止對頁面拖動時改變頁面元件的布局；同時，在繪制過程中，盡量對具有整體性的元件集合設置組合，方便元件拖動時不改變元件布局。

對于產品新手來說，在設置元件顏色時，盡量使用顏色提取工具，可保持元件顏色的準確性。

可通過導入外部元件庫的方式來提升原型圖繪制效率，對于常用的元件可自行整理成一套元件庫使用。

對于抖音APP的一些思考

產品整體頁面簡潔直觀，可操作和不可操作區域均通過明顯的顏色來進行區分，且整體頁面風格都采用對比度很高的顏色來進行視覺上的區分，例如登錄頁面中可操作按鈕和不可操作按鈕使用紅色和灰色進行區分，極大提高了用戶使用體驗。

對于同一頁面中不同的展示菜單，均使用不同的文字顏色或是顏色條來進行區分。例如導航菜單當前頁面菜單使用白色字體加底部白色導航條進行區分；但在顏色對比上還有優化空間，且頁面顏色運用較為凌亂，顏色統一性運用有優化空間，例如不同頁面的導航條顏色可做歸一化處理。

整體交互邏輯比較簡潔直觀，對于用戶友好性較高。但部分頁面存在重復情況，可做頁面歸一化處理，例如“消息”頁面中的“粉絲”列表和“我”頁面中的粉絲列表兩個頁面存在重復，且目前頁面不是同一個，可做頁面歸一化處理。

以上是作為產品新人對于抖音APP原型圖的繪制和個人一些經驗總結，僅代表個人觀點，歡迎產品前輩批評指正。

本文由 @陪時間旅行原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

欧美日韩午夜_五月天激情综合_国产精品久久久久一区二区三区_色女人av_国产福利av_欧美日韩中

新手教程：抖音APP原型圖制作