您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

如何做一個(gè)有趣的設(shè)計(jì)

你有沒(méi)有遇到過(guò)這樣的情景,我們?cè)噲D改變別人反饋的“乏味”、“過(guò)時(shí)”的評(píng)價(jià),可更新后的方案仍等不到對(duì)方說(shuō)“Yes”?你反問(wèn)他究竟什么才“不土”,可對(duì)方說(shuō)不清具體標(biāo)準(zhǔn)。你只好悻悻地拿回去再修改…一次又一次,直到你要抓狂了,卻仍換不來(lái)客戶的一個(gè)笑臉…..

  如何讓別人看到自己的設(shè)計(jì)會(huì)心一笑?本文僅拋磚引玉,就“有趣的設(shè)計(jì)“談開(kāi)來(lái):
  “有趣”,好像就是“乏味”、“過(guò)時(shí)”、“土”、“無(wú)新意”、“不出彩”、“沒(méi)亮點(diǎn)”等等的反義詞了,做出一個(gè)有趣的設(shè)計(jì),說(shuō)不定會(huì)遠(yuǎn)離一切此類的負(fù)面評(píng)價(jià)。
  是不是有種找到出路的感覺(jué)?但…..什么才是“有趣”呢?每個(gè)人的感覺(jué)都不同,你覺(jué)得有趣的他不定覺(jué)得是,這似乎完全就是一件不可掌控的事情嘛。你一定懷疑我后面的話很可能是在扯淡。但…請(qǐng)繼續(xù)看下去,特別要看到最后,本文就是要找到一些特別的共性元素,令得所有人都會(huì)認(rèn)為“有趣”!

  首先問(wèn)下:你心中的“有趣的設(shè)計(jì)“該是怎么樣的呢?被問(wèn)到的設(shè)計(jì)師們答:  

   

  可這些詞語(yǔ)還是很抽象,又是什么樣的設(shè)計(jì)才夠酷夠炫?才能給你意外驚喜呢?看圖說(shuō)話:

 

【細(xì)膩靈敏的互動(dòng)】http://www.extrememusic.com/
  有趣指數(shù)★★★★★

  動(dòng)感十足的導(dǎo)航、細(xì)致入微的交互(mousevoer效果等)、恰如其分的音效反饋、優(yōu)雅流暢的場(chǎng)景過(guò)渡、精致視覺(jué)質(zhì)感的打造,都為其增色了不少。
  除此之外,其右上角的導(dǎo)航像黑暗中的燃起的一團(tuán)火,在其暗色背景上尤顯閃耀。但不得不提,全flash實(shí)現(xiàn),可不是每個(gè)用戶的電腦都買(mǎi)單。

 

 

【mouseover的出彩】http://steedicons.com/
  有趣指數(shù)★★★★

  Mousever后,整張圖被一個(gè)“放大鏡“遮住,手繪的風(fēng)格,顯得隨意而有趣。

 

【手繪卡通風(fēng)】http://www.cosmicsoda.com/
  有趣指數(shù)★★★★★

  簡(jiǎn)單的手繪風(fēng),軟筆抄的背景,虛線顯然比實(shí)線更顯活潑。

 

【高質(zhì)量的大圖片】http://www.moodyinternationalllc.com/
  有趣指數(shù)★★★★★

  不僅僅是高質(zhì)量的大配圖,粗大字體的運(yùn)用,圖片的輪轉(zhuǎn)交互,mouseover后,滾動(dòng)的響應(yīng),兩處”{}”的呼應(yīng),表現(xiàn)出設(shè)計(jì)者的心機(jī)。

 

【動(dòng)比靜好】http://uk.burberry.com/store/
  有趣指數(shù)★★★★★

  圖片充斥頁(yè)面,有靜有動(dòng),一旦mouseover后,有些靜止的圖片就開(kāi)始動(dòng)態(tài)展示,有些則出現(xiàn)有黑色漸變背景的注釋,誰(shuí)也不知道下一張圖mouseover       后會(huì)出現(xiàn)什么,不再一掃而過(guò),這激起你把鼠標(biāo)移動(dòng)至每張圖細(xì)細(xì)去看的欲望。

 

【精彩的過(guò)渡】http://riotindustries.com/#becominghuman
  有趣指數(shù)★★★★★

  各種驚喜的過(guò)渡效果,頁(yè)面右移,圖片隊(duì)列忽長(zhǎng)忽短間的流暢過(guò)渡,吊足你的胃口。除此之外,截圖以“傾斜”的角度呈現(xiàn)給大家,頗顯文藝。

 

【動(dòng)畫(huà)】http://demo.templateworld.com/universal-css-templates/m-29062010b/index.html
  有趣指數(shù)★★★★

  僅一個(gè)出彩的動(dòng)畫(huà),就足以撐起你的整個(gè)網(wǎng)頁(yè)。好像在玩積木,第一眼就被那個(gè)立體的banner吸引住了,有木有?

 

【雜志化排版與配圖】http://www.templateaccess.com/wpdemos/wp220/
  有趣指數(shù)★★★★

  這更像是一本高品質(zhì)的雜志,富有意境的大幅配圖,低調(diào)卻考究的背景用色,讓重點(diǎn)更為突出。一張美圖遠(yuǎn)往往比一段話更顯吸引。

 

【不走尋常路,方能脫穎而出】http://mydesk.metabrain.com/
  有趣指數(shù)★★★★

  不拘泥于線線框框,不是長(zhǎng)方形,也不是圓形,跳躍出背景,“my desk”的隨意擺放,卻一下子能吸引住眼球。
  官網(wǎng)中的banner材質(zhì)與要宣傳的App背景的保持統(tǒng)一,顯得純粹干凈,而又主題鮮明。

 

【插畫(huà)風(fēng)】http://www.meomi.com/about.html
  有趣指數(shù)★★★★

  如果你看到這樣一個(gè)網(wǎng)站,一打開(kāi)就立即有探索的欲望了吧。它贏在有這一個(gè)精致的內(nèi)容承載框架。當(dāng)你把網(wǎng)頁(yè)整體做成一幅畫(huà)的樣子,一切都會(huì)因此而不同。

 

?    【粗大字體】http://www.danieldiggle.com/design/
  有趣指數(shù)★★★★★

  第一眼感覺(jué)——潮,再細(xì)細(xì)分析下它為何而潮?沉色背景的運(yùn)用反而更加凸顯了主體內(nèi)容,并與暖色而具大的字體形成的鮮明對(duì)比,夸張而大膽的大標(biāo)題大字體也恰恰是其想突出的重點(diǎn),迅速抓住用戶眼球。

  

  看完這11個(gè)網(wǎng)站,有沒(méi)有眼花繚亂?
  若你還是覺(jué)得有些抽象?為你提煉出九個(gè)讓你網(wǎng)站變得有趣的元素,精華當(dāng)然要留在最后:

 

  最后的最后當(dāng)然是付諸行動(dòng)啦~!“沒(méi)有枯燥的設(shè)計(jì),只有懶惰的設(shè)計(jì)師”,設(shè)計(jì)也需包裝也需化妝,快用這些元素去點(diǎn)綴你的原本暗淡的設(shè)計(jì),讓它有趣起來(lái)吧~!

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di1131.html
網(wǎng)頁(yè)設(shè)計(jì)準(zhǔn)則從何而來(lái)
淺析平面與網(wǎng)頁(yè)設(shè)計(jì)的差異性
圖趣網(wǎng)微信
建議反饋
×