全栈工程师?
嗯.....目前并不是!

跳槽進大廠,這些設計技法必須會(系列一)

本文為大家分享了大廠常用的設計風格之一——紋理風格,通過研究,相信你也一定能夠從中收穫些許設計心得!

本周和大家分享一些大廠常用的設計風格,這些風格大家可能平時有見過,但是可能沒有系統了解,今天先和大家帶來第一個風格——紋理風格,特別是很多韓國設計種,他們的作品中大量運用了這種設計手法,簡單的線條,點線的運用,讓頁面充滿了細節,在國內電商中也運用比較多,我們一起來研究下!

它的用法並不難,常用做法就是基於品牌衍生出一套品牌輔助圖形,用在界面中,背景中或者作為肌理效果,它可以是線,也可以是點,也可以是面!用法也很多變化,那麼今天我們一起來研究下這種風格是如何使用的。

紋理風格特點

1. 強運用:氛圍背景

它可以作為背景,讓整個畫面不那麼單調,同時如果紋理運用的好,反而會顯得很高級,呈現那種低調的高級感!點線面其實一直是設計中很重要的點,只是如今大家都玩扁平化,反而很多設計忽略了這些。

▲ 如上圖某電商公司的輔助圖形,可以看出是由三角形,正方形,圓形,五角星,六邊形等組合而成然後基於這些基本圖形衍生出一系列組合方式去應用到頁面各個場景,如海報,banner等,形成統一的輔助圖形符號。

▲ 這種底紋在設計師手裡被賦予了魔法,出現在海報里,營銷頁面上,形成統一的風格和調性。

▲ 在banner中,這種輔助圖形做為底紋豐富了背景,讓背景更加有層次細節

▲ 在這個海報中,背景的漩渦以及數字的圓點效果都很好的將品牌紋理融於到背景中去。

▲ 這種手法運用起來不用那麼單調,完全也可以結合設計師想象力去發揮,去延展出很多不一樣的效果,同時很好的達成一致性。有心的同學可以去留意每年的電商設計,在背景上都會有這些統一的底紋細節在裡面,這些不是設計師隨意加的,而是有一套系統的品牌體系在裡面!

2. 強運用-主圖形

▲ Facebook 8周年的KV設計,設計師將底紋作為主要圖形,當主視覺去運用,在這個工牌設計中,運用了輔助圖形來形成整個品牌視覺語言,再結合很年輕的色彩,統一而不單調。

▲ 第54界金馬獎的主LOGO,非常有特點,設計師將54這幾個字母很好的通過圖形表現出來,這個LOGO圖形由4個不同圖形組成,這些輔助圖形也分別作為主視覺運用到其他的設計上。

▲ 海報的設計,簡潔有力,配合抽象的圖片,讓人充滿了期待。

▲ 在2018年雙11潮流盛典的整體設計中,同樣放射重複性的正方形,底紋不斷出現在海報上,形成整體的風格調性。

▲ 在主會場上,同樣運用3D正方形重複作為整個舞台來渲染,讓整體設計記憶點得到強化。

▲ 在海報上,背景的肌理效果貫穿始終,形成整體一套的設計風格。

3. 弱運用-頁面輔助

前面兩種,底紋都用作主氛圍背景,主圖形,那麼在很多時候,這些輔助元素運用也可以弱一些,使用面積也比較小,它的存在很多時候能夠讓頁面細節更加豐富。

▲ 在平面設計中比較常見的用法,紋理和底紋作為輔助圖形,讓頁面的細節和氛圍更加豐富。

▲ 在UI設計中也常常會出現,如果你的主體是內容,背景稍微有點空洞,那麼就可以使用這種手法,讓背景更加有層次一些。

▲ 在88會員的頁面中,會員的輔助元素作為背景出現在一些需要背景氛圍的設計中,能很好的將頁面設計元素豐富起來。

UI中運用

紋理風格應用場景也很豐富,從上面案例其實可以看出,無論是平面還是營銷設計,品牌設計,UI設計中都可以去靈活運用,關鍵是看你如何運用。

▲ 網易考拉的輔助圖形非常棒,都是基於圓形去延展的,運用場景也比較豐富,在官方的方案呈現中,這個輔助圖形,從始至終的應用到頁面每個場景。

▲ 在頁面的海報和傳播頁面中,基於圓形的輔助圖形很好的承載了背景,簡潔的排版也很符合產品整體調性。

▲ 官網的設計中,輔助圖形圓形也巧妙的運用在設計中

▲ 在APP的界面啟動頁,營銷設計,會員頁面,輔助圖形都很巧妙融合在品牌之中,詳細效果大家可以在http://www.plus-ex.com/#kaola中查看。

▲ 在上圖設計中,設計師將線條和圓形很好的融於到整個背景,讓原本平淡的頁面充滿層次和細節。

▲ 在很多這種頭部為主核心的頁面設計中,如果只一個單獨的卡片或者按鈕會稍顯得冷淡,設計師將自己的品牌logo或者品牌輔助線條很巧妙融合到背景和卡片中,細節頓時豐富起來。

▲ 這種肌理效果很多時候也可以傳遞出品牌的氣質,品牌的調性,左側那個音樂播放界面的默認圖片,就特別有品質感。右側電商主界面背景,清晰乾淨,後面的線條背景恰到好處。

▲ 在這種大面積背景上,添加這種點線面,或者幾何紋理背景能讓頁面不那麼單調,同時也能傳遞一些品牌元素

網頁中運用

▲ 在很多設計中,底紋可以起到構圖作用,同時也可以做為背景細節去運用

▲ 網站的底紋運用,深色背景下能增強光感,淺色背景下能增加空間

▲ 同時在很多場景,它的手法可以是底紋,也可以是漸變也可以是立體的效果,可以根據畫面需要效果進行調整。

平面中運用

▲ 品牌宣傳海報,如果老闆下班前告訴你需要做一個高級的海報,那麼用這種底紋簡潔效果肯定沒錯,效果好,還容易出彩。

▲ 各種科技類大會邀請,簡單的點線面運用,配合一些網格的排版,效果也不會很差。

▲ 品牌包裝,包括我們熟知的大牌LV,BV等都是運用一個底紋圖案去作為品牌主圖形,簡單高級。

圖形怎麼來?

看到這裡很多人可能會疑惑,這個圖形輔助形怎麼來呢,一定不是網上隨便下載或者自己隨便畫!這裡需要注意是圖形一定是從你們本身的產品LOGO品牌裡面抽取出來,然後去做演變!

▲ 如上圖,DOOTA電商的輔助圖形一定是從DOOTA整個LOGO品牌體系中推導出來的,一定是有一個設計原點在裡面。

▲ 考拉的輔助圖形同樣也是從LOGO中提取出來的

所以這裡很重要的一點是,我們在使用圖形或者圖案時候,一定不是憑空而來,一定是和我們整個品牌體系有關,你可以是LOGO中提取的輔助圖形,你也可以是你們產品定位裡面功能服務等等,總之一定需要一個理由來證明這個圖形是正確的!

今天和大家分享只是拋轉引玉,關於這個風格有很多組合和技巧需要大家多去嘗試!希望可以幫助到大家,下周見。

 

作者:我們的設計日記,微信公眾號:我們的設計日記(ID:helloskys)

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《跳槽進大廠,這些設計技法必須會(系列一)》
文章链接:https://www.pmbear.com/archives/9415
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们