之前视觉同学分享了临感官网升级【视觉篇】,本次主要从交互和项目推进部分进行阐述,为大家揭秘VR全新官网到底是怎样炼成的?!
1. 品牌上
风格定位模糊、品牌调性传达不清。
2.交互体验上
体验较基础且交互形式单一,浏览时没有给用户WOW时刻。
3.信息布局上
信息层级不够清晰,重点产品服务不突出;
信息传递不够精确,服务能力展示不明确。
1.WHO??官网为谁服务?
临感VR所提供的是中台服务。自然服务于商家、客户、以及感兴趣或需要了解VR业务的人。
2.WHEN??官网处在什么阶段?
临感在单项业务中开疆拓土的成长期。相比以销售连接为主要目的业务来说,我们重在展示,轻量连接,因此商业化连接的内容在网站中的体现相对隐藏和次要,留出入口即可。
3.WHERE??官网要在何处展示?
鱼和熊掌我们都要。有一个链接,用户在哪都能打开。PC端和移动端我们都要做好。
4.WHY??官网用户为何而来?
希望潜在爸爸们通过官网,了解我们的信息,信任我们的能力,与我们取得联系。
5.WHAT??官网展示什么?
为了让用户与我们相识相知相爱,自然要在全方位SHOW出来,所以在门户设计上需要:
1)展示临感这个好品牌(?看这是我们!)
2)展示临感的各种新能力(?我们有点东西!)
3)展示我们的酷效果(☎️快来联系我们吧!)
五问过后,我们锁定了本次官网改版大目标:
“用创新的设计和流畅的体验,全面展示临感的品牌和能力,给潜在用户留下深刻的印象。”
目标明确后,我们立刻围绕目标开始设计。但是实际过程中着实也遇到了不少挑战。经过反思和复盘,沉淀了三关打怪攻略送给大家,希望大家遇到这些问题都能顺利PASS!
官网作为传递品牌印象的突破口,我们在设计上面对的第一关挑战就是——“如何让官网的设计更符合品牌的气质!”
通过脑暴和研究,我们发散出了团队成员心中对官网和品牌的印象:
从品牌概念&产品特性&设计体验趋势三个方向进行收拢,我们提炼定义出设计的三个关键主题词,也是我们的设计方向。
1. 温度与科技:
我们「临感」品牌的定位为“有温度的科技感”:
通常情况下,技术前瞻型公司强调科技感是很常见的。临感品牌面临的实际情况是,科技是基础,我们更多的使用场景是很生活化的,因此我们希望让这层科技感更有温度,更贴近生活,更贴近用户。
设计时,具体表现在颜色、模型材质及形态表达上。
2. 立体与空间:
结合VR产品自身特点,我们探索了更深入的VR设计,我们希望突破从原本的二维平面空间,呈现更立体更真实的场景,把VR自带的这种属性更直观的传递给用户。
主要表现在场景呈现方面:运用了3D模型,具象了三维空间,突破了空间限制。
3. 自然与流动:
在体验方面,我们希望所有衔接都是流畅、动态的,都是符合自然场景秩序的。
主要体现在转场和交互反馈方面:
1.转场动效方面,保持场景延续性和完整性,通过元素衔接的方式,控制节奏感变化,在符合实际场景的情况下,增加一些跳脱灵动的转场方式。
2.另外每一次的变化都是跟随用户的交互操作而变,让用户有掌控感。
定义了以上3个设计方向,下一步自然就是把这些用故事化的内容去表达出来:
结合临感能力和应用场景,将文字说明快速转化为图形和画面,构建了故事板,将官网的视觉呈现用故事化的表达呈现出来。故事化的内容也让我们决定了使用同页刷新的形式,而不是长页面滚动的形式进行浏览。
确定完整故事线后,我们就对整个页面的结构/交互形式/动画实现方式/加载样式等进行详细的产品技术评估。
我们首次尝试用「3D」动画把官网“画”出来,技术同学也首次尝试使用WebGl“画”出门户网站。对于设计和技术同学来说,都是一种全新的尝试和挑战。
1.机制上:技术与设计机制的改变
为了应对新的挑战,技术与设计合作机制也全面突破。
常规的合作都是线性的,交互视觉技术依次介入产出。但这次我们打破传统合作机制,采用了三线交叉推进并行的方式。
前期-技术帮我们介入分析了每一种方案的优劣利弊以及开发预期;
中期设计产出阶段-交互一部分依靠视觉中的UI和技术去补充实现,中间视觉3D设计的过程-交互和技术也全部介入;
后期技术开发阶段-视觉和开发基本保持同步更新和修改实现细节及展示效果。
2.配合上:延伸设计和技术合作的边界
由于很多未知盲区和不确定因素,各方能力阈值都得到拓宽。
在没有交叉了解对方的能力知识时,大家都像是盲人摸象,只了解各自的一部分,产出的东西有可能出现牛头配马嘴的效果,效率自然大打折扣。
但是当我们打破常规边界,全程通力合作,对合作方的解决方式略知一二心中有数,各自的“盲区”就会变成大家共知的“已知区”,边界模糊了,配合效率也大大提升。
细节决定成败,网页设计过程中,没有对以下这些细节进行考虑,很有可能在你以为搞定一切的时候,被问到措手不及(别问我为什么知道?)。
因此,几个干货满满的小经验送给你。
希望大家设计网站时也能提前考虑,不重蹈(我们的)覆辙。
1.关于页面适配
普遍来说,适配有2种。当被问到要做哪一种时,根据实际需求情况,准确判断。
#响应式 Responsive Web
响应式简单来说就是技术同学写一套代码,就能适配手机、电脑、pad等多端屏幕。
特点:适应性比较高,对于提升网页的实用性比较好用
适用类型:页面功能不多、用户交互少、不需要经常升级的产品
# 自适应 Self-Adaption
自适应式就是需要做一对一的界面设计,每类尺寸分别设计和开发。
特点:设计和开发成本较高,需根据设备类型出多套方案,方案间差别会比较大
适用类型:适用于功能复杂、用户交互频繁、设计个性化的产品(比如电商平台)
因此,我们本次选用的自然是比较常见的响应式。
要想更好输出适配,还需要了解常见的“中断点”,根据它去设计布局。
# 中断点 BreakPoint
中断点,是网页在收缩的过程中的最小范围。当网页宽度到达这个范围以后,网页内部的元素就要进行相应的变化,用来适应网页尺寸的变化。
因此,根据这三个中断点,一般就会出现三种布局,输出这三种布局的展示样式,技术同学就能写好一套代码一键应用了。
2.关于技术选型
如果遇到创新的设计形式,一定一定要好好了解技术同学的实现方式和各自利弊。这样既可以知道如何输出,还可以提前做好风险预判。
我们本次场景动画规划了两种技术实现方式。一是基于WebGL的Three.js实现、二是常规的视频输出。最后,综合成本及时间等因素选择了后者。
3.关于搜索优化
无论什么类型的官网,无论是给什么类型用户准备的内容,多一点人看总是好的。如果别人看不到,那设计的价值也大打折扣。
一般的顺序是先设计官网,上线后再做搜索优化。但更好的方式是在官网设计的过程中,就要有搜索优化的意识,做搜索优化的准备。不管是竞价服务、关键词优化,还是内容反链、清晰导航、多入口引流……,优化方法多多不细展开,但重要的是提前做好优化准备,能够用让更多人看到了解你的网站。
临感VR新官网现已上线,
欢迎大家访问?vr.58.com了解我们。
也希望大家多多期待临感未来的能力拓展和官网未来的迭代优化。
本篇文章来源于微信公众号:58UXD