高端科技感如何塑造 | 网易系机器人品牌与官网设计实录

用户头像
杭州/UX设计师/214天前/4362浏览
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4NjA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
  前言
一个
顶尖的机器人品牌
应该是什么样的?如何让品牌的设计既能立足当下,又能兼容未来发展需要?如何让品牌调性既有
科技的未来感
,又能让用户感受到
人的温度感
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjE1ODg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
易启未来孵化于网易伏羲实验室
现为网易持股的独立科技公司。
核心团队源自网易,依托网易在AI(游戏AI、具身智能)领域的技术积累,专注于AI理疗机器人的研发与应用。公司致力于融合人工智能与机器人技术,打造领先的理疗产品与服务,目标成为全球AI理疗产品领导者。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4Njg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
2024年底,易启未来凭借《基于自适应力控与机器学习的高精度理疗机器人解决方案》,成功入选浙江省“
机器人典型应用场景
”与“
数智优品
”。此次入选也彰显了公司在机器人技术创新与AI健康服务融合上的领先实力。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4NzI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
作为易启未来在机器人品牌与官网设计的合作伙伴,我谨代表团队对整个项目的设计过程做一个回顾,分享品牌设计过程中的思考和总结。
一、品牌策略与调研分析
1)品牌策略:立足当下,面向未来
在品牌设计之初,作为全新的机器人品牌,我们希望设计不仅满足于当前的需要,更能对
未来的发展
留下
更多想象空间
,提供更大的包容性。
经过前期的沟通与探讨,我们将品牌定位于“
机器人领域的顶尖科技品牌
”,而非单纯的传统机器人品牌。我们希望全新的机器人品牌未来不仅仅在健康理疗领域发挥价值,更能在人们的生活中发挥更大作用,创造出更多更有价值的产品,以科技创新缔造美好生活。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4ODQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
而这种定位,也提升了整个项目的设计要求。
品牌图形是一颗
种子
,而品牌调性与文化则是这颗种子在用户心中长出的
树林
。品牌设计不仅只是图形的定义,也包含了整个品牌调性、
品牌文化的塑造
因此,我们后续的调研也不仅仅局限于品牌图形,同样针对整体品牌调性营造、品牌文化的塑造手法进行了更深度的调研。
2)行业品牌调研
我们将整个调研分为了两个部分:广域调研与深度调研。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4ODg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
广域调研
是偏视觉导向的,目标是确定图形可能的风格与组合方式。我们搜集了所有与科技相关的、包含科技属性的、与机器人相关的、与概念文字相关的等等各类优秀品牌图形。通过归纳进行分类,穷举所有的可能性,并在前期确定
可能的几个方向
,避免在风格阶段无目的的过多尝试。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4OTI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
深度调研
则是对优秀的科技品牌进行
剖析
,综合分析该品牌从品牌图形的概念,到品牌文化/品牌故事的塑造,再到品牌调性的打造,最后到品牌应用阶段的一系列
优秀特征
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk4OTY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
比如蔚来汽车的品牌与调性设计,在电动汽车领域独树一帜,品牌图形基于地面&天空的概念,融合了科技感、未来感和高端质感。同时在车身设计、内饰设计中延续了Logo的精致与简约,并通过NIO House等场景化设计强化了
高端新能源品牌
的概念。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MDA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
再比如戴森的品牌设计策略,以解决问题为导向,将
硬核技术
转化为感官体验,将体验店以”实验室“为概念进行打造,将复杂的技术转化为直观的视觉语言,成功定义了
家电行业的高端化
,成为工程美学与商业成功结合的经典案例。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MDQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
通过以上分析,我们与项目方共同进行了深度的品牌图形+品牌策略的沟通,将行业顶尖的案例转化为品牌设计讨论的基础,寻找一致认可的
卓越要素
,为后续品牌设计与官网设计提供了坚实的基础。
3)确定品牌关键字
经过了品牌策略制定与行业分析后,我们逐步明确了品牌需要具备的核心概念,并确定了后续方案设计的关键字,即:
高端、科技、温度、机器人
。通过广域调研后,综合使用场景和延展性,最终决定了以品牌图形+品牌文字的为品牌的组合方式。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MDg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
二、草图绘制与图形细化
1)草图快速绘制
确定了品牌关键字后,下一步就是通过
快速的图形化方案
,将品牌概念转化为具象的图形。在这个步骤中,草图的绘制至关重要。
一方面,草图的绘制不局限于软件,自由的线条更激发设计师的想象力。另一方面,单色的草图绘制可以排除颜色对于图形的判断。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MTI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
2)内部讨论筛选
在第一轮快速绘制后,团队首先会在内部进行一轮讨论和筛选。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MTY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
在这个过程中,除了美感层面的方案筛选之外,我们还需要整体评估最终提供选择的方案类型。整合相似度高、同类型的方案进行整合或者合并。如果某个方向缺少方案,也会安排设计师进行补充尝试,保证方案的丰富性。
3)精细化图形方案设计
完成草图方案的绘制后,我们立刻进行了会议沟通,在众多方案中,选定了这个从图形美感、调性、到品牌概念契合度都符合预期的品牌图形。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MjA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
确定品牌图形后,我们针对图形进行了
精细化的方案设计
,以便能够选择到最佳的品牌图形。通过图形高度、粗细的一系列排列组合,并在不同场景中进行测试,最终逐步缩小范围,选出
最佳的图形方案
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MjQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
品牌图形的细节设计在日后的应用中至关重要,对于线条的弧度、比例,我们通过科学的线条进行归纳、优化,保证图形无论放大到多大,都拥有
完美的细节
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5Mjg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
三、品牌字体与图形组合设计
品牌字体与图形设计如同“
DNA双螺旋
”,二者共同塑造了品牌的独特身份。优秀的品牌设计,绝不会让字体“孤立存在”或图形“喧宾夺主”,而是追求两者的
有机共生
。让用户从每一个细节中感知品牌的灵魂。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MzI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
1)中文字体设计
易启未来的中文字体设计,提取了品牌图形中的竖直曲线“
笔势
”,并转化为字体中的笔画。
在设计中,
不破坏字体的书写结构
,是字体设计需要遵循的重要原则之一。易启未来的字体设计在保证了简洁的同时,完美融入了品牌的DNA,方中带圆,整体简洁而富有科技感。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5MzY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
通过统一的字体框架设计,整个字体的比例延续了图形的瘦长风格。将每个字体的宽高比控制在0.85左右,保证了字体的
比例
体量感
保持相对统一。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NDA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
2)英文字体设计
英文字体采用了无衬线的简洁字体风格,同样延续了品牌图形相对瘦长的字体风格。在多长尝试以后,英文字体的宽高比控制在了0.75左右,保证了英文字体在视觉感知上与中文字
体相对统一
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NDQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
与中文字体不同,英文字体的使用场景,有单行和双行两种组合方式。为了保证不同场景
最佳的显示效果
,需要绘制两套英文字重的品牌字体。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NDg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
3)组合方案设计与测试
同样的,在图形与品牌字体的组合的设计过程中,也需要进行对应的
梯度化尝试
,找到图形与字体最佳的字体高度与粗细组合比例。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NTI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
通过第一轮筛选,选出最佳的3个字体粗细与高度的方案,并将其放到对应场景中进行测试,最终在第二轮对比中选出
最佳的中文字体方案
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NTY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
四、完整品牌规范设计
1)中文标准组合
完成了图形与字体设计之后,就是各类标准化组合方式的设计。通过科学的比例,将品牌图形与字体的组合进行
标准化
,以下是以中文为基础的各类组合方式。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NjA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
2)英文标准组合
为了
品牌美感
文字识别性
的需要,在标准的图形+英文的组合方式中,我们采用了品牌图形+双行英文的方式,也让整个品牌的图形与字体结合更具平衡感。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NjQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
3)图形强化组合
在特定的场景中,为了强化品牌的
识别重心
,我们将品牌图形进行反白处理。同时也包含了单双行、竖版等多样化的组合方式,以满足
不同场景的需要
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5Njg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
4)其他基础规范设计
除了以上的规范,手册中还包含了其他的
基础规范
,比如安全区域、应用图标、颜色应用、错误示范等。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NzI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
5)辅助图形设计
除了所有图形与字体的各种组合与应用规范,在平时的使用中,辅助图形也是
营造品牌调性
的重要构成部分。因此,需要针对不同的应用场景进行配套的辅助图形设计。
比如最常用的图形纹理,可以应用于海报、PPT等场景作为背景使用。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5NzY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
在不同的容器、产品部件中,也可以通过辅助图形+品牌图形的组合应用,加强质感与美感,并强化用户对
品牌的记忆
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5ODA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
在特殊场景中,辅助图形也可以作为动态效果
提升用户的使用体验
。通过品牌图形与动效的固定搭配,可以增强用户对于品牌的记忆与感知。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5ODQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
而在日常的品牌推广中,辅助图形的也可以应用于任何海报、物料、宣传视频等场景中,作为增加品质感与品牌记忆点的“
万金油
”去使用。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5ODg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
五、官网设计
产品的官网设计作为品牌形象的”
数字门面
“,是用户与品牌建立深度连接的第一触点。一个优秀的官网设计能够将品牌理念、产品价值与用户体验无缝融合,形成
强有力的品牌认知和商业转化
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5OTI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
1)设计策略
官网的设计是品牌策略的延续,因此,在官网的整体调性定义上,我们希望以
高端的调性与科技感
以为基调(60%),并在场景中融合更多的
温度感
(40%)。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMTk5OTY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
除了品牌与调性层面的定义外,官网作为对外商业化的重要场景,在内容的规划与展示设计上,我们还制定了以下设计策略:
1、
逻辑清晰
:清晰的产品展示逻辑、价值传递,提升网页的转化率;
2、
场景化
:通过场景化的展示,传递生活方式;
3、
技术可视化
:将复杂原理转化为用户可感知的“黑科技”,提升专业背书;
4、
情感触点
:通过微交互、故事化的内容,增强用户情感共鸣;
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMDA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
2)动效设计
顶部导航动效:
用户进入官网首页后,顶部导航通过透明背景头部进行融合,并在头部中间显示完整品牌。当用户下滑后,顶部导航将会切换成深色背景模糊背景色,并从完整品牌切换到独立的图形Logo。
导航切换动效的加入,既能给页面增加灵动感和高级感,又能在下滑后让导航更加简洁,让用户更关注页面内容本身。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMDQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
页面视频过渡动效:
页面往下滚动到第三屏,视频将会伴随滚动进行缩放出现。官网的前几屏均为静态页面,适当增加衔接动效可以增加页面的丰富性。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMDg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
功能切换动效:
功能介绍模块,采用了加载条+自动滚动的动效形式。通过滚动条,让用户预知功能介绍的播放时间,减少等待焦虑感。而展开的列表式功能名称,也可以让用户通过主动点击进行快速切换。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMTI=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
场景介绍动效:
场景介绍模块,采用了整屏循环滚动的动效,既让客户能够感受场景的丰富性,同时又能尽可能在一屏中看到更多的场景应用方式。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMTY=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
最终,经过多次设计优化与开发测试调整,上线了易启未来的桌面端和移动端官网。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMjA=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
对于易启未来的品牌来说,整个官网的调性与体验很好地延续并放大了
品牌形象
情感化传递
。通过品牌与简约大气的官网设计、高品质的场景呈现、科技感产品形态、人与产品的互动等,营造出温暖而有未来感的科技官网,创造了一种
全新的科技类品牌官网的调性
结语
一个好的品牌设计,能够让产品由内而外焕发出独特的
性格
生命力
。它既是用户对产品最初“
记忆符号
”,又是用户将产品与对未来生活场期待融合后,最终留在脑海里的一种“
生活方式
”。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMjQ=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
好的品牌调性,能够让用户将优秀的产品与品牌产生关联。比如在各种展会中,让你将科幻机械臂的产品与品牌图形放在一起时,就会感受到浑然天成的一体感和延续性,简洁、科技,但又温润、舒适。
高端科技感如何塑造 | 网易系机器人品牌与官网设计实录(图ZMTUyMjAwMjg=) - 教程 - 站酷设计师Jady13_剑杰原创素材 - 站酷ZCOOL
Collect
作为机器人蓬勃发展的时代,我们距离未来家的形态已经越来越近了。希望易启未来的产品能够走进千家万户,成为更多用户美好生活中的一部分。
最后,欢迎大家进入我们官网进行体验:https://www.easefuture.com/  
项目参与成员:剑杰、大大饼、程鑫、汤林涛、范可新、晓惠、江卓、小勺、翘翘
36
Report
|
65
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in