声音 环境 画板 我最近入手了 VR 设备,体验大大超出预期,难怪老罗觉得 VR 是下一代硬件平台,我觉得还真的有可能。在 VR 中有很多新奇的交互体验,视觉冲击感强,所以我对 VR 设计具体怎么做,充满好奇。不管你将来做不做 VR 设计,其实都应该了解一下,作为设计的广度,拓展下知识面也是必要的,万一哪天就要做了呢?就像多年前的 UI 设计一样,所以这篇文章值得点赞收藏。之前也有写过 VR 相关文章,结合起来看效果会更好。同样超干货,值得一读。用一篇超全面的文章,让你掌握VR设计的基础知识本文旨在向不了解 VR 设计的人介绍一些基础概念(资料来源于谷歌和一些其他机构)。阅读文章 > VR 应用具有非常直观的 UI 界面,与可穿戴设备、手机、平板、PC 上的应用类似,使得大众能够使用 VR。想出新颖的交互会比较有趣,但它却增加了用户的学习曲线。类似于 2D 界面,VR 设计师会用大小、对比和颜色设计出界面层次结构。在 VR 里,大小取决于用户和内容之间的距离,因此了解内容的大小和适当的观看距离至关重要。比如,知道要设计多大的字体是很棘手的,但幸运的是,在现实世界中有很多先例。在为 VR 设计内容时,对印刷设计(广告牌、海报、书籍)也需要类似的思考,对 VR 设计有借鉴意义。考虑下你现在是如何与一个触摸屏进行互动。我们必须慢慢去学习理解许多模式,比如滑动、捏缩放,长按出现更多选项。这些在做 VR 设计时也必须要去考虑好。我相信随着越来越多的设计师进入 VR 领域,将会有更多的想法来创建和打造新的 UI 模式,从而帮助行业向前发展。一、视野视野,或任何给定时间可观察环境的范围,是设计 VR 界面时非常重要的一个方面。更宽的视野,用户在体验过程中的沉浸感就更强。有 2 种类型的 FOV 共同作用形成人类视觉。单眼 FOV 描述的是我们一只眼睛的视野。对于一只健康的眼睛,单眼 FOV 的视野水平在 170-175,包括从瞳孔到鼻子的角度。鼻前视野 FOV 通常为 50-65,对于鼻子较大的人来说较小,而从瞳孔到头部一侧的视野为颞 FOV,其较宽,通常为 100-110。二、新建 Figma 文件1. 画板当做 VR 设计时,我使用的画板尺寸为 3600x1800(360 度),然后我绘制出完美的 FOV 区域来集中主要设计。2. 消失点在透视理论中有一个消失点的概念,这个概念在 VR 设计中很有用,因为它能帮助设计师在设计软件中创建一个便于感知深度和距离的参考。我总结了一种在我的设计中创建消失点的方法,通过在一个圆内以 10-15 度的角度画分隔线。之后,我将线条引入画板,并拉伸线条,直到它在框架内。完成后,将以连续间隔的直线放到画板中。(彩云注:这个方法也很适合用到画透视线中)3. 选择主题并丰富背景一旦消失点画好了,主要的参考线已经变明朗了,接下来就取决于你想如何在环境中发挥创造力。大多数时候,我使用渐变来创建天空和陆地等效果,然后添加了气泡、结构或使用形状的建筑物,这为环境添加了很多细节,使其感觉更 3D 逼真。4. 设计 UI到这一步的时候,你可以基于产品目标开始设计 UI 了。在设计 VR 时,对比是最重要的,因此,尽量减少文本和背景周围的颜色。通常,背景一般是半透明,在 UI 设计中一个白色背景最好适配深色环境,而对于深色背景最好适配白色环境。按钮通常包括两种形式,主要按钮和次要按钮,颜色保持简单同样是最好的。5. 布局与桌面和手机的传统 UI 设计不同,在 VR 或者 AR 中,嵌套导航保持在同一环境中,而界面框架利用了环境中可用的巨大空间。只有当有新的游戏场景可供探索时,环境才会发生变化。其他时候,也可以实现弹出窗口,新层叠加在旧 UI 之上。6. 使用 XR 工具创建曲面 UI仅用 Figma 就可以了,设计工具这块原来就足够了,有一种快速简单的方法来设计原型 3D,VR,AR 界面。有一个插件叫 3D UI Generator,能够自动缩放和调整任何图形,画板以创建 3D 界面和环境。它支持旋转、斜切、缩放、远近、FOV、曲面程度和等距视图。在 Figma 上可以安装 3D for XR: https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR7. 声音用户体验虽然在使用网页或 APP 时,声音往往很烦人,但它是 VR 开发不可或缺的一部分。考虑通感现象,其中一种感觉的刺激导致另一种感觉自动触发。例如,你闻到一些东西,就会产生味觉错觉。这也适用于声音。由于 VR 中仍然缺乏触觉反馈,因此当用户触摸物体时,声音是提供反馈的一种很好的方式。3D 声音(又称 Holophonic 声音)仍处于起步阶段,但将对我们体验 VR 的方式产生变革。我们都习惯于立体声,它提供来自两个声道(左/右)的声音,但全音可以让我们分辨声音是来自上方、下方还是后方。想想当你在外面听到飞机的声音,你凭直觉向上看,对吗?在 VR 中拥有这种声音体验将使用户真正身临其境。三、总结这是 VR 设计最基本的底层原理。这几篇 VR 相关文章一起看完,总算让 VR 中的设计不再神秘了。元宇宙是未来发展一大趋势,不少人都想上这趟车,VR 设计就是最靠近这一趋势的领域之一,VR 设计师这个岗位在将来会越来越紧缺。更多VR好文:Facebook设计师:从VR设计实战中总结的5个设计思路@C7210 :本文来自 Facebook VR 团队的设计师 Gabriel Valdivia,为我们讲述了Facebook 360这款备受关注的新产品诞生背后的一些设计思考与经验心得。阅读文章 > 欢迎关注作者的微信公众号:「彩云译设计」本篇来源:优设网原文地址:https://www.uisdc.com/vr-design
工具 画板 对象 你知道AI中快捷键A到Z对应什么工具,能制作出什么效果的作品吗?不用担心,杰哥带你一起探究下:A直接选择工具(A):一种非常有用且常用的工具,用于选择路径或对象中的特定锚点和手柄。特别适用于操纵组或复合形状的单个组件而不影响整个形状。全选界面中的元素(Ctrl/Command-A):全选界面中所有的元素,可用于查找确认画面的元素分布范围。B 画笔工具(B):一种徒手绘图工具,可将各种书法属性和笔刷样式应用于描边路径。斑点画笔工具(Shift-B):一种绘图工具,其作用类似于画笔,但创建封闭的填充路径而不是笔画。C剪刀工具(C):可以在一条线或一个点上切割路径或框架。锚点工具(Shift-C):单击可以把曲线路径上的锚点转变成直角,点击不放拖动锚点可以把锚点直角转变成曲线。菜单栏-效果(Alt/Option-C):打开菜单栏—效果。D复位颜色(D):点击D可以复位颜色,填充色为白色,描边色为黑色。绘图模式切换(Shift-D):正常绘图和背面绘图模式切换。重复复制元素(Ctrl/Command-D):复制一个元素后,一直按Ctrl/Command-D会连续重复上一步复制的内容。E自由变换工具(E):缩放,倾斜或旋转所选元素的变换工具。橡皮擦工具(Shift-E):一种绘图工具,用于擦除光标拖动的任何对象。辅助处理(Ctrl/Command-E):利用显卡(GPU)的显存加快复杂物体的显示速度。导出画板(Ctrl/Command-E):导出所有画板。F全屏模式(F):按两次快捷键F,可全屏显示,操作界面。粘贴在最前面(Ctrl/Command-F):Ctrl—c复制当前对象,Ctrl—f粘贴在原位置最前面。菜单栏-文件(Alt/Option-F):打开菜单栏—文件。 G渐变工具(G):通常与渐变面板结合使用,此工具可以编辑渐变的形状,大小和混合。编组(Ctrl/Command-G):可将界面中两个或两个以上的元素组合。取消编组(Ctrl/Command-Shift-G):取消编组,释放出各个独立的元素。H手形工具(H):此工具允许用户抓住画板并在应用程序窗口中移动它。当你放大你的作品但希望看到更多的设计或移动到另一个区域而不缩小时,这是完美的选择。菜单栏-帮助(Alt/Option-H):打开菜单栏—帮助。满屏画板(Ctrl/Command-Shift-H):此工具将当前画板范围扩满到可绘图满屏范围。I吸管工具(I):一种出色的工具,可让用户对对象的颜色,外观属性,效果或类型进行采样,并将该选择应用于其他地方。拼写检查(Ctrl/Command-I):用户在画板上输入一段英文,选中英文,按快捷键Ctrl/Command-I,弹出拼写检查面板,开始检测并把错误的单词给抹黑突出显示出来,点更改按钮,建议单词栏有一些建议单词给我们选择。透视网格工具显示与取消(Ctrl/Command-Shift-I):显示透视网格工具或取消透视网格工具。显示隐藏字符(Ctrl/Command-Alt/Option-I):显示隐藏字符或隐蔽隐藏字符。 J柱形图工具(J):用于创建具有垂直列的图形的工具。用户可以操纵图表的值和总体大小。连接(Ctrl/Command-J):连接路径的两端以创建闭合路径。当您发现对象具有开放路径时尤其有用。K实时上色(K):一种时髦的工具,用于为选定的封闭路径添加平面颜色。有了它,您可以绘制对象的面或边缘,而无需填充对象本身。首选项(Ctrl/Command-K):快捷打开首选项面板(菜单栏编辑-首选项-常规等)。切片工具(Shift-K):此工具可让用户将图像拖动到要切片的区域,从而将图切割为网络图像。您可以根据自己的喜好使用指南指导切片。最初用于设计的Web布局。字句调整(Ctrl/Command-Alt/Option-K):快捷打开字符面板,跳转到“设置所选字符的自居调整”。颜色设置(Ctrl/Command-Shift-K):打开颜色设置面板,可配置个性所需的颜色方案。L椭圆工具(L):常见的形状工具。它创建圆和椭圆。实时绘画选择工具(Shift-L):用户可以使用此工具选择实时绘制组的面和边,允许在某种程度上更改选定的部分。图层选项(Ctrl/Command-Alt/Option-L):弹出图层选项面板,可更改图层名称,颜色等配置。M矩形工具(M):一种形状工具,可以简单地创建任何大小的矩形。形状生成器(Shift-M):用于合并或分离选定形状和经常重叠形状的工具。 N铅笔工具(N):用于创建和编辑手绘线的工具。可以将各种画笔和描边属性应用于线条以实现各种风格。与画笔工具不同,使用画笔绘制时无法配置尺寸和形状变化(例如通过平板电脑压力)。新建文档(Ctrl/Command-N):创建新的文档包含文档信息的面板,包括颜色模式,标尺单位和画板尺寸。Shaper工具(Shift-N):使用Shaper工具可随意绘制矩形、椭圆、多边形或直线,并可将其调整成完美的几何形状。模板新建(Ctrl/Command-Shift-N):打开本地现有的模板,新建一个带模板的文档。新建空白文档(Ctrl/Command-Alt/Option-N):自动创建跟上次属性尺寸相同的空白文档。O镜像(O):在指定轴上翻转所选对象的工具。画板工具(Shift-O):允许用户编辑画板尺寸或创建其他画板。打开工具(Ctrl/Command-O):打开一切AI可识别的文件,图片等。菜单栏-对象(Alt/Option-O):打开菜单栏—对象。打开Bridge文件(Ctrl/Command-O):打开Adobe Bridge,选中模板/内容再AI中打开。 P钢笔工具(P):一种绘图工具,可创建锚点并允许用户绘制直线或曲线。透视网格工具(Shift-P):创建一个网格,用作透视图的指导。打印(Ctrl/Command-P):弹窗打印面板,调整打印前各种参数配置,直接打印。置入(Ctrl/Command-Shift-P):置入工具,可置入图片和txt文档,置入时可默认大小也可划定范围。文档设置(Ctrl/Command-Alt/Option-P):针对现有文档重编辑,包含单位、出血位、网格大小,颜色以及画板编辑等。Q套索工具(Q):用它绘制的任何形状的对象的锚点。关闭软件(Ctrl/Command-Q):关闭AI软件,温馨提示:随时保持保存(Ctrl-s)的习惯,养成这个习惯绝不后悔。 R旋转工具(R):允许用户将对象旋转到任何角度的工具。变形工具(Shift-R):工具栏中的液化工具之一,变形工具允许将工具拖过对象的任何方向上操纵对象。这样做会创建新的锚点并改变对象的形状,以用户希望的方式进行成型。显示隐藏标尺(Ctrl/Command-R):显示隐藏画板标志,鼠标右键点击画板标尺可更改标志单位。S比例缩放工具(S):根据固定或指定点调整对象大小的工具。无论你是希望在不损失矢量质量或细节的情况下使对象变大或变小,都非常有用。符号喷涂工具(Shift-S):此工具可在你沿着图片平面拖动工具的任何位置放置多个符号实例。储存为(Ctrl/Command-S):将该画板的信息储存为AI格式文件,下一次操作时按ctrl/command-s直接保存现有信息(作为设计师一定要养成ctrl-s的习惯,你不会后悔的)。另储存为(Ctrl/Command-Shift-S):将画板内容另存为AI格式文件或其他格式文件。储存为副本(Ctrl/Command-Alt/Option-S):将画板内容存储为AI格式或其他格式的文件副本。 T文字工具(T):一种常用工具,可创建水平垂直类型文字,完全可编辑和路径文字工具。打开字符画板(Ctrl/Command-T):将字符面板快速调出,可设置字体、字体大小、字间距、行间距等。菜单栏-文字(Alt/Option-T):打开菜单栏—文字。制符表(Ctrl/Command-Alt/Option-T):打开制符面板,可设置数字、位置和自由连字。U网格工具(U):将矢量对象转换为网格对象。V选择工具(V):可能是最常用的工具之一,它允许用户选择一个对象进行自定义,操作,在窗口周围移动,等等。透视选择工具(Shift-V):结合使用透视网格的工具,允许用户将对象等带入透视图并与创建的网格交互,同时将所述对象保持在该透视图中。粘贴(Ctrl/Command-V):此工具需配合ctrl-c复制使用,粘贴处于当前显示画面的正中心。粘贴文案(Ctrl/Command-Shift-V):此工具粘贴默认复制的内容。W混合工具(W):一种方便的工具,可在所选对象(包括颜色和/或形状)之间创建过渡变形。宽度工具(Shift-W):此工具允许用户在一个笔划内创建宽度的设置变化,完全由用户控制。特别适用于使用压力感应平板电脑,可以更好地控制笔划的宽度。关闭当前窗口(Ctrl/Command-W):关闭当前操作的窗口。 X填充色切换(X和Shift-X):用于切换填充和描边颜色并分别切换它们的快捷键。在AI中工作以加快工作流程并专注于使用矢量图形而不是通过面板和菜单进行创建时,此快捷键非常有用。剪切(Ctrl/Command-X):用于剪切相关元素。Y魔棒工具(Y):允许用户选择具有相似属性的对象,路径等。当您想要将所有粉红色物体一次性变为绿色或某种笔触样式时,这是一款非常棒的工具。预览模式(Ctrl/Command-Y):允许用户在文档的轮廓和预览模式之间切换。Z缩放工具(Z):一种常用工具,通过增加放大倍率来聚焦矢量工作的某个区域,或通过减小放大尺寸来聚焦在较大的图像上。返回上一步(Ctrl/Command-Z):允许用户在规定步数内返回上一步上一步直到设置的最大返回数。在上面,了解了AI中的A到Z的快捷键和对应的效果,赶紧动手试试吧……原文地址:设计杰作作者:杰哥