门户的设计改版是怎样的?本文从浪潮海岳云加案例出发,手把手带你认识完整系统的门户设计升级。
一、升级背景
1、云加官网作为云加产品对外唯一官方门户,承载整个云加业务售前及售中的核心渠道,是用户接触云加产品的重要渠道之一;
2、云加是浪潮集团结合人工智能、大数据等最新技术推出的一款协同办公产品,线上页面风格元素在快速更迭互联网背景下较落后,所以本次视觉设计重要使命之一是探索前沿的设计趋势,对云加品牌风格进行全新升级;
3、随着云加的不断发展,用户群体及业务的扩大,原有官网内容架构单一无法打动用户查看转化,根据用户浏览和阅读习惯对官网首页内容进行结构上的调整和更新。
二、设计分析
1、发现设计问题
首页信息量大,有首屏广告位、产品功能展示、产品特性亮点、服务案例、下载专区等,展示更多使其抓住用户感兴趣内容点,最终形成有效转化,但旧版官网除了首屏 Banner 区和产品功能介绍外,其它信息屏效较低,我们提供了这么多信息在首页是用户想看的吗?
2、明确改版目标
(1)框架层。重建全新的官网框架内容和设计,让用户更全面的了解产品,展现公司专业、安全、可靠形象,同时提供用户与企业的沟通平台,降低获客成本,提升潜在客户留存与转化率;
(2)内容层。使产品能够快速在线上曝光与迭代,提高公司产品热度,减少广告营销成本;帮助开发者方便高效的自主操作即时发布;
(3)视觉层。提高云加品牌辨识度,传递“以人为本、资源整合”的产品理念;建立品牌影响力,感知客户,服务客户,成就客户。
3、设计关键词提取
(1)头脑风暴 设计之前小组进行了几轮脑暴,结合自身品牌、用户分析、产品功能亮点等,抛出议题:“你认为的云加”应该有哪些关键词组成?
通过系列关键词和产品特性,从体量和角色分析总结出了“更好用”作为第一个关键词;基于产品的定位和愿景总结出了第二个关键词:更高效。
(2)收集情绪版 情绪版是辅助展现最终视觉表达效果,帮助设计师找到合适的视觉演进方向。
通过情绪版提取视觉应用部分,结合品牌调性,遵循格式塔原则(对齐、对比、亲密、重复)和视觉五要素(色彩、空间、字体、图标、图片),最终视觉风格基调为:轻盈、微质感的浅色科技风格;通过 3D 几何、发光弥散、透明空间进行多元组合。
三、升级设计
新版官网设计
(1)更好用 要让门户框架清晰合理就必须对用户角色进行分析:
第 1 类:潜在企业用户,到访目的是搜索、调研可靠长期的服务/产品;
第 2 类:售前用户,到访目的可能是搜索了解产品/下载产品个人测试使用;
第 3 类:开发者用户,到访目的是帮助开发者更准确、更快速的沟通和排查问题/快速定制开发使用; 在与产品确认内容版块,同时结合用户的需求,根据重要度、关系、次序进行信息的归纳与分析后,确认整个门户的信息架构。
对于首页,我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌slogan对用户视觉进行冲击,吸引用户继续浏览;再通过产品功能、特性亮点、应用场景和成功案例让用户对云加产品全面了解产生信任;通过前两步层层递进的宣导,使潜在客户产生初步合作意向后,最后自然给出联系及下载方式完成转化。
(2)更高效 我们对云加产品进行信息内容提炼,信息整合提炼优化,提升高价值信息的展示优先级,可视化产品亮点介绍,将繁杂的内容信息简洁化,实现高效信息传达。在官网的策划和设计上应该力求将繁杂的信息简洁化,将价值传递可视化,用更直观的形式呈现出品牌和产品价值。
(3)视觉设计 为了更直观传达品牌特性,视觉风格基调定为:轻盈、微质感的浅色科技风格,并且贯穿运用到门户模块、内容排版中,形成了页面整体的统一。
①统一色彩规范体系
②统一图形风格体系
重新设计了一整套更加符合云加产品的图标,不仅更能显出高级感,还能形成差异化,在官网的精致度上与其同行形成鲜明对比。
③统一图形氛围真实基调
整个门户的设计风格、色彩、排版均需要具备统一性,加强品牌符号形象。
采用精致极简、有层次和空间感的3D毛玻璃图形的设计手法,增强品牌科技质感和时尚感,契合云加产品智能化、品质强、可靠安全的特性,给用户传递科技感、未来感。通栏Banner,形成更大视觉冲击力;通过强化品牌化相关的视觉元素,激发用户对品牌认知感。
云加官网升级不仅呈现了产品核心价值,落地更是提高了用户体验,也提升了整体的品牌形象,其新官网彰显出云加强大的品牌行业影响力和竞争力。
点击访问→ 浪潮海岳云加