微软VR虚拟现实UI Fluent ...

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
14402 41 764 2018-05-04

雪姐姐1小时教你做个VR虚拟UI界面,学UI迎未来5G时代!中级教程,需PS和AI软件熟练!

Image title

随着5G规范制定和推广,我们移动互联网将迎来新的高峰——5G时代。到时候很多利用AI大数据的APP及VR AR应用会多起来,大家可以提早接触下这方面的概念设计,今天我们要临摹的案例是微软家出的一款VR UI概念设计。本教程适合PS和AI已经非常熟练的初中级设计师,如果你还不会PS,AI请点击屏幕右边  UEgood课堂  头像,学习下我的其它入门级教程。


高清视频链接:https://www.bilibili.com/video/av23776274


本教程可选3个难度进行临摹:

难度一:PS和AI绘制视觉效果图,画布1280 X 720px,3D模块用我提供的PNG素材


难度二:C4D制作山体LOWPOLY和3D数据可视化饼图素材,组合进视觉效果图


难度三:使用AE2018中的VR插件完成VR 360°全景动画设计(也可以用其它动效软件制作)


请大家按照自己能力选择适合自己的难度,也可以根据自己喜好,在画面上漂浮更多不同的模块,例如视频播放,上网浏览器,音乐播放器等各种模块~··并且进行布局变化等创意~··



Image title

日历和日程表的模块500px*300px,交互布局如上

Image title

相册的模块400px*290px,交互布局如上

Image title

天气模块120px*140px,计算机模块140px*150px,时钟表盘直径200px*200px

Image title

多边形请于C4D中完成,如果你没装C4D,用AI硬怼着画出来,我也不拦着你,当然你也可以直接使用我上面提供的这张PNG素材去完成画面。

Image title

三颗立方体我就是用PS画的,三面拉了个渐变,后面用蒙版擦了个透明,也很简单的,阴影稍微擦得用心点儿~··

Image title

最后是大背景,大背景1280px*720px,我是C4D渲染后PS再调了一下,后来发现PS直接能画~··如果还搞不定,请点赞按钮右边下载PSD源文件。



Image title


Image titleImage title

                                            据说点赞的都加薪了!

Image title

觉得交互动效太难,这边有本从入门到精通的书书推荐给你!

https://item.jd.com/12369040.html

全部评论:41

  • 大嗑松松

    2018-10-22 11:33

    请教下,视频前半部分展示的那个制作软件是什么软件

  • StringWind

    2018-07-23 11:05

    日历每个数字方格的宽不一样?你们教UI不注重细节吗?

  • y蜻蜓

    2018-07-17 13:22

    @jerry ‘lee: 同问

  • VinnyWei

    2018-07-10 17:44

    Go Pro VR player Mac版在哪下载啊请问

  • 小小古

    2018-06-22 13:17

    请问这种VR感觉用于网页是提供什么样的素材呢?

  •  艺尔三思

    2018-06-14 18:26

    @TEA_maN: 请问你找到那个插件了么,还是说是cc2018自带的插件?

  • jerry ‘lee

    2018-06-14 16:04

    为什么找不到最后那张实景vr图片素材啊,求教

  • ken922

    2018-06-05 09:19

    @Jin_: 为什么我用了以后,图层前后交错闪动呢

  • ken922

    2018-06-05 09:05

    @Jin_: 这代码有问题啊

  • TEA_maN

    2018-06-03 15:34

    那个AE的VR脚本哪里有?

  • Jin_

    2018-06-01 17:24

    下载不到go pro vr player,用普通的播放器看 感觉怪怪的

  • lilywise

    2018-06-01 16:35

    求表达式+1

  • Jin_

    2018-06-01 15:27

    @QYxixi: amp = .1; freq = 2.0; decay = 2.0; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){n--;} } if (n == 0){ t = 0;} else{t = time - key(n).time;} if (n > 0){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t); } else{value}

  • Jin_

    2018-06-01 15:27

    老师~我在ae中完成了动效,可是点击打开输出/渲染的时候 vr2输出里 没有输出,这是为什么呢

  • 想象与思维

    2018-05-25 14:23

    nice

  • QYxixi

    2018-05-24 17:06

    求弹性表达式

  • 葛大大

    2018-05-24 16:02

    为什么最后输出渲染之后我这边呈现的动效重复了很多个然后AR扭曲,不像视频上只有一个?有老师或者大神解答一下么

  • fengle

    2018-05-24 15:38

    是加薪了,但加的好少

  • WillChen

    2018-05-24 10:20

    下次视频放B站吧 。。。不想看广告

  • 视觉客

    2018-05-24 10:12

    很棒~

  • 视觉客教育

    2018-05-22 18:58

    @希牙侠: 与其说这个设计它是VR应用不如说是微软最近在推行的一种设计语言。(类似于Google material design)http://www.sohu.com/a/140103069_223764

  • 视觉客教育

    2018-05-22 18:49

    @希牙侠: 这不是Hololens的MR项目,这就是微软另一个纯VR项目的WIN10概念UI设计,本设计为微软Build 2017年大会 发布的全新的Fluent界面设计的第二个Win10重大更新版本里的VR设计。微软Fluent界面设计将遵循5个基本原则,开发者将据此制作互动性更强的UI:光照,景深,动画,材质和尺寸。我觉得HOLOLENS这种MR普及离我们还更远一些。Fluent其实更接近于Google material design这种设计规范概念一些!

  • 视觉客教育

    2018-05-22 15:28

    @一只自愈瓶: 出现这种情况会比较复杂,可能是材质标签,可能是渲染设置,不看源文件我比较难确定问题出在哪里,你如果解决不了,可以选一个山体的颜色,然后把材质球改成白色,再渲染一张,再在PS里合成下,把白色的那张山体以下部分,用锁套工具删除即可快速得到自己想要的效果。

  • 希牙侠

    2018-05-22 15:27

    目前所在的公司 南京睿悦信息 百度搜的到, 实际上这应该是AR的部分,微软的hololens的应该称之为MR,目前是最好的集成方案,而国内的厂商由于硬件及技术限制远达不到hololens的效果,所以基本都是移植的,也很难达到虚实结合,想法不错效果也不错,但是这个只能展示给客户看

  • 一只自愈瓶

    2018-05-22 15:24

    为什么预览积雪可见,渲染之后就不见了啊

  • M.J.F

    2018-05-22 13:38

    太厉害了吧,老师,我对设计现在是充满自信。等我的作业哦

  • 视觉客教育

    2018-05-22 12:57

    @肖露露露: 或者登录BILIBILI后,可以手动把480P改成1080P高清,这样字就看得清楚了!现在视频网站外链都是默认480P的,要你去它主站看高清的。

  • 视觉客教育

    2018-05-22 12:55

    腾讯视频开始播放教程后,点右下角画质按钮可用,把480P调成720P的也可以高清

  • 肖露露露

    2018-05-22 11:47

    视屏怎么好模糊,上面的字都看不清 怎么学呀

  • sosoeasy

    2018-05-22 10:20

    @发光的小gjk: 点赞按钮右边下载PSD源文件

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票