這8種手繪元素的使用方法,讓你的網(wǎng)頁更有意思

      作者:chenzimu7
      2017-08-14
      6970

      手繪的圖標(biāo)元素能夠賦予網(wǎng)頁以個(gè)性,增強(qiáng)整體設(shè)計(jì)的吸引力,可以更輕松地營(yíng)造氛圍,傳遞情緒。

      多數(shù)時(shí)候,我們希望網(wǎng)頁中的設(shè)計(jì)元素足夠精準(zhǔn),像素完美。但是有的時(shí)候,我們想通過一些有趣、個(gè)性化的設(shè)計(jì)元素,讓頁面看起來更有意思。而手繪的插畫和圖標(biāo)常常是在這個(gè)需求之下被引入到整個(gè)設(shè)計(jì)中來的。手繪的圖標(biāo)元素能夠賦予網(wǎng)頁以個(gè)性,增強(qiáng)整體設(shè)計(jì)的吸引力,可以更輕松地營(yíng)造氛圍,傳遞情緒。

      手繪圖標(biāo)設(shè)計(jì)近年來的使用頻率越來越高,說是趨勢(shì)也不為過。那么,手繪圖標(biāo)在網(wǎng)頁設(shè)計(jì)中,通常是扮演什么樣的角色,又是如何被使用的呢?今天的文章,我們來聊聊這個(gè)話題。

      1、作為分隔符

      手繪元素有一個(gè)很有意思的特點(diǎn),它幾乎可以和任何設(shè)計(jì)元素有效地搭配起來。可以和圖片、視頻組合使用,可以為留白增加視覺焦點(diǎn),甚至可以在文本附近出現(xiàn)。很多時(shí)候,你不敢在整個(gè)設(shè)計(jì)中使用手繪元素是擔(dān)心它會(huì)打破設(shè)計(jì)的整體感,但是當(dāng)你開始嘗試就會(huì)發(fā)現(xiàn)它在很多時(shí)候還是很有用的。

      作為分隔符.jpg

      手繪圖標(biāo)本身擁有不錯(cuò)的融入感,很多設(shè)計(jì)師會(huì)利用它的這種融入感,將它插入到網(wǎng)頁當(dāng)中,作為分隔不同區(qū)塊的間隔元素來使用。作為分隔符,手繪圖標(biāo)不會(huì)顯得過于突兀,讓分割區(qū)塊的留白也不至于單調(diào),讓用戶明白內(nèi)容區(qū)塊的邊界的同時(shí),也保持了整個(gè)頁面設(shè)計(jì)的節(jié)奏感。

      交互式涂鴉

      手繪元素用好了同樣可以帶來有趣的交互體驗(yàn)。無論是將它之作為加載動(dòng)畫,還是作為整個(gè)頁面交互的一部分,手繪圖標(biāo)或者手繪涂鴉都可以引起用戶的興趣。

      作為分隔符1.jpg

      Real Estate Stained Glass 這個(gè)網(wǎng)站就做的相當(dāng)?shù)牡轿唬麄儾粌H僅使用了手繪圖標(biāo),將整個(gè)網(wǎng)站做成了手繪動(dòng)畫,而用戶可以隨著動(dòng)畫和音樂,給頁面中不同的區(qū)塊上色,整個(gè)過程無比的流暢,你所填充的色彩會(huì)實(shí)時(shí)地出現(xiàn)在頁面當(dāng)中,整個(gè)沉浸式的體驗(yàn)相當(dāng)棒。

      手繪的字體

      很多地方手繪元素并不一定真的是手繪出來的。比如手繪風(fēng)格的字體有很多,它們當(dāng)然都不是真正手繪出來的。手繪風(fēng)格的字體很受歡迎,也非常適合用來展示。

      手繪字體常常能夠個(gè)人以輕盈而又富有人性的的感覺,挑選手寫字體的時(shí)候,要注意它的美感和可讀性之間的平衡。

      手繪的字體.jpg

      Tradewinds Hotel 就挑選了一款簡(jiǎn)約又輕靈的手寫字體,它的尺寸夠大,清晰、可讀性良好,在網(wǎng)頁中用作展示之用。

      強(qiáng)化視覺

      在網(wǎng)頁當(dāng)中,絕大多數(shù)的元素都是功能性的,而用來點(diǎn)綴的元素不少都是出于純粹的視覺設(shè)計(jì)的目的而存在的。

      強(qiáng)化視覺.jpg

      在 Mother’s Brewing 這個(gè)網(wǎng)頁當(dāng)中,首頁上巨大的手繪的心型圖標(biāo)明顯就是為了這樣的目的而存在的。設(shè)計(jì)師在其他有的頁面上也采用了類似的手繪圖標(biāo)來裝飾頁面,強(qiáng)化視覺,填補(bǔ)空間。

      調(diào)節(jié)情緒

      手繪風(fēng)格的設(shè)計(jì)元素常常會(huì)給人有趣的感覺,在很多設(shè)計(jì)項(xiàng)目中,這些手繪元素能夠營(yíng)造氛圍,調(diào)整訪客的情緒。

      調(diào)節(jié)情緒.jpg

      Signs for Science 這個(gè)網(wǎng)站中,手繪的圖標(biāo)和小插畫,配合著網(wǎng)站中瑪卡龍系的配色和圓潤(rùn)的字體,營(yíng)造出充滿童趣的氛圍,用戶在這種氛圍下心情通常不會(huì)太差。

      展示創(chuàng)意

      在設(shè)計(jì)師的作品集當(dāng)中,手繪元素常常是用來呈現(xiàn)創(chuàng)意的有效手段。一方面,有趣的手繪元素出人意表,另一方面,設(shè)計(jì)師還能通過手繪來呈現(xiàn)設(shè)計(jì)的過程,展示設(shè)計(jì)思維。

      展示創(chuàng)意.jpg

      The Feebles 這個(gè)網(wǎng)站當(dāng)中,設(shè)計(jì)不僅借用手繪來展示他的設(shè)計(jì)過程,而且網(wǎng)站本身還采用了許多手繪元素,比如左上角的LOGO。

      圖標(biāo)和LOGO

      手繪圖標(biāo)和LOGO 可能是最受歡迎的手繪元素了。手繪風(fēng)格的圖標(biāo)和LOGO 常常會(huì)顯得更加有個(gè)性,不對(duì)稱、不規(guī)則的細(xì)節(jié)是它們最有代表性的特點(diǎn),而這些細(xì)節(jié)也讓它們顯得非常迷人。

      圖標(biāo)和LOGO.jpg

      Higher Ground 中的圖標(biāo)并不能算是嚴(yán)格意義上的手繪的LOGO,但是其中的襯線字體搭配著波浪紋的裝飾,呈現(xiàn)出手繪LOGO的特點(diǎn)。

      動(dòng)畫特效

      在這個(gè)動(dòng)效大行其道的時(shí)代,即使料到手繪元素最后也很難繞過動(dòng)效啊。動(dòng)態(tài)的手繪元素,無疑擁有更強(qiáng)的娛樂性,能夠增強(qiáng)網(wǎng)站的轉(zhuǎn)化率,讓用戶停留的時(shí)間更長(zhǎng)。

      動(dòng)畫特效.jpg

      Long Story Short 就在網(wǎng)頁設(shè)計(jì)上沿用了這樣的思路。不止是網(wǎng)站本身的手繪LOGO 采用了動(dòng)態(tài)效果,而且借用快速的視頻剪輯,將他們其他的品牌設(shè)計(jì)項(xiàng)目快速地展現(xiàn)出來。

      結(jié)語

      手繪設(shè)計(jì)元素的用途還有很多,它們可以讓設(shè)計(jì)變得更加賞心悅目,個(gè)性十足。從排版設(shè)計(jì)到動(dòng)態(tài)效果,它們的存在讓設(shè)計(jì)更加富于人性。雖然手繪元素不一定適用于每個(gè)項(xiàng)目,但是掌握它,依然可以在多數(shù)設(shè)計(jì)項(xiàng)目中使用。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務(wù)聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

      版權(quán)信息

        移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)

      主站蜘蛛池模板: 韩国精品福利一区二区三区| 久久国产精品一区| 一区二区三区无码高清| 少妇人妻偷人精品一区二区| 亚洲国产精品第一区二区| 亚洲日韩国产欧美一区二区三区| 蜜桃传媒一区二区亚洲AV| 亚洲A∨无码一区二区三区| 精品国产免费一区二区| 视频一区二区中文字幕| 久久精品国产一区| 久久精品国产第一区二区| 国产在线一区二区综合免费视频 | 韩国美女vip福利一区| 久久综合九九亚洲一区| 91在线一区二区| 亚洲日本va午夜中文字幕一区| 老熟女高潮一区二区三区| 日韩福利视频一区| 日韩人妻无码一区二区三区综合部 | 在线观看日本亚洲一区| 日韩精品午夜视频一区二区三区| 精品理论片一区二区三区| 国产精品久久久久一区二区三区| 亚洲第一区香蕉_国产a| 日韩免费视频一区| 亚洲AV无码一区二区三区网址| 日韩一区二区三区精品| 一区二区高清在线| 亚洲一区在线视频| 在线视频一区二区三区三区不卡 | 中文字幕一区二区三区永久| 一本一道波多野结衣一区| 99精品国产一区二区三区| 无码少妇一区二区浪潮av| 久久久久人妻一区精品色| 免费播放一区二区三区| 538国产精品一区二区在线| 影院无码人妻精品一区二区| 亚洲一区中文字幕| 亚洲线精品一区二区三区 |