产品设计 ·

跳槽進大廠,這些設計技法必須會:系列第二彈-卡通簡筆風格

作為一個設計師,掌握各種各樣的設計風格和手法是非常必要的,針對不同的設計需求進行匹配設計。

什麼是設計手感?

之前和大家分享了點線底紋風格,今天和大家帶來一個新的手繪描邊手法的解析,在分享之前先和大家聊下,什麼是設計手感?

如果喜歡運動的朋友可能知道,比如籃球,你想進攻籃筐的時候,你是選擇後撤投籃,還是扣籃,還是傳球,你的每一個機會點的選擇都直接決定比賽的結果。

再和大家舉個更好理解的例子,拳擊手在比賽時,什麼時候用勾拳,什麼時候用前直拳,什麼時候后直拳,什麼時候前擺拳都是需要很有節奏,根據對手情況去出擊。

最近我也在一直反思自己,設計手感,在我們拿到一個項目時候,該用什麼樣風格,什麼樣質感,什麼樣板式,和打拳打球一樣,需要把握好手感,力道,否則一個簡單的項目,你直接一個重勾拳過去,不會獲得想要結果,會導致用力過度,所以作為一個好的設計師,需要掌握各種各樣風格和手法,但是什麼時候出手什麼招,這個是需要把握好火候!

什麼是卡通簡筆風格?

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲ 這是一個典型是手繪簡筆風格,Dropbox非常有特點切且經典的一套設計,整體風格呈現是手繪線條配以低飽和度的顏色,非常有趣味性和故事性在裡面。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲今年Facebook更新了最新版本,其中變化最大的就是圖形圖標上面,舊的圖標採用中規中矩的填充型面形圖標,新版本呈現出更加年輕,卡通,活力的設計,圖標的每個配色以及造型都相對早期的風格有一個很強的變化。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這是獲得IF和紅點雙料大獎的L.POINT的界面設計,同樣來自韓國設計團隊Plusx,除了使用大量可視化的元素,整體的設計風格也是運用這種卡通簡筆風格在設計,趣味的設計讓一個冰冷工具沒有那麼冰冷,卡通手繪風格不僅適用於社交,工具,只要運用得當能讓你的設計迅速區別於同類型產品。

卡通簡筆的特點

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

特點1:故事性

既然是卡通簡筆風格,那麼你的畫面風格一定要趣,不能呆板單調,有一定故事性在裡面,Dropbox設計團隊卡通設計,我們可以看出這套人物設計中,包含了團隊各個角色工種,每個人物賦予他人物本身特點,同時每個人臉上也不是不一樣的表情。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這是Dropbox的一套從個人賬戶遷移資料到企業賬戶的引導頁面設計,作者將整個轉移的過程設計得可愛有趣,像帶着全家一起去旅行,小狗,螃蟹,衝浪板這些生活中元素都巧妙融合到設計中!

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲登錄頁面插圖設計,同樣的這些插畫將很工具化的語言,比如高效工作,無縫連接,減少工作錯誤很枯燥的引導語,通過工作中有趣味場景很好轉化成手繪插畫讓用戶更好理解。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這是一組早上起床做哪幾件事情能提升你工作效率的插畫,起床看文章,把自己打扮美美的,吃早餐,鍛煉身體等等!作者通過這種生活里場景細膩觀察,趣味的表達,讓設計更加生動,所以卡通簡筆風格在設計創意上,一定是需要有故事性,巧妙的能將生活里場景很好的通過圖形化傳遞給用戶。

特點2:單色配色

卡通簡筆風格,很大一個特點就是配色簡單,一般常用一色彩足夠,可以選擇品牌色或者一個輔助色!切忌色彩過多,色彩過多如果掌握不好會很花。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲韓國社交軟件Kakao,整體品牌色是黃色,在它整個設計中,除了插畫人物的角色設計,在色彩上也是沿用品牌色+趣味生活場景結合,整體的品牌意識很強,人物刻畫簡潔有趣。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

在為這篇文章做資料收集時候,我發現韓國設計師特別喜歡手繪簡筆發個運用黃色,可能韓國互聯網用戶普遍更加娛樂化一些,黃色更加年輕,符合他們定位,就和中國喜歡紅色,藍色一樣!能看出來他們很多設計都是黃色基礎上去做演變,探索,很有意思。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這套是我前面提過的那個PlusX的一套作品,我們可以看出色彩在這裡面一致性的很好融合。這是一個金融產品,類似我們國內支付寶,作者在設計上很好的將生活里的支付場景運用進去了,吃喝玩樂記得使用L.POINT來支付。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲色彩的統一性,一致性在這種風格中很重要,一定要保證你的畫面有主色調,畫面協調。

特點3:多色彩配色

當然除了單品牌色搭配,也可以使用多色彩,但是要注意,多色彩一定要保證你的畫面有主色調,一般使用比例是70%主色調,20%輔助色,10%輔助色的比例。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲早期的QQ相冊,當時這套引導頁也很經典,很好的通過這些插畫形式將功能融入其中,但是這套設計精彩之處在於色彩沒有使用很濃烈的設計,使用的一套比較低保和度的配色,所以看起來才沒有那麼亂。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲運用多色彩組合時候,一定要注重比例關係,同時色彩的明度,飽和度上需要乾淨,不能臟。

特點4:手繪感

手繪卡通簡筆,當然在手法上需要體現一些輕鬆活潑的線條,筆觸不能那麼僵硬,這是直接決定這一套風格很重要一個點。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲線條不一定要過於規律,相反不規律的線條很能讓人感覺隨意輕鬆活潑,當然避免生硬的線條。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲熊筆記的引導頁,我們很明顯看到這種筆觸感,線條由粗到細的這種自然痕迹,讓設計更加柔和親切。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這種大場景運用,在halp這個項目中,運用的淋漓盡致

在UI中的運用

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲前面提過Facebook最新版本就是運用這套風格在新版本設計中,整體呈現很年輕活潑。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲最近關注比較多的韓國應用,很多都運用這種風格,在圖標,banner,引導頁上,呈現完成的視覺體系。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲這種風格,需要和整體界面風格,配色融合在一起會更加整體,統一。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲也可以用局部使用,比如引導頁,空白頁面,提示等等,呈現出手繪風格。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲LPOINT在引導頁面設計上,也同樣使用這一套的視覺語言

在 圖 標 中 的 運 用

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲手繪簡筆圖標相對於傳統單色圖標,整體活潑性更強,更加容易體現產品性格,但是需要整個APP都是類似風格才會顯得有體感,如果只是局部使用,可能會有些突兀。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲除了簡單圖標外,還可以一些複雜圖形,比如在九宮格圖標運用上,或者空白頁面,網站上都可以運用此風格。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲藝術家BurntToast的一套作品,個人風格分明,色彩明亮,能很好的將這種手繪簡筆運用到各種各樣場景。

在插畫中的運用

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲ 如果看膩了,扁平化純色插畫,我們是否可以去探索一些新的可能呢,比如手繪簡筆插畫,畫大型場景也非常棒。

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

跳槽進大廠,這些設計技法必須會 | 技法系列第二彈-卡通簡筆風格

▲也可以做成系列表情包,本周的分享就到這裡,我們下期見。

相關閱讀

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

 

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

参与评论