恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
教你快速打造企业级插画系统
117.4°
2022-02-22 | 原创文章 / 经验/观点 / | 举报 | 19463 339 320 15

本文之前做中台企业级插画系统项目的设计流程,和大家一一介绍如何打造插画系统!看完你也会。

说来惭愧,年后回来整理好,放在草稿箱好一阵了,一直忘发了,今天才想起来发。


01 插画系统的背景

近年来,面对企业内部产品的多样性和业务快速增长,插画系统不仅提升了产品的整体美观度,也让工具变得高效。组件化的插画设计增加了界面的美观性,更好地传递品牌特性的同时也提升了协同效率。

本文将从插画风格的选择,如何建立插画组件库,插画系统应用三个方面进行详细的介绍:


02 设计理念

  • 2.1 风格的选取

项目开始前,建立了情绪版,并收集了多种插画风格进行设计与分析。如扁平、线条、3d、几何风格等。

风格选取不仅需要考虑到品牌的差异性,也要遵循可落地性、精致性、延展性等特点。我们摒弃了常规的扁平风格和需要大量人工投入的3d插画。几何插画又过于抽象,不能达到很好的直观理解,所以这些风格都被一一排除,最后选择微立体的渐变风格。

微立体风格:是在扁平插画的基础上,增加立体感,以同色系渐变为基础底色,加入高光和阴影所形成的。它对比扁平插画增加了更多的细节,更好地突出画面的精致感。对比3d插画体量感更轻,能很好地融合于界面之中。 



  • 2.2 设计理论

  • 基于原子理论搭建设计组件资产。通过原子元素进行排列组合,多种原子分子排列组合方式构成了插画模块。

设计形成:人物模式、场景模式、元素模式。 



  • 2.3 颜色的定义

颜色作为品牌表现和情感传达的重要因素之一。从58logo中提取4个色系:蓝、红、黄、绿,并结合B端产品的特性,在原色彩体系上降低了饱和度。选取精致蓝作为我们的主色,同时搭配黄,红,绿为点缀色。

在颜色设定上也考虑了无障碍设计,保障色彩比率大于5。      


2.4 元素演变

通过提取58logo 品牌符号进行变形延展,将 L、O 、 O、C等元素的组合变形,应用在背景元素和衣服纹理中。  

03 设计流程

  • 3.1 人物设计

人物设计难点:既要保证设计的精致化与差异性,又要便于后期组件化的建立和协同使用。这就需要设计要有一定的规范性,且其规范要简单,容易复用。

人物组件设计上采用:渐变+暗面+白色高光,组合成统一的规范。

品牌特征的应用不仅体现在元素和背景上,也体现在人物细节的处理上。为确保整体人物符合设计语言,在圆角的处理上以4的倍数为基础单位进行递增,最小圆角为4px,最大24px,保证插画整体圆滑性。 



  • 3.2 角色的定义

  • 根据不同业务线,给每个产品线定义对应的人物角色,并让人物更具有鲜活特性和故事性。如:hr叫coco,
  • 58员工-男程序员叫马克,攻破代码意思,客服叫vivi,对应客服打电话“喂喂”的声音。


3.2.1 人物展示


3.2.2 人物动态

人物基础动作结合企业场景选定常用的人物动态:走路、坐、站立、指向等。以coco为基础人物,设计10个动作,并针对8个角色,复用10个人物动态,共完成70+人物动态设计。

3.2.3 人物物品

通过互联网人物身份来定义手拿物品。如笔记本,电脑、文件、文件夹、卡片等为互联网人办公常用的物品。同时,物品作为组件可根据需求自由更换。 





  • 3.3 前景、中景、背景的定义

3.3.1 前景

主体人物,最为精致的设计,可以更换不同动作和其他人物。

3.3.2 中景

通用组件和卡片组合形成中景元素,其中通用组件icon,可以在插画系统icon库中调取。

3.3.3 背景

单一的主题色,对整体画面起到点缀的作用。 



  • 3.4 插画扩展-图标设计

我们也设计了一套插画系统图标。图标可应用在插画场景里,也可在UI界面中呈现,使插画系统得到更广泛的应用。


  • 04 场景模式

4.1 场景类别划分

人物模型:重要层级信息引导或指示性引导页面如:首页、引导页等。

物体模型:由于人物会给画面更多重量感,适用于空间较大的页面中。所以增加了场景模式以确保画面的丰富性与轻量化。

场景色彩类别

考虑到不用业务线的系统颜色多样性,我将场景设计分为2个色系:

浅色:适用于白色背景的浅色插画组件

深色:适用于彩色背景的深色插画组件。


  • 4.2 模块设计与组件应用

为了提高设计产出效率,我们也根据不同业务场景产出相对应的插画模版,如:登录页、空页、引导页、首页、详情页等20余种模版类型。并对模版使用场景进行系统地说明,方便使用者根据模板组件快速产出设计。 





05 插画系统的应用与赋能

企业级插画系统上线后在各个业务平台得到了应用,囊括了数据中台、业务中台、技术中台以及多个企业产品线。后期它将不断的延展到各个的企业级项目当中。  




写在最后的话

插画系统的产出提升了企业产品的效率,实现了高效赋能。未来任重道远, 插画系统也将在之后形成一个系统化工具化,使其更具便捷性,让我们一起期待吧!



Powered by Froala Editor

创建于:2022-02-22

收藏

339人已收藏

评分:

完整度:5星

启发性:5星

勤奋性:5星

排版布局:4星

推荐:
很落地的一片教学文章对于提效方面帮助很大 可以多多从中多学习一些东西~

楠哥叫Yolanda

dribbble: Yolanda ju

  • 10

    作品

  • 937

    粉丝

  • 25

    关注

  • 做了近百个网页,总结的设计方法
  • B端中台项目总结 | 属于58数据可视化资源库
  • Yolanda的作品合集
  • 插画生活:项目插画&游记插画

    猜你喜欢

      2022-02-22 | 原创文章 / 经验/观点 / | 举报 | 19463 339 320 15

      教你快速打造企业级插画系统

      117.4°

      你确定要举报教你快速打造企业级插画系统

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年02月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      320
      339
      15

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录