- 相關(guān)推薦
網(wǎng)頁(yè)手繪元素的使用方法
手繪是應用于各個(gè)行業(yè)手工繪制圖案的技術(shù)手法,設計類(lèi)手繪主要是前期構思設計方案的研究型手繪和設計成果部分的表現型手繪,前期部分被稱(chēng)為草圖,成果部分被稱(chēng)為表現圖或者效果圖。下面小編來(lái)給大家介紹網(wǎng)頁(yè)手繪元素的使用方法,希望對大家有幫助!
1、作為分隔符
手繪元素有一個(gè)很有意思的特點(diǎn),它幾乎可以和任何設計元素有效地搭配起來(lái)?梢院蛨D片、視頻組合使用,可以為留白增加視覺(jué)焦點(diǎn),甚至可以在文本附近出現。很多時(shí)候,你不敢在整個(gè)設計中使用手繪元素是擔心它會(huì )打破設計的整體感,但是當你開(kāi)始嘗試就會(huì )發(fā)現它在很多時(shí)候還是很有用的。
手繪圖標本身?yè)碛胁诲e的融入感,很多設計師會(huì )利用它的這種融入感,將它插入到網(wǎng)頁(yè)當中,作為分隔不同區塊的間隔元素來(lái)使用。作為分隔符,手繪圖標不會(huì )顯得過(guò)于突兀,讓分割區塊的留白也不至于單調,讓用戶(hù)明白內容區塊的邊界的同時(shí),也保持了整個(gè)頁(yè)面設計的節奏感。
2.交互式涂鴉
手繪元素用好了同樣可以帶來(lái)有趣的交互體驗。無(wú)論是將它之作為加載動(dòng)畫(huà),還是作為整個(gè)頁(yè)面交互的一部分,手繪圖標或者手繪涂鴉都可以引起用戶(hù)的興趣。
Real Estate Stained Glass 這個(gè)網(wǎng)站就做的相當的到位,他們不僅僅使用了手繪圖標,將整個(gè)網(wǎng)站做成了手繪動(dòng)畫(huà),而用戶(hù)可以隨著(zhù)動(dòng)畫(huà)和音樂(lè ),給頁(yè)面中不同的區塊上色,整個(gè)過(guò)程無(wú)比的流暢,你所填充的色彩會(huì )實(shí)時(shí)地出現在頁(yè)面當中,整個(gè)沉浸式的體驗相當棒。
3.手繪的字體
很多地方手繪元素并不一定真的是手繪出來(lái)的。比如手繪風(fēng)格的字體有很多,它們當然都不是真正手繪出來(lái)的。手繪風(fēng)格的字體很受歡迎,也非常適合用來(lái)展示。
手繪字體常常能夠個(gè)人以輕盈而又富有人性的的感覺(jué),挑選手寫(xiě)字體的時(shí)候,要注意它的美感和可讀性之間的平衡。
Tradewinds Hotel 就挑選了一款簡(jiǎn)約又輕靈的手寫(xiě)字體,它的尺寸夠大,清晰、可讀性良好,在網(wǎng)頁(yè)中用作展示之用。
4.強化視覺(jué)
在網(wǎng)頁(yè)當中,絕大多數的元素都是功能性的,而用來(lái)點(diǎn)綴的元素不少都是出于純粹的視覺(jué)設計的目的而存在的。
在 Mother’s Brewing 這個(gè)網(wǎng)頁(yè)當中,首頁(yè)上巨大的手繪的心型圖標明顯就是為了這樣的目的而存在的。設計師在其他有的頁(yè)面上也采用了類(lèi)似的手繪圖標來(lái)裝飾頁(yè)面,強化視覺(jué),填補空間。
5.調節情緒
手繪風(fēng)格的設計元素常常會(huì )給人有趣的感覺(jué),在很多設計項目中,這些手繪元素能夠營(yíng)造氛圍,調整訪(fǎng)客的情緒。
Signs for Science 這個(gè)網(wǎng)站中,手繪的圖標和小插畫(huà),配合著(zhù)網(wǎng)站中瑪卡龍系的配色和圓潤的字體,營(yíng)造出充滿(mǎn)童趣的氛圍,用戶(hù)在這種氛圍下心情通常不會(huì )太差。
6.展示創(chuàng )意
在設計師的作品集當中,手繪元素常常是用來(lái)呈現創(chuàng )意的有效手段。一方面,有趣的手繪元素出人意表,另一方面,設計師還能通過(guò)手繪來(lái)呈現設計的過(guò)程,展示設計思維。
The Feebles 這個(gè)網(wǎng)站當中,設計不僅借用手繪來(lái)展示他的設計過(guò)程,而且網(wǎng)站本身還采用了許多手繪元素,比如左上角的LOGO。
7.圖標和LOGO
手繪圖標和LOGO 可能是最受歡迎的手繪元素了。手繪風(fēng)格的圖標和LOGO 常常會(huì )顯得更加有個(gè)性,不對稱(chēng)、不規則的細節是它們最有代表性的特點(diǎn),而這些細節也讓它們顯得非常迷人。
Higher Ground 中的圖標并不能算是嚴格意義上的手繪的LOGO,但是其中的襯線(xiàn)字體搭配著(zhù)波浪紋的裝飾,呈現出手繪LOGO的特點(diǎn)。
8.動(dòng)畫(huà)特效
在這個(gè)動(dòng)效大行其道的時(shí)代,即使料到手繪元素最后也很難繞過(guò)動(dòng)效啊。動(dòng)態(tài)的手繪元素,無(wú)疑擁有更強的娛樂(lè )性,能夠增強網(wǎng)站的轉化率,讓用戶(hù)停留的時(shí)間更長(cháng)。
Long Story Short 就在網(wǎng)頁(yè)設計上沿用了這樣的思路。不止是網(wǎng)站本身的手繪LOGO 采用了動(dòng)態(tài)效果,而且借用快速的視頻剪輯,將他們其他的品牌設計項目快速地展現出來(lái)。
【網(wǎng)頁(yè)手繪元素的使用方法】相關(guān)文章:
手繪陶瓷的手繪瓷器的保養10-03
關(guān)于手繪墻的手繪教程知識08-24
手繪墻繪的手繪墻畫(huà)的材料07-16
快速手繪效果圖的手繪臨摹技巧!07-24
手繪壁畫(huà)需要哪些材料-手繪壁畫(huà)的材料08-26
手繪入門(mén)方法10-25
手繪壁畫(huà)的布局06-07
快速手繪的技巧10-23
手繪汽車(chē)的教程08-03