【干貨】Twitter視頻功能設計流程全程剖析

3 評論 15689 瀏覽 29 收藏 43 分鐘

譯者總結:

在這7000字文章中,Twitter設計師展示了嚴謹的設計流程 以及 設計開發協作心得。

Twitter設計流程值得學習的幾點:

1.原型設計驅動設計方向,可交互、便于測試、確定開發可行性。

2.注重設計與開發的溝通,將很多設計師來做更好的開發工作轉移給設計師,項目跟進扎實,與其在AE中死摳“設計”細節,不如簡單制作大致原型,盡早協助開發調節效果,制作“產品”

3.精雕細琢,750+靜態設計變種,54份原型可見細心程度。

4.問題匯總,bug發現,用戶測試并非與設計師無關。

5.任何棘手的實現問題,多揪著開發問,很多小發現影響卻很大。

————————————————————————————————————————————————————

在2011中期,Twitter率先推出原生功能——發布照片。2013年,Twitter為用戶帶來了隨時間推送媒體信息的功能——時間軸信息流(Timeline)。2014年,Twitter開始支持發布多張照片和GIF動圖。最近,我們發布了Twitter 30s段視頻功能——Twitter Video?,通過這一功能,可以幫助用戶使用iOS和Android上的Twitter應用,捕捉生活生活瞬間。

作為這一功能設計的參與者之一,我非常有幸的見到了Twitter視頻功能的發布。這得益于設計師、產品人員、工程師的精益協作,當然還包括一些分散在其他辦公場所的貢獻者(主要來自我們的西雅圖分部——our Seattle office)。我要向我的產品和工程師,也就是?Joy Ding?和?Jeff Currier致敬。

看看連線雜志是怎么評論Twitter視頻功能的——?what WIRED said about Twitter Video.

我的Nexus 6 和?M2 stand支架,上面運行著Twitter的視頻功能,后面擺著一堆測設備

“唯一能確定的是:向整個團隊展示真實、可交互的原型,便是最佳的溝通手段?!?/p>

在這篇文章中,我將帶領各位管中窺豹,了解Twitter視頻功能設計所經歷的流程。這篇文章主要講述的不是枯燥的草圖和模型迭代。這篇文章重點講的是原型設計。

我之前曾經寫了一篇文章——Provide meaning with motion(賦予動效含義),在那篇文章中我舉例說明了為什么設計師需要通透考慮動效和原型。大約也是在寫那篇文章之時,我開始喜歡上了Framer.js和Framer Studio?,便利之處便在于移動端可交互原型。這段機遇讓我受益匪淺。那時我還不知道這款工具會在日后我的設計流程中起到關鍵作用。

但是我們的原型設計并不僅僅局限于Javscript原型制作,除了FramerJS所實現的原型外,下面我會提供更多細節以及一些動圖,這些動圖是我們iOS原型設計團隊在探索概念、嘗試設計的過程中使用原生iOS代碼所實現的效果。

PS.如果視覺設計、動效設計、原型設計是你的興趣所在,那么歡迎應聘Twitter——Twitter is hiring.

什么是Twitter視頻功能?

在Twitter,我屬于相片和視頻團隊,我們與Expression團隊(@TeamExpression)、私信團隊和開發團隊一道,努力構建優異的用戶,為用戶提供表達、展示的工具。

Twitter平臺極具公眾性,信息量大且實時發布,受眾極廣。我們需要設計原生的視頻功能,讓用戶能夠捕捉生活的美好瞬間,然后向世界分享。

這便是我們對于視頻功能的看法。

我們開始設計30秒視頻功能——30秒能夠承載很多信息,同時又足夠短,讓其他用戶可以快速預覽。在設計時,我們需要審慎考慮這一體驗的權重,向用戶提供這一較為高級的功能。盡管我們能夠支持更長的視頻,但是我們希望用戶所拍攝的視頻質量小而精,而不是一種應付了事的拍攝體驗。因此,我們設計出簡約的界面,幫助用戶記錄生活中的片段,同時盡量減少拍攝時進度條充滿所帶來的壓力感。

仔細品味這一產品設計,它對溝通所起到的作用令人印象深刻,僅有一個界面。更令人印象深刻的地方在于,錄制和發送設計的十分簡潔,可以快速的滿足視頻分享需求。

連線雜志

Twitter for iOS,視頻功能在iOS設備上的錄制體驗,設備為我的iPhone 6+

我們首先需要在iOS和安卓應用中構建普通的攝像機功能。調用的原生相機功能也就那樣。現在我們面臨著兩個挑戰——我們需要設計出能夠吸引人的拍攝模式。同事Wayne Fan?主要設計拍照,而我主要設計錄制。

迭代流程

——原型設計帶來深刻影響

750+?Sketch 靜態設計原型

54份?Framer 可交互原型

在這次設計過程中,產生了大量的手繪草圖,進行了多次視覺設計和原型設計改動。但是本文將主要展示影響設計方向的幾次迭代。在理解了問題所在和需求,思考出了具備可能性德解決方案后,我開始大量繪制不同方向的設計草圖,然后選出最佳方案,制作原型來進行測試。Google Ventures的設計團隊形容這種設計流程為“理解,發散,決策,制作原型,驗證”

每次迭代過程都是在Sketch中繪制完靜態后,便立即在Framer Studio中設計可交互原型,然后開始仔細考慮交互細節和動效。這種方式能夠迅速發現設計問題。之前的大多數迭代版本在經過Framer Studio 交互測試后,都發現了不少問題,然后便迅速摒棄,更換設計方向,重新開始在Sketch中進行靜態設計。

在Framer Studio中所構建的最新版本。抱歉我的代碼不夠簡潔。

我所制作的原型是完全可交互的,支持手勢、滾動,能夠記錄狀態。然而,卻沒有簡單辦法能夠調用電腦和手機的攝像頭(盡管可以通過導入JS庫,來實現在Chrome中打開攝像頭,但是效果不佳),不管怎么說這種原型中所使用的圖像和視頻都是假的。

盡管我特別喜歡原型設計,認為原型設計優點良多,但我也清醒的認識到,原型就是原型,而不是最終產品,如果再繼續鉆壓下去,毫無益處且浪費時間。原型設計往往是艱巨而又瑣碎的,通常會花費大量的時間,很多時候需要設計師去自主思考、解決一些技術問題,例如儲存狀態和數組處理。因此,我必須有所取舍,我只需要在一些“我需要知道點擊此處的交互體驗”的地方和我比較拿不準的地方進行原型制作即可;正如我的一個同事說的那樣,我應該靈敏式的進行原型設計,主要是為了實現目標,而不是花好幾天實現去制作一個處處都有細節、包含全部功能的原型。

所設計出來的原型給誰用??原型的作用在于體驗感受,驗證交互設計和概念。我通常會把一些早期原型給我的經理Brendan Donohoe?看,也會給一些同事看,進而聽取他們的批評和意見。

一份可以交互的原型勝過上千場毫無價值、扯皮的會議。

為何采用Framer作為動效工具:因為我有前端開發背景,因此我能夠熟練使用Javascript。我不想因為不夠熟練而被限制住,因此我沒有使用其他工具;使用CSS/HTML/JS,你可以構建一切。

迭代版本一

這個迭代版本主要進行一些嘗試。主要考慮的幾點是:導航,錄制進度提示,拍照和拍攝模式之前的切換,思考長短視頻的功能,思考編輯功能。

我們首先發現的一點是,觀看豎屏體驗其實不好,對于timeline來說豎屏視頻太高了,而且用戶需要開啟全屏才能較好的欣賞視頻,而如果我們縮小視頻尺寸,添加黑邊,效果更不好。我們不鼓勵在Twitter中拍攝豎屏視頻。因此錄制出來的視頻是正方形的,但是用戶依然可以導入Camera Roll中已經有的、高寬比不一的視頻。

我的第一版設計只有兩個頁面切換:錄制視頻,然后返回,在第二頁中重播、重排列、刪除視頻片段。似乎看上去邏輯很合理。錄制模式有著簡單的藍色進度條,機理是按壓錄制。編輯頁中的體驗略像幻燈片,每5秒一環。這種設計的好處是,哪個視頻長,哪個視頻短,一眼即知。

Framer Studio原型:

在初版原型中,我嘗試使用了快速取消功能,以及按壓回倒和刪除。

這里我隨便找了一些圖標替代,盡管我們一流的圖標設計師Jeremy Reiss已經制作出一些很不錯的Icon。

問題聚焦

設計完成后,我需要給周圍的人用一用,聽取了他們的一些建議:第一個便是在視頻片段區域,刪除的“X”圖標觸控區域有點小了,感覺可能會不好點。而且就邏輯上來說,既然能夠輕松的刪除一個視頻片段,那么撤銷似乎有點沒必要。

另外一個建議是,視頻片段之間需要加點間隔,否則無法有效區分,而且看上去有點像幻燈片。

我和PM, EM一起研究了下“錄制完成后重新播放所錄制內容”這一功能點,感覺這個做的有點過了,一般人的需求是快速錄制,簡單發送。

什么是設計評審?

設計評審對于我們來說比較非正式、比較常規,在設計評審中,我們會聚到一塊展示當前的設計內容,任何階段任何設計都可以拋出來聽取大家的意見。對于大型團隊,我們需要將團隊分成相關的小團隊,各自評審相關的設計問題,獲取反饋。

不需要正式的展示,也不是為了獲得一種設計“批準”。比較正常的設計評審應該是放松、讓人充滿創新性的環境,你可以從你的同事的知識和專長中了解到很多你不知道的事情。

修正

我的下一版原型修正了這個問題,采用了拖拽刪除,而不是點擊X刪除。除此之外,我添加了一頁,用來預覽所拍攝的內容,在預覽頁和拍攝頁都可以進行編輯,我的設計讓整體的錄制體驗偏重于快速錄制,而不是復雜的編輯功能。

Framer Studio

我注意到錄制模式和編輯模式之間的切換不是那么明顯。僅僅是一些新的元素入場,界面的變化不大。

我將會進行一些設計調整,向用戶講述一些故事,如何拍攝視頻片段,如何快速切換進入編輯模式,如何刪除片段,然后繼續拍攝下一段。

問題聚焦

修正了上述問題后,感覺還不錯。我便展開了下一場設計評審會,我想聽挺其他人對于所拍攝視頻刪除功能的想法。我覺得不能在視頻片段的小方塊上做文章了,因為它們已經可以被拖拽,而且會讓人分不清它們何時會被刪除,拖拽到何處會被刪除。而且需要考慮拖拽刪除手勢是否具備可發現性。

問題修正

我探索出了一種刪除設計方向,當你拖拽視頻片段到屏幕指定的刪除區域時。會出現視覺提示,垃圾桶蓋子會打開,錄制區域會覆蓋上紅色。我同樣加入了文字提示,告訴用戶拖拽可以移動,也可以刪除。這次直接使用了iOS原型。

Framer Studio

大概也就算是在這時,Framer開始支持在原型中添加視頻,所以我添加了一些日本旅行期間的視頻作為原型中得視頻。

在早期原型中,很多東西設計的比較夸張。

迭代版本二

在進行第二版迭代時,我已經升級上了之前的設計版本,讓團隊成員試用,收集反饋。同時加強了與開發者的溝通,以便了解一些效果技術實現的可能性。例如,在我的原型設計中,無需切換模式,視頻片段便可以懸浮于界面上,很多工程師一打眼就感覺實現難度很大。

在與工程師協同工作一段時間后,我們構建出簡陋但是具備功能性的一版,具備錄制和編輯功能。

第一版iOS Build版本

Twitter 視頻功能早期Build版

原型設計終于變為真實上機的產品。這也是JavaScript所能達到的極限。

問題聚焦

現在產品設計已經上機,我們開始使用它。我們把成功向CEO,Dick Costolo呈遞。

在使用過程中,交互反饋的感覺不是很好。罪魁禍首就是錄制進度條,因為有30秒的限制,進度條會緩慢填充。進度條實質上并不能有效提示用戶正在錄制。而且還會給用戶一種焦慮感,或是感覺時間不夠,或是感覺必須要填滿30秒,會導致視頻內容質量的下降。

進度條另外的一個問題是技術問題:在安卓中,需要等一會,攝像頭才準備好錄制,但是進度條已經開始填充了。這種不合拍會造成不佳的卡頓體驗。

還有一點不理想的是,在按錄制按鈕的時候,圓圈會縮小。后來為了提高可見性,變成了擴大。

問題修正

我花了不少時間尋找進度條的替代品。大概產生了40多種迭代版本,從賦予圖形動態的方式到計時器的視覺改良。在探索期間,依然不斷向團隊展示靜態設計和原型視頻。我的工程經理Jeff會把這些演示傳給我們西雅圖分部的同事,然后獲取反饋。

其中一個版本中,在照相機準備錄制時,采用了較為豐富的圖形動畫來掩蓋延遲,準備完成后,計時器示數增加,紅點緩緩浮動。在30秒的最后5秒,會有一條跨越屏幕的紅線逐漸充滿,來提示用戶,時間快到了。

當超出時間限制,視頻錄制完成后的動效,后來我摒棄了這一版,因為不應該鼓勵用戶錄制視頻超出時間限制。

在我們設計和開發功能的同事,我們依然沒有忘記最開始的目標:幫助用戶捕捉瞬間。我們討論的其中一個問題是“如果用戶想要的‘瞬間’超過30秒怎么辦”。我們討論了很久,甚至想設計超出30秒的視頻錄制功能。我們可以讓用戶無限錄制,然后再裁剪,最后輸出的視頻長度依然為30秒。

最后我們覺得這種方式太復雜了,30秒按常人標準來說已經夠長,要保持簡約。

Framer Studio

這個原型版本依然需要在兩個界面之間轉場(錄像,預覽/編輯),刪除了進度條后,操作響應度感覺有所提升,但是依然不是特別理想。

問題聚焦

去除進度條設計,結局了我們之前所面臨的一些問題,但是在完成了原型改善和iOS實機Build后,我們又遇到了新的問題。在錄制完幾個視頻片段后,用戶沒有獲得一種完成感,僅僅是數字有所增加。我們需要更強烈的視覺反饋,目前的計時器無法逾越用戶。

什么是操作的愉悅性?這個版本的問題是,你錄制完了之后,直接進入了預覽/編輯模式,給人一種還在進行錄制的錯覺。我們重新思考了之前簡化界面的設計思想。我們覺得現在的設計有必要朝簡約的方向走。如果你還記得迭代版本一,在一中,錄制完視頻就能在同一頁加載錄制視頻,當用戶點擊編輯按鈕的時候沒有特別明顯的模態界面轉場。

而且這一版本還有個問題,儲存的縮略圖會讓整個底部預覽部分看起來太雜亂,也會讓用戶分心。用戶可能會花更多的時間在回放視頻,編輯視頻,而無法有效轉發為推送視頻。

在設計評審會上,我們討論了是否提供在同一個視圖內回放視頻和錄制視頻的開關功能。我個人認為專門另做一頁來預覽視頻有點多余。因為在用戶心理上認為,底部既然是剛才錄制的視頻片段,那么應該點擊就能播放,因此沒必要有專門的預覽頁。.

在這個階段就開始開發挺危險的,因為產品設計未經驗證。直接開發成本太高。這時候需要進行原型設計來減小設計成本。

問題修正

在這個階段,我和Twitter iOS原型團隊的Avi Cieplinski?David Hart緊密協作。 這兩位同事功不可沒,他們大大加速了我們的設計探索,迭代以及問題處理。他們不但是工程師,而且還具備設計思想,我認為他們也有資格做設計師。他們不但對曲線動畫、彈性、手勢交互、計算機視覺了解頗深,而且也能夠獨立撰寫動畫框架代碼。

在他們的幫助下,我們提出的任何設計假設,只要有價值,都能迅速轉換成iOS原生原型。當我遇到交互問題,我會向他們講述我的一些設計上的觀點,他們立即就能找到方式去構建。

Avi和我討論了最后一個迭代版本,視圖找出將多個視頻片段融入單個界面的辦法。最終我們想出了一個辦法,每份視頻片段只顯示第一幀,按壓后,錄制區域會播放所選片段,并且顯示錄制狀態。

在討論的第二天,我去找Avi,我發現他走的更遠:除了我們討論的那些,他還實現了自動播放,單個視頻片段循環功能。

iOS原型

這個視頻里面有點bug(請忽略覆蓋的藍色進度層),但是已經能夠驗證我的概念了。

從原型到原生實現

在這次設計流程中,很快我就我發現Framer Studio無法和工程開發緊密銜接,無法獲取和原型中一樣的效果。Framer有著自己的一套動畫和彈性框架,但是并不兼容iOS和Android。因此,我在Framer中調試出不同的彈性拉力、速率、摩擦力并不能直接調用。我需要將效果等量轉化為iOS和安卓效果

幸運的是,iOS方面,Avi和Dave非常給力,他們對曲線、運動參數了然于心,他們能夠定制出效果出眾的動畫框架。更多細節見下面

Android是另外的挑戰,我開始閱讀安卓動畫插值器相關內容,以便對安卓動畫有更深入的了解。

迭代版本三

看到了Avi更進一步的原型,我陷入了沉思。我意識到自動播放,視頻片段循環是是一種功能延伸。(極具表現力!但我懷疑這個效果/功能能否在所有設備上運行,安卓肯定不行)但是當我拍攝完立即獲取反饋的效果很棒。

Avi將這個原型Build到了我的手機上,我給其他人使用來獲取反饋。在開始下一階段的設計前,我需要和工程團隊一起確定是否還有遺留問題,全盤思考用戶體驗問題。

Jeff Currier同樣很喜歡這版原型。一看見它,他就認為這是一種更好的解決方案。我決定開始下一步行動,開始思考用戶體驗方面的事宜:

1.尋找計時器更好的解決方案,因為我們當時要用iPhone 4

2.思考為什么回放很有效果,以及相關邏輯

3.想出安卓的解決方案,想出一種能夠展示錄制進度的辦法,在我們無法快速從新視頻片段中獲取幀的情況下,如何維持Android具有同樣效果。

Framer Studio

在這個原型中,我提出了占位符式設計思路,當開始錄制時默認出現在屏幕上。這樣,即便無法立即展示第一幀,也能用占位符先占據位置,提示用戶這里有東西,同時占位符也能告知用戶錄制狀態。

占位符中間有紅點忽明忽暗,讓你知道正在錄制中。紅點結合計時器,提示效果就比較明顯了。

調研和可用性測試

現在我們想要看看真實用戶在使用我們的視頻功能拍攝視頻時所遇到的挑戰和使用體驗。我們可愛的調研團隊同事Dave Dearman在Twitter辦公室召集來了一些用戶,向他們展示了Twitter視頻拍攝功能原型,觀察用戶如何使用,并記錄問題。

在任何可用性測試開始之前,我們都需要提出一些問題。一般來說,用戶需要填表回答問題,同時用App錄制用戶操作過程。Joy、Dave和我進行了頭腦風暴,寫出了一些需要用戶回答的問題。主要了解用戶體驗&反饋,了解用戶遇到了哪些問題。

唯一的問題?我們還沒有構建出真實的視頻界面。

我又去了iOS原型團隊。Avi和David構建出了一個“假”APP。當然,用戶是不會知道的。其他屏界面我都用真實的靜態素材進行了替換,我告訴Dave如何引導用戶進入視頻功能界面。

Dave Dearman 開始詢問每個調研參與者個人信息和興趣所在,以及他們是如何在其他服務中分享視頻的。從而了解Twitter應該如何調整視頻分享流程,以便了解何時用戶需要使用Twitter視頻分享功能。他擅長讓用戶暢所欲言,從而獲取真實的反饋。他會跟用戶說“這是內部Build版本,還沒上線,你可以隨便批評?!?/p>

原型里面的有些地方還沒加上功能,Dave會問用戶諸如“如果你想刪除視頻片段,你希望采用什么樣的操作來刪除?怎樣讓你覺得用起來更舒服?”

現場觀摩可用性測試令人大開眼界,當你設計時,你會抱著主觀的心態,當你的設計到了用戶的手上,一切都變得客觀。我在我們西雅圖分部實時觀看Dave可用性測試(他在舊金山)的流媒體視頻,同時根據用戶反饋記錄了一些有價值的點。

經驗教訓

1.當用戶看到多個視頻片段,并被問之“你覺得如果你點擊它們,會發生什么?”的問題,有些用戶會認為只會向最終視頻中添加所點擊選中的效果。實際設計是,每個視頻片段都是最終視頻的一部分。

2.當展示迷你幻燈片——也就是視頻片段長度看起來比較長的那個版本,用戶感到非常的困惑,它們認為他們可以任意裁剪視頻。但實際不能,用戶感到非常沮喪。Dick在之前的會議中也指出了這個問題。

3.每個人都知道怎么打開攝像機,切換視頻模式,熟悉按壓錄制的設計模式(當你按壓的時間不夠長的時候,提示條會出現),當提示條變紅的時候,會提示用戶30秒時間快用完了。

4.當用戶被問之“你認為視頻限制時間是多少”,很多用戶沒有使用過,但是就已經猜到了是30秒。

5.原型不帶有錄制和刪除視頻片段功能。當詢問用戶他們所預期的刪除效果時,很多人希望能夠有拖動刪除效果,當拖拽出視頻片段區域時,便可以刪除。還有一個家伙畫出了一個向上的直線,意思是可以類似iOS的任務切換,上滑刪除。

問題修正

我們需要讓每個視頻片段看上去得感覺是整體的一部分。為了讓整體感更強,我為每個視頻片段都加入了藍色覆蓋層。因為如果自動播放一個接一個的播放,藍色進度覆蓋層如果僅僅展現在單個視頻片段上,會讓人感覺這不是一個整體,感覺選中的那個片段會被發送出去。

我添加了全局的回放進度條,展示整體視頻的播放進度。如果你有4個視頻片段,長度均等,當你點擊第二個片段的時候,進度條會從25%開始,讀取到50%。Avi和Dave關于給予了一點建議,他們建議同時在進度線上加入一些標示來讓用戶知道所處的片段。

Twitter for iOS

這是我們構建的回放體驗。隱藏的高級功能提示:你可以在視頻區域左右滑動來控制全局回放的位置。

為了體現整體感,削弱獨立感,我們將視頻片段的距離減小,在開始和結束的片段上進行形狀處理——加入圓角,而中間段沒有。David Hart做了一個很好的原型(最后演變為最終實際代碼的一部分),當你移動視頻片段或拖起的時候,圓角會產生動畫。拖起的時候,所選片段四角都會帶上圓角。

調整&完工

“細節不僅僅是細節,細節成就設計”——Charles Eames

可用性測試的結果證明設計方向無誤,也沒有什么大的可用性問題,我很高興。

目前為止,新的設計完全就是個原型。而目前Build到的地方是老版,舊版Twitter設計加上計時器,以及第二頁預覽/編輯頁??捎眯詼y試環節驗證了我們的設計概念無誤,而且解決了我們設計中的一些小問題。

Jeff, Joy和我與團隊中的其他同事進行了開發預估——大致預覽一下將設計中的細節實現大概要花多久——然后向Dick和執行委員會匯報了研發排期,順便了解一下他們的喜愛那個發。他們很喜歡這版設計,我們便朝這個方向開始推進。

通過前面的原型驅動設計迭代的設計流程,我們一步一步改良設計,達成了第一版視頻設計。如有必要,我們依然會修改設計,而不會為了趕期而犧牲設計質量。

Dave, Avi 和我們的設計VPMike Davidson正在談論手勢的物理問題。后面正在進行設計評審會。

當我們開始Build這版單頁UI的時候,我們針對不同設備進行了測試。這時,我迅速我發現我們不能采用單一的視頻縮略圖尺寸。雖然目前的尺寸能夠適配iPhone 4,但是在iPhone 6+上效果很差。我根據不同設備的表現,挑選并標注了三種尺寸,以便適應不同種設備(50p,70p,90p)

協助工程師開發

我個人很煩有些設計師“進行設計標注,然后交給工程師”的現象?!霸O計標注”本身就暗示著設計師和開發者缺少溝通。盡管我有技術背景,但我的水平和Twitter的開發者差遠了,不過也好,我利用這個機會和開發學了不少關于iOS和Android代碼的知識,了解了應用是怎么Build的,了解什么是可行的。

目前我只會問一些特別簡單的問題“你是怎么做緩入和換出動畫的,能否調節緩動運動的參數,改成二次方緩動?”我發現這些小問題我自己做更簡單,畢竟是我自己設計的,調節幾個數值,然后觀測效果是否優良,然后交給工程師。這比讓工程師自己調節快多了,也減輕了他們的負擔。要是交給他們做,他們需要build好多次,測試很多次數值,尤其我們的工程師分散在辦公區各個位置,跑來跑去很不方便。

當面臨一些較大的改動,我會試著讓整個團隊參與到設計中。這對于設計師來說有點難,因為很多設計師作品沒做完是不太想公之于眾的。然而,這么干也有風險,最后即便你的設計稿超牛逼,震撼了整個團隊,但是開發者一句“這個效果不能實現”就能否了你。

在進行項目跟進、研磨動畫時,我盡可能揪住開發者不放,問個明白,然后在JIRA中仔細標明。例如,在開發的早期我便拋出了一個問題——我們能否在安卓中打造微妙的彈性效果。我了解到我們的安卓開發還沒有像iOS那樣,擁有一個定制的動畫框架,但是Gordon Luk向我展示了一些基本的安卓差值器,比如Overshoot運動趨勢差值器(譯者注,Overshoot通俗的講就是運動的超出效果,往往應用于彈性動畫中。),有了這個發現,開發就邁進了一小步。

同時我也能夠在iOS中調節參數,一點一點的調整,讓動畫飽滿起來,再次感謝Avi和Dave的動畫框架。例如在iOS中按快門的彈性效果開發中,Dave就向Gary Morrison展示了如何使用動畫庫實現效果,然后用他自己定制的參數庫來修改效果。

利用他的一些代碼,我調節了諸如放大Magnification,頻率NaturalFrequency,阻尼DampingRatio的一些參數。在找到了合適的效果后,我自己上傳了repository。

我自己也在安卓和iOS代碼中找到了一些設計相關的問題,并且進行了修正。接下來我找到了APP中任何瞬切合線性運動的地方。我在UIViewanimateWithDuration包裝透明度變化效果,我也曾花了一個晚上協助Yoshi開發來調節緩動曲線,并重構了一些代碼,以便iOS根據設備來改變尺寸

我為啥這么喜歡我們公司的設計師@Stammy(本文作者):他能將bug分類,并且他能自學安卓開發,修正這些bug。

— joy to the world ?? (@yjoyding) 一月 16, 2015

我的Todo List上寫了一堆標簽,以便驗證。

等到我們產品發布的時候,我貢獻了10 commit。因為對開發的貢獻,我得到了開發者的贊許,我與開發者一道經歷Code Review和每個版本的編譯。

到了這個環節,我不再重度使用SketchFramer Studio,而是每天測試新版本,提供細節反饋,發現問題和bug。

每個Build版本都會與不同的開發者打交道,從Chris完成的放大動畫效果,到Pablo實現的視頻片段標記。

狗糧測試

終于,我們到達了一個里程碑,給所有Twitter員工使用視頻功能——內部大范圍試用稱為狗糧測試。當上千個人使用你的產品時,你會發現很多bug…包括一些很荒謬的bug。例如“點擊模式切換大概20次,屏幕會變黑”,“當我用一根手指按壓錄制,另一根手指拖拽之前拍攝的視頻片段時,應用會崩潰”

這一階段,我、Joy,、Jeff會每天例會,進行任務、bug、優先級的分類。

我們養成了每天早上核實JIRA上問題的習慣,解決后問題不會關閉,直到等到下一個build版本。因此經常會用拍照會拍視頻來記錄問題(我個人喜歡拍視頻)。我們還和QA質檢緊密協作,以便找出多設備適配存在的一些問題。

與工程師緊密協作非常非常關鍵,測試,問題追蹤要嚴密關注,這和你的設計能否100%實現很有關系。

結語

Twitter視頻功能的設計和研發成功,很大程度上得益于設計流程中的原型設計。同樣離不開才華橫溢的開發團隊。當你看到周圍的人都在使用你打造的產品時,感覺棒極了。這就是我喜歡在Twitter工作的原因。

Twitter視頻,我勒個擦,我喜歡它!

— Adam Shapiro (@adamshapiro) 一月 30, 2015

盡管我的個人博客只討論整體設計問題和Twitter視頻拍攝的迭代心得,但其實也和媒體上傳用戶體驗團隊的設計師Jon Bell一起工作,負責iOS和安卓上的視頻呢導入裁剪頁和工具提示條。

iOS導入視頻的裁剪 –?Framer Studio

即便是簡單的視頻裁剪,也需要很多設計考量。例如我們支持30秒視頻,但是導入視頻的裁剪預設的時間是20秒,以便鼓勵用戶縮短視頻。而開始的位置不是視頻開始,而是稍稍延后,因為很多人拍東西開始的幾秒都是準備,精彩的東西都在后頭。

當到達了30秒的限制,藍色框會暫停一小會,然后整個選區會隨之移動。我們之前考慮當超出限制后會挪不動,但沒有用這個方案。而且視頻片段的效果也需要考慮。

Twitter正在招聘

這就是我在Twitter的工作。設計團隊面臨著很多挑戰。如果你對設計設計,原型設計,與工程師協作感性卻,那么請看我們的職位招聘列表。

 

來源:UI中國

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. thanks

    來自本機地址 回復
  2. 謝謝分享 贊 贊

    來自北京 回復