大屏如何营造科技感

今天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:

https://www.pinterest.com/

tob.design(这个网站有3D素材可以直接下载后二次加工):

https://tob.design/#/home/

图扑(工业互联网,有很多城市、楼层、零件的案例):

https://www.hightopo.com/demos/index.html

这个公司有自研的WebGL的3D引擎:HT for Web

一些点评:

https://tob.design/#/experience/detail/263

免费的3D素材

这个感觉不是很多:

https://free3d.com/

免费的2D素材

https://588ku.com/image/yuanpankeji.html

关键词

HUD

设计工具

C4D

AI

AE

开发技术

Three.js

WegGL

树木生长效果

https://www.bilibili.com/video/BV1Px411h7vu?from=search&seid=18345112537573738443