讓設(shè)計(jì)安全著陸

0 評論 1905 瀏覽 0 收藏 6 分鐘

經(jīng)過眾多Web2.0優(yōu)秀應(yīng)用的熏陶,互聯(lián)網(wǎng)用戶變得越來越挑剔,對易用性的要求越來越高。傳統(tǒng)意義上的“美工”已經(jīng)不能勝任用戶體驗(yàn)設(shè)計(jì)的工作。產(chǎn)品遇到設(shè)計(jì)問題時(shí)的狀況通常是,工程師花了很大力氣做出來的各種強(qiáng)大功能是用戶不需要的,而用戶的一些簡單的核心需求卻得不到滿足。為了突破產(chǎn)品設(shè)計(jì)的瓶頸,有的公司請來了用戶體驗(yàn)設(shè)計(jì)師,建立了自己的用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì),有的公司直接將產(chǎn)品的設(shè)計(jì)外包給專業(yè)的用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)。很快產(chǎn)品都有了好的設(shè)計(jì),但是事情好像沒有那么簡單。

我們的信息架構(gòu)師Maklu童鞋最近在推上抱怨:“各種營銷活動的代號直接當(dāng)成業(yè)務(wù)放在了界面里,系統(tǒng)還有各種的錯(cuò)誤,好設(shè)計(jì)頂個(gè)錘子,最后出來的還是一個(gè)樣子,還是那坨屎?!边@是他參與一個(gè)設(shè)計(jì)外包項(xiàng)目,并目睹項(xiàng)目上線之后發(fā)出的感概。

在為客戶提供設(shè)計(jì)外包服務(wù)的過程中,如何讓我們的設(shè)計(jì)更好的被實(shí)現(xiàn),而不會出現(xiàn)白天鵝變丑小鴨的悲劇,是一直是困擾著我們的難題。經(jīng)歷了無數(shù)次的失敗、反思和總結(jié)的循環(huán)之后,我們積累了一些經(jīng)驗(yàn)和心得,在這里與大家分享。

在設(shè)計(jì)落地的過程中,我們遇到的最普遍的問題是設(shè)計(jì)師與工程師之間缺乏溝通。設(shè)計(jì)師指責(zé)工程師沒有100%的還原設(shè)計(jì),工程師則反擊設(shè)計(jì)師“站著說話不腰疼”,設(shè)計(jì)圖的效果無法實(shí)現(xiàn)或者成本太高。后來就發(fā)展成兩方各自為政、互不信任,最后系統(tǒng)開發(fā)出來完全走樣。為了避免這樣的問題,我們采取的方案是,工程師從一開始就參與到設(shè)計(jì)中來,設(shè)計(jì)師的每一個(gè)階段性成果物都需要跟工程師討論,確認(rèn)技術(shù)上是否OK、成本是否適中。這樣既能避免產(chǎn)生天馬行空無法落地的設(shè)計(jì),又能加深工程師對設(shè)計(jì)圖的理解。

另一個(gè)讓我們摳腦殼的問題是,工程師對設(shè)計(jì)圖的執(zhí)行力參差不齊。設(shè)計(jì)師在制作設(shè)計(jì)圖時(shí)對留白、字體大小、字體顏色這些細(xì)節(jié)都是嚴(yán)格控制的,然而大多數(shù)工程師在開發(fā)的時(shí)候并不會考慮的那么嚴(yán)謹(jǐn)和細(xì)致,有的工程師處理元素間的留白靠的是自由發(fā)揮,有的在處理文字時(shí)則是“跟著感覺走,差不多就行”,每個(gè)人的標(biāo)準(zhǔn)都不一樣,最后的結(jié)果就是同一個(gè)系統(tǒng)的頁面有不同的視覺效果,跟設(shè)計(jì)圖相比都有差距。為了解決這個(gè)問題,我們在設(shè)計(jì)成果交付物中引入了視覺規(guī)范文檔。視覺規(guī)范文檔的形式可以是ppt或者psd,里面嚴(yán)格規(guī)定了設(shè)計(jì)圖中的每一個(gè)細(xì)節(jié),包括元素的高寬、留白,字體的大小、顏色等,是指導(dǎo)前端開發(fā)的標(biāo)準(zhǔn)文檔。

視覺規(guī)范

另外,在與客戶的開發(fā)人員合作的過程中,我們發(fā)現(xiàn)前端開發(fā)的效率普遍比較低。問題主要在于前端開發(fā)資源的重用性不高,沒有積累,前端開發(fā)人員之間缺乏協(xié)作和分享。典型的情況是,同一個(gè)前端組件在不同的頁面被開發(fā)了兩次,或者前任工程師在離職之后沒有留下文檔造成一些復(fù)雜的組件無法擴(kuò)展和維護(hù)。為了幫助客戶解決這類問題,更順利的實(shí)現(xiàn)我們的設(shè)計(jì),我們?yōu)椴煌捻?xiàng)目建立了前端UI組件庫,將項(xiàng)目中重用性高的復(fù)雜組件放到組件庫中,以demo加文檔的形式組織起來,讓前端開發(fā)資源能夠積累和分享。目前我們的UI庫還沒有開放,但是我們正在策劃一個(gè)前端UI組件開放平臺,大家可以在上面進(jìn)行前端開發(fā)的協(xié)作、積累和分享,我們也將把兩年來積累的前端開發(fā)資源開放出來,相信很快就能與大家見面。

UI組件庫

圖:UI組件庫

有視覺規(guī)范這樣的起落架減震,有良好的溝通作為降落傘減速,還有前端組件庫這樣的反作用力引擎,這三重保險(xiǎn)讓我們的優(yōu)秀設(shè)計(jì)在著陸的時(shí)候不至于臉蛋先著地,變成Maklu所說的一陀屎。

源地址:http://mycolorway.com/blo……esign-safely/

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!