手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

必殺技!視覺設(shè)計(jì)師是怎樣讓前端工程師100%實(shí)現(xiàn)設(shè)計(jì)效果的?

2015-3-27    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.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ù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源:http://www.mobileui.cn/frontend-fully-achieve-design.html

 如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

前言:今天的文章得到了三位設(shè)計(jì)師的總結(jié),同為設(shè)計(jì)師是否常常為了一像素苦口婆心去勸說工程師,為了能盡可能還原設(shè)計(jì)稿而費(fèi)盡口舌。。。這里或許能給你解決問題的必殺技>>>

陳希 Chris(魅族Flyme產(chǎn)品體驗(yàn)設(shè)計(jì)師):這是一個(gè)經(jīng)常被討論的問題,「創(chuàng)新設(shè)計(jì)能力 & 跟進(jìn)還原能力」。這是一個(gè)商業(yè)設(shè)計(jì)師而非藝術(shù)家的兩重技能要素,同樣重要,缺一不可,甚至在很多時(shí)候后者的作用力會(huì)更大,畢竟我們還是要做一個(gè)落地的商業(yè)產(chǎn)品而不是意淫的概念稿。這是任何一個(gè)在職的商業(yè)設(shè)計(jì)師能力模型之內(nèi)不能被忽視的要素之一。

1:效果實(shí)現(xiàn)難度
設(shè)計(jì)師天馬行空的大腦會(huì)迸發(fā)出各種奇思妙想,例如一個(gè)看起來酷炫的動(dòng)畫,結(jié)果跑到工程師面前,工程師很犯難的表示做不了,或者硬著頭皮做到最后也發(fā)現(xiàn)不盡人意。所以前期對(duì)實(shí)現(xiàn)難度的基本溝通是必要的,很多時(shí)候,酷炫的效果并不是拯救設(shè)計(jì)的唯一方式,反而,大多時(shí)候我更傾向于樸素的手法來解決問題??犰诺男Ч皇潜匾模清\上添花的,需量力而行。

2:明確的規(guī)范
任何時(shí)候不要小看規(guī)范的作用力,剛?cè)胄械哪骋欢螘r(shí)間我經(jīng)常喜歡不做規(guī)范,直接搬個(gè)凳子到開發(fā)工程師面前指指點(diǎn)點(diǎn)(好在和開發(fā)關(guān)系比較好,游戲好基友,不然我可能都沒命活到今天),看似非常具有效率,但這種效率僅僅適合單槍匹馬戰(zhàn)斗時(shí),涉及到團(tuán)隊(duì)協(xié)作,幾個(gè)設(shè)計(jì)師面對(duì)幾個(gè)開發(fā)甚至更多時(shí),規(guī)范的作用力就顯得十足重要。

規(guī)范的編寫盡可能讓開發(fā)少動(dòng)腦,例如交互原則「Don’t Make Me Think」一樣,不要讓開發(fā)費(fèi)很多精力在理解規(guī)范,規(guī)范能多傻就多傻。試舉一例,如下:

見過太多設(shè)計(jì)師如右圖一樣標(biāo)注規(guī)范,事實(shí)上,圖片的實(shí)際畫布尺寸是左側(cè)藍(lán)色框的范圍,所以在標(biāo)注規(guī)范時(shí)一定要如左圖所示,否則開發(fā)還要量多一遍你的空白像素。

包括標(biāo)注出不同情況(dock欄)時(shí)的不同規(guī)范,或在備注欄告知開發(fā)排列方法(例如控制邊距,橫向平均排列)

3:語(yǔ)言轉(zhuǎn)化
將視覺語(yǔ)言轉(zhuǎn)化為開發(fā)語(yǔ)言,每個(gè)人對(duì)形體的觀感是不同的,設(shè)計(jì)師很多接受過美術(shù)方面訓(xùn)練,對(duì)造型的比例有一定認(rèn)知,可以感覺細(xì)微的視覺差異,但不意味著你可以要求開發(fā)同學(xué)也如你一樣,過去的工作經(jīng)驗(yàn)中,也經(jīng)常聽到如下對(duì)話:

「天吶,這兩個(gè)圖完全不同啊,你怎么能做成這個(gè)樣子」
「???不同么?我看上去差不多啊」
「你瞎啊,這么明顯的不同你都看不出來」
「。。?!?

所以需要轉(zhuǎn)化語(yǔ)言讓開發(fā)能夠輕易的明白,將抽象的感性內(nèi)容轉(zhuǎn)化為可量化的理性數(shù)字。例如動(dòng)畫運(yùn)動(dòng)軌跡,靠開發(fā)觀察運(yùn)動(dòng)軌跡幾乎是不可能的,所以需要轉(zhuǎn)化你的語(yǔ)言讓開發(fā)更容易明白。

4:反復(fù)驗(yàn)收
對(duì)每一個(gè)節(jié)點(diǎn)都要進(jìn)行驗(yàn)收,多次驗(yàn)收可以讓你及時(shí)了解動(dòng)態(tài),如出現(xiàn)問題也可以及時(shí)的做出修改反饋。即使做到以上幾點(diǎn),開發(fā)也不是能完全理解你想表達(dá),所以需要非常頻繁的同步信息,而不是做的七七八八了,突然發(fā)現(xiàn)這里有問題,那個(gè)時(shí)候再來改,時(shí)間可能已經(jīng)不夠用了。另外,只有做到以上幾點(diǎn),你才能理直氣壯的和開發(fā)定責(zé),否則,哪有臉找別人理論吶。

綜上所述,相信你已經(jīng)足夠明白「跟進(jìn)還原能力」對(duì)一個(gè)設(shè)計(jì)師的重要性,會(huì)做「好看」的設(shè)計(jì)師這個(gè)世界上大把,dribbble上一抓一大把,但能做好商業(yè)設(shè)計(jì),所需的能力遠(yuǎn)遠(yuǎn)不止于此,一個(gè)不具備將事情由始至終合格完成的設(shè)計(jì)師在任何時(shí)候都是不及格的,從結(jié)果導(dǎo)向上來看,甚至不如一個(gè)「你認(rèn)為比你低級(jí)很多」的設(shè)計(jì)師,擁有全方位的素質(zhì)才是「稀缺物種」。

————————————————分割線————————————————

酸梅干超人:首先,作為一個(gè)設(shè)計(jì)師,尤其是UI設(shè)計(jì)師,請(qǐng)跟我一起大聲念:必須掌握前端切圖流程??!

這可能意味著你得學(xué)會(huì)HTML+CSS,或者要長(zhǎng)時(shí)間和IOS或者安卓開發(fā)人員交流他們是怎么把圖片和文字排進(jìn)屏幕內(nèi)的。別老是抱怨你是設(shè)計(jì)怎么能去學(xué)碼農(nóng)的東西,設(shè)計(jì)人員對(duì)這些看似高深的源碼有本能的畏懼和厭惡。無(wú)論你所在的公司在項(xiàng)目人員配置上如何貼心到位,但如果你自己沒有掌握這些知識(shí)點(diǎn),就不要妄想最后實(shí)現(xiàn)環(huán)節(jié)上能順利收尾,因?yàn)槟銖某霭l(fā)點(diǎn)開始和程序員的認(rèn)知就不對(duì)稱,這些不對(duì)稱是矛盾和偏差的根源。

讓我們來舉舉例子:

例如你設(shè)計(jì)了這么個(gè)樣式,傾斜、層疊,你有沒有在設(shè)計(jì)的過程中考慮過這么設(shè)計(jì)的后果(國(guó)內(nèi)外高能前端請(qǐng)不要加入此列)?你在當(dāng)前寬度畫布中設(shè)計(jì)效果似乎還不錯(cuò),這注定該是個(gè)填滿瀏覽器顯示區(qū)域的設(shè)計(jì),但是放大后呢?1920寬下怎么辦,難道得是這個(gè)模樣??

因?yàn)樵谒骄€上無(wú)法直接延伸平鋪的設(shè)計(jì),在前端部分你讓開發(fā)人員怎么幫你填補(bǔ)這兩個(gè)區(qū)域的空白,你從設(shè)計(jì)初就不知道在對(duì)應(yīng)設(shè)計(jì)類型下應(yīng)該創(chuàng)建的畫布大小(滿屏響應(yīng)式設(shè)計(jì)要準(zhǔn)備好大小兩種或多種方案),那進(jìn)入切圖環(huán)節(jié)我已經(jīng)能腦補(bǔ)出你和開發(fā)人員是怎么撕逼的盛況了。

再者,假如我們填滿這個(gè)設(shè)計(jì)稿(咳咳,比較粗糙的填上):

這些沒有內(nèi)容被紅線框出的背景區(qū)域最后怎么呈現(xiàn)出來?這里面幾個(gè)主要的傾斜圖形上面還疊加了對(duì)應(yīng)內(nèi)容、圖片、文字,還有前后關(guān)系,別指望前端設(shè)計(jì)人員能輕松實(shí)現(xiàn),如果你用一張背景圖填充,那這張背景圖的大小控制得???加載過程要多久?導(dǎo)出WEB用途格式圖片是選擇“連續(xù)”還是“優(yōu)化”?

再類似這樣的案例:

現(xiàn)在很多小年輕們迷戀追波上大神們做的牛逼的動(dòng)效,于是設(shè)計(jì)的時(shí)候光靜態(tài)稿件不甘心,也來做個(gè)AE玩玩,壓根沒有考慮IOS或者安卓在實(shí)現(xiàn)這樣的效果時(shí),需要哪些運(yùn)行機(jī)制,有沒有這樣的控件支持,會(huì)不會(huì)不流暢等等!自己用了一整晚的時(shí)間折騰這么酷炫高大上的動(dòng)畫,開發(fā)這些土鱉居然告訴我不能實(shí)現(xiàn)恩??撕逼ING………

再普遍點(diǎn)的,是不是每次前端開發(fā)完你發(fā)現(xiàn)絕大多數(shù)元素和字體都不對(duì),沒有對(duì)齊,大小加粗等細(xì)節(jié)沒有注意,但是開發(fā)拿設(shè)計(jì)稿就是沒辦法100%實(shí)現(xiàn)的借口的來搪塞你??

下面就來講重點(diǎn)~~~

一、設(shè)計(jì)前請(qǐng)審核原型

在原型步驟就想好對(duì)應(yīng)的圖層結(jié)構(gòu),交互,并和開發(fā)人員做好交流,是否可以實(shí)現(xiàn),功能的評(píng)估一定要細(xì)致,否則會(huì)浪費(fèi)大量的人力成本。還有原型是挺嚴(yán)肅一玩意兒,但是大多數(shù)團(tuán)隊(duì)或者設(shè)計(jì)都沒有認(rèn)識(shí)到它們的價(jià)值,在這里不展開原型的細(xì)節(jié)了,這還可以再寫一個(gè)長(zhǎng)評(píng),你們懂意思就好拉,畫在紙上的手稿也比沒有強(qiáng)。

下面放我自己平時(shí)做的原型:

二、熟悉設(shè)計(jì)環(huán)境規(guī)范

無(wú)論是WEB還是IOS、安卓、WP等等,都有對(duì)應(yīng)的設(shè)計(jì)規(guī)范文檔,我下面會(huì)帖出來。如果連最基礎(chǔ)的設(shè)計(jì)規(guī)范都不知道就開始做設(shè)計(jì),那么你要自己承擔(dān)項(xiàng)目拖延和被整個(gè)開發(fā)組人員問責(zé)的后果。在你動(dòng)手前,請(qǐng)好好的做完功課,并且在每次環(huán)境大升級(jí)時(shí)跟進(jìn)關(guān)注(例如新的iPhone6、6+發(fā)布的尺寸變更等)。

前人已經(jīng)栽好了樹,你需要做的就是在既定框架內(nèi)完成設(shè)計(jì)即可。你要牢記自己的設(shè)計(jì)是基于相應(yīng)的運(yùn)行環(huán)境的,沒有足夠的能力前,不要有認(rèn)為這套體系下的設(shè)計(jì)都很“土”,你是一個(gè)要成“大神”的男人,打破限制和規(guī)范是你的嗜好和品位。如有以上想法,請(qǐng)對(duì)著鏡子里的自己說:Navie!

例如WEB設(shè)計(jì)下,12PX以下的中文字體無(wú)法被正常顯示,文本只支持本地客戶端已有字庫(kù),IOS的TABBAR、TOPBAR等高度是不能被隨意變更任意增減層級(jí)等等。這樣的稿子如果被交付,并沒有強(qiáng)有力的邏輯說服別人,只會(huì)讓你的團(tuán)隊(duì)感受到你的不專業(yè),增加矛盾隱患。SO,好好看看這些文章:

三、制定項(xiàng)目設(shè)計(jì)規(guī)范

這也是提升效率和整體視覺和諧感的重點(diǎn),你要在大框架下建立小體系,這是你展示自己個(gè)性的部分,記得也要用文檔記錄下來,在以后的改版和開發(fā)過程中,嚴(yán)格遵守規(guī)范的參數(shù),減少溝(si)通(bi)成本。

例如:主色色值、按鈕的大小邊框、各文字類型顏色大小、模塊間隔距離等等。

 

請(qǐng)看這個(gè):@souhlin采集到設(shè)計(jì)規(guī)范(76圖)_花瓣UI 交互設(shè)計(jì)

四、學(xué)會(huì)怎么切圖

我一直認(rèn)為做完P(guān)SD還是SKETCH文件,往開發(fā)那邊一扔,任務(wù)搞定的想法,是相當(dāng)不負(fù)責(zé)任的一種行為。因?yàn)樵O(shè)計(jì)不合理的部分導(dǎo)致導(dǎo)出切圖的工作變困難,因你的爛攤子,開發(fā)效率降低,完全是因?yàn)槟愕氖д`,不要抱怨和找任何借口。

比如水平可平鋪的背景是怎么最優(yōu)化導(dǎo)出的?安卓適應(yīng)多屏幕分辨率下,點(diǎn)九圖是怎么進(jìn)行標(biāo)記和拉伸的,應(yīng)該使用什么工具?需要應(yīng)用透明背景的圖片知道應(yīng)該使用什么格式?你必須設(shè)計(jì)出自己獨(dú)立也能完成切圖工作的設(shè)計(jì)稿,再要求開發(fā)能夠完整實(shí)現(xiàn),而不是讓他們又來找你抱(si)怨(bi)哪里哪里是不行的你得重做。

五、一定要有標(biāo)注說明

標(biāo)注的作用何其重要,開發(fā)人員對(duì)于元素的間距和文字大小還有透明元素的參數(shù)設(shè)置,是沒有耐心一點(diǎn)點(diǎn)查看和檢測(cè)的(沒錯(cuò),大部分情況會(huì)——憑!!感??!覺?。。?,你不好好把這些制作成文件白紙黑字,那么這個(gè)最重要的還原環(huán)節(jié)上出差錯(cuò)的幾率也是最多的,往后修改最困難的。

下面推薦兩軟件:

馬克鰻

像素大廚

用它們做出詳盡的標(biāo)注文件,交付開發(fā),最后如果出現(xiàn)偏差,就有證據(jù)可以找出是誰(shuí)的問題了。

六、結(jié)果對(duì)比調(diào)適

開發(fā)完成視覺部分內(nèi)容以后,要開始校對(duì),那么盡可能給出參照物,參照物是什么呢?

高保真原型

只有同意平臺(tái)下可運(yùn)行的高保證原型可以最直觀對(duì)比設(shè)計(jì)到實(shí)現(xiàn)之間有什么偏差,并以此檢查參數(shù)設(shè)置上的錯(cuò)誤,逐個(gè)調(diào)整。

在這里強(qiáng)烈推薦——Invision在線原型工具。

Invision

20150206223107

可以制作APP和WEBSITE,并分享遠(yuǎn)程連接在手機(jī)和別的電腦上預(yù)覽,下面放我之前做過一個(gè)小項(xiàng)目的實(shí)例(最好翻墻訪問比較快):

傳送門——InVision

或者PS PLAY,這個(gè)請(qǐng)?jiān)L問官網(wǎng)看詳情,也是可以在移動(dòng)設(shè)備直接查看設(shè)計(jì)文件的工具,不過更適合設(shè)計(jì)過程中使用,但不妨結(jié)尾的時(shí)候做對(duì)比。

使用教程見:《Ps Play!移動(dòng)設(shè)計(jì)零阻力》

還有就是MAC的童鞋們,使用SKETCH的MIRROR~這就不多做贅述,最近風(fēng)頭正勁的設(shè)計(jì)軟件。

使用教程見:《想要一稿過不加班?Sketch絕配神器Mirror搶先體驗(yàn)》

101246

好了~一下午打了那么多內(nèi)容,還有磚要去搬了~~還有很多內(nèi)容沒空放上來,以后一點(diǎn)點(diǎn)更新,很多疏漏之處,歡迎指正。說了這么多,就是要告訴所有做UI設(shè)計(jì)的同行新手們,能正確的分析問題,從自身的知識(shí)能力出發(fā)來看待問題。我們和程序都是項(xiàng)目的執(zhí)行人,需要相互間的磨合和協(xié)助共同輸出產(chǎn)品,在對(duì)方的結(jié)果不盡人意時(shí),請(qǐng)先從上面的幾個(gè)點(diǎn)力反思,自己有哪些不足,再和對(duì)方討論,這樣不但給自己帶來進(jìn)步,也為團(tuán)隊(duì)節(jié)省更多的時(shí)間。

請(qǐng)一起為更好的產(chǎn)品努力吧!!

————————————————分割線————————————————

@誰(shuí)在富士山下 :完成視覺稿的定稿和評(píng)審并不意味著視覺的工作已經(jīng)完成,視覺定稿只算是完成了75%的視覺工作進(jìn)度,要跟進(jìn)后期的視覺還原直到上線才能算是100%完成。

我跟過一些WEB/iOS項(xiàng)目的視覺還原,覺得「溝通」最重要。

溝通可分為3個(gè)階段:

前期:多方確認(rèn)

視覺定稿前的溝通,正常的項(xiàng)目管理中,視覺稿除了要給產(chǎn)品、策劃確認(rèn)之外,還需要和技術(shù)溝通確認(rèn)。把全部頁(yè)面都和技術(shù)過一遍,確保你的視覺稿是可實(shí)現(xiàn)的,不然視覺稿定稿后技術(shù)做了兩天跑過來和你說這里做不了那里做不了,你又要返工修改視覺稿,還要再次和產(chǎn)品、技術(shù)確認(rèn),這樣太沒效率。一般視覺還原偏差大的地方往往是動(dòng)畫效果或是一些像素級(jí)的視覺呈現(xiàn),比如iOS端有個(gè)加入購(gòu)物袋的動(dòng)畫,如果你只是口頭和技術(shù)說點(diǎn)擊「加入購(gòu)物袋」按鈕后會(huì)有個(gè)圓形飛進(jìn)購(gòu)物袋的ICON,那后期技術(shù)實(shí)現(xiàn)出來的效果90%不是你想要的效果,因?yàn)榧夹g(shù)不知道這個(gè)飛的弧線是怎么樣的,不知道圓形在飛的過程中有沒有大小的變化,不知道需要設(shè)定多長(zhǎng)時(shí)間飛進(jìn)去等很多細(xì)節(jié)問題。

你要多站在技術(shù)的角度去思考,單憑口頭表達(dá)他們肯定是無(wú)法準(zhǔn)確理解視覺的意思,他們需要的是一份直觀的動(dòng)畫演示視頻。在這里只是舉一個(gè)動(dòng)畫的例子,實(shí)際工作中會(huì)遇到很多不同的復(fù)雜的頁(yè)面,你只要把技術(shù)想象成一個(gè)完全不懂設(shè)計(jì)的小白然后該如何讓他明白你的視覺稿該實(shí)現(xiàn)成什么樣就行了。

中期:視覺規(guī)范

前期的視覺稿和項(xiàng)目組相關(guān)的上下游確認(rèn)后,就該做一份詳細(xì)的視覺規(guī)范和頁(yè)面標(biāo)注了。

視覺規(guī)范可以理解成視覺和技術(shù)之間的書面溝通,越是復(fù)雜的大型項(xiàng)目就越需要一份視覺規(guī)范。原因有二,其一是大型項(xiàng)目會(huì)有好幾個(gè)技術(shù)來同時(shí)實(shí)現(xiàn)頁(yè)面,視覺規(guī)范可減少溝通成本。其二是詳盡有效的視覺規(guī)范可以標(biāo)出細(xì)致的視覺狀態(tài)供技術(shù)參考。

至于頁(yè)面標(biāo)注,確實(shí)是挺讓視覺設(shè)計(jì)師頭疼的,這本身是一個(gè)很無(wú)趣的工作,但是多大情況下還是要花時(shí)間去做。至于標(biāo)注的詳細(xì)程度,則取決于技術(shù)對(duì)PSD、視覺的理解了,我遇到過對(duì)視覺完全沒概念和對(duì)PS完全不懂的技術(shù),當(dāng)時(shí)我沒標(biāo)得很仔細(xì),最后還原出來的視覺頁(yè)面連我都不認(rèn)識(shí),可以想象后期的跟進(jìn)有多累?遇到這種技術(shù)你就老老實(shí)實(shí)仔仔細(xì)細(xì)的標(biāo)注吧,視覺還原程度取決于你的標(biāo)注詳細(xì)程度。

我還遇到過對(duì)視覺有一定理解,PS操作也比較熟悉的技術(shù),像這樣的技術(shù)就比較省心了,只需要大體框架標(biāo)一下,然后把PSD給他就行了,他會(huì)自己去測(cè)量間距、色值、字體、字號(hào)等,最后技術(shù)首次還原的效果至少都80%以上,剩下20%就自己跟進(jìn)一下就好了,不太費(fèi)心。

后期:還原跟進(jìn)

后期的視覺還原跟進(jìn)最重要的是要有細(xì)心和耐心。

技術(shù)初步完成頁(yè)面實(shí)現(xiàn)后,就得靠視覺主動(dòng)去跟進(jìn)還原了。

如果是在小公司,可以買飲料和零食坐在技術(shù)旁邊,對(duì)照著視覺稿一一修改。

如果是在大公司,一般都會(huì)有項(xiàng)目管理平臺(tái),需要把看到的視覺問題記錄在視覺BUG文檔,提交到平臺(tái)上,技術(shù)會(huì)對(duì)照著文檔來修改,一般這種視覺修改會(huì)有2次以上才能還原到視覺稿95%的程度。

這個(gè)視覺跟進(jìn)的過程中極其需要細(xì)心和耐心,缺一不可。視覺設(shè)計(jì)師的細(xì)心程度要達(dá)到像素級(jí)才能高度還原,如果你不夠細(xì)心,每個(gè)頁(yè)面都有一些元素偏移幾個(gè)像素,那全部頁(yè)面會(huì)有很多出入。如果你不夠細(xì)心在測(cè)試環(huán)境下逐一測(cè)試不同的狀態(tài)頁(yè)面,那很可能到上線后你才發(fā)現(xiàn)有些頁(yè)面的視覺還原有重要的問題。還有,你需要耐下心來把檢測(cè)到的視覺BUG寫進(jìn)文檔里,提交給技術(shù)。視覺BUG多的時(shí)候可能會(huì)寫好幾十條,夠?qū)憘€(gè)半天了,沒耐心還真不行。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔