大屏如何营造科技感
今天HR找到一个设计师的简历,我就顺便去看了下他的作品,然后发现他有做过直播分享,又去看了下他的分享视频,感觉在大屏设计上收获颇多。
现在对于大屏需求,一般都要求科技感。那么什么样才是科技感呢?该如何提升科技感呢?
色彩风格
色彩方面,科技风一般都需要深色来衬托。最常用的就是蓝色,包括深蓝色和透明的浅蓝色。一般我们倾向于选择淡一些的浅蓝色,这样给人的感觉会柔和一些,也更具科技风。
主体
这是整个大屏在视觉上最为核心的部分,大屏一定要有一个能Hold住全场的主体。这也是整个大屏开发中成本最高的部分。
关键词:3D、动效。
常见的主体有地图、建筑、仪表盘等等。
可以用C4D进行可视化建模,也可以用Unity进行模型美化,大致流程为:找到地图模型(高德、百度?)-导入Unity美化-导出-开发编程控制。
bilibili是个好网站,可以在上面找视频学习如何创建模型。
动效
旋转、滚动、延伸出现/消失等等。
注意页面上同时动的东西不要超过4个,否则会分散用户的注意力,反而起到负面效果。
可以看下这个中间导航栏的动效,用canvas画的,很增色:
https://datav.pengxiaotian.com/#/project
PS:这个好像是个学生做的,UI很不错。
小技巧
发光
可以给边框、页面的元素加上发光效果,会瞬间提升视觉体验,这个性价比很高。
粒子效果
一般可以考虑用粒子效果来作为背景。可以让设计师做一个视频,不断播放。
不会3D技术的情况下,怎么营造3D感?
可以找一些PNG图片,通过CSS的旋转、放大/缩小、位移,来实现炫酷效果。
比如PNG图片可以在这里找:
https://588ku.com/image/yuanpankeji.html
去哪里找设计灵感?
网站
Pinterest:
tob.design(这个网站有3D素材可以直接下载后二次加工):
图扑(工业互联网,有很多城市、楼层、零件的案例):
https://www.hightopo.com/demos/index.html
这个公司有自研的WebGL的3D引擎:HT for Web
一些点评:
https://tob.design/#/experience/detail/263
免费的3D素材
这个感觉不是很多:
免费的2D素材
https://588ku.com/image/yuanpankeji.html
关键词
HUD
设计工具
C4D
AI
AE
开发技术
Three.js
WegGL
树木生长效果
https://www.bilibili.com/video/BV1Px411h7vu?from=search&seid=18345112537573738443