医诺生物

下滑查看建站过程↓（网站已上线，网址在文章底部）

说起生物医药，充斥我们脑海的是各种保健品及各种说不出名字的专业术语，就像学生年代背诵的那些晦涩难懂的术语，看完就会昏昏欲睡，而作为一家生物医药公司，最担心的也莫过于此。更何况普通访客根本不会去花费很多时间了解你，如果他们看不懂你的网站，那他们只需要点击右上角的关闭按钮就够了。

一个不一样的定位

在竞品调研过程中，我们发现医诺的竞品网站大多倾向于强调他们的产品，在网站设计上以各式各样的大健康产品为主体去呈现品牌定位。

他们在官网上对于底层技术的表达，总是表达地过于浅显、表面，更多的是停留在各种各样的产品介绍上，造成同质化严重的现象。

但作为一个更讲究技术与权威的行业，更多地向访客呈现其技术的专业性会更具说服力和竞争力。

所以为了和竞品形成差异化和竞争力，我们在一开始规划网站架构时，就确定：以技术驱动的生物医药公司的定位。而在架构设置上，以强调技术为主，弱化具体产品的呈现，去打造一个更具技术水平的生物医药企业官网。（弱化不是不呈现）

正如在导航栏的设计所示，我们用一级导航的【医诺技术】和下面的各项技术说明页面，去代替常规做法下的“产品介绍”的页面，提高“医诺技术”在网站上的重要性。

当我们确定了网站的定位是“医诺是一家以技术为驱动的生物医药公司”后，需要网站表达的重点自然是其技术研发能力。用专业的文字术语去描述其技术竞争力，是其他大部分技术行业企业网站表达自身技术水平的做法。

医诺的官网访问人群中，有很多都是对技术并不专业的普通访客。

而难题是：普通访客根本没办法仅通过文字就能很好地理解技术。

就用动画来表现吧

动画表现的核心：摒除杂余元素，精准表达技术核心。和我们追求实用并美观的建站理念一致，动画的嵌入是为了辅助文本说明，方便普通访客更加清晰地理解医诺的技术，空谈美观的动画而无内核终究是画蛇添足的。所以我们在动画的设计上以力求准确无误呈现其技术为主，在这基础之上再追求美观度。

以【医诺技术】中【微囊技术】的这个微囊的结构动画为例，我们简化了外层结构，用一层薄薄的蛋壳形状来代替，而中间核心的营养芯材作为微囊技术核心进行了重点呈现，从形态和结构上都尽可能还原了实际芯材。

我们借助动画去辅助文本，帮助访客理解医诺技术的做法贯穿应用到整个【医诺技术】板块中，减少普通访客在访问专业领域技术时的理解难度。

结合业务场景定制化动效

医诺作为一家高新技术企业，在发展的过程中不断更新迭代自身的技术，要想让访客看到医诺的技术水平和创新能力，展示其核心的医诺微囊1.0~3.0技术迭代的过程是最好的方法。

为此我们制作了这样的定制化动效：通过设置鼠标的滚动交互，来让访客在自然下滑浏览过程中看完1.0~3.0的技术迭代。

这个过程中，我们需要：

1、与客户反复交流，彻底了解技术核心；

2、制定动效脚本，配套UI交互；

3、与客户沟通表达准确性；

4、与工程师讨论可实现性；

5、视觉效果美化。

最终才能呈现出一个符合要求的定制化动效。

用动画和动效交互可以帮助访客更好地理解医诺的专业技术，而为了更进一步提升访客的浏览体验和加深对医诺品牌的记忆点，我们还需要做一件很重要的事情。

呈现高度统一的品牌形象

企业的VI是企业形象的具象化体现。在企业的周边设计中，VI中的各个元素常常被提取应用在上面，给用户统一的企业形象展现。

我们提取了医诺VI体系中logo的字母“ i ”，并将之应用到了全站设计中。在整个网站交互中，随处可见的i，给了访客对医诺形象一个深刻的记忆点。

总结

点击打开案例网站：www.innobio.cn

如果您也想与医诺生物一样，欢迎咨询我们：点击在线咨询