?騰訊企點是SaaS級社會化客戶關(guān)系管理平臺，基于騰訊的社交忆肾、大數(shù)據(jù)和AI能力荸频，助力企業(yè)更好地連接和理解客戶。本文將企點插圖的設計過程進行梳理客冈，記錄基于企業(yè)產(chǎn)品的一些插圖設計思路旭从，希望對大家有所幫助。
過去幾年中，我們不難發(fā)現(xiàn)和悦，除了在傳統(tǒng)的商業(yè)和藝術(shù)領(lǐng)域之外退疫，插圖在產(chǎn)品及界面中作為一種視覺語言產(chǎn)生越來越突出的影響力，在眾多場景下成為提升用戶體驗的有效手段鸽素，因此成為設計趨勢之一蹄咖。
B端產(chǎn)品也逐漸告別冰冷枯燥的刻板影響，利用插圖讓用戶感受溫暖與人性：Atlassian用豐富的場景感插圖給用戶強烈的視覺印象付鹿；Intercom在網(wǎng)站主頁上運用輕松幽默的拼貼插圖生動地傳遞產(chǎn)品的功能訊息澜汤；Slack結(jié)合輕時尚感的人物及其工作場景的插圖給人愉悅的協(xié)作感；Dropbox則運用簡筆輕量的風格傳遞簡單舵匾、輕松俊抵、幽默的產(chǎn)品氣質(zhì)...
插圖可以幫助我們
?直觀傳遞信息，幫助用戶快速理解提升效率坐梯；
?提升界面趣味性徽诲，激發(fā)用戶興趣和行動；
?傳遞產(chǎn)品的品牌個性吵血，幫助加深品牌印象谎替；
?通過故事和用戶建立情感聯(lián)系，引起共鳴蹋辅。
需求背景
企業(yè)QQ钱贯、營銷QQ遷移升級至企點后，企點的界面插圖樣式一度混亂缺乏一致性侦另；現(xiàn)有的插圖也未形成企點品牌風格秩命；空白態(tài)等占位圖多設計為功能圖標，情感化不足褒傅，導致界面氣氛冷冰冰弃锐。至此，設計以產(chǎn)品界面現(xiàn)狀和需求為契機殿托，尋找符合企點品牌調(diào)性的插圖解決方案霹菊。
設計目標
?提高界面體驗一致性，統(tǒng)一規(guī)范化
?強化品牌形象支竹，為界面注入品牌基因
??提升界面友好度和情感化共鳴
設計構(gòu)思
插圖作為敘述性畫面旋廷，始終離不開三個構(gòu)成要素：角色、風格和內(nèi)容唾戚，從這三個方向結(jié)合產(chǎn)品自身現(xiàn)狀柳洋，探索符合企點品牌價值的插圖解決方案待诅。
角色
代表產(chǎn)品團隊叹坦，還是用戶群體？
一方面卑雁，插圖如果選擇企點團隊代表企業(yè)形象募书，可以展現(xiàn)我們的能力绪囱、專業(yè)和責任感，幫助客戶建立信任感莹捡。Atlassian的插圖就以極具包容和多樣性的團隊人員角色來描繪出其作為科技公司強大鬼吵、專業(yè)、靈活篮赢、創(chuàng)意的產(chǎn)品形象齿椅。
另一方面，插圖也可以選擇以用戶形象為角色設計启泣，企點的用戶角色多樣（包括市場涣脚、客服、銷售寥茫、運營）遣蚀，圍繞不同的角色及其不同的訴求可以方便地進行精準的故事講述。結(jié)合插圖的界面場景和情感化的設計目標纱耻，最終我們選擇以企點用戶為視角打造插圖角色芭梯。
內(nèi)容
相比于想象虛構(gòu)的畫面，描繪角色的真實需求場景或工作生活弄喘，可以幫助我們在產(chǎn)品上建立和用戶的情感聯(lián)系玖喘，有效地建立用戶關(guān)懷，達到情感化設計的目的蘑志。Gmail中的Tasks功能引導就利用插圖描繪出了用戶的日常芒涡，十分引起共鳴；Uber通過對乘客出行場景的描繪拉近用戶的距離卖漫，也傳遞出其商務出行的主要場景费尽。
風格
不同的插圖風格展現(xiàn)不同的產(chǎn)品氣質(zhì)。在插圖風格選擇上羊始，首先對現(xiàn)有的流行風格進行整理歸納旱幼。插圖的風格還需以產(chǎn)品需求為基礎，展現(xiàn)產(chǎn)品及品牌的氣質(zhì)訴求突委。
結(jié)合企業(yè)產(chǎn)品的特殊性柏卤，在滿足友好易用的基礎上，也需要平衡業(yè)務訴求上的商務感匀油。
另外由于企業(yè)產(chǎn)品界面量級較大缘缚，不斷新增的功能和復雜的后臺系統(tǒng)，后續(xù)可能會有內(nèi)外協(xié)作敌蚜，也需要考慮方便拓展桥滨。最終選擇扁平色塊風格作為主要風格。
延續(xù)企點品牌氣質(zhì)
為了在插圖中延續(xù)企點品牌氣質(zhì)，我們要考慮企點的品牌現(xiàn)狀齐媒，企點logo是企點固有的品牌形象和品牌資產(chǎn)蒲每，從中提取出配色風格、斜線喻括、小圓角等品牌細節(jié)運用于插圖設計中邀杏，去保持品牌的統(tǒng)一性和記憶點。
方案探索
前期設計了三個提案唬血，并在線上拉取用戶做調(diào)研望蜡，了解用戶分別的喜好和感受。企點品牌識別度較高的方案得到比較一致的用戶反饋拷恨，但會感受有些壓抑不夠輕松泣特。設計在保留品牌識別度的基礎上對用戶反饋問題進行優(yōu)化：包括調(diào)整服飾細節(jié)，通過職場輕時尚著裝風格挑随，提高人物時尚感状您；通過優(yōu)化肢體曲線，調(diào)整色彩比例提升愉悅感兜挨；動作膏孟、物體考慮角色及其業(yè)務場景，提升商務感拌汇。
最終設計出圍繞業(yè)務的插圖角色基礎造型方案：
界面應用
插圖的使用場景非常多柒桑，很多產(chǎn)品也為此梳理出插圖設計及場景規(guī)范。為有序解決企點界面的痛點噪舀，進行界面場景的應用梳理魁淳，方便我們有序地進行插圖的場景化設計。
?空白頁
空白插圖將角色的生活場景結(jié)合界面功能与倡，提升用戶共鳴界逛。
?Placeholder
相較于直白的功能icon描述，以自然物體/場景為靈感結(jié)合功能信息纺座，icon的設計可以更愉悅息拜。
內(nèi)容缺省場景下的配色偏輕，因為其適用于友好占位净响；而在一些新功能引導/出錯場景少欺，則設計更豐富的內(nèi)容和動態(tài)效果，達到吸引關(guān)注或緩解焦慮的目的馋贤。
?出錯頁
在沒有界面元素出錯頁場景下赞别，插圖加上簡單GIF動效循環(huán)，緩解焦慮的同時配乓，提升趣味性仿滔。
?新功能引導
告別單薄的圖標惠毁，設計生動的插圖故事場景，吸引用戶關(guān)注未開啟的功能堤撵。
?幫助中心
在幫助中心利用IP角色進行頭圖設計仁讨，建立用戶教育場景下的初步認知羽莺。
規(guī)范梳理
插圖規(guī)范的制定实昨，包括肢體、顏色比例盐固，圖文組合等內(nèi)容荒给，涉及了企點的各個端和不同界面場景，主要用于插圖協(xié)作刁卜，避免風格產(chǎn)生太大差異志电，達到維持統(tǒng)一性的效果，考慮內(nèi)容長度蛔趴，此處就不再貼圖啦挑辆。
插圖IP探索
在利用插圖有效提升界面體驗后，設計也在思考如何進一步發(fā)揮插圖的價值孝情。一方面鱼蝉，通過對角色的性格識別進一步豐富和延展，打磨角色IP并設計周邊提升影響力箫荡。對角色的性格和識別進一步打磨魁亦，中英文姓名文案思考，并設計跟業(yè)務緊密聯(lián)系的性格特征羔挡，結(jié)合簡潔Slogan加強角色記憶洁奈。從線上延伸至線下，設計制作IP禮品绞灼，以冰箱貼的形式生產(chǎn)設計周邊利术，在團隊內(nèi)部加強插圖的滲透和品牌影響力。
也因此有了二期的冰箱貼設計需求低矮，以打造團隊精神為主題用于團隊表彰小獎品氯哮。將企點家族形象和Team結(jié)合，考慮Q1-Q4的項目節(jié)點商佛，進行四季延展喉钢。
除了在團隊內(nèi)部的影響力提升，也考慮是否可以對業(yè)務有幫助良姆？插圖特有的敘事能力在表達產(chǎn)品功能肠虽、行業(yè)痛點上可能更加鮮活，利用用戶角色漫畫幫助產(chǎn)品運營進行友好生動的用戶教育正在摸索中...
以上玛追。
如果你對插圖很感興趣税课，推薦閱讀：
The history of Dropbox brand illustration
Illustrating a more human brand
Salt & Pepper?—?The Art of Illustrating Texture
