告別死板原型!用 Axure 實(shí)現(xiàn)高級(jí)感打字動(dòng)畫!

1 評(píng)論 638 瀏覽 0 收藏 7 分鐘

你看過打字動(dòng)畫,但有沒有想過自己能做一個(gè)?這篇文章告訴你:只用 Axure,也能輕松搞定那種“高端感十足”的打字特效。不懂代碼也能上手,讓原型說話,讓體驗(yàn)發(fā)光。

很多人覺得“打字機(jī)效果”只是一個(gè)炫技動(dòng)效,用來裝飾引導(dǎo)頁、品牌口號(hào),視覺上好看就行。但真正做過的產(chǎn)品經(jīng)理會(huì)發(fā)現(xiàn),這種看似簡單的效果,其實(shí)隱藏了不少設(shè)計(jì)和實(shí)現(xiàn)的細(xì)節(jié)。

從產(chǎn)品設(shè)計(jì)角度看,它涉及節(jié)奏控制、信息分步傳遞、用戶注意力引導(dǎo);從原型實(shí)現(xiàn)來看,要考慮逐字顯示、打字中斷、內(nèi)容更新等問題。不同工具有不同做法,而在 Axure 中,它的實(shí)現(xiàn)并不如看起來那樣簡單。

本文將結(jié)合實(shí)際場景,帶你從0到1講透打字機(jī)效果的產(chǎn)品邏輯、交互原理與實(shí)現(xiàn)方式,適合希望提升原型表現(xiàn)力的產(chǎn)品經(jīng)理閱讀。

背景與問題

但很多產(chǎn)品經(jīng)理在設(shè)計(jì)交互稿時(shí),常常對(duì)它“一筆帶過”——要么只是口頭交代“這里有個(gè)打字效果”,要么干脆放棄實(shí)現(xiàn)交互邏輯,只留一句靜態(tài)文案。這種做法,看似節(jié)省時(shí)間,實(shí)則放棄了一個(gè)低成本制造用戶感知的好機(jī)會(huì)。

另一方面,一些剛接觸 Axure 的產(chǎn)品同學(xué),可能誤以為“打字效果”必須靠前端配合開發(fā),或者是 Axure 無法實(shí)現(xiàn)的“高階動(dòng)效”,于是直接放棄。

但其實(shí)打字機(jī)效果的本質(zhì),就是一個(gè)**“逐字更新文本內(nèi)容 + 控制時(shí)間節(jié)奏”的組合交互**。在理解這個(gè)核心邏輯之后,完全可以通過 Axure 實(shí)現(xiàn)它,并且有不止一種方式。

不過在實(shí)際項(xiàng)目中,要做得既靈活又易用,并沒有想象中那么簡單。比如:

①文本太長會(huì)不會(huì)卡頓?

②想加“暫?!惫δ茉趺崔k?

③多段文字怎么分批打字?

④能不能在打字過程中動(dòng)態(tài)改變內(nèi)容?

這些問題,很多都不是單純“能不能做”的問題,而是產(chǎn)品經(jīng)理能不能把它設(shè)計(jì)好、講清楚、表達(dá)明確的問題。

本文接下來將拆解打字機(jī)效果的原理(含 Axure 實(shí)操),以及它背后的交互邏輯與常見誤區(qū),希望能幫你真正掌握這個(gè)“看起來簡單,實(shí)際上不簡單”的功能。

原理與思路

打字機(jī)的本質(zhì)原理:定時(shí)逐字更新文本內(nèi)容

基本實(shí)現(xiàn)邏輯:①將文本拆解為單個(gè)字符 ②每隔X ms 添加一個(gè)字符到顯示框

Axure實(shí)現(xiàn)過程

第一步:準(zhǔn)備素材

①一個(gè)用來承載打字效果的中繼器,命名為 djz,雙擊把小方塊拉成 60×30,字體懟到 36 號(hào)!。

②一個(gè)控制開啟打字效果的按鈕,按鈕文字“開始打字”。

③一個(gè)控制實(shí)現(xiàn)循環(huán)打字效果的透明熱區(qū),命名為Controller。

第二步:實(shí)現(xiàn)逐字顯示邏輯

①中繼器列名為:word,每一行寫一個(gè)字,像這樣→ 你 | 好 | , | 炫 | 技 | 開 | 始。

②新建全局變量 count,默認(rèn)值為 0。

③中繼器每項(xiàng)加載時(shí),用 [[Item.index]] <= count 控制逐字出現(xiàn)

第三步:實(shí)現(xiàn)動(dòng)態(tài)打字邏輯熱區(qū) Controller 顯示時(shí)

①等待 200ms,設(shè)置變量值 count 為[[count+1]]

②給中繼器 dzj 添加篩選,按照規(guī)則:[[Item.index<=count]],并移除其他篩選 (本質(zhì)上,每次篩選都是對(duì)定位結(jié)果進(jìn)行截取,只保留不超過 count 的部分)

③隱藏 Controller(實(shí)現(xiàn)循環(huán))

熱區(qū) Controller 隱藏時(shí)

①等待 200ms,顯示 Controller

第四步:控制打字是否開啟

①默認(rèn)設(shè)置 Controller 為隱藏狀態(tài)

②點(diǎn)擊【開始打字】按鈕時(shí),設(shè)置 Controller 為顯示狀態(tài)

第五步:預(yù)覽最終效果

總結(jié)收尾

本文從打字機(jī)效果的使用場景出發(fā),講了背后的實(shí)現(xiàn)邏輯,在Axure中的實(shí)現(xiàn)方式。

你會(huì)發(fā)現(xiàn),即使是一個(gè)小動(dòng)效,產(chǎn)品經(jīng)理也能用設(shè)計(jì)思維和實(shí)現(xiàn)能力去拆解它。

下次再遇到酷炫交互,別急著交給設(shè)計(jì)或開發(fā),說不定你自己也能做出來。

本文由 @產(chǎn)品不爛派 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 本文為文字版整理,配套視頻教程已發(fā)布在抖音/b 站,搜索“產(chǎn)品不爛派”可查看

    來自河南 回復(fù)