ToB企业官网如何改版

项目背景：
1.星汉博纳医药科技有限公司以B端业务为主，本次升级涵盖更广泛的业务范围，逐步为用户提供更为丰富和更具展现力的框架体系,给外界展现一个焕然一新、充满活力的品牌印象。
2.线上页面为3年前的设计改版，风格及设计元素在快速更迭互联网背景下逐渐呈现落后趋势，所以除了对结构框架升级外，也重点针对品牌风格做了全面升级。

关于这次整合，我们主要升级了5大核心业务模块：药兜网、药兜采、1076智慧药房、药兜云、药兜国际和员工故事模块.

介绍一下如何打造ToB风格的Banner：
药兜网首页banner主要是以业务宣传、产品发布等内容为主。banner信息展示是非常重要的，很大程度上影响了用户是否决定停留，特别是ToB网站产品文字和内容很多情况都比较复杂。
早之前的banner因为产品处于发展期再加上设计师思维局限性，当初使用了伪3D形式来代表产品和业务，图片雷同性比较高，很多情况下很难直观而迅速地告诉用户来到这里会得到什么有用的信息。
所以我们这次的升级必须要考虑的点就是在突破原来点线面单一视觉呈现的情况下，如何加入具像化的视觉风格，辅助文字阅读及强化品牌图形记忆点。

存在问题：
1.图形和文字内容不匹配。
2.图片元素风格雷同，样式老旧，banner高度太小，视觉冲击力不强。
3.无具相化产品展示，导致品牌辨识度较弱。

如何进行升级：
1.关键词定位：
在做设计之前，我们进行了几轮脑爆,关键词几乎是围绕:科技、智慧、未来、专业、数据、可靠、安全等关键词.

最后,除了科技和信赖,我们选择了更加贴合S2B2C战略的智慧和未来两个关键词.

2.定义视觉风格：
根据关键词搜集了一些情绪版:对设计关键词有个大概的视觉意象.

仔提取每个方案可取的优势点,最终定下来视觉风格的基调为3D几何、渐变色填充、毛玻璃质感、浅色科技.
最终实现在页面的效果:

根据每个业务模块的展示内容不同，将主体通过统一的设计风格和呈现方式进行加工，呈现出如下效果：

小结:做banner要考虑到整体视觉的呈现,需要关注设计趋势、把控细节,此外更需要突出业务场景和品牌调性.
页面视觉风格探索:

在优化banner视觉风格之后,通过搜集优秀案例作为设计参考 ,主要是整个页面模块之间的衔接性和协调性,整体页面结构看起来不死板,比较有节奏感.版面层级较为丰富,擅长使用文字排列与图文结合,包括字体大小、间距、方向、明暗度等方面,拿第一张图为例,内容虽然都是文字,但是排版让人感觉比较有节奏感,且可读性很强.

大概是从三个方面去思考来凸显页面的节奏感:信息模块内容主次、图文的搭配组合、内容可视化文字表达.

重点模块突出展示分析信息架构中的终点内容模块,看哪些是主要展示给用户的,按照内容整理主次,把主要的模块,重点优化,再弱化次要的模块,在整个信息结构上是突出了加盟与合作模块、药兜国际-服务内容模块.

加盟与合作:
通过分析不难发现:该模块是介绍与公司加盟合作之后能够为用户带来哪些便捷和利益.通过图文结合的方式吸引用户并将该部分内容重点展示,可以让用户按照自己的需求快速找到自己的定位.

药兜国际-服务内容:
服务内容模块就是向用户展示业务涵盖范围,以图文结合的方式将文字和关联图片结合在一起,用图片进一步阐述文字内容,能够吸引用户注意力,再加上每个图片左滑自动消失的交互动画,使整个模块更加有趣.

内容可视化表达:
过长的文字内容陈述会让读者有一种枯燥乏味、难以继续阅读的感觉,所以,提炼段落文字主要内容、将提炼的内容理清逻辑关系,再将提炼的文字、梳理的逻辑关系用图文展示给用户,会减轻用户的认知负担,一看明了.

运用色相差异对比及图片的饱和度对比,将传统状态与使用药兜采带来的技术革新做出明显的不同,突出革新之后的优势,吸引用户注意.

5大核心业务模块：药兜网、药兜采、1076智慧药房、药兜云、药兜国际升级优化:

现有模块样式陈旧,内容呈现较少,因当前每条业务线发展规模已扩大且内容丰富,因此每块业务线都要单独展示详细介绍,最后将5块内容合并在同一组可随意切换查看,需要保持模块与模块间风格一致、调性统一,在交互方式上连贯、简洁.

员工故事模块打造:

“以奋斗者为本,不让雷锋吃亏.”是我们的企业精神,也代表着企业管理者对每一给勇于奉献、甘于奉献的员工的高度认同.作为最具代表性的奖励,阿甘奖一直管理者对季度优秀员工的最佳褒奖,为弘扬企业精神、激励每一位员工的斗志,在员工故事模块特别设计了阿甘奖和药兜之星展示部分.

页面结构的规范化:

本次官网升级除去以上的几个模块之外,还有加盟与合作、重点推荐、新闻资讯、商家入驻、服务商中心等7-8个页面,设计师要考虑的是如何将每个页面做出有序、有节奏的排版的同时,保证风格统一.除此之外,在后续开发还原设计稿的时候,要考虑到页面复杂程度和细节还原度,不放过每一个圆角和渐变.

基于官网目标用户群分辨率情况，选用常规适配方案，即网站基于1920尺寸定义设计稿宽度，以1248为断点，内容版心的核心区域为1200PX，两侧留白则用户适配不同屏幕尺寸。并采用最为通用的12列栅格系统，间隔为24px，列宽根据屏幕宽度断点自适应.

写在最后

“工欲善其事,必先利其器”

本次官网改版初次尝试使用figma 软件作为设计工具,设计师利用组件库的创建、设计规范的建立、团队协同操作,免去同事之间相互传文件、设计给开发切图上传蓝湖等中间环节,大大提高了生产效率.

“先完成,后完美”

世上没有完美的人和事,不完美在另一方面来说也是一种美好,在设计之初,尽量避免追求极致而耽误整个开发周期,进而影响上线进度,我们可以先完成设计稿,上线之后其余部门若有其他改动需求,可以搜集起来一起改动,最重要的是要先保证页面完成基础功能的实现,再逐步进行下一步的优化.

截止发稿前,已完成第一版本优化,目前已经收到业务部门对于页面展示内容上的调整意见.后续工作是做移动端适配,移动端相对桌面端来讲,由于屏幕宽度有限,规范比较严格,所以要考虑的因素很多.本次设计之初也有考虑过是否做响应式布局,经过调研,由于业务内容比较多,不合适,所以在移动端还需要单独做一套适配设计.