開發(fā)說(shuō)這個(gè)設(shè)計(jì)實(shí)現(xiàn)不了?從3個(gè)階段解決問(wèn)題!

2022-9-8    博博

對(duì)接開發(fā)的重要性


作為產(chǎn)品設(shè)計(jì)師,無(wú)論在什么公司什么崗位,都免不了與研發(fā)團(tuán)隊(duì)進(jìn)行溝通,如果不進(jìn)行溝通就無(wú)法交付我們的設(shè)計(jì)稿,即便很成熟的團(tuán)隊(duì)也會(huì)出現(xiàn)在溝通上的問(wèn)題,在產(chǎn)品研發(fā)的過(guò)程中溝通是必要的流程,為了創(chuàng)造一致的用戶體驗(yàn),設(shè)計(jì)師需要與開發(fā)人員在視覺上、交互上達(dá)到一致的想法,但是講起來(lái)簡(jiǎn)單,說(shuō)起來(lái)難,在整個(gè)過(guò)程設(shè)計(jì)師和開發(fā)都是站在不同的角度去看待問(wèn)題的,我們思考的如何達(dá)到美觀的界面、流暢的交互等問(wèn)題,而開發(fā)關(guān)心的是做這件事我需要花費(fèi)多長(zhǎng)時(shí)間,實(shí)現(xiàn)難度如何等等,首先目標(biāo)就不在同一個(gè)維度,那么必然會(huì)造成我們?cè)趯?duì)接的時(shí)候出現(xiàn)掰扯的問(wèn)題,最后耽誤的都是雙方的時(shí)間,更嚴(yán)重點(diǎn)頁(yè)面最后的體驗(yàn)也沒有達(dá)到一致。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

任何團(tuán)隊(duì)都會(huì)出現(xiàn)設(shè)計(jì)師與開發(fā)脫節(jié)的問(wèn)題很常見,遇見什么問(wèn)題解決什么問(wèn)題,畢竟人與人的性格、溝通方式等都是不同的。

我們只需要在不同的流程里去做不同的事情就可以避免這些問(wèn)題了,對(duì)于任何設(shè)計(jì)師基本都會(huì)適用,往下看~

對(duì)接前的準(zhǔn)備

1. 產(chǎn)品信息文檔確認(rèn)

在接到一個(gè)需求的時(shí)候產(chǎn)品經(jīng)理會(huì)通知上下游進(jìn)行需求的評(píng)審,這時(shí)候一般會(huì)是產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)三個(gè)組進(jìn)行需求的評(píng)估,具體的需求評(píng)審在本章就不細(xì)講,我們此次主要講設(shè)計(jì)師與開發(fā)相關(guān)的信息同步。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

在評(píng)審過(guò)程中產(chǎn)品經(jīng)理會(huì)把需求背景、需求目標(biāo)等相關(guān)信息同步給相關(guān)的人員,作為設(shè)計(jì)師這時(shí)候就要關(guān)注需求目標(biāo),這個(gè)目標(biāo)不僅是產(chǎn)品經(jīng)理的目標(biāo),也是整個(gè)項(xiàng)目的目標(biāo),所以與每個(gè)人都相關(guān),需求目標(biāo)清晰后期推動(dòng)開發(fā)的時(shí)候才會(huì)有依據(jù)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

評(píng)審會(huì)議結(jié)束后,產(chǎn)品經(jīng)理會(huì)同步期望上線時(shí)間,如果是常規(guī)需求,會(huì)當(dāng)時(shí)就評(píng)估出設(shè)計(jì)時(shí)間、開發(fā)時(shí)時(shí)間,我們?cè)O(shè)計(jì)師這時(shí)候就要關(guān)注這些時(shí)間,因?yàn)槲覀兺ㄟ^(guò)上線時(shí)間就可以估算開發(fā)節(jié)奏,給我們后期的修改以及臨時(shí)添加的一些動(dòng)效制作時(shí)間會(huì)留出充裕的時(shí)間。

設(shè)計(jì)評(píng)審流程細(xì)節(jié)本章不進(jìn)行細(xì)節(jié)講解,本章重點(diǎn)講與開發(fā)對(duì)接。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

近期我在公司做了一個(gè)商業(yè)化的直播項(xiàng)目需求,由于產(chǎn)品方?jīng)]有過(guò)多的產(chǎn)研經(jīng)驗(yàn)(后面才知道),在項(xiàng)目前期雖然進(jìn)行了評(píng)審,但是評(píng)審的參與人員沒有拉上我,等到需求給到我的時(shí)候,我順便問(wèn)了一下才知道已經(jīng)評(píng)審?fù)炅耍@對(duì)于我來(lái)講是沒辦法進(jìn)行設(shè)計(jì)輸出的。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

第一我不知道評(píng)審過(guò)程中開發(fā)的排期時(shí)間,以及測(cè)試時(shí)間,如果研發(fā)開始開發(fā)的時(shí)間與設(shè)計(jì)稿交付時(shí)間有沖突那么就是影響上線節(jié)奏。

第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的,有沒有哪些地方需要加復(fù)雜的交互產(chǎn)品也是同樣不清楚,那么開發(fā)就會(huì)默認(rèn)這是常規(guī)的交互,如果過(guò)程中添加那將會(huì)影響開發(fā)進(jìn)度。

第三流程上不符合要求,期間如果有關(guān)鍵性信息沒有達(dá)到共識(shí),那將會(huì)釀成很嚴(yán)重的后果。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

面對(duì)這種已經(jīng)發(fā)生的事情,如果重新拉個(gè)會(huì)評(píng)審一次會(huì)耽誤大家的時(shí)間,很多人是不愿意的,但是呢我也不能單聽產(chǎn)品一方面的溝通,因?yàn)楹芏嗉?xì)節(jié)他是不清楚的(產(chǎn)品經(jīng)驗(yàn)較少),所以當(dāng)時(shí)我的處理方法呢是我先通過(guò)產(chǎn)品給出的上線時(shí)間,然后與前端同學(xué)單獨(dú)確認(rèn)一下,這樣至少保證上線時(shí)間是同步的,至于其他的細(xì)節(jié)我當(dāng)時(shí)是利用設(shè)計(jì)評(píng)審的方式同步給開發(fā)交互邏輯、動(dòng)效方式等。

此次這個(gè)需求呢本身不大是在舊版的基礎(chǔ)上優(yōu)化功能,理論上不需要走設(shè)計(jì)評(píng)審流程,但是因?yàn)楫?dāng)時(shí)沒有通知參加評(píng)審導(dǎo)致很多信息不同步,而我需要傳達(dá)給開發(fā)的東西也不能在后期在告訴他們,所以我利用設(shè)計(jì)評(píng)審流程把一些交互信息同步給開發(fā)。

2. 設(shè)計(jì)圖準(zhǔn)備

在設(shè)計(jì)稿完成后,如果是小需求一般是直接交付給研發(fā),如果是大需求一般會(huì)進(jìn)行設(shè)計(jì)評(píng)審,主要評(píng)審維度是設(shè)計(jì)稿是否與產(chǎn)品文檔同步,設(shè)計(jì)目標(biāo)是否符合產(chǎn)品目標(biāo)等等,其次如果有復(fù)雜交互效果、設(shè)計(jì)細(xì)節(jié)、組件復(fù)用情況也需要與研發(fā)對(duì)齊。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

若是直接交付研發(fā),我們需要提前把設(shè)計(jì)稿內(nèi)涉及的切圖、圖層間距、動(dòng)效使用區(qū)域等關(guān)鍵信息提前準(zhǔn)備好,避免在開發(fā)過(guò)程中臨時(shí)進(jìn)行補(bǔ)充,影響開發(fā)節(jié)奏。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

在設(shè)計(jì)稿內(nèi)的切圖,我們要提前與研發(fā)溝通,切圖的范圍和形式,最后把設(shè)計(jì)稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站,如藍(lán)湖、即時(shí)設(shè)計(jì)等平臺(tái),大公司會(huì)有自己的協(xié)作平臺(tái)。

3. 確定設(shè)計(jì)規(guī)范組件

講個(gè)自己的踩坑案例,還是商業(yè)化的那個(gè)需求,由于為了商業(yè)化賦能,產(chǎn)品的需求文檔并沒有按照規(guī)范組件進(jìn)行設(shè)計(jì),但是由于產(chǎn)品文檔標(biāo)注的不清楚,在設(shè)計(jì)過(guò)程中不斷與產(chǎn)品進(jìn)行溝通,最后結(jié)果當(dāng)然也是無(wú)法復(fù)用組件,當(dāng)時(shí)我就把組件規(guī)范修改了,重點(diǎn)是研發(fā)不知道,我當(dāng)時(shí)想的是研發(fā)通過(guò)產(chǎn)品文檔應(yīng)該會(huì)了解到,事實(shí)確實(shí)我大意了,后面就導(dǎo)致組件方面我與研發(fā)進(jìn)行了相愛相殺,通過(guò)自己的以身作則我勸大家不要忽略任何一個(gè)細(xì)節(jié)!

設(shè)計(jì)規(guī)范組件在設(shè)計(jì)前就需要進(jìn)行確認(rèn),項(xiàng)目是否有存留的規(guī)范組件,如果有,需要在設(shè)計(jì)前以及設(shè)計(jì)中去確認(rèn)哪些模塊是否可以調(diào)用,開發(fā)是否已經(jīng)將組件寫入代碼中,如果不了解這些情況貿(mào)然的設(shè)計(jì),那在對(duì)接過(guò)程中會(huì)出現(xiàn)修改設(shè)計(jì)稿的風(fēng)險(xiǎn)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

如果是創(chuàng)新項(xiàng)目并且沒有相關(guān)的設(shè)計(jì)規(guī)范和組件,我們則需要在設(shè)計(jì)前就把規(guī)范組件的時(shí)間給算到需求內(nèi),一個(gè)產(chǎn)品的規(guī)范組件,決定著后續(xù)產(chǎn)品是否嚴(yán)謹(jǐn)、項(xiàng)目研發(fā)效率等等,因?yàn)橐?guī)范組件不止是設(shè)計(jì)師的事情,還是團(tuán)隊(duì)研發(fā)比較關(guān)注的事情,研發(fā)們?cè)诖a里同樣需要進(jìn)行規(guī)范的組件復(fù)用。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

4. 輸出設(shè)計(jì)文檔

當(dāng)在做一些在舊版的產(chǎn)品頁(yè)面上優(yōu)化的需求時(shí),還需要輸出對(duì)應(yīng)設(shè)計(jì)文檔,給前端和測(cè)試看,設(shè)計(jì)文檔需要寫清楚設(shè)計(jì)稿優(yōu)化的點(diǎn),例如圖標(biāo)的細(xì)節(jié)優(yōu)化、文字的字號(hào)優(yōu)化、色彩優(yōu)化、界面交互等等細(xì)節(jié)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

如果涉及到一些頁(yè)面的交互,我們?cè)谔峁┰O(shè)計(jì)稿的同時(shí)需要把具象的交互文件單獨(dú)交給開發(fā),不要奢望前端大佬們能腦補(bǔ)出頁(yè)面之間的交互,我們不及時(shí)提供的話,后期修改研發(fā)可能會(huì)直接拒絕,并且口吐芬芳~(最簡(jiǎn)單的找到競(jìng)品頁(yè)面演示給研發(fā)看)。

我的方法

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

前端在看我們?cè)O(shè)計(jì)稿時(shí)如果不是結(jié)構(gòu)上的修改,他們不會(huì)去關(guān)注這些細(xì)節(jié)的點(diǎn),而給測(cè)試看的目的是,有些公司測(cè)試會(huì)幫我們進(jìn)行走查,如果不出設(shè)計(jì)文檔測(cè)試沒辦法進(jìn)行對(duì)比(測(cè)試提 bug 比設(shè)計(jì)師提 bug 更具有一些權(quán)威性)。

這里看一下我工作中輸出的設(shè)計(jì)文檔,我會(huì)把需求的背景、目標(biāo)在設(shè)計(jì)文檔上強(qiáng)調(diào)一下,再添加上設(shè)計(jì)目標(biāo),設(shè)計(jì)目標(biāo)為了需求目標(biāo)去賦能,這樣在文檔開始就與研發(fā)達(dá)成共識(shí),讓研發(fā)是帶著共同完成目標(biāo)的態(tài)度去看設(shè)計(jì)文檔,便于我們后續(xù)推動(dòng),其次放上頁(yè)面之間的說(shuō)明。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

5. 交付開發(fā)

最后總結(jié)一下,我們要交付給開發(fā)什么東西,首先是基本的設(shè)計(jì)稿,包括切圖、間距、動(dòng)效文件,其次是設(shè)計(jì)文檔,包括需求背景、需求目標(biāo)、設(shè)計(jì)目標(biāo)、設(shè)計(jì)修改點(diǎn)說(shuō)明。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地


對(duì)接中避免摩擦


1. 不要頻繁修改

在交付設(shè)計(jì)稿后(基本設(shè)計(jì)圖、設(shè)計(jì)文檔),我們就要避免頻繁修改,頻繁的修改會(huì)導(dǎo)致設(shè)計(jì)稿來(lái)回更新,對(duì)開發(fā)造成一種困惑,最后在測(cè)試的時(shí)候,開發(fā)同學(xué)容易寫亂,另一方面工作過(guò)的設(shè)計(jì)師都應(yīng)該經(jīng)歷過(guò),我們?cè)陂_發(fā)的過(guò)程中修改設(shè)計(jì)稿,大部分的開發(fā)都會(huì)帶點(diǎn)情緒,甚至不給我們改,這其實(shí)是因?yàn)榇蠖嚅_發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的,如果中途進(jìn)行修改可能會(huì)影響開發(fā)同學(xué)的代碼規(guī)范,就像我們?cè)谕瓿梢粋€(gè)設(shè)計(jì)稿的時(shí)候,產(chǎn)品經(jīng)理突然改變需求,我們也是擔(dān)心做好的設(shè)計(jì)稿因?yàn)樾薷亩淮騺y。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

如果實(shí)在需要修改,一定要說(shuō)明原因,而不是突然一個(gè)想法覺得這里設(shè)計(jì)不合適就進(jìn)行修改(產(chǎn)品需求修改除外),我們要換位思考,具有同理心去工作,并且讓開發(fā)同學(xué)感受到我們是在幫助他們減少工作量,這樣在后續(xù)的一些需求中,我們的對(duì)接會(huì)很順暢。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

2. 重要信息及時(shí)通知

上面說(shuō)的是站在設(shè)計(jì)師的角度去修改,還有一種情況是研發(fā)在開發(fā)過(guò)程中,作為設(shè)計(jì)師的我們突然收到產(chǎn)品經(jīng)理的修改建議,這時(shí)候我們需要及時(shí)的同步給開發(fā),或者給開發(fā)同事達(dá)成共識(shí)信息,因?yàn)楹芏鄷r(shí)候,產(chǎn)品經(jīng)理讓我們修改的時(shí)候往往不會(huì)通知開發(fā),因?yàn)閷?duì)于產(chǎn)品經(jīng)理而言就是一個(gè)小的修改,例如改個(gè)位置、改個(gè)顏色等等,但不管是對(duì)我們還是對(duì)于開發(fā)其實(shí)都是比較重要的,不及時(shí)同步就會(huì)出現(xiàn)不好的結(jié)果,如果在測(cè)試階段沒有發(fā)現(xiàn)問(wèn)題,上線后就會(huì)造成設(shè)計(jì)師背鍋的情況。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

我曾經(jīng)在做一個(gè)頁(yè)面改版的時(shí)候,就遇到類似的問(wèn)題,當(dāng)時(shí)產(chǎn)品找到我說(shuō)改一個(gè)地方的交互,并且我也覺得那個(gè)交互方式應(yīng)該改,當(dāng)時(shí)的我以為產(chǎn)品經(jīng)理會(huì)同時(shí)告訴開發(fā)修改的地方,但是直到項(xiàng)目上線后開發(fā)都沒修改那個(gè)地方的交互,本來(lái)這個(gè)修改點(diǎn)是個(gè)小事情,誰(shuí)知?jiǎng)偤媚且粋€(gè)版本被用戶吐槽那個(gè)頁(yè)面的交互,結(jié)果可想而知領(lǐng)導(dǎo)拉個(gè)會(huì)議開始復(fù)盤,為什么沒有改,索性大家沒有互相甩鍋的情況,產(chǎn)品經(jīng)理說(shuō)沒有同步到開發(fā),而我也是幫產(chǎn)品兜了一下說(shuō)更新設(shè)計(jì)稿沒有告訴開發(fā),這個(gè)事情原本是個(gè)很小的事情,只需要我順口同步給開發(fā),就能夠避免的,就因?yàn)槲覜]有及時(shí)同步,造成用戶的反饋,影響了產(chǎn)品的體驗(yàn)。

所以各位設(shè)計(jì)師工作中如果遇到類似的事情一定要及時(shí)同步!

3. 統(tǒng)一需求目標(biāo)

開始講到過(guò),在需求評(píng)審的時(shí)候要與開發(fā)對(duì)齊目標(biāo),為什么需要對(duì)齊目標(biāo),因?yàn)橐粋€(gè)項(xiàng)目如果目標(biāo)不對(duì)齊,那么每個(gè)人都會(huì)站在自己的角度去做這個(gè)需求,設(shè)計(jì)師思考的是通過(guò)設(shè)計(jì)的手段,去幫助產(chǎn)品完成目標(biāo),如果設(shè)計(jì)稿上的復(fù)雜效果較多的時(shí)候,開發(fā)則會(huì)考慮你為什么這么做,這么做開發(fā)成本非常高等等,這也是說(shuō)為什么我們開始就講要輸出設(shè)計(jì)文檔,如果這一切都不存在的話就會(huì)導(dǎo)致開發(fā)是帶著疑問(wèn)寫我們的頁(yè)面,如果過(guò)程中在修改需求什么的,那我們跟開發(fā)又要相愛相殺了。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

我的設(shè)計(jì)方式是通常是在產(chǎn)品評(píng)審階段就與開發(fā)明確講清楚,我大概要做什么樣的效果,什么的交互形式,預(yù)計(jì)什么時(shí)候會(huì)交初步方案,中途也可能會(huì)有修改的點(diǎn)等等,提前讓開發(fā)有個(gè)心理預(yù)期,避免在開發(fā)過(guò)程中產(chǎn)生抵抗情緒。

我的經(jīng)驗(yàn)

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

4. 輸出交互動(dòng)畫

如果在前期沒有時(shí)間進(jìn)行動(dòng)效設(shè)計(jì)并沒有關(guān)系,研發(fā)在開發(fā)過(guò)程中可以在把動(dòng)效方面給空出來(lái)后續(xù)寫,這里講的交互動(dòng)畫分為兩種,一種是展示的動(dòng)畫,一種是 ui 中的動(dòng)效。

展示動(dòng)畫

目的是為了告知開發(fā)頁(yè)面運(yùn)動(dòng)的軌跡,在 1-4 中講到我個(gè)人用的方法,大家如果是剛對(duì)接研發(fā)的話,建議還是輸出完整的交互動(dòng)畫,這里推薦一些工具 AE、Principle、Pixso、Figma 等。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

AE:大家就比較熟悉了,經(jīng)典的動(dòng)效繪制軟件,什么樣的效果都能實(shí)現(xiàn),但是使用成本比較高(不建議)

Principle:國(guó)外的一款交互軟件,制作頁(yè)面交互很方面,可以直接導(dǎo)入 figma 和 sketch,由于是國(guó)外軟件需要使用英文界面,但是國(guó)內(nèi)也有漢化版。

Pixso:國(guó)產(chǎn)最新的設(shè)計(jì)軟件與 figma 類似,做交互的方式是使用多個(gè)頁(yè)面添加熱區(qū)進(jìn)行使用,具體體驗(yàn)如何還不清楚(可以用用)

Figma:設(shè)計(jì)軟件目前的天花板,流暢的體驗(yàn),支持頁(yè)面動(dòng)畫設(shè)計(jì),但是需要安裝插件才可以(建議使用)

動(dòng)效文件

這個(gè)比較重要!我們一定要與研發(fā)同事溝通好,產(chǎn)品內(nèi)使用什么樣格式的動(dòng)效文件,統(tǒng)一后能提升后續(xù)的開發(fā)效率,動(dòng)效格式使用亂套的話,后續(xù)我們做更新迭代時(shí)做替換會(huì)很麻煩,開發(fā)也同樣如此,這里推薦幾種動(dòng)效格式文件,分別是 GIF、json、pag、svga 這 4 種。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

GIF:傳統(tǒng)的動(dòng)效文件格式,優(yōu)點(diǎn)是學(xué)習(xí)成本低,第一個(gè)缺點(diǎn)是內(nèi)存大,圖片容易失真模糊,他的原理就是把每一幀的圖片融合在一起,最后形成動(dòng)畫,圖片越多,內(nèi)存越大,第二個(gè)缺點(diǎn)是占用產(chǎn)品資源,當(dāng)內(nèi)存過(guò)高時(shí),在加載時(shí)會(huì)出現(xiàn)卡頓。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

Json:該文件格式是通過(guò) Lottie 實(shí)現(xiàn)的,是 Airbnb 開發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開源工具,它的優(yōu)點(diǎn)就是內(nèi)存小、無(wú)需加載、動(dòng)畫不會(huì)失真,缺點(diǎn)呢就是支持得動(dòng)畫方式?jīng)]有 gif 那么全面,以及使用成本也比較高。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

具體使用步驟是需要我們裝 ae 插件 bodymovin,通過(guò)插件導(dǎo)出 json,常遇見的問(wèn)題就是在導(dǎo)出漸變動(dòng)畫時(shí),漸變效果會(huì)消失,這是因?yàn)槲覀?ae 安裝得都是中文版,而該插件更多的適配是英文版,不過(guò)沒關(guān)系這里可以把漸變效果的名字改為 gradient fill1 就可以了,如果多個(gè)漸變的話我們更改后面序列號(hào)就可以,比如 gradient fill1、gradient fill2、gradient fill3…,這里把漢化插件鏈接也給大家找到了。

網(wǎng)站鏈接:https://zdo.fun/?p=557

我的經(jīng)驗(yàn)

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

Pag:pag 是騰訊研發(fā)的一種技術(shù)文件,最初主要用于游戲動(dòng)畫和直播動(dòng)畫,用來(lái)解決復(fù)雜的動(dòng)畫效果,目前在 ui 頁(yè)面中運(yùn)用也比較多,優(yōu)點(diǎn)是占比內(nèi)存比 json 文件更小,支持的動(dòng)畫方式也更豐富,運(yùn)行時(shí)可編輯,缺點(diǎn)是適配原生有些問(wèn)題,壓縮位圖時(shí)會(huì)出現(xiàn)不顯示,這個(gè)軟件目前還在完善階段,我曾經(jīng)也使用過(guò),后來(lái)因?yàn)檫m配問(wèn)題就放棄了,感興趣的大家可以通過(guò)下面鏈接下載。

網(wǎng)站鏈接:https://pag.io/docs/install.html

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

svga:該文件格式的強(qiáng)大之處在于可以完整的將位圖轉(zhuǎn)換成二進(jìn)制代碼,并且內(nèi)存占比較于 json 更小,播放資源占用更低,并且技術(shù)上相對(duì)穩(wěn)定(建議使用)

網(wǎng)站鏈接:https://svga.io/designer.html

我們看下 svg 實(shí)現(xiàn)的效果

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

最后,我們一定要統(tǒng)一產(chǎn)品內(nèi)使用的動(dòng)效文件格式,這樣既方便我們,也方便開發(fā),讓開發(fā)看到我們?cè)O(shè)計(jì)師的嚴(yán)謹(jǐn)性,便于后續(xù)合作。


對(duì)接后應(yīng)該干什么


1. 跟進(jìn)開發(fā)進(jìn)度

作為設(shè)計(jì)師,我們需要實(shí)時(shí)了解開發(fā)的進(jìn)度,這樣能夠保證我們?cè)谶^(guò)程中掌握自己的設(shè)計(jì)節(jié)奏,什么時(shí)間交給開發(fā)動(dòng)效文件,如果進(jìn)行修改也可以不影響上線時(shí)間(當(dāng)然不建議這樣做),那么具體需要怎么跟進(jìn)呢,大概分為以下幾個(gè)維度。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

時(shí)間進(jìn)度跟進(jìn):

設(shè)計(jì)師可以時(shí)不時(shí)的問(wèn)一嘴,是否能按照正常的計(jì)劃時(shí)間節(jié)點(diǎn)提測(cè)(正常需求提交后,開發(fā)會(huì)給出開發(fā)排期,盡量按照時(shí)間排期走,否則項(xiàng)目進(jìn)度會(huì)變得很不可控)。

如果開發(fā)反饋時(shí)間會(huì)有延期風(fēng)險(xiǎn),那設(shè)計(jì)師第一時(shí)間就要了解原因,以及預(yù)計(jì)延期多久,然后自身評(píng)估以下對(duì)設(shè)計(jì)上是否有影響。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

需求變更跟進(jìn):

一般開發(fā)過(guò)程中,或多或少都會(huì)出現(xiàn)一些需求調(diào)整/變更的點(diǎn),那么其中就會(huì)涉及設(shè)計(jì)上的改動(dòng),改動(dòng)小的話產(chǎn)品經(jīng)理有時(shí)候會(huì)直接告訴我們,并不會(huì)告訴開發(fā),這時(shí)候如果身為設(shè)計(jì)師的我們要及時(shí)通知開發(fā),并說(shuō)明原因(避免爭(zhēng)論)。

并且,需求變更后,需要和開發(fā)評(píng)估新的項(xiàng)目上線時(shí)間點(diǎn),站在我們或者產(chǎn)品角度理解有時(shí)候我們認(rèn)為的修改,對(duì)于開發(fā)來(lái)講是耗費(fèi)時(shí)間較長(zhǎng)的,需要我們注意是否會(huì)影響上線時(shí)間。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

交互動(dòng)效實(shí)現(xiàn)跟進(jìn):

在 2-4 中講到我們要輸出交互動(dòng)畫,雖然我們輸出的動(dòng)畫很直觀,以及動(dòng)效文件也完整,但是避免不了認(rèn)知上的偏差,有時(shí)候開發(fā)會(huì)按照技術(shù)難度以及自身理解去完整交互效果,我們中途要隨時(shí)跟進(jìn)了解,避免開發(fā)在錯(cuò)誤的路上越走越遠(yuǎn)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

測(cè)試跟進(jìn):

及時(shí)了解該需求是否已經(jīng)提測(cè)、哪些還未提測(cè),若到了提測(cè)時(shí)間的功能未進(jìn)入測(cè)試,可以詢問(wèn)產(chǎn)品或開發(fā)什么原因,這樣對(duì)項(xiàng)目或設(shè)計(jì)師都是負(fù)責(zé)的。

另外一點(diǎn)是我們?cè)O(shè)計(jì)師需要在提測(cè)階段介入 UI 走查,因?yàn)楦鱾€(gè)公司或者項(xiàng)目測(cè)試時(shí)間有長(zhǎng)有短,所以我們要及時(shí)把 UI 走查工作介入進(jìn)去,給開發(fā)預(yù)留出修改時(shí)間,有的小公司不重視 UI 走查流程,這里我們就可以自驅(qū)進(jìn)行走查,主動(dòng)找測(cè)試同學(xué)了解提測(cè)時(shí)間,及時(shí)走查,保證頁(yè)面還原度。

2. 設(shè)計(jì)走查

走查是 UI 工作中最為重要的工作,它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶,下面我大致把走查的流程以及范圍給大家梳理下。

創(chuàng)建走查文檔

在 UI 走查階段,我們首先需要建立走查文檔便于開發(fā)瀏覽解決,走查文檔主要包含日期、版本、項(xiàng)目名稱、模塊、端口、問(wèn)題描述、修改狀態(tài)、圖片標(biāo)注,這樣一方面能夠讓問(wèn)題更加詳細(xì),體現(xiàn)設(shè)計(jì)師的專業(yè)度,一般我是使用在線表格去建立走查文檔,當(dāng)然這個(gè)看每個(gè)公司所使用的協(xié)作平臺(tái)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

開通手機(jī)權(quán)限

一般在走查移動(dòng)端產(chǎn)品時(shí),安裝測(cè)試包需要開通賬號(hào)權(quán)限,這里可以找公司的開發(fā)或者測(cè)試同事給開通,避免影響走查效率。

走查范圍

分為基礎(chǔ)走查、細(xì)節(jié)走查、適配走查

基礎(chǔ)走查包含字體、顏色、圖標(biāo)、間距、對(duì)齊方式等具體可根據(jù)產(chǎn)品形態(tài)進(jìn)行延伸,其中間距走查比較費(fèi)時(shí)間,需要我們通過(guò)測(cè)試機(jī)截圖后,按照倍數(shù)縮放到源文件內(nèi)進(jìn)行測(cè)量,測(cè)試機(jī)分辨率需要保證與設(shè)計(jì)稿一致,否則測(cè)量不準(zhǔn)確,例如設(shè)計(jì)圖是 375*812,以 ios 為例測(cè)試機(jī)則需要使用與 375*812 分辨率相同的尺寸測(cè)試。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

細(xì)節(jié)走查包含字體截字、按壓狀態(tài)、組件內(nèi)容、交互狀態(tài)

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

適配走查包含關(guān)鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識(shí)別度是否清晰

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

3. 避免添加復(fù)雜交互

在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想,并未達(dá)到預(yù)期,我們可以與開發(fā)進(jìn)行溝通是否可以修改,或者添加新的交互效果,因?yàn)樵谶@個(gè)階段我們重新設(shè)計(jì)或者定義一個(gè)新的交互動(dòng)效的話,會(huì)增加非常大的開發(fā)工作量,可能也會(huì)與開發(fā)產(chǎn)生爭(zhēng)吵,我們?cè)谶@個(gè)時(shí)期盡量避免這個(gè)問(wèn)題,如果實(shí)在沒有解決辦法的時(shí)候再去添加新的交互。

我在工作中,如果遇到這種事情,會(huì)分兩點(diǎn)考慮這個(gè)事情。

第一評(píng)估下當(dāng)下這個(gè)交互效果是否會(huì)影響用戶體驗(yàn),如果影響用戶體驗(yàn)我會(huì)要求開發(fā)必須 100%還原,當(dāng)然我會(huì)講述清楚為什么改,避免讓開發(fā)產(chǎn)生情緒抵抗。

第二是如果不影響用戶體驗(yàn),但是還原度沒有達(dá)到預(yù)期,我同樣會(huì)先找開發(fā)進(jìn)行溝通,例如按照交互稿還原會(huì)有什么困難,是時(shí)間上的困難還是技術(shù)上的困難,時(shí)間上如果困難我會(huì)溝通好下一期必須還原到位,技術(shù)上困難我一般會(huì)修改交互形式,盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

4. 數(shù)據(jù)追蹤

作為設(shè)計(jì)師在需求上線后并不代表需求就結(jié)束了,我們還需要追蹤數(shù)據(jù)情況是好是壞,為什么我們?cè)O(shè)計(jì)師要去追蹤這個(gè)數(shù)據(jù)呢,追蹤數(shù)據(jù)是為了讓我們?cè)诠ぷ髦刑嵘约旱脑O(shè)計(jì)價(jià)值,隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和,那么企業(yè)對(duì)于各個(gè)崗位的要求也跟互聯(lián)網(wǎng)初期不一樣,以前我們只需要畫畫圖交付就可以了,但是現(xiàn)在的企業(yè)更看重的是綜合能力,說(shuō)簡(jiǎn)單點(diǎn)就是做 UI 的人很多,優(yōu)秀的 UI 一樣很多,那么我們就得被迫提升核心競(jìng)爭(zhēng)力否則就是被淘汰。

而追蹤數(shù)據(jù)其實(shí)就是增加我們得核心競(jìng)爭(zhēng)力,同時(shí)也是能夠體現(xiàn)自己設(shè)計(jì)能力的一項(xiàng)內(nèi)容,設(shè)計(jì)最終是為商業(yè)而服務(wù)的,但我們不能嘴上說(shuō)說(shuō),而是要拿出實(shí)際的行動(dòng),這個(gè)行動(dòng)就是數(shù)據(jù),我們的設(shè)計(jì)如何為數(shù)據(jù)賦能的,如何幫業(yè)務(wù)達(dá)到目標(biāo)等等,數(shù)據(jù)如何分析是個(gè)很龐大的體系這里只講下我們身為設(shè)計(jì)師為什么需要追蹤數(shù)據(jù)。

簡(jiǎn)單講下工作中數(shù)據(jù)解析的案例。

下面是我做的一個(gè)直播商業(yè)化改版需求,改版背景呢是直播業(yè)務(wù)由原先的為 c 端用戶賦能改為,為 b 端企業(yè)賦能,通過(guò)與企業(yè)合作而產(chǎn)生價(jià)值,那么基于這個(gè)直播形態(tài)肯定是需要變化的,需求目標(biāo)由原先的「用戶收益」改為「企業(yè)收益」,新的目標(biāo)具體為提升企業(yè)品牌曝光點(diǎn)擊、互動(dòng)、預(yù)約人數(shù)、提升直播在企業(yè)客戶測(cè)的感知收益。

案例

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

基于這個(gè)目標(biāo),其實(shí)不難發(fā)現(xiàn),目標(biāo)已經(jīng)從用戶側(cè)改為大客戶,更多的是為企業(yè)去賦能,頁(yè)面的結(jié)構(gòu)肯定需要進(jìn)行變化的,左邊的圖呢是改版之前的,右邊的是改版之后的,那么我當(dāng)時(shí)的思路呢其實(shí)就是基于數(shù)據(jù)方面去進(jìn)行優(yōu)化。

整體:產(chǎn)品策略添加了二級(jí)浮窗用來(lái)承載更多內(nèi)容。

直播介紹:首先舊版策略是直播介紹對(duì)于用戶而言并不重要,用戶只需要通過(guò)看到直播標(biāo)題就能夠了解大致直播內(nèi)容,更多是以引導(dǎo)形式存在,所以信息外漏較少,而新的策略是講企業(yè)介紹默認(rèn)展示在二級(jí)浮窗內(nèi),用戶可選擇關(guān)閉,提升企業(yè)感知。

投遞簡(jiǎn)歷:舊版策略是需要側(cè)重用戶投遞率,因此在預(yù)約界面就展示入口,而新的策略是需要給企業(yè)強(qiáng)化觀看人數(shù)、預(yù)約人數(shù)從而提升客戶價(jià)值,基于這一點(diǎn),我當(dāng)時(shí)是通過(guò)數(shù)據(jù)后臺(tái)看了下預(yù)約頁(yè)面的點(diǎn)擊數(shù)據(jù),發(fā)現(xiàn)點(diǎn)擊率最最高的是「投遞簡(jiǎn)歷」入口,而「預(yù)約直播」入口點(diǎn)擊率相對(duì)較低,因此把投遞簡(jiǎn)歷入口調(diào)賬到浮窗 tab 區(qū)域,降低層級(jí),讓預(yù)約直播成為視覺焦點(diǎn),而上線后數(shù)據(jù)也是符合預(yù)期。

企業(yè)關(guān)注:將企業(yè)名稱與關(guān)注結(jié)合并且放大,提升關(guān)注量,強(qiáng)化企業(yè)品牌感知和數(shù)據(jù)感知,關(guān)注與預(yù)約直播兩者無(wú)論數(shù)據(jù)高低,都是符合企業(yè)目標(biāo),從而便于業(yè)務(wù)人員與企業(yè)進(jìn)行合作溝通。

設(shè)計(jì)實(shí)現(xiàn) 設(shè)計(jì)落地

從我這個(gè)案例中我們能清楚看到,基本上任何需求都是可以通過(guò)數(shù)據(jù)的維度,進(jìn)行優(yōu)化,并且通過(guò)量化指標(biāo)提升設(shè)計(jì)價(jià)值,無(wú)論對(duì)公司還是個(gè)人都有很大收益,并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對(duì)接時(shí),可以通過(guò)數(shù)據(jù)維度去促進(jìn)我們?cè)O(shè)計(jì)上的修改、完善等工作,這也是為什么說(shuō)我們需要對(duì)每個(gè)需求都要進(jìn)行數(shù)據(jù)追蹤。


總結(jié)


無(wú)論是對(duì)接前、對(duì)接中、對(duì)接后,在哪個(gè)階段都需要我們認(rèn)真對(duì)待,熟知這些細(xì)節(jié)后,才能更好的與開發(fā)合作,進(jìn)行項(xiàng)目推進(jìn),優(yōu)秀的設(shè)計(jì)師不僅是專業(yè)和技術(shù)上的成熟,還需要有協(xié)作上下游的能力,在很多團(tuán)隊(duì)中設(shè)計(jì)師跟開發(fā)都會(huì)面臨不一樣的挑戰(zhàn)最終可能會(huì)因?yàn)槟承﹩?wèn)題發(fā)生沖突,我們需要減少這樣的沖突。



作者:愛吃貓的魚



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

日歷

鏈接

個(gè)人資料

存檔