跳槽進大廠,這些設計技法必須會(系列一)
本文為大家分享了大廠常用的設計風格之一——紋理風格,通過研究,相信你也一定能夠從中收獲些許設計心得!
本周和大家分享一些大廠常用的設計風格,這些風格大家可能平時有見過,但是可能沒有系統(tǒng)了解,今天先和大家?guī)淼谝粋€風格——紋理風格,特別是很多韓國設計種,他們的作品中大量運用了這種設計手法,簡單的線條,點線的運用,讓頁面充滿了細節(jié),在國內(nèi)電商中也運用比較多,我們一起來研究下!
它的用法并不難,常用做法就是基于品牌衍生出一套品牌輔助圖形,用在界面中,背景中或者作為肌理效果,它可以是線,也可以是點,也可以是面!用法也很多變化,那么今天我們一起來研究下這種風格是如何使用的。
紋理風格特點
1. 強運用:氛圍背景
它可以作為背景,讓整個畫面不那么單調(diào),同時如果紋理運用的好,反而會顯得很高級,呈現(xiàn)那種低調(diào)的高級感!點線面其實一直是設計中很重要的點,只是如今大家都玩扁平化,反而很多設計忽略了這些。
▲?如上圖某電商公司的輔助圖形,可以看出是由三角形,正方形,圓形,五角星,六邊形等組合而成然后基于這些基本圖形衍生出一系列組合方式去應用到頁面各個場景,如海報,banner等,形成統(tǒng)一的輔助圖形符號。
▲?這種底紋在設計師手里被賦予了魔法,出現(xiàn)在海報里,營銷頁面上,形成統(tǒng)一的風格和調(diào)性。
▲?在banner中,這種輔助圖形做為底紋豐富了背景,讓背景更加有層次細節(jié)
▲ 在這個海報中,背景的漩渦以及數(shù)字的圓點效果都很好的將品牌紋理融于到背景中去。
▲?這種手法運用起來不用那么單調(diào),完全也可以結(jié)合設計師想象力去發(fā)揮,去延展出很多不一樣的效果,同時很好的達成一致性。有心的同學可以去留意每年的電商設計,在背景上都會有這些統(tǒng)一的底紋細節(jié)在里面,這些不是設計師隨意加的,而是有一套系統(tǒng)的品牌體系在里面!
2. 強運用-主圖形
▲?Facebook 8周年的KV設計,設計師將底紋作為主要圖形,當主視覺去運用,在這個工牌設計中,運用了輔助圖形來形成整個品牌視覺語言,再結(jié)合很年輕的色彩,統(tǒng)一而不單調(diào)。
▲?第54界金馬獎的主LOGO,非常有特點,設計師將54這幾個字母很好的通過圖形表現(xiàn)出來,這個LOGO圖形由4個不同圖形組成,這些輔助圖形也分別作為主視覺運用到其他的設計上。
▲?海報的設計,簡潔有力,配合抽象的圖片,讓人充滿了期待。
▲?在2018年雙11潮流盛典的整體設計中,同樣放射重復性的正方形,底紋不斷出現(xiàn)在海報上,形成整體的風格調(diào)性。
▲?在主會場上,同樣運用3D正方形重復作為整個舞臺來渲染,讓整體設計記憶點得到強化。
▲?在海報上,背景的肌理效果貫穿始終,形成整體一套的設計風格。
3. 弱運用-頁面輔助
前面兩種,底紋都用作主氛圍背景,主圖形,那么在很多時候,這些輔助元素運用也可以弱一些,使用面積也比較小,它的存在很多時候能夠讓頁面細節(jié)更加豐富。
▲?在平面設計中比較常見的用法,紋理和底紋作為輔助圖形,讓頁面的細節(jié)和氛圍更加豐富。
▲?在UI設計中也常常會出現(xiàn),如果你的主體是內(nèi)容,背景稍微有點空洞,那么就可以使用這種手法,讓背景更加有層次一些。
▲?在88會員的頁面中,會員的輔助元素作為背景出現(xiàn)在一些需要背景氛圍的設計中,能很好的將頁面設計元素豐富起來。
UI中運用
紋理風格應用場景也很豐富,從上面案例其實可以看出,無論是平面還是營銷設計,品牌設計,UI設計中都可以去靈活運用,關鍵是看你如何運用。
▲?網(wǎng)易考拉的輔助圖形非常棒,都是基于圓形去延展的,運用場景也比較豐富,在官方的方案呈現(xiàn)中,這個輔助圖形,從始至終的應用到頁面每個場景。
▲?在頁面的海報和傳播頁面中,基于圓形的輔助圖形很好的承載了背景,簡潔的排版也很符合產(chǎn)品整體調(diào)性。
▲?官網(wǎng)的設計中,輔助圖形圓形也巧妙的運用在設計中
▲?在APP的界面啟動頁,營銷設計,會員頁面,輔助圖形都很巧妙融合在品牌之中,詳細效果大家可以在http://www.plus-ex.com/#kaola中查看。
▲?在上圖設計中,設計師將線條和圓形很好的融于到整個背景,讓原本平淡的頁面充滿層次和細節(jié)。
▲?在很多這種頭部為主核心的頁面設計中,如果只一個單獨的卡片或者按鈕會稍顯得冷淡,設計師將自己的品牌logo或者品牌輔助線條很巧妙融合到背景和卡片中,細節(jié)頓時豐富起來。
▲?這種肌理效果很多時候也可以傳遞出品牌的氣質(zhì),品牌的調(diào)性,左側(cè)那個音樂播放界面的默認圖片,就特別有品質(zhì)感。右側(cè)電商主界面背景,清晰干凈,后面的線條背景恰到好處。
▲?在這種大面積背景上,添加這種點線面,或者幾何紋理背景能讓頁面不那么單調(diào),同時也能傳遞一些品牌元素
網(wǎng)頁中運用
▲?在很多設計中,底紋可以起到構圖作用,同時也可以做為背景細節(jié)去運用
▲?網(wǎng)站的底紋運用,深色背景下能增強光感,淺色背景下能增加空間
▲?同時在很多場景,它的手法可以是底紋,也可以是漸變也可以是立體的效果,可以根據(jù)畫面需要效果進行調(diào)整。
平面中運用
▲?品牌宣傳海報,如果老板下班前告訴你需要做一個高級的海報,那么用這種底紋簡潔效果肯定沒錯,效果好,還容易出彩。
▲?各種科技類大會邀請,簡單的點線面運用,配合一些網(wǎng)格的排版,效果也不會很差。
▲?品牌包裝,包括我們熟知的大牌LV,BV等都是運用一個底紋圖案去作為品牌主圖形,簡單高級。
圖形怎么來?
看到這里很多人可能會疑惑,這個圖形輔助形怎么來呢,一定不是網(wǎng)上隨便下載或者自己隨便畫!這里需要注意是圖形一定是從你們本身的產(chǎn)品LOGO品牌里面抽取出來,然后去做演變!
▲?如上圖,DOOTA電商的輔助圖形一定是從DOOTA整個LOGO品牌體系中推導出來的,一定是有一個設計原點在里面。
▲?考拉的輔助圖形同樣也是從LOGO中提取出來的
所以這里很重要的一點是,我們在使用圖形或者圖案時候,一定不是憑空而來,一定是和我們整個品牌體系有關,你可以是LOGO中提取的輔助圖形,你也可以是你們產(chǎn)品定位里面功能服務等等,總之一定需要一個理由來證明這個圖形是正確的!
今天和大家分享只是拋轉(zhuǎn)引玉,關于這個風格有很多組合和技巧需要大家多去嘗試!希望可以幫助到大家,下周見。
作者:我們的設計日記,微信公眾號:我們的設計日記(ID:helloskys)
本文由 @我們的設計日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash, 基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!