設(shè)計(jì)師也能做到的開發(fā)成本預(yù)估
身為一名具有開發(fā)背景的設(shè)計(jì)師,我來(lái)講講程序員是怎么思考你的設(shè)計(jì)稿的;再介紹一個(gè)比較簡(jiǎn)單的開發(fā)成本評(píng)估方法,有助于你自行評(píng)估自己的設(shè)計(jì)稿,這樣你的設(shè)計(jì)稿落地可能性會(huì)高一些。
所謂術(shù)業(yè)有專攻,設(shè)計(jì)師不懂開發(fā)很正常,但設(shè)計(jì)稿能否落地最終還是得看程序員能否實(shí)現(xiàn)出來(lái)。這時(shí)候問題來(lái)了,有些設(shè)計(jì)師的創(chuàng)意很天馬行空,但拿到程序員面前程序員說不可能實(shí)現(xiàn)時(shí),簡(jiǎn)直心如死灰,內(nèi)心萬(wàn)馬奔騰:這都做不了,**。此刻程序員心理:連這個(gè)常識(shí)都不知道,我都不想說話了。
為什么大家都覺得對(duì)牛彈琴?設(shè)計(jì)師大多數(shù)是藝術(shù)生出身和右腦思維者,比較擅長(zhǎng)空間想象、藝術(shù)等方面的學(xué)習(xí)和工作;程序員基本是理科生出身和左腦思維者,比較擅長(zhǎng)邏輯推理等方面的學(xué)習(xí)和工作,所以可以認(rèn)為兩者的思維方式不太一樣。
估計(jì)大多數(shù)設(shè)計(jì)師聽到“這個(gè)開發(fā)成本很大”“這個(gè)根本無(wú)法實(shí)現(xiàn)”時(shí)都會(huì)堅(jiān)信不疑,即使懷疑也不知道怎么去證明成本不是很大或者可以實(shí)現(xiàn)出來(lái),然后跑去找降級(jí)方案,甚至最終方案和最佳方案有很大差距。
首先要非常非??陀^的說一件事,程序員最喜歡說的一句話“只要你給了方案我都能給你實(shí)現(xiàn)出來(lái)”這句話是基本沒錯(cuò)的,因?yàn)橹灰谐渥愕臅r(shí)間去想和實(shí)現(xiàn),沒有解決不了方案。那為什么又用“這個(gè)開發(fā)成本很大”“這個(gè)根本無(wú)法實(shí)現(xiàn)”而拒絕你的方案呢?最終還是時(shí)間問題,但決定時(shí)間最終還是由方案難度以及程序員的能力如智商,經(jīng)驗(yàn)和編程能力和人力所決定,抽象概括為一個(gè)反比例函數(shù)Y=Z/X(Z為常量)。
由于時(shí)間有限,程序員不想把時(shí)間浪費(fèi)在一些對(duì)自己沒有產(chǎn)生價(jià)值的工作上如調(diào)視覺細(xì)節(jié),我先簡(jiǎn)單介紹一下程序員想做和不想做的事情:
說一點(diǎn)動(dòng)效實(shí)現(xiàn)。動(dòng)效實(shí)現(xiàn)一直是國(guó)內(nèi)大部分程序員的短板,首先大部分計(jì)算機(jī)專業(yè)沒有專門教前端或者客戶端開發(fā)的課程,更不用說動(dòng)效實(shí)現(xiàn)教學(xué);加上網(wǎng)上缺乏相關(guān)資源以及動(dòng)效實(shí)現(xiàn)強(qiáng)依賴設(shè)計(jì)(自己?jiǎn)胃刹涣耍?,所以程序員學(xué)習(xí)動(dòng)效開發(fā)相當(dāng)困難。好的動(dòng)效需要慢慢調(diào)整出來(lái)十分消耗時(shí)間,所以大部分程序員不喜歡把時(shí)間浪費(fèi)在動(dòng)效實(shí)現(xiàn)上。#逼著一個(gè)人干短板的事情估計(jì)誰(shuí)也不愿意,設(shè)計(jì)師應(yīng)該要理解#
在項(xiàng)目流程上,設(shè)計(jì)屬于開發(fā)的上游,所以設(shè)計(jì)師有義務(wù)對(duì)自己的設(shè)計(jì)稿把關(guān)后才交付給開發(fā)。身為一名具有開發(fā)背景的設(shè)計(jì)師,我來(lái)講講程序員是怎么思考你的設(shè)計(jì)稿的,再介紹一個(gè)比較簡(jiǎn)單的開發(fā)成本評(píng)估方法有助于你自行評(píng)估自己的設(shè)計(jì)稿,這樣你的設(shè)計(jì)稿落地可能性會(huì)高一些。
先對(duì)比一下設(shè)計(jì)師和程序員如何看待整個(gè)產(chǎn)品:
從圖上可知道設(shè)計(jì)師關(guān)注的流程在程序員眼里等于整個(gè)產(chǎn)品的業(yè)務(wù)邏輯和全局架構(gòu)的實(shí)現(xiàn),思考點(diǎn)遠(yuǎn)比流程要復(fù)雜很多;設(shè)計(jì)師也一直忽略(準(zhǔn)確點(diǎn)是無(wú)法關(guān)注)性能的問題。
再了解一下程序員拿到你的設(shè)計(jì)稿如何第一時(shí)間快速評(píng)估技術(shù)成本的:
(在新標(biāo)簽頁(yè)中打開,即可查看大圖)
再了解一下程序員在開發(fā)時(shí)是如何審視整套方案并再次評(píng)估技術(shù)成本的(已與多名BAT程序員確認(rèn)過)
由于預(yù)估很難做到深入評(píng)估,所以在后期開發(fā)時(shí)會(huì)暴露出更多與實(shí)現(xiàn)架構(gòu)和業(yè)務(wù)邏輯相關(guān)的問題。設(shè)計(jì)師可以通過該圖對(duì)自己的設(shè)計(jì)稿進(jìn)行技術(shù)成本預(yù)估,但最終評(píng)估需要結(jié)合實(shí)際實(shí)現(xiàn)架構(gòu)和業(yè)務(wù)邏輯進(jìn)行實(shí)際分析。
該圖標(biāo)注的“設(shè)計(jì)師無(wú)法察覺”是專業(yè)技能上的壁壘,即使設(shè)計(jì)師懂點(diǎn)代碼最多只知道這個(gè)界面怎么搭建起來(lái),但算法和實(shí)現(xiàn)架構(gòu)等方面仍是接觸不到的,所以設(shè)計(jì)師可以不用指望懂點(diǎn)html css就能和程序員平起平坐“聊技術(shù)”,在一個(gè)自己毫無(wú)接觸過的領(lǐng)域和人家過招簡(jiǎn)直就是找死關(guān)鍵是不知道怎么死。
上面那句話估計(jì)是大多設(shè)計(jì)師希望懂點(diǎn)代碼的原因,即使接觸不了技術(shù)壁壘,設(shè)計(jì)師仍有其他途徑了解技術(shù)成本高的背后原因以及找到能落地的最佳方案。
- 多了解開發(fā)上的專業(yè)術(shù)語(yǔ)和自己開發(fā)團(tuán)隊(duì)的獨(dú)有術(shù)語(yǔ)。
- 將代碼理解成一個(gè)拼圖。每塊拼圖都用一個(gè)術(shù)語(yǔ)或者專業(yè)名詞代替,了解該拼圖怎么使用(input)以及用途是什么(output),每塊拼圖的output可能決定著下一塊拼圖的input。
- 站在更高的層面看待問題。程序員和架構(gòu)師的區(qū)別是程序員是寫代碼的,架構(gòu)師是負(fù)責(zé)整體實(shí)現(xiàn)框架和拼圖設(shè)計(jì)以及將每塊拼圖順序整理好,再讓程序員去實(shí)現(xiàn)每塊拼圖。即使設(shè)計(jì)師不懂寫代碼,也可以站在架構(gòu)師小弟的層面去學(xué)習(xí)看待整個(gè)產(chǎn)品架構(gòu)。如果有類拼圖突然更改了使用方法,而這類拼圖又被沿用到各個(gè)領(lǐng)域,這時(shí)候你應(yīng)該能大概判斷出這個(gè)實(shí)現(xiàn)成本有點(diǎn)大。
- 有意識(shí)去判斷數(shù)據(jù)間的聯(lián)系,學(xué)會(huì)了解每個(gè)數(shù)據(jù)間的聯(lián)系。例如耳朵鼻子嘴巴都屬于一個(gè)集合“臉”,無(wú)名指食指屬于一個(gè)集合“手”,而“無(wú)名指動(dòng)嘴就動(dòng)”屬于不同集合間數(shù)據(jù)的聯(lián)動(dòng),本來(lái)無(wú)名指動(dòng)跟嘴動(dòng)就毫無(wú)關(guān)系,神醫(yī)辛辛苦苦把關(guān)系建立起來(lái),然后你微微一笑告訴神醫(yī)其實(shí)我想無(wú)名指動(dòng)則耳朵動(dòng),結(jié)果是神醫(yī)微微一笑看著你倒在血泊里。
- 學(xué)會(huì)判斷產(chǎn)生高并發(fā)的問題。高并發(fā)的難度最主要是很多用戶同一時(shí)間訪問服務(wù)器抓取數(shù)據(jù)庫(kù)信息,甚至需要在服務(wù)器上對(duì)數(shù)據(jù)進(jìn)行處理??梢岳斫鉃椤盁o(wú)名指動(dòng)自己趴下”的無(wú)理需求變?yōu)楦鼮闊o(wú)理的“無(wú)名指動(dòng)瞬間整個(gè)學(xué)校學(xué)生都趴下”,工作量和難度上升幾個(gè)指數(shù)級(jí)別。設(shè)計(jì)師需要判斷自己的設(shè)計(jì)稿是否存在數(shù)據(jù)實(shí)時(shí)動(dòng)態(tài)變化并且大量用戶實(shí)時(shí)拉取該數(shù)據(jù)的情況,與程序員溝通以及做好相關(guān)處理。
- 多用Google學(xué)會(huì)搜索。算法難度大不大這個(gè)要根據(jù)具體功能具體哪個(gè)程序員實(shí)現(xiàn)來(lái)判斷,設(shè)計(jì)師無(wú)法評(píng)估。如果真的解決不了算法問題,你可以在網(wǎng)上找到相應(yīng)的算法或解決方案提供給程序員讓他們重新評(píng)估實(shí)現(xiàn)難度。#這個(gè)非常難做到#
該圖標(biāo)注的“業(yè)務(wù)邏輯(設(shè)計(jì)師甚少考慮)”更多是指功能和流程,以及它們所影響的覆蓋面;再深入一點(diǎn)即是剛剛所述拼圖的順序以及改動(dòng)拼圖所造成的影響。這需要設(shè)計(jì)師對(duì)產(chǎn)品整體功能和流程有全局的認(rèn)識(shí)和把控。
以上方法更多關(guān)注整體開發(fā)成本,這有一定的學(xué)習(xí)成本和難度;接下來(lái)我介紹一下關(guān)于界面開發(fā)成本評(píng)估并可迅速上手的方法。
為了更好解釋開發(fā)成本,我將開發(fā)成本進(jìn)一步拆分為技術(shù)成本,時(shí)間成本和心理成本。技術(shù)成本已在上文所述,界面實(shí)現(xiàn)除動(dòng)效外開發(fā)成本不會(huì)很高;時(shí)間成本需要在實(shí)際項(xiàng)目中根據(jù)工作量與程序員的能力和人數(shù)進(jìn)行評(píng)估;心理成本是指該程序員愿不愿意做#很無(wú)奈但可以其他手段解決的一項(xiàng)成本#。設(shè)計(jì)師可以根據(jù)以下流程來(lái)預(yù)估開發(fā)成本。
*校驗(yàn)成本屬于時(shí)間成本的一部分;數(shù)字僅表示量化成本間的差距,為個(gè)人觀點(diǎn)僅供參考,最終成本需要按照實(shí)際情況而定。
最后再給一些設(shè)計(jì)稿標(biāo)注的建議,有利于后期開發(fā)完成后的UI Review(視覺還原)。
- 復(fù)雜的設(shè)計(jì)稿最好能標(biāo)注圖層層級(jí),有利于開發(fā)理解你的設(shè)計(jì)稿層級(jí)關(guān)系(貌似沒見過有設(shè)計(jì)師這樣做)
- 可以簡(jiǎn)單了解一下iOS,Android的布局方式如LinearLayout(線性布局)、AbsoluteLayout(絕對(duì)布局)、TableLayout(表格布局)、RelativeLayout(相對(duì)布局)等等,不同布局可以有更為合理的標(biāo)注方法。
- 了解Margin(容器外間距),Padding(容器內(nèi)間距)是什么。所有的間距都是由這兩個(gè)屬性決定,而不只PSD里兩個(gè)圖層間的距離,設(shè)計(jì)師需要知道這一點(diǎn)。
- 可以考慮在3px或4px倍數(shù)的基礎(chǔ)上設(shè)計(jì)。盡可能減少多樣化的間距,例如有些7px有些9px,在程序員的眼里7px跟9px沒什么區(qū)別,所以在寫代碼時(shí)不會(huì)嚴(yán)格按照你的標(biāo)注進(jìn)行開發(fā),然后就有勞設(shè)計(jì)師的像素眼了。
- 動(dòng)效實(shí)現(xiàn)上盡可能自己先拆好分動(dòng)作和時(shí)間后再交給開發(fā),參數(shù)調(diào)節(jié)等可以讓開發(fā)實(shí)現(xiàn)完再統(tǒng)一修改。
設(shè)計(jì)和開發(fā)一樣都需要有理有據(jù)。這些經(jīng)驗(yàn)和技巧能幫助我在設(shè)計(jì)階段能更好地考慮開發(fā)成本,減少了后期因?yàn)殚_發(fā)成本原因重新改稿的幾率;更重要的是它能更好地輔助我實(shí)現(xiàn)想法,也可以在限制條件下做到更好的設(shè)計(jì),或者低成本實(shí)現(xiàn)最佳方案。
以上就是我身為設(shè)計(jì)師和程序員的一些經(jīng)驗(yàn),希望對(duì)大家有幫助。
作者:薛志榮(微信公眾號(hào):薛志榮),百度交互設(shè)計(jì)師,二年級(jí)生
本文由 @薛志榮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 unsplash
點(diǎn)個(gè)贊
受教了
受教了,感謝