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

原型圖制作信息

• 抖音APP版本：11.2.0
• APP運行平臺：iPhone8 IOS 13.4.1
• 原型圖設(shè)計軟件：Axure RP 8
• 軟件運行平臺：macOS 10.15.5
• 原型圖頁面尺寸：375*667

抖音APP產(chǎn)品結(jié)構(gòu)圖

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

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

抖音APP原型圖制作

登錄

首頁

關(guān)注

發(fā)布

消息

我

總結(jié)

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

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

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

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

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

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

對于抖音APP的一些思考

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

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

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

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

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

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