设计发现（商务类视觉要素）

产品官网计公式：to B产品网站=（logo+商务大图）+（产品介绍+行业解决方案+产品套餐+资讯+产品文档...）？但这样子怎么能够体现品牌差异呢？怎么让用户对伏羲产品产生进一步的了解和使用意愿？
通过to B产品网站分析，其设计要点：1、首焦大图；2、导航（即构架）；3、提供品牌认知；4、统一与复用

一、首焦大图

首屏大图成了用户进来看到的第一印象，它决定了宝贵的第一屏。首屏大图可以辅助产品slogan来传达产品价值，整体构造出来官网的整体气质

1、实景场景大图

体现产品调性的实拍大图、或者一些开阔的风景照来表现公司价值观和愿景的壁纸级图

2、用插画讲故事

一些重塑品牌，面向更年轻更有活力的方向发展。插画的形式有利于塑造轻松时尚的品牌气质，同时也是最适合用来讲故事的表达形式。

3、沉浸式

功能与场景融合设计，用户在使用产品过程中，能产生更多情景体验感触，也是一种比较主流的设计思路

4、视频

视频的内容可以是产品功能解说/客户案例讲述/企业文化传播等，视频的触发方式有自动播放/预加载/点击播放等。

5、空间感

大量3D运用在界面设计中，巧妙的界面融合，形成一种全新的视觉感官，将二维世界三维化

6、分割画面

较多使用曲面大块图形进行画面分割，它的好处不言而喻，可以让信息和大块图形进行分割与结合，几乎任何风格都能使用，场景覆盖广，无处不在。

从上面个各方面看到：
流行设计趋势总是在不断的变化，近两年流行的酸性设计、物联网设计、新拟态回归大众视野，其新拟态采用了3D质感的元素设计，其中还包含了运用阴影、透明度以及背景模糊/高斯模糊手法模仿玻璃形态，构建空间感的新兴拟物态风格——毛玻璃拟态风格。
（毛玻璃也是属于3S材质中的一种，具体在三维中的制作方法可以看下这篇文档：3S材质在平面设计中表现   
链接：https://www.zcool.com.cn/article/ZMTIxNTUzMg==.html
 毛玻璃拟态模仿了塑料材质（凹凸质感，凸显层次感）具有独特的特征）

eg：伏羲官网首焦大图应用
1、使用三维+2.5D视角建模，让的视角在统一的基础上更加有风格化的元素
2、在元素上根据内容融入科技化形态，运用磨砂半透玻璃质感和光泽质感的纹理，科技的灵动感更强，从而更加符合内容化表达

二、导航即是框架

合理清晰的导航可以带领用户快速找到想要的信息。导航是网站的路标，也是组织架构的体现，确保用户清楚自己所处的位置。另外to B产品网站信息架构也是高度相似度的，所以设计的重点在于提供影响用户价值评估的信息，并做好“信息加工”，从而影响用户决策。

1、典型网站分析

火山引擎官网
官网：https://www.volcengine.cn/
火山引擎官网包括最新活动、产品、解决方案、文档中心、合作与生态、支持与服务、了解我们、产品搜索、控制台、登录/注册 十大模块，相对来说功能 比较清晰，整个网站设计既具商务范也充满科技感，同时比较灵动，整体观感很好

启元世界
官网：http://www.inspirai.com/
启元官网包括首页、平台产品、行业应用、创新研究、加入我们 五大模块，所有产品直接平铺，结构简单。

旷视
官网：https://megvii.com/
旷视官网包括核心技术、产品、解决方案、行业、开发者、关于旷视 六大模块，比较突出展示他们的核心技术，Brain ++ 和 Face ++ 等开放平台

商汤
官网：https://www.sensetime.com/cn
商汤官网包括核心技术、产品服务、成功案例、新闻中心、关于商汤、加入我们 六大模块，整体采用横版左右结构设计，体验上跟传统官网不太一致。产品 服务中融合了产品和解决方案，结构上不是很清晰。

相芯科技
官网：https://www.faceunity.com/
相芯科技官网包括首页、核心技术、解决方案、开发者中心、新闻报道、关于我们 六大模块，整体结构比较简单，他们的整体的技术方案比较有参考性

2、伏羲官网

针对首焦大图和构架这边开始整体的预研
网站主要包括首页、产品服务、解决方案、合作案例、关于伏羲五个模块
首页内容结构：开展轮播、主推产品、解决方案、合作产品、新闻资讯、学术能力、商务咨询
以下首页内容交互稿结构分布：这个结构最大保证了内容展示的主次，本次主要突出（主推产品和解决方案）

3、页面预研

我们伏羲整体结构上主要是在主推产品、解决方案内容较多，这边尝试做了不同容器样式（选择合适的容器组件来呈现信息）所以这两块内容信息需要着重确认
根据内容板块分布，以及结合之前的科技配色以及对网站进行整体风格化的预研
板式1和2（浅色版）
1、四个主banner：使用三维建模/2.5D配图
2、主推产品：在一屏内展示，二态遮罩露出品牌色
3、解决方案：平铺展示四块内容，浮层上展示二级内容标签链接
4、合作案例：一级导航切换品类+二级导航tab进行内容展示
5、新闻版块：图文轮播展示

板式3和4（深色版）
1、四个主banner：使用三维建模
2、主推产品：在一屏内展示/其他屏显示
3、解决方案：平铺展示四块内容，浮层上展示二级内容标签链接
4、合作案例：一级导航切换品类+二级导航tab进行内容展示
5、新闻版块：图文轮播展示/平铺展示
↓↓↓

三、体现品牌认知

如何去叙述品牌是设计师们不得不面对的问题，根据需求一般可以从下方面考量

1、品牌的显现

结合伏羲部门在推广中频繁用到的蓝紫色、深紫色，并结合以往官网的品牌色，通过色彩调整定义为改版后的主色，具有品牌继承性。

eg：伏羲官网
确认页面的主题色为蓝色，依次确立配色以及文字辅助色。首页大面积的蓝色、图标的蓝色和点击态的蓝色遍布整个网站，目的在于冲击用户的眼球，给用户带来色彩上对品牌的认知。

2、空间和内容的关系

商务类官网一般会去除复杂元素，用准确又有效的方式表达内容，提升设计的严肃感。使用大量的负空间，空白的区域可以让用户更加专注内容的描述。

3、图形主次关系

图形元素是将文字内容、故事或思想以视觉化的方式呈现，所以适合的元素有着视觉传达与用户交流的功能性。使用图形风格图标，平衡好图形和文字两者的主次关系。
首页的重点在于展示“主推产品”，通过创新的图形元素，目的在于减小用户对于文字的理解压力，增强视觉传达的表现力。所以增加适当的图形衬托与文字相符的关联性。

每个代表性的抽象iocn图形可以很好贯穿整个产品介绍/解决方案页，图形的一致性可以减少用户对于新元素的学习成本，同时使用鲜明的品牌色彩，外加统一的的外框图形表达，增强统一感

4、保持可见，反复可见

用户在浏览官网时完成的指定行为，通常有：注册、申请试用、邮件订阅、软件下载等，所以按钮一定是整个页面中最醒目、最聚焦视线的位置上（按钮颜色取决于官网的整体配色和品牌调性）。所以品牌色要分布在官网的三个位置：顶部导航、首屏大图、页面底部。
顶部导航一直吸顶可见，首屏大图上的按钮是视觉核心，页面底部的位置则作为终极呼唤，三个位置互相呼应。

四、统一与复用

1、保持一致

整体页面中保持统一的视觉层级关系，善用视觉层级方法，排序重要元素，能够有效传达意念和信息给到用户，让用户更轻易地阅读浏览。

2、保持秩序

利用栅格系统可以让网页的信息呈现更加美观度，更具可用性，网页将更加的灵活与规范，根据不同的版式或者划分区块，利用栅格系统的网页非常的有条理性。更宽的间隙可以让网页看起来更加舒服，以1200的最大宽度自适应，目的在于更好适配大部分的屏幕尺寸，保持统一的用户体验。

3、容器与模板

根据内容信息复杂程度的不同，这边选择合适的容器组件/模板来呈现信息，内页涉及业务介绍、功能展示、具体产品说明、荣誉资质等

在产品介绍页、解决方案页这两个复用量大的页面中给予每个模块各自的定义，如此一来对于用户来说，模块布局的统一大大减少了阅读的学习成本；对于设计师来说，页面的布局设计是可复用的，这将大大减少设计成本。

总结

设计就是不断打磨，用心体验的一种过程！对页面每个微小的地方我们都关注到的话，那么页面得质感就会得到一个非常大的提升！
除了上面提到的四大要点之外，还有一些提升网站体验的方法，例如：A/B Test、响应式设计、优化加载时间、视觉/交互体验还原度等

坚持看到这里的同学，希望能对设计商务类官网的思考上有所启发~~