协锐官网

形象升级

协锐岩板一直以国际高端品质岩板为基石，

用细致专业的态度，为全球客户提供系统的岩板应用解决方案。

我们携手重启创意公司进行官方网站设计，

打造功能更完善强大的网络媒介工具。从视觉设计到内容架构，

都 呈现专业性和人性化，深度贴合品牌调性，赋能年轻化营销更多可能性。

01

协锐网站设计 · PC端

设计关键词 |  KEYWORDS

< 有趣 / 设计感 / 品牌 >

网站界面注入品牌标志元素，运用几何元素的形态与线条特性，

营造出简洁感、秩序感、趣味性等视觉效果，塑造传递个性的独特性品牌官网体验。

网站菜单梳理总结5大内容点，对内容进行整体的布局，高效传达信息，

构建功能 多样化、内容全面的全新品牌网站。

交互动态设计：开屏动画+菜单动态演示

◆开屏动画

品牌辅助图形通过流动酣畅的动态变换

采用创造/变形/重组/旋转等艺术感视觉效果

舒缓的开屏加载节奏，图形变化的细腻细节

使动画观感更加舒服，契合新生代审美

◆交互设计

『 鼠标经过变色 』

通过有趣的变色和小眼睛图标

强化跳转按钮的联系感，打造快速响应的感知交互

『 菜单展开效果 』

通过自主展开菜单的信息可视化表达

让用户更好地看清信息，内容解读更高效

同时有序引导用户触发下一层级内容

产品整页设计 + 鼠标经过显示效果

内容导航栏逻辑清晰；鼠标经过选项时有高亮变色效果

产品详情页 + 菜单展开效果

折叠展开式菜单，引导用户探索内容

网页设计从细微之处着眼

从字体大小比例，到高对比度的网站配色选择

注重易读性，将信息以最有效的方式传递出来

更加入品牌辅助图形作为图标符号

为界面赋予更多个性，强化品牌记忆点

网站整页设计：SHEERIN协锐页面动态演示

我们从网站访客的浏览诉求出发

合理地编排信息内容模块

从菜单、二级页面到三级页面，层层递进

内容层级清晰，方便访客获取信息

/ 更多整页设计展示 /

· 二级页面 | SHEERIN协锐页

· 三级页面 | 产品详情页

02

协锐网站设计 · 手机自适应

设计关键词 |  KEYWORDS

< 智能适应 / 内容垂直 / 清晰直观 >

手机自适应，在PC端的网站视觉基础上进行设计

针对手机端体验做出调整

模块化布局内容更加垂直

智能根据不同的手机屏幕分辨率进行适应

使在不同的设备与环境下都拥有最佳的浏览体验

展开目录单独成页，抛去繁琐的装饰

简单清晰的文字直白地为你导航

滑动式交互体验，浏览体验更为流畅愉悦

产品页展示效果

案例页展示效果

详情页部分，以产品&案例图片展示为核心

图片简单而有序地铺陈于屏幕上

辅以英文小字和留白帮助视觉阅读

页面布局直观简单，却不失精巧雅致

查看整页设计展示