整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
輯導語：作為產(chǎn)品設(shè)計師，除了處理日常的設(shè)計業(yè)務(wù)外，和其他業(yè)務(wù)人員進行對接、共同推動產(chǎn)品項目落地，也是必須完成的事情至于。那么在產(chǎn)品設(shè)計過程中，設(shè)計師要如何避免和開發(fā)或者其他人員之間的沖突，以推動產(chǎn)品的快速落地？不如來看看作者的經(jīng)驗總結(jié)吧！
前段時間在進行面試的時候，問到很多候選人開發(fā)溝通上的問題上，大多人都回答的模糊不清，決定根據(jù)自己的過往經(jīng)驗講一下在工作如何溝通協(xié)調(diào)項目。
本文分別以對接前準備、對接中避免摩擦、對接后追蹤三個時間段講解流程中應(yīng)該注意什么。
作為產(chǎn)品設(shè)計師，無論在什么公司什么崗位，都免不了與研發(fā)團隊進行溝通，如果不進行溝通就無法交付我們的設(shè)計稿，即便很成熟的團隊也會出現(xiàn)在溝通上的問題，在產(chǎn)品研發(fā)的過程中溝通是必要的流程，為了創(chuàng)造一致的用戶體驗，設(shè)計師需要與開發(fā)人員在視覺上、交互上達到一致的想法。
但是講起來簡單，說起來難，在整個過程設(shè)計師和開發(fā)都是站在不同的角度去看待問題的，我們思考的如何達到美觀的界面、流暢的交互等問題，而開發(fā)關(guān)心的是做這件事我需要花費多長時間，實現(xiàn)難度如何等等。
首先目標就不在同一個維度，那么必然會造成我們在對接的時候出現(xiàn)掰扯的問題，最后耽誤的都是雙方的時間，更嚴重點頁面最后的體驗也沒有達到一致。
任何團隊都會出現(xiàn)設(shè)計師與開發(fā)脫節(jié)的問題很常見，遇見什么問題解決什么問題，畢竟人與人的性格、溝通方式等都是不同的。
我們只需要在不同的流程里去做不同的事情就可以避免這些問題了，對于任何設(shè)計師基本都會適用，往下看～
在接到一個需求的時候產(chǎn)品經(jīng)理會通知上下游進行需求的評審，這時候一般會是產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)三個組進行需求的評估，具體的需求評審在本章就不細講，我們此次主要講設(shè)計師與開發(fā)相關(guān)的信息同步。
在評審過程中產(chǎn)品經(jīng)理會把需求背景、需求目標等相關(guān)信息同步給相關(guān)的人員，作為設(shè)計師這時候就要關(guān)注需求目標，這個目標不僅是產(chǎn)品經(jīng)理的目標，也是整個項目的目標，所以與每個人都相關(guān)，需求目標清晰后期推動開發(fā)的時候才會有依據(jù)。
評審會議結(jié)束后，產(chǎn)品經(jīng)理會同步期望上線時間，如果是常規(guī)需求，會當時就評估出設(shè)計時間、開發(fā)時時間，我們設(shè)計師這時候就要關(guān)注這些時間，因為我們通過上線時間就可以估算開發(fā)節(jié)奏，給我們后期的修改以及臨時添加的一些動效制作時間會留出充裕的時間。
設(shè)計評審流程細節(jié)本章不進行細節(jié)講解，本章重點講與開發(fā)對接。
近期我在公司做了一個商業(yè)化的直播項目需求，由于產(chǎn)品方?jīng)]有過多的產(chǎn)研經(jīng)驗（后面才知道），在項目前期雖然進行了評審，但是評審的參與人員沒有拉上我，等到需求給到我的時候，我順便問了一下才知道已經(jīng)評審完了，這對于我來講是沒辦法進行設(shè)計輸出的。
第一我不知道評審過程中開發(fā)的排期時間，以及測試時間，如果研發(fā)開始開發(fā)的時間與設(shè)計稿交付時間有沖突那么就是影響上線節(jié)奏。
第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的，有沒有哪些地方需要加復雜的交互產(chǎn)品也是同樣不清楚，那么開發(fā)就會默認這是常規(guī)的交互，如果過程中添加那將會影響開發(fā)進度。
第三流程上不符合要求，期間如果有關(guān)鍵性信息沒有達到共識，那將會釀成很嚴重的后果。
面對這種已經(jīng)發(fā)生的事情，如果重新拉個會評審一次會耽誤大家的時間，很多人是不愿意的，但是呢我也不能單聽產(chǎn)品一方面的溝通，因為很多細節(jié)他是不清楚的（產(chǎn)品經(jīng)驗較少），所以當時我的處理方法呢是我先通過產(chǎn)品給出的上線時間，然后與前端同學單獨確認一下，這樣至少保證上線時間是同步的，至于其他的細節(jié)我當時是利用設(shè)計評審的方式同步給開發(fā)交互邏輯、動效方式等。
此次這個需求呢本身不大是在舊版的基礎(chǔ)上優(yōu)化功能，理論上不需要走設(shè)計評審流程，但是因為當時沒有通知參加評審導致很多信息不同步，而我需要傳達給開發(fā)的東西也不能在后期在告訴他們，所以我利用設(shè)計評審流程把一些交互信息同步給開發(fā)。
在設(shè)計稿完成后，如果是小需求一般是直接交付給研發(fā)，如果是大需求一般會進行設(shè)計評審，主要評審維度是設(shè)計稿是否與產(chǎn)品文檔同步，設(shè)計目標是否符合產(chǎn)品目標等等，其次如果有復雜交互效果、設(shè)計細節(jié)、組件復用情況也需要與研發(fā)對齊。
若是直接交付研發(fā)，我們需要提前把設(shè)計稿內(nèi)涉及的切圖、圖層間距、動效使用區(qū)域等關(guān)鍵信息提前準備好，避免在開發(fā)過程中臨時進行補充，影響開發(fā)節(jié)奏。
在設(shè)計稿內(nèi)的切圖，我們要提前與研發(fā)溝通，切圖的范圍和形式，最后把設(shè)計稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站，如藍湖、即時設(shè)計等平臺，大公司會有自己的協(xié)作平臺。
講個自己的踩坑案例，還是商業(yè)化的那個需求，由于為了商業(yè)化賦能，產(chǎn)品的需求文檔并沒有按照規(guī)范組件進行設(shè)計，但是由于產(chǎn)品文檔標注的不清楚，在設(shè)計過程中不斷與產(chǎn)品進行溝通，最后結(jié)果當然也是無法復用組件。
當時我就把組件規(guī)范修改了，重點是研發(fā)不知道，我當時想的是研發(fā)通過產(chǎn)品文檔應(yīng)該會了解到，事實確實我大意了，后面就導致組件方面我與研發(fā)進行了相愛相殺，通過自己的以身作則我勸大家不要忽略任何一個細節(jié)！
設(shè)計規(guī)范組件在設(shè)計前就需要進行確認，項目是否有存留的規(guī)范組件，如果有，需要在設(shè)計前以及設(shè)計中去確認哪些模塊是否可以調(diào)用，開發(fā)是否已經(jīng)將組件寫入代碼中，如果不了解這些情況貿(mào)然的設(shè)計，那在對接過程中會出現(xiàn)修改設(shè)計稿的風險。
如果是創(chuàng)新項目并且沒有相關(guān)的設(shè)計規(guī)范和組件，我們則需要在設(shè)計前就把規(guī)范組件的時間給算到需求內(nèi)，一個產(chǎn)品的規(guī)范組件，決定著后續(xù)產(chǎn)品是否嚴謹、項目研發(fā)效率等等，因為規(guī)范組件不止是設(shè)計師的事情，還是團隊研發(fā)比較關(guān)注的事情，研發(fā)們在代碼里同樣需要進行規(guī)范的組件復用。
當在做一些在舊版的產(chǎn)品頁面上優(yōu)化的需求時，還需要輸出對應(yīng)設(shè)計文檔，給前端和測試看，設(shè)計文檔需要寫清楚設(shè)計稿優(yōu)化的點，例如圖標的細節(jié)優(yōu)化、文字的字號優(yōu)化、色彩優(yōu)化、界面交互等等細節(jié)。
如果涉及到一些頁面的交互，我們在提供設(shè)計稿的同時需要把具象的交互文件單獨交給開發(fā)，不要奢望前端大佬們能腦補出頁面之間的交互，我們不及時提供的話，后期修改研發(fā)可能會直接拒絕，并且口吐芬芳～（最簡單的找到競品頁面演示給研發(fā)看）。
我的方法▼▼▼
前端在看我們設(shè)計稿時如果不是結(jié)構(gòu)上的修改，他們不會去關(guān)注這些細節(jié)的點，而給測試看的目的是，有些公司測試會幫我們進行走查，如果不出設(shè)計文檔測試沒辦法進行對比（測試提bug比設(shè)計師提bug更具有一些權(quán)威性）。
這里看一下我工作中輸出的設(shè)計文檔，我會把需求的背景、目標在設(shè)計文檔上強調(diào)一下，再添加上設(shè)計目標，設(shè)計目標為了需求目標去賦能，這樣在文檔開始就與研發(fā)達成共識，讓研發(fā)是帶著共同完成目標的態(tài)度去看設(shè)計文檔，便于我們后續(xù)推動，其次放上頁面之間的說明。
最后總結(jié)一下，我們要交付給開發(fā)什么東西，首先是基本的設(shè)計稿，包括切圖、間距、動效文件，其次是設(shè)計文檔，包括需求背景、需求目標、設(shè)計目標、設(shè)計修改點說明。
在交付設(shè)計稿后（基本設(shè)計圖、設(shè)計文檔），我們就要避免頻繁修改，頻繁的修改會導致設(shè)計稿來回更新，對開發(fā)造成一種困惑，最后在測試的時候，開發(fā)同學容易寫亂。
另一方面工作過的設(shè)計師都應(yīng)該經(jīng)歷過，我們在開發(fā)的過程中修改設(shè)計稿，大部分的開發(fā)都會帶點情緒，甚至不給我們改，這其實是因為大多開發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的，如果中途進行修改可能會影響開發(fā)同學的代碼規(guī)范，就像我們在完成一個設(shè)計稿的時候，產(chǎn)品經(jīng)理突然改變需求，我們也是擔心做好的設(shè)計稿因為修改而被打亂。
如果實在需要修改，一定要說明原因，而不是突然一個想法覺得這里設(shè)計不合適就進行修改（產(chǎn)品需求修改除外），我們要換位思考，具有同理心去工作，并且讓開發(fā)同學感受到我們是在幫助他們減少工作量，這樣在后續(xù)的一些需求中，我們的對接會很順暢。
上面說的是站在設(shè)計師的角度去修改，還有一種情況是研發(fā)在開發(fā)過程中，作為設(shè)計師的我們突然收到產(chǎn)品經(jīng)理的修改建議，這時候我們需要及時的同步給開發(fā)，或者給開發(fā)同事達成共識信息。
因為很多時候，產(chǎn)品經(jīng)理讓我們修改的時候往往不會通知開發(fā)，因為對于產(chǎn)品經(jīng)理而言就是一個小的修改，例如改個位置、改個顏色等等，但不管是對我們還是對于開發(fā)其實都是比較重要的，不及時同步就會出現(xiàn)不好的結(jié)果，如果在測試階段沒有發(fā)現(xiàn)問題，上線后就會造成設(shè)計師背鍋的情況。
我曾經(jīng)在做一個頁面改版的時候，就遇到類似的問題，當時產(chǎn)品找到我說改一個地方的交互，并且我也覺得那個交互方式應(yīng)該改，當時的我以為產(chǎn)品經(jīng)理會同時告訴開發(fā)修改的地方，但是直到項目上線后開發(fā)都沒修改那個地方的交互。
本來這個修改點是個小事情，誰知剛好那一個版本被用戶吐槽那個頁面的交互，結(jié)果可想而知領(lǐng)導拉個會議開始復盤，為什么沒有改，索性大家沒有互相甩鍋的情況，產(chǎn)品經(jīng)理說沒有同步到開發(fā)，而我也是幫產(chǎn)品兜了一下說更新設(shè)計稿沒有告訴開發(fā)，這個事情原本是個很小的事情，只需要我順口同步給開發(fā)，就能夠避免的，就因為我沒有及時同步，造成用戶的反饋，影響了產(chǎn)品的體驗。
所以各位設(shè)計師工作中如果遇到類似的事情一定要及時同步！
開始講到過，在需求評審的時候要與開發(fā)對齊目標，為什么需要對齊目標，因為一個項目如果目標不對齊，那么每個人都會站在自己的角度去做這個需求，設(shè)計師思考的是通過設(shè)計的手段，去幫助產(chǎn)品完成目標，如果設(shè)計稿上的復雜效果較多的時候，開發(fā)則會考慮你為什么這么做，這么做開發(fā)成本非常高等等。
這也是說為什么我們開始就講要輸出設(shè)計文檔，如果這一切都不存在的話就會導致開發(fā)是帶著疑問寫我們的頁面，如果過程中在修改需求什么的，那我們跟開發(fā)又要相愛相殺了。
我的設(shè)計方式是通常是在產(chǎn)品評審階段就與開發(fā)明確講清楚，我大概要做什么樣的效果，什么的交互形式，預計什么時候會交初步方案，中途也可能會有修改的點等等，提前讓開發(fā)有個心理預期，避免在開發(fā)過程中產(chǎn)生抵抗情緒。
我的經(jīng)驗▼▼▼
如果在前期沒有時間進行動效設(shè)計并沒有關(guān)系，研發(fā)在開發(fā)過程中可以在把動效方面給空出來后續(xù)寫，這里講的交互動畫分為兩種，一種是展示的動畫，一種是ui中的動效。
a）展示動畫
目的是為了告知開發(fā)頁面運動的軌跡，在1-4中講到我個人用的方法，大家如果是剛對接研發(fā)的話，建議還是輸出完整的交互動畫，這里推薦一些工具AE、Principle、Pixso、Figma等。
b）動效文件
這個比較重要！我們一定要與研發(fā)同事溝通好，產(chǎn)品內(nèi)使用什么樣格式的動效文件，統(tǒng)一后能提升后續(xù)的開發(fā)效率，動效格式使用亂套的話，后續(xù)我們做更新迭代時做替換會很麻煩，開發(fā)也同樣如此，這里推薦幾種動效格式文件，分別是GIF、json、pag、svga這4種。
GIF：傳統(tǒng)的動效文件格式，優(yōu)點是學習成本低，第一個缺點是內(nèi)存大，圖片容易失真模糊，他的原理就是把每一幀的圖片融合在一起，最后形成動畫，圖片越多，內(nèi)存越大，第二個缺點是占用產(chǎn)品資源，當內(nèi)存過高時，在加載時會出現(xiàn)卡頓。
Json：該文件格式是通過Lottie實現(xiàn)的，是 Airbnb 開發(fā)的一款能夠為原生應(yīng)用添加動畫效果的開源工具，它的優(yōu)點就是內(nèi)存小、無需加載、動畫不會失真，缺點呢就是支持的動畫方式?jīng)]有g(shù)if那么全面，以及使用成本也比較高。
具體使用步驟是需要我們裝ae插件bodymovin，通過插件導出json，常遇見的問題就是在導出漸變動畫時，漸變效果會消失，這是因為我們ae安裝的都是中文版，而該插件更多的適配的是英文版，不過沒關(guān)系這里可以把漸變效果的名字改為gradient fill1就可以了，如果多個漸變的話我們更改后面序列號就可以，比如gradient fill1、gradient fill2、gradient fill3…，這里把漢化插件鏈接也給大家找到了。
https://zdo.fun/?p=557
Pag：pag是騰訊研發(fā)的一種技術(shù)文件，最初主要用于游戲動畫和直播動畫，用來解決復雜的動畫效果，目前在ui頁面中運用也比較多，優(yōu)點是占比內(nèi)存比json文件更小，支持的動畫方式也更豐富，運行時可編輯，缺點是適配原生有些問題，壓縮位圖時會出現(xiàn)不顯示，這個軟件目前還在完善階段，我曾經(jīng)也使用過，后來因為適配問題就放棄了，感興趣的大家可以通過下面鏈接下載。
https://pag.io/docs/install.html
svga：該文件格式的強大之處在于可以完整的將位圖轉(zhuǎn)換成二進制代碼，并且內(nèi)存占比較于json更小，播放資源占用更低，并且技術(shù)上相對穩(wěn)定（建議使用）。
https://svga.io/designer.html
我們看下svg實現(xiàn)的效果。
最后，我們一定要統(tǒng)一產(chǎn)品內(nèi)使用的動效文件格式，這樣既方便我們，也方便開發(fā)，讓開發(fā)看到我們設(shè)計師的嚴謹性，便于后續(xù)合作。
作為設(shè)計師，我們需要實時了解開發(fā)的進度，這樣能夠保證我們在過程中掌握自己的設(shè)計節(jié)奏，什么時間交給開發(fā)動效文件，如果進行修改也可以不影響上線時間（當然不建議這樣做），那么具體需要怎么跟進呢，大概分為以下幾個維度。
a）時間進度跟進
設(shè)計師可以時不時的問一嘴，是否能按照正常的計劃時間節(jié)點提測（正常需求提交后，開發(fā)會給出開發(fā)排期，盡量按照時間排期走，否則項目進度會變得很不可控）。
如果開發(fā)反饋時間會有延期風險，那設(shè)計師第一時間就要了解原因，以及預計延期多久，然后自身評估以下對設(shè)計上是否有影響。
b）需求變更跟進
一般開發(fā)過程中，或多或少都會出現(xiàn)一些需求調(diào)整/變更的點，那么其中就會涉及設(shè)計上的改動，改動小的話產(chǎn)品經(jīng)理有時候會直接告訴我們，并不會告訴開發(fā)，這時候如果身為設(shè)計師的我們要及時通知開發(fā)，并說明原因（避免爭論）。
并且，需求變更后，需要和開發(fā)評估新的項目上線時間點，站在我們或者產(chǎn)品角度理解有時候我們認為的修改，對于開發(fā)來講是耗費時間較長的，需要我們注意是否會影響上線時間。
c）交互動效實現(xiàn)跟進
在2-4中講到我們要輸出交互動畫，雖然我們輸出的動畫很直觀，以及動效文件也完整，但是避免不了認知上的偏差，有時候開發(fā)會按照技術(shù)難度以及自身理解去完整交互效果，我們中途要隨時跟進了解，避免開發(fā)在錯誤的路上越走越遠。
d）測試跟進
及時了解該需求是否已經(jīng)提測、哪些還未提測，若到了提測時間的功能未進入測試，可以詢問產(chǎn)品或開發(fā)什么原因，這樣對項目或設(shè)計師都是負責的。
另外一點是我們設(shè)計師需要在提測階段介入UI走查，因為各個公司或者項目測試時間有長有短，所以我們要及時把UI走查工作介入進去，給開發(fā)預留出修改時間，有的小公司不重視UI走查流程，這里我們就可以自驅(qū)進行走查，主動找測試同學了解提測時間，及時走查，保證頁面還原度。
走查是UI工作中最為重要的工作，它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶，下面我大致把走查的流程以及范圍給大家梳理下。
a）創(chuàng)建走查文檔
在UI走查階段，我們首先需要建立走查文檔便于開發(fā)瀏覽解決，走查文檔主要包含日期、版本、項目名稱、模塊、端口、問題描述、修改狀態(tài)、圖片標注，這樣一方面能夠讓問題更加詳細，體現(xiàn)設(shè)計師的專業(yè)度，一般我是使用在線表格去建立走查文檔，當然這個看每個公司所使用的協(xié)作平臺。
b）開通手機權(quán)限
一般在走查移動端產(chǎn)品時，安裝測試包需要開通賬號權(quán)限，這里可以找公司的開發(fā)或者測試同事給開通，避免影響走查效率。
c）走查范圍
分為基礎(chǔ)走查、細節(jié)走查、適配走查。
基礎(chǔ)走查包含字體、顏色、圖標、間距、對齊方式等具體可根據(jù)產(chǎn)品形態(tài)進行延伸，其中間距走查比較費時間，需要我們通過測試機截圖后，按照倍數(shù)縮放到源文件內(nèi)進行測量，測試機分辨率需要保證與設(shè)計稿一致，否則測量不準確，如設(shè)計圖是375*812，以蘋果為例測試機則需要使用 iPhone X，這里給大家參考鏈接。
https://developer.apple.com/design/human-interface-guidelines/foundations/layout
細節(jié)走查包含字體截字、按壓狀態(tài)、組件內(nèi)容、交互狀態(tài)。
適配走查包含關(guān)鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識別度是否清晰。
在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想，并未達到預期，我們可以與開發(fā)進行溝通是否可以修改，或者添加新的交互效果，因為在這個階段我們重新設(shè)計或者定義一個新的交互動效的話，會增加非常大的開發(fā)工作量，可能也會與開發(fā)產(chǎn)生爭吵，我們在這個時期盡量避免這個問題，如果實在沒有解決辦法的時候再去添加新的交互。
我在工作中，如果遇到這種事情，會分兩點考慮這個事情。
第一評估下當下這個交互效果是否會影響用戶體驗，如果影響用戶體驗我會要求開發(fā)必須100%還原，當然我會講述清楚為什么改，避免讓開發(fā)產(chǎn)生情緒抵抗。
第二是如果不影響用戶體驗，但是還原度沒有達到預期，我同樣會先找開發(fā)進行溝通，例如按照交互稿還原會有什么困難，是時間上的困難還是技術(shù)上的困難，時間上如果困難我會溝通好下一期必須還原到位，技術(shù)上困難我一般會修改交互形式，盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。
作為設(shè)計師在需求上線后并不代表需求就結(jié)束了，我們還需要追蹤數(shù)據(jù)情況是好是壞，為什么我們設(shè)計師要去追蹤這個數(shù)據(jù)呢，追蹤數(shù)據(jù)是為了讓我們在工作中提升自己的設(shè)計價值，隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和，那么企業(yè)對于各個崗位的要求也跟互聯(lián)網(wǎng)初期不一樣，以前我們只需要畫畫圖交付就可以了，但是現(xiàn)在的企業(yè)更看重的是綜合能力。
說簡單點就是做UI的人很多，優(yōu)秀的UI一樣很多，那么我們就得被迫提升核心競爭力否則就是被淘汰。
而追蹤數(shù)據(jù)其實就是增加我們得核心競爭力，同時也是能夠體現(xiàn)自己設(shè)計能力的一項內(nèi)容，設(shè)計最終是為商業(yè)而服務(wù)的，但我們不能嘴上說說，而是要拿出實際的行動，這個行動就是數(shù)據(jù)，我們的設(shè)計如何為數(shù)據(jù)賦能的，如何幫業(yè)務(wù)達到目標等等，數(shù)據(jù)如何分析是個很龐大的體系這里只講下我們身為設(shè)計師為什么需要追蹤數(shù)據(jù)。
簡單講下工作中數(shù)據(jù)解析的案例。
下面是我做的一個直播商業(yè)化改版需求，改版背景呢是直播業(yè)務(wù)由原先的為c端用戶賦能改為，為b端企業(yè)賦能，通過與企業(yè)合作而產(chǎn)生價值，那么基于這個直播形態(tài)肯定是需要變化的，需求目標由原先的【用戶收益】改為【企業(yè)收益】，新的目標具體為提升企業(yè)品牌曝光點擊、互動、預約人數(shù)、提升直播在企業(yè)客戶測的感知收益。
案例▼▼▼
基于這個目標，其實不難發(fā)現(xiàn)，目標已經(jīng)從用戶側(cè)改為大客戶，更多的是為企業(yè)去賦能，頁面的結(jié)構(gòu)肯定需要進行變化的，左邊的圖呢是改版之前的，右邊的是改版之后的，那么我當時的思路呢其實就是基于數(shù)據(jù)方面去進行優(yōu)化。
整體：產(chǎn)品策略添加了二級浮窗用來承載更多內(nèi)容。
直播介紹：首先舊版策略是直播介紹對于用戶而言并不重要，用戶只需要通過看到直播標題就能夠了解大致直播內(nèi)容，更多是以引導形式存在，所以信息外漏較少，而新的策略是講企業(yè)介紹默認展示在二級浮窗內(nèi)，用戶可選擇關(guān)閉，提升企業(yè)感知。
投遞簡歷：舊版策略是需要側(cè)重用戶投遞率，因此在預約界面就展示入口，而新的策略是需要給企業(yè)強化觀看人數(shù)、預約人數(shù)從而提升客戶價值，基于這一點，我當時是通過數(shù)據(jù)后臺看了下預約頁面的點擊數(shù)據(jù)，發(fā)現(xiàn)點擊率最最高的是【投遞簡歷】入口，而【預約直播】入口點擊率相對較低，因此把投遞簡歷入口調(diào)賬到浮窗tab區(qū)域，降低層級，讓預約直播成為視覺焦點，而上線后數(shù)據(jù)也是符合預期。
企業(yè)關(guān)注：將企業(yè)名稱與關(guān)注結(jié)合并且放大，提升關(guān)注量，強化企業(yè)品牌感知和數(shù)據(jù)感知，關(guān)注與預約直播兩者無論數(shù)據(jù)高低，都是符合企業(yè)目標，從而便于業(yè)務(wù)人員與企業(yè)進行合作溝通。
從我這個案例中我們能清楚看到，基本上任何需求都是可以通過數(shù)據(jù)的維度，進行優(yōu)化，并且通過量化指標提升設(shè)計價值，無論對公司還是個人都有很大收益，并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對接時，可以通過數(shù)據(jù)維度去促進我們設(shè)計上的修改、完善等工作，這也是為什么說我們需要對每個需求都要進行數(shù)據(jù)追蹤。
無論是對接前、對接中、對接后，在哪個階段都需要我們認真對待，熟知這些細節(jié)后，才能更好的與開發(fā)合作，進行項目推進，優(yōu)秀的設(shè)計師不僅是專業(yè)和技術(shù)上的成熟，還需要有協(xié)作上下游的能力，在很多團隊中設(shè)計師跟開發(fā)都會面臨不一樣的挑戰(zhàn)最終可能會因為某些問題發(fā)生沖突，我們需要減少這樣的沖突。
作者：愛吃貓的魚；公眾號：防脫發(fā)藥水
本文由 @愛吃貓的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
輯導語：用戶在使用一款產(chǎn)品時，都希望能有良好的使用體驗。出色的動效，可以使頁面之間聯(lián)系更加緊密，整體體驗更加流暢，減少用戶的負面情緒；同時，也可以增加產(chǎn)品的趣味性與品牌特色，讓用戶產(chǎn)生興趣并提高品牌認知度。接下來，本文作者就帶我們?nèi)チ私鈩有гO(shè)計。
現(xiàn)如，今動效設(shè)計在產(chǎn)品中的使用已經(jīng)十分普遍。
這也導致動效設(shè)計由早期的「魅力型因素」逐漸成為「必要型因素」，越來越多的公司和團隊已經(jīng)意識到動效在產(chǎn)品用戶體驗中的重要性，動效也逐漸成為UI設(shè)計師的基本能力之一。
動效設(shè)計，顧名思義即動態(tài)效果的設(shè)計，用戶界面上所有運動的效果，也可以視其為界面設(shè)計與動態(tài)設(shè)計的結(jié)合。
而在Material design 設(shè)計規(guī)范中，將動效設(shè)計這一章命名為「Animation」，意思是動畫，活潑的意思。好的動效設(shè)計可以幫助引導、取悅用戶，減少等待焦慮，是拉近用戶與產(chǎn)品之間距離的有效手段。
動效的分類并沒有明確的界限，根據(jù)其作用大致可以分為3類：
此類動效一般用于產(chǎn)品設(shè)計，通過動態(tài)圖形向用戶傳遞信息，其中加載/刷新和進度條應(yīng)該是我們平時接觸最多也是最早的動效了，此類動效最開始只是為了告知用戶產(chǎn)品的頁面狀態(tài)。
隨著社會上產(chǎn)品數(shù)量的快速增長以及競爭日益激烈，產(chǎn)品的有趣和差異化顯得愈發(fā)重要，于是便看到越來越多的產(chǎn)品將自己的品牌因素融入動效當中，設(shè)計也越來越生動有趣。
除了加載、刷新和進度外，功能型動效還被廣泛的運用在產(chǎn)品的其他各種狀態(tài)當中，如信息報錯、二維碼掃描等。雖然具體表現(xiàn)不同，但都是通過動態(tài)形式幫助用戶理解和使用產(chǎn)品。
顧名思義，該類動效的核心是“交互”，其主要的作用是幫助用戶理解界面的層級邏輯關(guān)系，讓產(chǎn)品的使用更加符合現(xiàn)實生活中的認知習慣，從而降低使用成本，提升產(chǎn)品體驗。
要注意的是此類動效不能脫離用戶的認知模型，只是單純的炫酷對于整個產(chǎn)品來說是有害的。
其實交互型動效是用戶在產(chǎn)品使用中接觸最多的一種動效，因為產(chǎn)品的使用是通過不同產(chǎn)品元素串聯(lián)而完成的，而負責元素串聯(lián)的就是交互型動效。
一般可分為「單頁面交互動效」和「多頁面交互動效」。
「單頁面交互動效」：就是在當前頁面發(fā)生的交互動畫，比如tab切換、左滑刪除、二級菜單展開、返回頂部等等。
「多頁面交互動效」：就是不同頁面之間的交互動畫，其實就是頁面的跳轉(zhuǎn)，根據(jù)不同的場景會使用到不同的跳轉(zhuǎn)樣式，好的跳轉(zhuǎn)動畫能夠幫助用戶理解前后頁面的邏輯關(guān)系。
此類動效的最大作用就是盡可能的為用戶制造視覺上的愉悅，營造活動氛圍，讓用戶覺得有趣生動，使用的場景也十分廣泛，常見的如「品牌展示」、「運營活動」、「H5營銷」等。
1）品牌展示
將有趣的動態(tài)圖形與品牌相結(jié)合，讓原本生硬的產(chǎn)品形象變得有趣生動，拉近用戶與產(chǎn)品之間的距離。
2）運營活動
動效設(shè)計同樣也可以使用在運營設(shè)計中，作為業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化的重要入口，動效可以極大的吸引用戶的注意力，從而提升業(yè)務(wù)數(shù)據(jù)。
H5營銷
從2014年開始，H5因其豐富的表現(xiàn)形式便開始逐漸走紅，每年都會有很多火遍全網(wǎng)的H5活動，如「網(wǎng)易云音樂聽歌報告」、「支付寶集五福」、「支付寶年度賬單」、「穿越故宮來看你」等等。
網(wǎng)易云音樂聽歌報告
支付寶五福
支付寶年度賬單
穿越故宮來看你
不同的產(chǎn)品有屬于自己的產(chǎn)品調(diào)性，例如：
金融產(chǎn)品強調(diào)的是可靠理性，而手游類產(chǎn)品的重點則是炫酷有趣，二者的動效設(shè)計自然也需要貼合各自的屬性，思路設(shè)計要符合提升的產(chǎn)品體驗，要經(jīng)過細致思考不能盲目跟風。
因為自然界中運動都不是線性的勻速運動，而是按照物理規(guī)律，呈現(xiàn)出的曲線的變速運動，這也是物體運動的基本常識和規(guī)律。
人們對于一個運動形式產(chǎn)生的情感反饋，大部分也來自于生活中看到的類似的運動形式。所以我們要符合物理規(guī)律，這樣才能準確的專遞我們動效設(shè)計的情感。當然可以適當根據(jù)需要夸張、精簡。
我們還需要多看一些優(yōu)秀的動效設(shè)計作為積累，同時也需要對優(yōu)秀的動效設(shè)計進行深入思考，思考別人為什么這么設(shè)計，以及如何完成動畫設(shè)計的。
要與自己對類似事物的想法進行對比，找差距，補不足，這是經(jīng)驗技巧積累的過程。同時要學會怎么去拆解別人復雜的動效設(shè)計，從中總結(jié)經(jīng)驗，最后通過合理的編排設(shè)計出自己的動效設(shè)計作品。
就是要保持對于設(shè)計行業(yè)，或者說是APP動效設(shè)計領(lǐng)域的關(guān)注。了解當下新的設(shè)計手法，設(shè)計趨勢以及設(shè)計工具，不要做一個落伍者。
常見的動效文件格式有GIF、APNG/WEBP、序列幀/精靈圖、Lottle、SVGA。
GIF 圖格式應(yīng)該是設(shè)計師接觸過的最多的動態(tài)格式了， 因其體積小而成像相對清晰，其在各個平臺的兼容性非常好，使得它的傳播性非常強。
當然gif格式也存在很明顯的缺陷：
這些格式是基于現(xiàn)有的 JPEG、PNG、GIF 格式的所衍生出來的。
APNG 格式在目前主流的所有瀏覽器上都可以完美支持，在移動的設(shè)備上通過一些代碼框架也可以完美支持，它相比 GIF 支持的色彩范圍更廣，更清晰，并且占用更低的內(nèi)存，支持透明通道，有非常多的優(yōu)勢。
WEBP格式目前也基本兼容所有的主流瀏覽器，相同的效果，webp 格式要比 png 格式小出來大概一半的大小，同時它也兼容所有的安卓設(shè)備，像一些 ios 設(shè)備需要通過一定的方式才可以支持。
不過，相比來說各方面的表現(xiàn)都是非常優(yōu)秀的。
1）序列幀
序列幀就是將動動效的所有畫面拆分開來，形成一系列靜態(tài)的png圖片，然后通過前端代碼來控制每張png圖片出現(xiàn)的間隔時間，而且實現(xiàn)連貫的動畫效果。
序列幀是一個無損且低內(nèi)存的格式，但是它只能在客戶端環(huán)境中使用，不建議在 Web 環(huán)境中使用。
原因是序列幀一般都是隨著 App 程序包一起下載下來的，但是 Web 中每次進入一個新的網(wǎng)頁都需要重新下載。
舉個例子如果一個 60 幀的動畫就得重復向服務(wù)器請求 60 次，在這種高頻次的請求下很容易因為一個小的問題導致整個動畫無法正常播放，為了避免這種錯誤我們一般會這個 60 張圖合并為一個，并且通過代碼在指定時間內(nèi)顯示某一個區(qū)塊，所以這里我們引出另一種格式——精靈圖/雪碧圖。
2）精靈圖（又叫雪碧圖）
當我們把所有序列合并在一張圖片上往往還是不夠的，我們還需要提供給開發(fā)具體哪個時間顯示哪一部分的具體參數(shù)。
我們可以直接通過 AE 插件 CSS Sprite Exporter(By Bigxixi) 直接快速的輸出開發(fā)所需的代碼和精靈圖：
Lottie：
Lottie 可以說是近幾年在動畫輸出方面不得不提的一個格式，它由 Airbnb 推出，并且迅速在國內(nèi)外各種大小廠快速推廣開來，目前已經(jīng)是一個非常普遍常用的格式。它在 AE 中的插件叫 Bodymovin，它的原理是把各種矢量元素以及位圖圖層以及他們的效果關(guān)鍵節(jié)點打包行成一個 json 格式的文行。
開發(fā)人員拿到 Bodymovin 輸出的 json 格式是無法直接使用的，它需要在代碼中加入 Airbnb 提供的 Lottie 第三方庫來讀取播放，相當于 lottie 文件在我們各個端口設(shè)備上的播放器的作用。
ps：
解決的辦法有兩個：一個是使用英文版ae軟件；第二個是將屬性「漸變填充1」重命名改為「Gradient Fill1」（后面的數(shù)字需與漢化版的保持一致）。
SVGA：
針對 Lottie 對緩動曲線解析差帶來的性能問題和穩(wěn)定性問題，我們會有第二種備選方案是 SVGA，不管是導出之后的內(nèi)存占用，還是在各個端的表現(xiàn)穩(wěn)定性都會好很多。
但是它的內(nèi)存占用會比 Lottie 稍高，并且支持的特性也會比 Lottie 少一些。
SVGA 與 Lottie 最本質(zhì)的區(qū)別在于代碼對動畫過程記錄的方式， Lottie基本上是按照我們在 ae 當中的關(guān)鍵幀及緩動的結(jié)合形式去記錄動畫；而 SVGA 則是通過記錄我們每一個圖層每一個時間上的動畫狀態(tài)，從而省去對緩動值的計算。
跟序列幀的邏輯非常相似，但是因為它的素材可以復用，所以會比序列幀占用更低的內(nèi)存。
基于實現(xiàn)方式，它會比 Lottie 穩(wěn)定很多，相應(yīng)的，它所支持的特性也要比 Lottie 少很多。
動效制作的軟件其實非常多，這里只介紹一些自己接觸過的主流動效軟件：
AE是時間軸動效軟件，不支持交互操作，但幾乎可以制作任何你想要的動畫效果，但操作相對復雜時間成本較高。
Principle是可交互的動效軟件，主要用于交互動效Dome制作，可以制作出較為復雜效果的交互動效，操作難度相對較低。
Origami是一款以代碼思維進行動效制作的軟件，學習門檻較高，但可以實現(xiàn)與開發(fā)的無縫對接。
C4D主要針對三維動畫效果的制作，學習門檻較高。
作者：WOWdesign，研究設(shè)計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。
本文由 @agoodesign 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
titanic是在Github上開源的一組免費的動畫圖標，可以將其簡單的運用到網(wǎng)頁中，而且代碼及其簡單，但是動畫效果卻很不錯，動畫圖標和靜態(tài)圖標的不同之處在于它可以讓你的網(wǎng)頁更加富有活力，讓產(chǎn)品更加具備視覺吸引力，一起來看看！
https://github.com/icons8/titanic
安裝使用及其簡單，可以通過CDN或npm安裝它：
npm install titanic-icons --save
將代碼引入你網(wǎng)頁的head中后：
<script src="/dist/js/titanic.min.js"></script> <script src="/bodymovin/4.5.9/bodymovin.min.js"></script>
在body中初始化：
<script> var titanic=new Titanic(); </script>
這樣，你就可以在HTML中使用任意位置以下標簽添加圖標：
<div class='titanic titanic-chat'></div>
chat可以是以下任一一種：
1、titanic.isInitialized（）
判斷是否初始化成功
2、titanic.items
獲取titanic集合
3、titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()
按索引播放titanic的動畫
4、titanic.on(token), titanic.off(token), titanic.play(token)
通過名稱播放泰坦尼克號物品的動畫
5、以下是一個完成的示例：
<head>
<!--Inserting the scripts once for the whole page-->
<script src="/dist/js/titanic.min.js"></script>
<script src="/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
<!--Inserting an icon-->
<div class='titanic titanic-checkbox'></div>
<!--Initializing-->
<script>
var titanic=new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
</script>
<!--Clicking turns this icon on-->
<button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>
通過截圖大致了解，可以直接訪問官方網(wǎng)站查看動畫效果：
每個人都喜歡個性鮮明的頁面。通過200個動畫圖標包，使Web和移動用戶界面更具視覺吸引力。
titanic是一組豐富的動畫圖標，可以讓你的網(wǎng)頁極具視覺吸引力，是設(shè)計師和前端工程師的不二之選，感興趣的可以嘗試！
PS:你可以直接從官網(wǎng)或者Github獲取，當然也可以私信本頭條號關(guān)鍵字：“icons”，Enjoy it!
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
