當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?

來源:zhihu 作者:陳希_CHRISCHEN 學(xué)習(xí):6176人次

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

一、效果實現(xiàn)難度

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

二、明確的規(guī)范

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

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

視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?

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

視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?

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

視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?

三、語言轉(zhuǎn)化

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

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

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

視覺設(shè)計師怎樣讓前端100%實現(xiàn)設(shè)計效果?

四、反復(fù)驗收

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!