作為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師,在和前端開(kāi)發(fā)職員溝通時(shí)你是否經(jīng)常會(huì)聽(tīng)到這樣的聲音:
—— “大姐,給點(diǎn)專(zhuān)業(yè)精神好不好,這個(gè)表格是自適應(yīng)的,你這樣設(shè)計(jì)頁(yè)面不好擴(kuò)展啊…”
——“用ajax不是不行,不過(guò)你要事前給我說(shuō)嘛,你不說(shuō)我怎么知道呢,你說(shuō)了我就知道了嘛…”
面對(duì)這些回答,除了欲哭無(wú)淚,你有沒(méi)有想過(guò)是什么原因?qū)е鲁霈F(xiàn)這樣溝通偏差,有沒(méi)有解決的辦法呢?設(shè)計(jì)師需要了解哪些知識(shí)才能和前端開(kāi)發(fā)職員來(lái)更好的合作呢?
首先得從這兩者之間都有哪些不同說(shuō)起。我以為最主要原因在于設(shè)計(jì)師和前端開(kāi)發(fā)在部分中不同的職責(zé)劃分。通常情況下,產(chǎn)品設(shè)計(jì)師的產(chǎn)出物多是線框圖(wireframe),視覺(jué)設(shè)計(jì)稿(mockup)等,前端負(fù)責(zé)編寫(xiě)HTML,CSS等代碼(demo),有時(shí)還會(huì)根據(jù)需要編寫(xiě)程序代碼(如 JSP/ASP/PHP/Rails),光看這些分工,就知道不同的角色對(duì)產(chǎn)品的理解和著重點(diǎn)是截然不同的。
按照正常的項(xiàng)目流程,設(shè)計(jì)團(tuán)隊(duì)通常需要先設(shè)計(jì)出界面mockup或demo(HTML/CSS),接著開(kāi)發(fā)職員才開(kāi)始正式編寫(xiě)代碼。然而多數(shù)情況下為了保證項(xiàng)目進(jìn)度,需要開(kāi)發(fā)職員和設(shè)計(jì)師在項(xiàng)目前期就參與進(jìn)來(lái),不同的是,開(kāi)發(fā)職員多是審核通過(guò)項(xiàng)目計(jì)劃書(shū)(PRD)和原型評(píng)審,她們更關(guān)注于技術(shù)可實(shí)現(xiàn)性;而設(shè)計(jì)師更傾向理解產(chǎn)品經(jīng)理的項(xiàng)目需求以及通過(guò)什么樣方式來(lái)解決需求從而達(dá)到提升用戶(hù)體驗(yàn)的目的,她們更關(guān)注創(chuàng)意的可行性。
更令人糾結(jié)的是前端開(kāi)發(fā)對(duì)“界面元素”和“交互動(dòng)作”的理解和設(shè)計(jì)師有很大不同。同一的界面元素對(duì)網(wǎng)站的前端架構(gòu)也會(huì)很有好處,他們更關(guān)注代碼的可重用性。 一方面是CSS:前端開(kāi)發(fā)要實(shí)現(xiàn)設(shè)計(jì)師(或者自己引以為自豪)的界面設(shè)計(jì),假如新頁(yè)面的設(shè)計(jì)和原先頁(yè)面中相同功能元素的設(shè)計(jì)有出進(jìn),哪怕是一點(diǎn)出進(jìn),都有可能帶來(lái)很多重復(fù)的工作,將CSS文件變得越來(lái)越臃腫。另一方面是JavaScript:對(duì)于很多應(yīng)用型網(wǎng)站,會(huì)有很多需要JavaScript的頁(yè)面交互元素。這些交互元素的視覺(jué)或者行為設(shè)計(jì)與之前的有出進(jìn),也會(huì)讓前端工程師為了既保證代碼的健壯性來(lái)方便后端工程師的開(kāi)發(fā),又為了實(shí)現(xiàn)一些設(shè)計(jì)上的差別而對(duì)現(xiàn)有代碼修修補(bǔ)補(bǔ)忙得不可開(kāi)交,最可怕的是終極沉沒(méi)于bug的海洋…而交互設(shè)計(jì)師的側(cè)重點(diǎn)并不在程序的編碼實(shí)現(xiàn),而注重于用戶(hù)如何最好地與系統(tǒng)交互操縱,在設(shè)計(jì)中重點(diǎn)需要考慮的是界面元素的易用性:比如他們會(huì)考慮到并非每個(gè)用戶(hù)都是計(jì)算機(jī)的熟練用戶(hù),面對(duì)隱躲的層和特殊設(shè)計(jì)的菜單可能會(huì)抓瞎,用戶(hù)不見(jiàn)得能明白雙擊左鍵能自動(dòng)滾屏或者怎樣能讓自動(dòng)滾屏停下來(lái),直接看最下面的結(jié)果?總之,設(shè)計(jì)師(完美主義者愈甚)會(huì)不斷完善產(chǎn)品,來(lái)滿(mǎn)足更好的用戶(hù)體驗(yàn)。
那么設(shè)計(jì)師怎樣來(lái)解決這些題目呢?我覺(jué)得最重要的就是“溝通”,這是最根本的解決辦法。在原型設(shè)計(jì)前期就要針對(duì)自己想法的詢(xún)問(wèn)前端開(kāi)發(fā)在技術(shù)上的可行性,在界面設(shè)計(jì)過(guò)程中會(huì)有很多精確到像素級(jí)的標(biāo)準(zhǔn),同樣要和他們溝通了解代碼的實(shí)現(xiàn)方式,不然很有可能做無(wú)用功。在提交界面設(shè)計(jì)之后,交互設(shè)計(jì)師也要主動(dòng)出擊,不定時(shí)的往關(guān)注demo的實(shí)現(xiàn)效果(mockup和demo多多少少存在不一致,在后期需要跟進(jìn);另外涉及到復(fù)雜的交互方式前端很可能會(huì)忘記或者搞混,也需要不斷的往核查)。另外建立標(biāo)準(zhǔn)的文檔治理和設(shè)計(jì)規(guī)范也很重要,好在我們開(kāi)始建立設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)(淘斯基和TPL 模式庫(kù))的文檔治理方法(SVN),包括:
制定文件命名標(biāo)準(zhǔn) 設(shè)定文件同一路徑 保存原始創(chuàng)作文件(例如PSD、Fla源文件) 終極完成文件(經(jīng)過(guò)產(chǎn)品經(jīng)理認(rèn)可的文件) 視覺(jué)模式庫(kù)和與其對(duì)應(yīng)的代碼模式庫(kù)
當(dāng)然,前端都很忙的,經(jīng)常往“騷擾”他們會(huì)被鄙視的。跟他們溝通也需要技巧和一些基礎(chǔ)熟悉,我總結(jié)了以下幾點(diǎn)需要謹(jǐn)記:
網(wǎng)站的頁(yè)面是動(dòng)態(tài)的。
photoshop呈現(xiàn)的是靜態(tài)的東西,而網(wǎng)站頁(yè)面是動(dòng)態(tài)的展現(xiàn)內(nèi)容、布局和交互。設(shè)計(jì)師過(guò)多關(guān)注用戶(hù)體驗(yàn)層面,很難對(duì)所有的細(xì)節(jié)做到面面俱到。而前端(包括開(kāi)發(fā))需要照顧到所有的功能點(diǎn)涉及到的頁(yè)面,因此在前期要考慮的盡量周全,別讓別人幫我們收拾爛攤子。 關(guān)注新技術(shù)。
網(wǎng)頁(yè)設(shè)計(jì)缺少技術(shù)支持永遠(yuǎn)只是藝術(shù)。設(shè)計(jì)師必須經(jīng)常關(guān)注新的技術(shù)和交互方式,這樣才能在設(shè)計(jì)的時(shí)候提供多種解決方案,才能權(quán)衡利弊找到最優(yōu)化的方案。 界面元素的標(biāo)準(zhǔn)化和同一。
前端關(guān)注代碼的可重用性,設(shè)計(jì)師關(guān)注新創(chuàng)意。因此在設(shè)計(jì)前期就要考慮哪些元素和交互方式既可以滿(mǎn)足用戶(hù)體驗(yàn)又能夠被重復(fù)使用,以此來(lái)進(jìn)步效率。 團(tuán)隊(duì)合作很重要。
設(shè)計(jì)師很輕易沉醉在自己的小世界里不能自拔,這是我們經(jīng)常犯的通病?!皽贤ā笔菆F(tuán)隊(duì)合作的關(guān)鍵,一切皆在溝通。 相信自己。
前端通常出于不同的原因?qū)σ恍┙换シ绞娇尚行宰龀雠卸?,比如代碼復(fù)雜程度,技術(shù)可實(shí)現(xiàn)性等等。好的設(shè)計(jì)師需要有一些超前意識(shí)和冒險(xiǎn)精神,當(dāng)他們受 新技術(shù)的激發(fā),以為它能夠大大提升用戶(hù)體驗(yàn)的時(shí)候,就需要把它當(dāng)作挑戰(zhàn)來(lái)實(shí)現(xiàn)。在對(duì)技術(shù)的深進(jìn)了解后往說(shuō)服前端一起努力實(shí)現(xiàn)。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)站標(biāo)題:產(chǎn)品設(shè)計(jì)師和前端開(kāi)發(fā)人員之間的溝通
本文來(lái)源:http://m.newbst.com/news15/315515.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)