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

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

原型圖制作信息

抖音APP產(chǎn)品結構圖

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

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

抖音APP原型圖制作

登錄

首頁

關注

發(fā)布

消息

我

總結

原型圖繪制個人經(jīng)驗總結

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

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

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

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

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

對于抖音APP的一些思考

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

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

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

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

本文由 @陪時間旅行原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

欧美深夜视频_国产精品99视频_国产精品网站一区_亚洲最大av网

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