本周案例：

项目名称：无锡中微爱芯电子有限公司

项目类型：官网建设（网页设计/前端开发/后台程序）

项目时间：2023年

项目开发团队：上海奕云网络科技有限公司

无锡中微爱芯电子有限公司成立于2004年，是一家以集成电路设计、测试、应用、方案开发、销售和服务为主的高新技术企业，是工信部认定的集成电路设计企业，是国家规划布局内的重点集成电路设计企业。公司总部位于无锡国家集成电路设计中心，在深圳、顺德设有分公司，在合肥、顺德设有研发中心。

中微爱芯拥有一支有着丰富专业知识和经验的团队，拥有完善的IC设计系统，拥有CMOS、BICMOS、BIPOLAR设计能力。产品已形成MCU、LCD显示、LED显示、通用逻辑、信号链、电机驱动、电源、音响、遥控器、通信、配套等多个系列近千款产品，覆盖消费电子、网通产品、工业设备、新能源、汽车电子等多个领域。公司高度重视产品质量，建立了完善的ISO 9001:2015质量管理体系、知识产权管理体系以及EHS环境与职业健康安全体系，赢得了广泛的市场认同和客户赞誉。

本次无锡中微爱芯电子有限公司官网由奕云团队负责设计，奕云团队在进行网站的项目建设时，首要的第一步是需求分析，在这一阶段，我们与客户进行了深入的沟通。了解了其业务模式、目标受众和特定需求，通过需求分析，我们将明确网站的功能要求、设计风格以及技术要求。

在设计前期，我们向中微爱芯网站负责人李先生询问并整理了其对本次网站改版的设计要求。

当用户第一次进入我们的网站时，首先会看到我们的导航栏，查找自己需要的东西，那么导航栏其实就相当于企业网站的路标，是用来指引用户的，如果导航栏设计的简单明了，清晰合理有创意，用户就很容易找到自己需要的栏目内容。

原先的中微爱芯网站导航栏，设计简单直接，这种导航栏设置是绝大多数企业的选择，因为它直观清楚，但中微爱芯表示，他们的产品内容较多，原先的导航栏无法让用户第一时间查找到自己想要查找的产品。

因此奕云团队在设计导航栏时，将产品这一类进行细化，在导航栏就可以清楚地看到所有产品的内容分类，设立一级二级三级导航栏，用户可以在第一眼看到所有产品的路径归属。

改版前：

改版后：

原本的网站放置了静态banner图，图片虽然清楚直接地表明了中微爱芯电子的产品用途场景，却无法让用户在点击进入网站的第一秒等待停留。

奕云项目团队在网站首页banner中，添加了视频动效，并加入了围绕中微爱芯LOGO的电子动效视频，展现方式多元化，为静态内容添加补充信息，有助于向用户提供引人入胜的网站体验，并轻松地传输企业品牌专业形象，与访问用户建立起持久关系。

改版前：

改版后：

网站的策划和设计阶段是网站内容中的重中之重，一个好的用户界面设计也能够提升用户体验，增加用户的粘性，奕云根据分析需求的结果，制定了网站的整体结构和内容架构。

原先的网站设计中，产品内容中规中矩，排列整齐，企业首页相对简单，产品内容过少，用户点进网站后，可操作性低，停留时间长。

设计之后的中微爱芯网站首页，产品排序设计有条理，跟随按钮更沉浸式点击，下拉产品内容清楚方便，指向快捷，更简单直观。

改版前：

改版后：

网站的版式及交互，是一个相互结合设计的问题，优秀的网站，在版式和交互这块都能够做到高度统一，提高用户的参与度和满意度，同样不可忽视。

在首页场景化设计中，改版前的内容场景与产品罗列相似，没有过多区分，应用方案简单，偏向于直来直往的风格。互动性低，浏览速度过快，用户停留时长低。

奕云团队增加风格化设计，场景图占据全屏，在浏览上更加直观清楚，让版式设计不再局限于平面排版设计，有了更多的二维、三维的思考空间，网站的科技含量也相应增强，滑动切换动效，在浏览时也能拥有趣味互动，网站首页排版并不冗长，相反更加大气生动。

改版前：

改版后：

网站排版设计中，需要内容板块的分布遵循虚实结合、张弛有度、大小粗细和颜色的对比、图片与文字的排版对齐方式、图片展现的方式、线条以及色块的运用等细节，都能够让每一个版块，每一个页面产生不同的视觉感受。

而色彩，对人的视觉效果影响十分明显，色彩的冲击性极强，这次我们紧密围绕中微爱芯的logo色调，加以点缀辅助色，形成了整体的颜色搭配。

网站在建设初期，产品内容数量多，指向性不强，用户在查找时无法精准的寻找到产品分类。大多数的网站添加产品后，网站内页过多，一页内容分不清主次。

奕云将大部分的产品都使用图标和文字表述，图标鲜明标志，产品大类引导用户查找，网站附上产品专业信息，让用户在浏览时也可以快速寻找到自己想要的产品信息。

讲完了产品分类，我们的视线转到应用方案，在首页中，奕云团队增加了应用方案场景化的设计，而在导航栏中，我们则更落地产品生活化，增加了多方面的场景方案设计。

以应用方案中新能源场景为例，在内页banner图上，奕云团队增加了场景化建模元素，并细分浏览应用，在点进便携式户外电源应用后，我们将看到关于便携式户外电源的产品整体介绍。

中微爱芯作为一家成立了十年之久的行业领军企业，自然沉淀了极多的企业文化底蕴，并获得了许多殊荣，因此信息繁多成为了一个重要的问题，在网站设计中我们也需要注意，如何将繁杂的信息进行梳理，并让用户清楚地明白，并且能够完整地了解到关于整个中微爱芯的发展历程。

导航栏在设计关于中微爱芯这个页面时，奕云团队也进行了导航分类，将企业篇幅着重分成公司简介、发展历程、企业文化、质量与可靠性、新闻咨询、联系我们。

用户在点击时，可以根据自己想要浏览的路径进行查看，页面屏长数量不多，要点明确，页面分类明细清楚，在这一块如果有篇幅较多的企业，也可以选择这种排列方式。

在公司简介这一栏目，奕云团队增加了动效的数字滚动设计，数字鲜明，不断变化，给人直观的冲击感受，在发展历程这一栏，奖项的滑动设置也相应地减少屏长，让用户拥有舒适的阅读感受。

智能化的响应式设计，可以针对用户设备显示端的尺寸不同，自动调整网站的显示方式，让网站几乎可以适应所有的显示终端，并且也可以在浏览器中调整网站的宽度，让网站不出现滚动条，使用户不管在任何一种显示器上浏览网站，都不会出现布局混乱、显示不全、或者是乱码的问题，从而最大程度地提升用户的网站体验。

中微爱芯本次的网站响应式自然必不可少，网站的内容图片随着用户浏览终端的不同而随之发生变换，并设置响应式图片，滑动操作等手势，操作赋予用户更多的互动性，体验更逼真。

整体浏览完毕中微爱芯的网站，我们也对网站的架构和设计有了个大概的了解，那么现在来跟随我们的脚步，一起看看那些我们忽略掉的小元素。

在设计前期，奕云团队便了解到本次网站改版的一定原因，是希望网站可以更富科技感，因此在设计的时候，我们也添加了不少元素来加强增进网站的科技风格。

与中微爱芯网站相贴合的企业宣传账号设计

根据产品分类做出的快速查找导航。

企业咨询热线简单易于查询

网站悬浮菜单导航交叉检索栏目

多处使用建模场景图

动效粒子图增添科技感

鼠标点击时底图及图标色彩转换