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

10 評(píng)論 20471 瀏覽 120 收藏 6 分鐘

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

原型圖制作信息

  • 抖音APP版本:11.2.0
  • APP運(yùn)行平臺(tái):iPhone8 IOS 13.4.1
  • 原型圖設(shè)計(jì)軟件:Axure RP 8
  • 軟件運(yùn)行平臺(tái):macOS 10.15.5
  • 原型圖頁(yè)面尺寸:375*667

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

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

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

抖音APP原型圖制作

登錄

首頁(yè)

關(guān)注

發(fā)布

消息

總結(jié)

原型圖繪制個(gè)人經(jīng)驗(yàn)總結(jié)

對(duì)于產(chǎn)品新手來(lái)說(shuō),初期臨摹繪制產(chǎn)品原型圖時(shí),多使用Axure軟件的輔助線(xiàn)和頁(yè)面截圖來(lái)輔助繪制,可快速定位元件位置和大小,能更快完成元件的繪制和位置擺放,對(duì)于新手來(lái)說(shuō)比較友好;將圖片大小修改成與原型圖頁(yè)面大小一致的尺寸,通過(guò)X軸和Y軸輔助線(xiàn)快速繪制元件。

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

繪制好的原型圖多使用組合功能,以防止對(duì)頁(yè)面拖動(dòng)時(shí)改變頁(yè)面元件的布局;同時(shí),在繪制過(guò)程中,盡量對(duì)具有整體性的元件集合設(shè)置組合,方便元件拖動(dòng)時(shí)不改變?cè)季帧?/p>

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

可通過(guò)導(dǎo)入外部元件庫(kù)的方式來(lái)提升原型圖繪制效率,對(duì)于常用的元件可自行整理成一套元件庫(kù)使用。

對(duì)于抖音APP的一些思考

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

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

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

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

 

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 樓主好,請(qǐng)問(wèn)可以發(fā)我一份制作抖音原型圖的元件庫(kù)嗎

    來(lái)自上海 回復(fù)
  2. 請(qǐng)問(wèn)紅色的箭頭是怎么畫(huà)出來(lái)的呢

    回復(fù)
  3. 樓主你好,可以發(fā)一份原型圖給我嗎~

    來(lái)自浙江 回復(fù)
  4. 能發(fā)一下文件給我嗎,

    來(lái)自湖北 回復(fù)
  5. 可以把你的原型圖發(fā)給我嗎

    回復(fù)
  6. 很厲害,請(qǐng)問(wèn)背景圖片 按鈕是從哪里搜集的素材呢?

    回復(fù)
    1. 阿里圖標(biāo)庫(kù)

      回復(fù)
  7. 這個(gè)有啥意義嗎

    來(lái)自上海 回復(fù)
    1. 對(duì)我個(gè)人來(lái)說(shuō)挺有意義的,產(chǎn)品入門(mén)新手,把自己想寫(xiě)的寫(xiě)下來(lái)挺有意義的。

      來(lái)自云南 回復(fù)
    2. 你好,我最近也在學(xué)習(xí)產(chǎn)品相關(guān)的知識(shí),我能獲取一下你抖音的原型圖嗎

      來(lái)自重慶 回復(fù)