EID聊天氣泡設(shè)計小課堂:氣泡設(shè)計的奧義 (原創(chuàng))

挖掘技術(shù)哪家強?氣泡到底是什么鬼?浴室那些肥皂泡泡嗎?NONONO,本文所講的氣泡絕非一般的氣泡,而是跟我們網(wǎng)絡(luò)生活息息相關(guān)的氣泡。


什么?這坨黃黃的對話框就是氣泡?什么是氣泡?為什么要有氣泡?氣泡有什么卵用?莫方,帶著這些疑問乖乖坐好,EIDcenter設(shè)計師來帶你開啟新世界的后門♂。

什么是氣泡?

講多無謂,放圖!【沒錯就是這么豪邁!】




為什么要有多彩氣泡?

“有個性”

隨著移動社交應(yīng)用產(chǎn)品的用戶日趨年輕化,社交產(chǎn)品在使用場景上也更加追求個性化展現(xiàn)。個性聊天氣泡,充分滿足了年輕用戶彰顯自我、表達自我的需求。

用個性化、情感化、趣味化的表達方式,可以縮短用戶溝通的生硬感和距離感。

講那么多語言上的描述可能大家都還是會一臉懵逼吧,接下來我們舉個栗子相信大家會清晰很多。


看著上面幾個氣泡,大家覺得這幾個氣泡能傳達什么情緒呢?

比如這個可愛的幽靈造型的氣泡,你很容易就會想到“萬圣節(jié)”、“幽靈”、“搞怪”等這些萬圣節(jié)氣氛,在聊天中也會提醒了對方萬圣節(jié)的到來,搞怪的造型也會讓聊天更加有趣味性;再比如粉紅色那個有蕾絲邊的可愛氣泡,你很容易就會覺得想到“可愛”、“少女心”、“戀愛”等詞語,很容易就會覺得跟你聊天的是一個有少女心的可愛妹子【當然在這個雌雄莫辨的年代,對方也極有可能是個“可愛的”藍孩子

常見氣泡類型有哪些?

1、整體型:

以某種物體的形態(tài)為基礎(chǔ)跟氣泡的幾何形態(tài)做基因結(jié)合。


舉個例子,這個方形的小蝙蝠是如何設(shè)計出來的呢?


方法分為三個步驟:

一、用幾何形體作為主軀干(立方體);

二、通過觀察添加四肢與頭部特征(如:翅膀、尖耳朵、牙齒等);

三、提取物體本身的色彩特征(黑暗系)。

因此,我們就得出了一只基因結(jié)合成功的立方體蝙蝠??!

套用這三個步驟,我們可以通過氣泡“我是大貓貓”這個例子來嘗試自己分析一下:


首先氣泡是一個有尾巴帶圓角的矩形,結(jié)合方法分析:

一、氣泡的主形是圓角矩形,尾巴是附形,因此把貓的軀干定位定為一個圓角矩形;

二、貓是四腳爬行動物,耳朵是豎起的,還有一點就是氣泡有尾巴貓咪也有尾巴;

三、參考的貓咪毛色偏暖黃色。

——所以,我們最終就可以得出這樣可愛的設(shè)計啦!

2、素材型:

需要用到特定的素材形象,提取與其相關(guān)的元素進行設(shè)計。(素材多以明星、卡通為主,這類素材基本不能做整體變形)

素材型氣泡的制作方法也有兩個步驟:

假設(shè)我們接到下面這樣的一個素材圖,我們應(yīng)該從何下手??

我們可以從兩方面下手:

一、首先了解一下素材背景(不熟悉先問問度娘,還可以瀏覽官網(wǎng)、論壇等),需要提取的方向包括角色的存在背景、身份、氣質(zhì)、特色配件、主要色調(diào)等;

二、提取信息以后還要注意一點就是重要元素主要放在左上角或左下角(即氣泡外部)。【為什么呢?!因為當我們發(fā)送氣泡的時候,頭像會出現(xiàn)在右邊即氣泡尾部(客態(tài)水平翻轉(zhuǎn)頭像依然在尾巴后方)。】


3、裝飾型:

主題比較抽象或主要元素比較零散瑣碎的,如:少女情懷、素食主義。(多注意畫面的平衡,可以做對角處理,氣泡尾部盡量簡單)


那么,我們在主體抽象的情況下要如何進行裝飾型的氣泡設(shè)計呢?我們其實可以進行聯(lián)想,做一個簡單的頭腦風(fēng)暴。

進行頭腦風(fēng)暴大概可以分為兩個方法:

一、吃老本!靠自己的經(jīng)驗與生活體會做快速聯(lián)想與提取;

二、抄捷徑,找度娘!利用搜索引擎,搜索關(guān)鍵詞,根據(jù)搜索結(jié)果延伸搜索更多關(guān)鍵詞,還可以瀏覽相關(guān)網(wǎng)站、論壇等。


舉個栗子,例如“少女情懷”,我們對少女的印象一般是粉色、蕾絲、花、可愛。從年齡分析能想到學(xué)生時代,可以聯(lián)想到青澀的學(xué)生情竇初開的初戀。如何體現(xiàn)初戀???甜甜的、粉粉的、愛心、情侶杯。那最后就總結(jié)一下,氣泡主體用蕾絲做裝飾,重要元素用情侶杯,配色采用粉色調(diào)。

了解了幾種氣泡的類型以及創(chuàng)作思路,那么,我們平時在手機上的聊天氣泡,到底是怎么的實現(xiàn)原理?接下來給同學(xué)們簡單地介紹一下我們的設(shè)計規(guī)范。


如何構(gòu)思動畫?



動畫的設(shè)計我們可以遵循兩點:

一、風(fēng)格統(tǒng)一:

“羊毛是長在羊身上的”,氣泡就是羊,動畫就是羊毛;動畫的風(fēng)格必須與氣泡的主風(fēng)格保持一致。

二、元素合理:

動畫元素一定跟氣泡本身要存在邏輯關(guān)系,戴耳機的女孩自然能聯(lián)想到音樂,因此動畫隨韻律飄動的音符。

教練我不滿足于基本功,教練我要發(fā)大招!

好好好,那么如何給我們的動畫加分呢?教練我這里也有兩個方法哦!拿著筆乖乖記下吧!



一、場景化:

把動畫融入到氣泡所凝造的場景里面,如“鯊魚出沒”氣泡本身的設(shè)定是一個海洋,一只手伸出水面,是一個呼救的場面。那為什么要呼救?。坑龅绞裁匆艟龋。磕缢?、有鯊魚,這就合理了;

二、情緒化:

分析一下氣泡的情緒,如“窮吃土”描述的是一個很窮的人,已經(jīng)窮得要吃土了,這么慘的狀況,那肯定是淚眼汪汪,吃著土,這樣才能傳達苦逼悲慘的情緒。


歡迎關(guān)注我們的微信獲取更多設(shè)計教程:EID_center

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容