譯者總結(jié)：

在這7000字文章中，Twitter設(shè)計師展示了嚴(yán)謹(jǐn)?shù)脑O(shè)計流程 以及 設(shè)計開發(fā)協(xié)作心得。

Twitter設(shè)計流程值得學(xué)習(xí)的幾點：

1.原型設(shè)計驅(qū)動設(shè)計方向，可交互、便于測試、確定開發(fā)可行性。

2.注重設(shè)計與開發(fā)的溝通，將很多設(shè)計師來做更好的開發(fā)工作轉(zhuǎn)移給設(shè)計師，項目跟進(jìn)扎實，與其在AE中死摳“設(shè)計”細(xì)節(jié)，不如簡單制作大致原型，盡早協(xié)助開發(fā)調(diào)節(jié)效果，制作“產(chǎn)品”

3.精雕細(xì)琢，750+靜態(tài)設(shè)計變種，54份原型可見細(xì)心程度。

4.問題匯總，bug發(fā)現(xiàn)，用戶測試并非與設(shè)計師無關(guān)。

5.任何棘手的實現(xiàn)問題，多揪著開發(fā)問，很多小發(fā)現(xiàn)影響卻很大。

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

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

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

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

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

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

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

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

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

PS.如果視覺設(shè)計、動效設(shè)計、原型設(shè)計是你的興趣所在，那么歡迎應(yīng)聘Twitter——Twitter is hiring.

什么是Twitter視頻功能？

在Twitter，我屬于相片和視頻團隊，我們與Expression團隊（@TeamExpression）、私信團隊和開發(fā)團隊一道，努力構(gòu)建優(yōu)異的用戶，為用戶提供表達(dá)、展示的工具。

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

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

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

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

連線雜志

Twitter for iOS，視頻功能在iOS設(shè)備上的錄制體驗，設(shè)備為我的iPhone 6+

我們首先需要在iOS和安卓應(yīng)用中構(gòu)建普通的攝像機功能。調(diào)用的原生相機功能也就那樣。現(xiàn)在我們面臨著兩個挑戰(zhàn)——我們需要設(shè)計出能夠吸引人的拍攝模式。同事Wayne Fan?主要設(shè)計拍照，而我主要設(shè)計錄制。

迭代流程

——原型設(shè)計帶來深刻影響

750+?Sketch 靜態(tài)設(shè)計原型

54份?Framer 可交互原型

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

每次迭代過程都是在Sketch中繪制完靜態(tài)后，便立即在Framer Studio中設(shè)計可交互原型，然后開始仔細(xì)考慮交互細(xì)節(jié)和動效。這種方式能夠迅速發(fā)現(xiàn)設(shè)計問題。之前的大多數(shù)迭代版本在經(jīng)過Framer Studio 交互測試后，都發(fā)現(xiàn)了不少問題，然后便迅速摒棄，更換設(shè)計方向，重新開始在Sketch中進(jìn)行靜態(tài)設(shè)計。

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

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

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

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

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

為何采用Framer作為動效工具：因為我有前端開發(fā)背景，因此我能夠熟練使用Javascript。我不想因為不夠熟練而被限制住，因此我沒有使用其他工具；使用CSS/HTML/JS，你可以構(gòu)建一切。

迭代版本一

這個迭代版本主要進(jìn)行一些嘗試。主要考慮的幾點是：導(dǎo)航，錄制進(jìn)度提示，拍照和拍攝模式之前的切換，思考長短視頻的功能，思考編輯功能。

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

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

Framer Studio原型：

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

這里我隨便找了一些圖標(biāo)替代，盡管我們一流的圖標(biāo)設(shè)計師Jeremy Reiss已經(jīng)制作出一些很不錯的Icon。

問題聚焦

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

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

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

什么是設(shè)計評審？

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

不需要正式的展示，也不是為了獲得一種設(shè)計“批準(zhǔn)”。比較正常的設(shè)計評審應(yīng)該是放松、讓人充滿創(chuàng)新性的環(huán)境，你可以從你的同事的知識和專長中了解到很多你不知道的事情。

修正

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

Framer Studio

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

我將會進(jìn)行一些設(shè)計調(diào)整，向用戶講述一些故事，如何拍攝視頻片段，如何快速切換進(jìn)入編輯模式，如何刪除片段，然后繼續(xù)拍攝下一段。

問題聚焦

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

問題修正

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

Framer Studio

大概也就算是在這時，F(xiàn)ramer開始支持在原型中添加視頻，所以我添加了一些日本旅行期間的視頻作為原型中得視頻。

在早期原型中，很多東西設(shè)計的比較夸張。

迭代版本二

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

在與工程師協(xié)同工作一段時間后，我們構(gòu)建出簡陋但是具備功能性的一版，具備錄制和編輯功能。

第一版iOS Build版本

Twitter 視頻功能早期Build版

原型設(shè)計終于變?yōu)檎鎸嵣蠙C的產(chǎn)品。這也是JavaScript所能達(dá)到的極限。

問題聚焦

現(xiàn)在產(chǎn)品設(shè)計已經(jīng)上機，我們開始使用它。我們把成功向CEO，Dick Costolo呈遞。

在使用過程中，交互反饋的感覺不是很好。罪魁禍?zhǔn)拙褪卿浿七M(jìn)度條，因為有30秒的限制，進(jìn)度條會緩慢填充。進(jìn)度條實質(zhì)上并不能有效提示用戶正在錄制。而且還會給用戶一種焦慮感，或是感覺時間不夠，或是感覺必須要填滿30秒，會導(dǎo)致視頻內(nèi)容質(zhì)量的下降。

進(jìn)度條另外的一個問題是技術(shù)問題：在安卓中，需要等一會，攝像頭才準(zhǔn)備好錄制，但是進(jìn)度條已經(jīng)開始填充了。這種不合拍會造成不佳的卡頓體驗。

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

問題修正

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

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

當(dāng)超出時間限制，視頻錄制完成后的動效，后來我摒棄了這一版，因為不應(yīng)該鼓勵用戶錄制視頻超出時間限制。

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

最后我們覺得這種方式太復(fù)雜了，30秒按常人標(biāo)準(zhǔn)來說已經(jīng)夠長，要保持簡約。

Framer Studio

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

問題聚焦

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

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

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

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

在這個階段就開始開發(fā)挺危險的，因為產(chǎn)品設(shè)計未經(jīng)驗證。直接開發(fā)成本太高。這時候需要進(jìn)行原型設(shè)計來減小設(shè)計成本。

問題修正

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

在他們的幫助下，我們提出的任何設(shè)計假設(shè)，只要有價值，都能迅速轉(zhuǎn)換成iOS原生原型。當(dāng)我遇到交互問題，我會向他們講述我的一些設(shè)計上的觀點，他們立即就能找到方式去構(gòu)建。

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

在討論的第二天，我去找Avi，我發(fā)現(xiàn)他走的更遠(yuǎn)：除了我們討論的那些，他還實現(xiàn)了自動播放，單個視頻片段循環(huán)功能。

iOS原型

這個視頻里面有點bug（請忽略覆蓋的藍(lán)色進(jìn)度層），但是已經(jīng)能夠驗證我的概念了。

從原型到原生實現(xiàn)

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

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

Android是另外的挑戰(zhàn)，我開始閱讀安卓動畫插值器相關(guān)內(nèi)容，以便對安卓動畫有更深入的了解。

迭代版本三

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

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

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

1.尋找計時器更好的解決方案，因為我們當(dāng)時要用iPhone 4

2.思考為什么回放很有效果，以及相關(guān)邏輯

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

Framer Studio

在這個原型中，我提出了占位符式設(shè)計思路，當(dāng)開始錄制時默認(rèn)出現(xiàn)在屏幕上。這樣，即便無法立即展示第一幀，也能用占位符先占據(jù)位置，提示用戶這里有東西，同時占位符也能告知用戶錄制狀態(tài)。

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

調(diào)研和可用性測試

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

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

唯一的問題？我們還沒有構(gòu)建出真實的視頻界面。

我又去了iOS原型團隊。Avi和David構(gòu)建出了一個“假”APP。當(dāng)然，用戶是不會知道的。其他屏界面我都用真實的靜態(tài)素材進(jìn)行了替換，我告訴Dave如何引導(dǎo)用戶進(jìn)入視頻功能界面。

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

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

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

經(jīng)驗教訓(xùn)

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

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

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

4.當(dāng)用戶被問之“你認(rèn)為視頻限制時間是多少”，很多用戶沒有使用過，但是就已經(jīng)猜到了是30秒。

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

問題修正

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

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

Twitter for iOS

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

為了體現(xiàn)整體感，削弱獨立感，我們將視頻片段的距離減小，在開始和結(jié)束的片段上進(jìn)行形狀處理——加入圓角，而中間段沒有。David Hart做了一個很好的原型(最后演變?yōu)樽罱K實際代碼的一部分)，當(dāng)你移動視頻片段或拖起的時候，圓角會產(chǎn)生動畫。拖起的時候，所選片段四角都會帶上圓角。

調(diào)整&完工

“細(xì)節(jié)不僅僅是細(xì)節(jié)，細(xì)節(jié)成就設(shè)計”——Charles Eames

可用性測試的結(jié)果證明設(shè)計方向無誤，也沒有什么大的可用性問題，我很高興。

目前為止，新的設(shè)計完全就是個原型。而目前Build到的地方是老版，舊版Twitter設(shè)計加上計時器，以及第二頁預(yù)覽/編輯頁。可用性測試環(huán)節(jié)驗證了我們的設(shè)計概念無誤，而且解決了我們設(shè)計中的一些小問題。

Jeff, Joy和我與團隊中的其他同事進(jìn)行了開發(fā)預(yù)估——大致預(yù)覽一下將設(shè)計中的細(xì)節(jié)實現(xiàn)大概要花多久——然后向Dick和執(zhí)行委員會匯報了研發(fā)排期，順便了解一下他們的喜愛那個發(fā)。他們很喜歡這版設(shè)計，我們便朝這個方向開始推進(jìn)。

通過前面的原型驅(qū)動設(shè)計迭代的設(shè)計流程，我們一步一步改良設(shè)計，達(dá)成了第一版視頻設(shè)計。如有必要，我們依然會修改設(shè)計，而不會為了趕期而犧牲設(shè)計質(zhì)量。

Dave, Avi 和我們的設(shè)計VPMike Davidson正在談?wù)撌謩莸奈锢韱栴}。后面正在進(jìn)行設(shè)計評審會。

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

協(xié)助工程師開發(fā)

我個人很煩有些設(shè)計師“進(jìn)行設(shè)計標(biāo)注，然后交給工程師”的現(xiàn)象?！霸O(shè)計標(biāo)注”本身就暗示著設(shè)計師和開發(fā)者缺少溝通。盡管我有技術(shù)背景，但我的水平和Twitter的開發(fā)者差遠(yuǎn)了，不過也好，我利用這個機會和開發(fā)學(xué)了不少關(guān)于iOS和Android代碼的知識，了解了應(yīng)用是怎么Build的，了解什么是可行的。

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

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

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

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

利用他的一些代碼，我調(diào)節(jié)了諸如放大Magnification，頻率NaturalFrequency，阻尼DampingRatio的一些參數(shù)。在找到了合適的效果后，我自己上傳了repository。

我自己也在安卓和iOS代碼中找到了一些設(shè)計相關(guān)的問題，并且進(jìn)行了修正。接下來我找到了APP中任何瞬切合線性運動的地方。我在UIViewanimateWithDuration包裝透明度變化效果，我也曾花了一個晚上協(xié)助Yoshi開發(fā)來調(diào)節(jié)緩動曲線，并重構(gòu)了一些代碼，以便iOS根據(jù)設(shè)備來改變尺寸

我為啥這么喜歡我們公司的設(shè)計師@Stammy（本文作者）：他能將bug分類，并且他能自學(xué)安卓開發(fā)，修正這些bug。

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

我的Todo List上寫了一堆標(biāo)簽，以便驗證。

等到我們產(chǎn)品發(fā)布的時候，我貢獻(xiàn)了10 commit。因為對開發(fā)的貢獻(xiàn)，我得到了開發(fā)者的贊許，我與開發(fā)者一道經(jīng)歷Code Review和每個版本的編譯。

到了這個環(huán)節(jié)，我不再重度使用Sketch和Framer Studio，而是每天測試新版本，提供細(xì)節(jié)反饋，發(fā)現(xiàn)問題和bug。

每個Build版本都會與不同的開發(fā)者打交道，從Chris完成的放大動畫效果，到Pablo實現(xiàn)的視頻片段標(biāo)記。

狗糧測試

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

這一階段，我、Joy,、Jeff會每天例會，進(jìn)行任務(wù)、bug、優(yōu)先級的分類。

我們養(yǎng)成了每天早上核實JIRA上問題的習(xí)慣，解決后問題不會關(guān)閉，直到等到下一個build版本。因此經(jīng)常會用拍照會拍視頻來記錄問題（我個人喜歡拍視頻）。我們還和QA質(zhì)檢緊密協(xié)作，以便找出多設(shè)備適配存在的一些問題。

與工程師緊密協(xié)作非常非常關(guān)鍵，測試，問題追蹤要嚴(yán)密關(guān)注，這和你的設(shè)計能否100%實現(xiàn)很有關(guān)系。

結(jié)語

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

Twitter視頻，我勒個擦，我喜歡它！

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

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

iOS導(dǎo)入視頻的裁剪 –?Framer Studio

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

當(dāng)?shù)竭_(dá)了30秒的限制，藍(lán)色框會暫停一小會，然后整個選區(qū)會隨之移動。我們之前考慮當(dāng)超出限制后會挪不動，但沒有用這個方案。而且視頻片段的效果也需要考慮。

Twitter正在招聘

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

來源：UI中國