新手教程:抖音APP原型圖製作

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

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

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

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

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

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

對於產品新手來説,在設置元件顏色時,儘量使用顏色提取工具,可保持元件顏色的準確性。

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

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

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

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

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

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

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1047 字。

轉載請註明: 新手教程:抖音APP原型圖製作 - 楠木軒