15个科技型网站分享——黄金15'是如何着手项目落地

高新技术企业在互联网的推动下，对线上展示视觉有了更高的要求与标准。

随着视觉呈现技术的不断升级，我们在网站中可以更多的使用产品渲染、3D、视频、全景、动图、canvas、Jquery、视觉差动态、空间层次的动态交互来丰富我们的视觉，对于科技型企业，我们会更加注重企业发展定位、客户定位、产品本身、应用场景、产品调性。

此处我们将分享科技型企业网站制作的前期思路，这可以让大家更好的了解我们拟定的黄金15'是如何着手项目落地。

一、科技相关（实体产品）

* 范例来自极简慕枫实际客户

二、行业大关键词

听到科技、产品，我们脑海中立马就蹦出来的词，我们称之为“行业大关键词”【详见注释2】，网站视觉设计衍生以此为基础：

三、主色调

如果有Vi手册，可以直接参考Vi手册上的规范，没有VI手册的根据企业logo做配色。

以**科技为例：

四、灵感

灵光一现的优秀idea是需要日常的不断积累，多看多想，拆分、组合、变换中不断实践的来的，按照“定位”“目标词”“行业大关键词”为基础进行至少200+次的如下步骤：

① 收集；② 提取；（即  输入、输出）

五、15个网站分享👇：

Wirewerks https://wirewerks.com/en/ 

① banner的水波动态+金属产品+蓝绿色调背景，完美和谐的给用户传递星际力量、冷静质感、冷峻的静态美感、威严而又精致；

② 向下滚动时候整体的缓动向上效果给用户一种简洁但十分受用的正面反馈；

③ 大胆的大版块数字布局，不仅干练地凸显内容主题，更是一种随性但不随意的装饰。

AUGUST https://www.august.lt/en/ 

① 高品质的3D模型与滚动交互的完美结合，让人沉浸式停留界面，期待更深入的了解；

② 简洁干净的布局，集中了用户所有注意力；

③ 整体结构布局拟定了大部分的留白，充满呼吸感，

Exeron https://exeron.com/ 

① 蓝绿的logo配色搭配使用透明的蒙版来显示背后的视频，开屏吸睛；

② 饱满的界面；

Weima https://weima.com/en/ 

① 场景图拥有十二分的质感；

② 产品的3D立体滚动搭配虚拟的线性图标，让人惊叹的创意；

Desktop Metal https://www.desktopmetal.com/ 

① 场景的高质量视频，是能够让人一口气看完并产生深入了解的欲望；

② 切换时候的鼠标样式变化，让人爱上的缓动交互；

Elgato https://www.elgato.com/en 

① 高质量的场景建模+点击展开的交互；

② 饱满的界面；

LAQUA水质分析计 http://www.jp.horiba.com/laqua/ja/ 

① 单屏界面；

② 产品的着重展示；

Modernmilk牛奶过滤器 https://modernmilk.co/ 

① 配色与产品的完美融合；

② 简洁的排版布局；

Superlative电子乐器 http://playsuperlative.com/ 

① 视频动态；

② 单屏丰富的文字排版；

RIMOWA拉杆箱 https://www.rimowa.com/fr/en/unique/customize?PID=97352004#/ 

① 3D拉杆箱360°旋转放大缩小；

② 指定配件的无刷新的一体式优质交互体验；

奥拓电子 https://en.aoto.com/ 

① 精致的banner设计；

② 3D产品旋转用户交互；

③ 丰富饱满的版面设计

舜宇智能光学 http://www.sunnyaiot.com/ 

① 简洁干练的布局结构；

② 直白的产品描述；

Focucy弗卡斯研磨仪 http://focucy.com/ 

① banner高质量渲染产品；

② 简洁优质的布局排版；

welldon惠尔顿安全座椅 http://welldon.net.cn/ 

① 夸张的产品布局排版；

② 3D旋转360°交互体验；

朗国 https://www.lango-tech.com/#/ 

① 会发光的banner极大吸引了用户的注意力；

② 高品质的产品渲染配合简洁干练的布局；