商越采购数字化：我怎么这么好看之如何为B端产品打造视觉系统

1886年，可口可乐在美国乔治亚州亚特兰大市诞生，自此COCA-COIA的期宾塞体标准字形、纯粹的红色标准色，拉起了这个品牌的红白神话。经过长久的发展可口可乐在视觉设计上经过了多次的升级改造，但都会根据企业视觉系统标准手册执行，目前全球每天有17亿人次的消费者在畅饮可口可乐公司的产品，大约每秒钟售出19,400瓶饮料。

再来说说本土运动品牌李宁。1990年成立的李宁，在新一代消费者面前，有些显得形象模糊。2008年，李宁开始了品牌重塑战略，通过品牌视觉升级逆袭成“新国潮”。近年来，不仅国内消费者被李宁重新吸引了目光，就连国外也开始追捧李宁。2018年，李宁作为国内第一家运动品牌亮相纽约时装周，一炮而红。

在产品同质化越来越严重的今天，一个产品要想从众多的同类产品中脱颖而出，成为行业的标榜也变得越来越困难。而像这些领先的全球品牌，视觉系统策略是它们成功的关键因素之一。

/什么是产品的视觉系统？有什么价值？

简单粗暴来说，视觉系统就是通过最外在、最直接、最具有传播力的系统性品牌设计，让你的品牌/产品火出圈儿。

随着数字化、可视化的到来，无论从手机里的app到我们应用的办公类软件，越来越多的互联网产品也开始重视视觉系统的搭建，通过视觉设计形成强有力的品牌联想。

打个比方，我们看到黄色会想起美团、蓝色会想起支付宝、橙色想起淘宝，这些颜色和图形的结合让我们无意间记下了许许多多的品牌。

而这，就是视觉系统发挥的价值。

/B端视觉系统涵盖的范围和特点

在打造B端视觉系统之前，我们还需要了解B端视觉系统涵盖的范围和特点。

众所周知，B端的产品是服务于企业的，以功能性为主。相比日常生活软件，页面上就减少了很多活动专题，更多的是通过色彩、字体、Icon、栅格、布局、插画、组件等元素传达产品功能，让用户进入页面就能了解菜单的位置，清楚如何新建表单、导入/导出文档、配置系统等等。

在设计的特点上，保持色彩简洁、形式大方，操作方式统一。  

/B端视觉系统的打造方法

铺垫了以上信息后，我们正式进入话题：如何打造B端产品的视觉系统。

通过深入的分析思考及大量的实践经验，我们总结了以下两个重点事项：

1、布局

在B端产品设计中，24列的栅格提供了更多的布局组合空间，灵活度也更高，栅格的整体宽度可以通过统计目标用户群的屏幕分辨率来确定，而列间距、页边距可根据页面的基准单位倍数计算出来。

从产品的信息架构视角为用户串联起色彩、字体、Icon、栅格、布局、插画、组件等元素，提供更好的空间体验、让用户不会在我们的产品中迷失。

为了更好的服务企业，我们采用简洁轻量化的设计，在体现各企业品牌色的基础上做到了可适应任何色系要求的视觉系统，避免色块大面积出现在页面上。以两家有代表性的企业为例，一家是黄色主题、另一家是黑色主题，如何让一套架构适合多种要求就十分考验我们的设计功力了。

2、风格

近几年，设计圈刮起了一股矢量插画风，简洁的构图、亲切的场景、清新的配色都让我们在使用产品时耳目一新，一向聚焦功能与效率的B端产品也受到了波动，开始往这个风格靠拢了。我们在矢量风的基础上融合了新拟物化的手法，既保证了视觉效果简洁、又提高了图形的辨识度，易于理解。

3、交互

交互设计也影响着产品视觉系统的最终呈现效果，如何让我们的产品有温度，考验着每一款B端产品的交互体验。

以“在线问题反馈”为例，我们的设计理念是，无论在商城还是工作台，都设置了在线问题反馈渠道，随着页面滚动实时跟随，划入显示多种反馈渠道，专业客服24小时在线，随时随地解答您的问题。

在商城楼层的设计中，我们也充分考虑了用户的交互体验。在首页楼层有限的空间里，为了兼容商品信息和操作按钮，我们在交互上下了很大功夫，当用户鼠标画到某一商品上时即会显示商品详情及加入购物车按钮，无需跳转详情页再加入购物车。

4、体验

数字化办公也要考虑工具转换给用户带来的学习成本问题，为了降低用户的学习成本，我们在设计上采用了拟物化设计。拿表单为例，模拟纸质单据的布局习惯，让用户看到及可用，达到无需学习上手即用的产品使用体验。

在个人中心的头像背景设计中，我们采用了毛玻璃效果。毛玻璃让人感觉有种朦胧美,让界面看上去有些层次感，呈现了具有沉浸感、个性化的体验。

最后，总结一下B端产品视觉系统的要点：

价值——通过最有力的设计让品牌/产品火出圈儿；

范围——通过色彩、字体、Icon、栅格、布局、插画、组件等元素传达产品功能；

特点——色彩简洁、形式大方、操作统一；

布局——24列栅格的高效利用，简洁轻量化设计；

风格——矢量风、新拟物化，视觉效果简洁、图形易辨识；

交互——可用易用，让我们的产品有温度；

体验——低成本学习的使用体验，同时兼具个性化效果。

作为一家专注于大中型企业采购数字化的服务商，商越对B端产品视觉系统有着自己独到的见解，在产品设计中，一直注重视觉的打造。于是乎我们开发出了一套符合前沿设计趋势，体现专业特性的视觉系统，既符合B端产品调性又兼顾了SaaS产品的特性，同时站在互联网C端的视角，为每个客户搭建美观易用又充分体现自身企业品牌风格的采购数字化平台。