美文网首页设计杂谈
插图的力量,打造有温度的企业产品

插图的力量,打造有温度的企业产品

作者: 2888bf845e80 | 来源:发表于2019-01-18 17:12 被阅读54次

     腾讯企点是SaaS级社会化客户关系管理平台,基于腾讯的社交、大数据和AI能力,助力企业更好地连接和理解客户。本文将企点插图的设计过程进行梳理,记录基于企业产品的一些插图设计思路,希望对大家有所帮助。


    过去几年中,我们不难发现,除了在传统的商业和艺术领域之外,插图在产品及界面中作为一种视觉语言产生越来越突出的影响力,在众多场景下成为提升用户体验的有效手段,因此成为设计趋势之一。

    B端产品也逐渐告别冰冷枯燥的刻板影响,利用插图让用户感受温暖与人性:Atlassian用丰富的场景感插图给用户强烈的视觉印象;Intercom在网站主页上运用轻松幽默的拼贴插图生动地传递产品的功能讯息;Slack结合轻时尚感的人物及其工作场景的插图给人愉悦的协作感;Dropbox则运用简笔轻量的风格传递简单、轻松、幽默的产品气质...

    插图可以帮助我们

    ・直观传递信息,帮助用户快速理解提升效率;

    ・提升界面趣味性,激发用户兴趣和行动;

    ・传递产品的品牌个性,帮助加深品牌印象;

    ・通过故事和用户建立情感联系,引起共鸣。

    需求背景

    企业QQ、营销QQ迁移升级至企点后,企点的界面插图样式一度混乱缺乏一致性;现有的插图也未形成企点品牌风格;空白态等占位图多设计为功能图标,情感化不足,导致界面气氛冷冰冰。至此,设计以产品界面现状和需求为契机,寻找符合企点品牌调性的插图解决方案。

    设计目标

    ・提高界面体验一致性,统一规范化

    ・强化品牌形象,为界面注入品牌基因

    ・ 提升界面友好度和情感化共鸣

    设计构思

    插图作为叙述性画面,始终离不开三个构成要素:角色、风格和内容,从这三个方向结合产品自身现状,探索符合企点品牌价值的插图解决方案。


    插图三要素(个人总结)

    角色

    代表产品团队,还是用户群体?

    一方面,插图如果选择企点团队代表企业形象,可以展现我们的能力、专业和责任感,帮助客户建立信任感。Atlassian的插图就以极具包容和多样性的团队人员角色来描绘出其作为科技公司强大、专业、灵活、创意的产品形象。

    另一方面,插图也可以选择以用户形象为角色设计,企点的用户角色多样(包括市场、客服、销售、运营),围绕不同的角色及其不同的诉求可以方便地进行精准的故事讲述。结合插图的界面场景和情感化的设计目标,最终我们选择以企点用户为视角打造插图角色。


    内容

    相比于想象虚构的画面,描绘角色的真实需求场景或工作生活,可以帮助我们在产品上建立和用户的情感联系,有效地建立用户关怀,达到情感化设计的目的。Gmail中的Tasks功能引导就利用插图描绘出了用户的日常,十分引起共鸣;Uber通过对乘客出行场景的描绘拉近用户的距离,也传递出其商务出行的主要场景。

    风格

    不同的插图风格展现不同的产品气质。在插图风格选择上,首先对现有的流行风格进行整理归纳。插图的风格还需以产品需求为基础,展现产品及品牌的气质诉求。

    风格分析

    结合企业产品的特殊性,在满足友好易用的基础上,也需要平衡业务诉求上的商务感。

    考虑复杂业务下的拓展性

    另外由于企业产品界面量级较大,不断新增的功能和复杂的后台系统,后续可能会有内外协作,也需要考虑方便拓展。最终选择扁平色块风格作为主要风格。

    延续企点品牌气质

    为了在插图中延续企点品牌气质,我们要考虑企点的品牌现状,企点logo是企点固有的品牌形象和品牌资产,从中提取出配色风格、斜线、小圆角等品牌细节运用于插图设计中,去保持品牌的统一性和记忆点。


    企点品牌资产


    方案探索

    前期设计了三个提案,并在线上拉取用户做调研,了解用户分别的喜好和感受。企点品牌识别度较高的方案得到比较一致的用户反馈,但会感受有些压抑不够轻松。设计在保留品牌识别度的基础上对用户反馈问题进行优化:包括调整服饰细节,通过职场轻时尚着装风格,提高人物时尚感;通过优化肢体曲线,调整色彩比例提升愉悦感;动作、物体考虑角色及其业务场景,提升商务感。


    最终设计出围绕业务的插图角色基础造型方案:

    界面应用

    插图的使用场景非常多,很多产品也为此梳理出插图设计及场景规范。为有序解决企点界面的痛点,进行界面场景的应用梳理,方便我们有序地进行插图的场景化设计。

    ・空白页

    空白插图将角色的生活场景结合界面功能,提升用户共鸣。

    ・Placeholder

    相较于直白的功能icon描述,以自然物体/场景为灵感结合功能信息,icon的设计可以更愉悦。

    内容缺省场景下的配色偏轻,因为其适用于友好占位;而在一些新功能引导/出错场景,则设计更丰富的内容和动态效果,达到吸引关注或缓解焦虑的目的。

    ・出错页

    在没有界面元素出错页场景下,插图加上简单GIF动效循环,缓解焦虑的同时,提升趣味性。


    ・新功能引导

    告别单薄的图标,设计生动的插图故事场景,吸引用户关注未开启的功能。

    ・帮助中心

    在帮助中心利用IP角色进行头图设计,建立用户教育场景下的初步认知。

    规范梳理

    插图规范的制定,包括肢体、颜色比例,图文组合等内容,涉及了企点的各个端和不同界面场景,主要用于插图协作,避免风格产生太大差异,达到维持统一性的效果,考虑内容长度,此处就不再贴图啦。

    插图IP探索

    在利用插图有效提升界面体验后,设计也在思考如何进一步发挥插图的价值。一方面,通过对角色的性格识别进一步丰富和延展,打磨角色IP并设计周边提升影响力。对角色的性格和识别进一步打磨,中英文姓名文案思考,并设计跟业务紧密联系的性格特征,结合简洁Slogan加强角色记忆。从线上延伸至线下,设计制作IP礼品,以冰箱贴的形式生产设计周边,在团队内部加强插图的渗透和品牌影响力。

    也因此有了二期的冰箱贴设计需求,以打造团队精神为主题用于团队表彰小奖品。将企点家族形象和Team结合,考虑Q1-Q4的项目节点,进行四季延展。

    除了在团队内部的影响力提升,也考虑是否可以对业务有帮助?插图特有的叙事能力在表达产品功能、行业痛点上可能更加鲜活,利用用户角色漫画帮助产品运营进行友好生动的用户教育正在摸索中...

    以上。

    如果你对插图很感兴趣,推荐阅读:

    The history of Dropbox brand illustration

    Illustrating a more human brand

    Salt & Pepper — The Art of Illustrating Texture

    Illustrating inclusive communities

    Illustrating Balanced and Inclusive Teams

    相关文章

      网友评论

        本文标题:插图的力量,打造有温度的企业产品

        本文链接:https://www.haomeiwen.com/subject/dpoqwftx.html