贴子标题/内容
产品展示的交互怎么做才有质感?高亮、颜色变换、音频、相机聚焦这几个组件配合着用
<p style="text-align: start;">产品展示项目,很多人觉得模型好看就行了。转一圈,打个光,完事。</p><p style="text-align: start;">但客户不这么想。客户会问:能不能点一下有反应?能不能换个颜色?能不能点一下拉近看细节?</p><p style="text-align: start;">这些要求不过分,但真做起来,你得挂好几个组件。挂少了没效果,挂多了容易乱。下面说下产品展示里最常用的几个交互组件,怎么配、怎么搭。</p><p style="text-align: start;"><strong>轮廓高亮,解决“点哪哪知道”</strong></p><p style="text-align: start;">产品展示里用户第一个动作往往是点模型。点了之后得有反馈,不然他不知道点没点上。</p><p style="text-align: start;">轮廓高亮组件挂上之后,配“高亮”这个动作触发器。触发方式可以选鼠标按下、鼠标进入,或者UI按钮触发。触发之后模型边缘会亮起来,用户立刻知道这个东西是能点的。</p><p style="text-align: start;">高亮模式有两种。常亮是点一下一直亮着,适合选中状态。闪烁是持续闪,频率由高亮过渡时长控制,适合提示用户“这里可以点”。</p><p style="text-align: start;">高亮颜色建议跟产品主色有对比,但别用大红大绿。过渡时长控制亮起来的速度,短一点干脆,长一点柔和。</p><p style="text-align: start;">如果模型有子层级,勾选“包含子层级”,整个装配体一起亮。不想让某个零件亮,加到“子层级剔除”里。物体遮挡这个参数看场景需求,开了之后被挡住的部分不会高亮,关了就穿透显示。</p><p style="text-align: start;">取消高亮配一个动作触发器,一般跟高亮触发方式对应。点一下亮,再点一下灭。取消过渡时长控制熄灭的速度。</p><p style="text-align: start;"><strong>颜色变换,让用户自己选配色</strong></p><p style="text-align: start;">很多产品有多个配色。以前的做法是每种颜色做一个模型,切换的时候隐藏一个显示一个。模型一多,项目就重。</p><p style="text-align: start;">颜色变换组件能直接改材质颜色。挂上去,配“变换”动作触发器。触发之后模型表面材质变成设定的颜色。</p><p style="text-align: start;">“材质颜色”就是你要变的颜色值。配几个颜色,用户点一下切一个。</p><p style="text-align: start;">变换模式有两种:内部变换和外部变换。</p><p style="text-align: start;">内部变换是颜色只应用于自身层级和子层级,适合给某个具体零件换色。外部变换是颜色应用于除自身层级及子层级以外的所有其他模型层级,适合把整个产品换色,但保留某个零件不变。</p><p style="text-align: start;">包含子层级勾上,整个装配体一起变。不想变的部分加到层级剔除里。</p><p style="text-align: start;">变换过渡时长和过渡曲线控制变色过程。时长长一点颜色渐变自然,时长短一点切换干脆。曲线决定手感,先快后慢有惯性,先慢后快有力量感。</p><p style="text-align: start;">延迟执行时间控制触发后等多久开始变色。默认0就是立刻变。</p><p style="text-align: start;">重置颜色配一个动作触发器,点一下恢复初始颜色。重置延迟执行时间、重置过渡时长、重置过渡曲线这三个参数跟变换那边对应。</p><p style="text-align: start;">产品展示里颜色变换一般配在按钮上,用户主动切换。比如旁边放一排色块,点红色模型变红,点蓝色变蓝。也可以配在模型本身上,点一下换一个颜色,循环切换。</p><p style="text-align: start;"><strong>音频播放,反馈感的关键</strong></p><p style="text-align: start;">点击有声音,这个事说起来小,但有没有差别很大。</p><p style="text-align: start;">音频播放组件挂在模型上,配“播放音频”动作触发器。触发方式跟轮廓高亮一样,点一下响一声。</p><p style="text-align: start;">音频从外部导入,音量大小调好,别太响。循环一般不开,点一次响一次就够了。如果场景里有背景音,可以单独挂一个音频播放组件,循环开着,音量调低。</p><p style="text-align: start;">暂停音频和停止音频是两个不同的触发器。暂停是停在当前位置,下次播放从暂停处继续。停止是重置进度,下次从头播。产品展示里一般用停止,点一次从头响一次。</p><p style="text-align: start;"><strong>相机聚焦,看细节的时候用</strong></p><p style="text-align: start;">产品整体展示用全景视角,但用户想看某个局部的时候,得能拉近。</p><p style="text-align: start;">相机聚焦组件挂上去,配“相机聚焦”动作触发器。触发之后关联相机会聚焦到当前模型层级。</p><p style="text-align: start;">聚焦距离表示执行相机聚焦交互时距离当前模型层级的空间距离。数值越小镜头越近,数值越大镜头越远。产品展示里一般设一个能看清细节又不至于太近的距离。</p><p style="text-align: start;">聚焦角度表示执行相机聚焦交互时与当前模型层级的偏移角度,是一个三维向量。xyz分别控制水平、垂直、纵深方向的偏移。调这个参数可以让镜头从侧面、斜上方、正前方等不同角度聚焦过去,不用每次都正对着看。</p><p style="text-align: start;">聚焦过渡时长表示执行相机聚焦交互时过渡所使用的时长。时长长一点镜头移动舒缓,时长短一点镜头移动干脆。产品展示建议设一个中等偏长的值,镜头移动太快用户会晕。</p><p style="text-align: start;">聚焦过渡曲线表示执行相机聚焦交互时过渡速度的变换曲线。先快后慢有惯性感,先慢后快有力量感。看你要什么效果。</p><p style="text-align: start;">相机聚焦一般配点击触发,点某个零件镜头自动移过去。再配一个触发方式让镜头复位,比如点空白处或者点另一个按钮。复位可以配另一个相机聚焦组件,聚焦到整体视角。</p><p style="text-align: start;"><strong>这几个组件怎么配合</strong></p><p style="text-align: start;">我的习惯是先挂轮廓高亮和音频播放。用户点上去,模型亮起来,同时响一声。这两个是基础反馈,必须有。</p><p style="text-align: start;">然后看产品有没有配色需求,有的话加颜色变换。再考虑要不要加浮动标签和相机聚焦,这两个属于增强交互,不是所有项目都需要。</p><p style="text-align: start;">挂组件的时候注意触发方式别冲突。轮廓高亮和音频播放可以同时触发,不冲突。颜色变换一般配在按钮上,跟高亮不冲突。相机聚焦用点击触发,跟高亮不冲突,但镜头移动的时候高亮可以先关掉,避免视觉干扰。</p><p style="text-align: start;"><strong>一个小建议</strong></p><p style="text-align: start;">产品展示的交互不在多,在顺。用户点一下有反馈,想看细节能拉近,想换颜色有按钮。这三件事做到位,体验就及格了。</p><p style="text-align: start;">别一上来挂一堆组件,什么粒子特效、视频播放全加上,看着热闹,实际用起来乱。先把基础反馈做好,再考虑锦上添花。</p>