虚拟漫游交互设计秘笈 – krpano中文网对话互动视界CEO

这次与肥宗对话的张海浪君是互动视界全景视觉的CEO、联合创始人及互动视界文化传媒总经理,他还是:

交互多媒体设计师、平面设计师、专业全景摄影师、全景视觉践行者

你可能之前不知道互动视界,更别说了解张海浪是何许人也。那你也许知道特斯拉,那个到现在都很火的电动汽车,特斯拉电动汽车的官方全景展示就是互动视界拍摄制作的。

0

互动视界合作过的客户还有那些?

京东、乌镇景区、中国银行、北京瑰丽酒店、隆力奇、广州国际车展、北京国际车展……

krpano课堂一直以来都着重于全景漫游中功能性代码的呈现,例如某种效果如何通过krpano xml代码达成。这也是肥宗本人的擅长之处。但如果将虚拟漫游看作是技术与艺术的结合,那么krpano课堂长久以来都在艺术环节上有所缺失。换句话说,缺乏全景交互设计方面的分享。

全景摄影师往往是全能的,可能会拍照,也能写代码,但却往往没有交互设计的经验。因为交互设计是与互联网共同发展的,在虚拟漫游这么多要素中是非常前沿的一个。更何况现在虚拟现实发展如此迅猛,当我们谈到人机界面时,就不得不涉及到交互设计。

张海浪君毫无疑问有着出色的交互设计的经验和成就,因此本次独家对话也是从这一点开始。

肥宗:

你的公司名为互动视界,从企业名称能看出来是以虚拟漫游为主要业务的公司,这样的公司现在不少,在交互设计上有自己的专业优势对企业发展有非常大的帮助,能简单介绍一下专业背景和接触全景之前的一些职业经历吗?

张海浪:

公司名称的涵义是:“互动”理解为人机交互以及作品带给人的感受,“视界”是通过界面和视窗让用户去体验更广阔的世界;
互动视界成立8年多的时间,整体来看其实是一个不断突破自我,不断“跨界”的过程,“跨界”我是这么理解和践行的:一项服务或者一项技能,随着科技的进步和技术的日益普及,门槛会变得越来越低,唯有不断的提高自身的专业技能,同时结合其他门类进行跨界与融合,方能在越累越多的竞争当中脱颖而出;

0

(本文配图均为张海浪设计作品)

我毕业于专业美术院校,在校学习专业中国传统绘画技巧,通过数年专业、严格的基础训练,造就了细密、坚韧的性格,后又专业学习多媒体交互设计,在2004年左右带领团队设计的《中国皮影戏》多媒体交互作品荣获当年的法国mobius国际多媒体大奖赛金奖……

肥宗:

这个多媒体大奖赛具体是?

张海浪:

莫比斯多媒体光盘国际大奖 。中国唯一一个世界多媒体作品大奖,01年之前之后都没有了。我之后自己创立工作室,最早在工作室创立之初专门从事平面设计,当平面设计工作室越来越多的时候,我们便缩减自己的业务范围,专门从事高端设计;之后不断的加入网页设计、多媒体交互、视频和宣传片,通过不断的融合新的门类提高自己的竞争优势,2008年看到国外的专业全景公司作品,受到极大的震撼,开始研究该行业,多年的美术训练造就了较高的审美水准,所以无论项目大小我们都会投以百分的热情和专注,力求在平凡之处见水准,几年的努力,在各个行业均拥有标杆客户且得到客户的高度认可;
在全景圈摸爬滚打了多年,从小到大,从拙至巧,一点感受与大家分享:没有拍不好的图,只有不用心的摄影师;没有不吸引人的全景,只有敷衍了事的设计师,任何一个行业—-就怕琢磨。


肥宗:

全景UI的设计与其它交互设计是否有所区别?通常你会按照什么原则进行UI元素的布局?

张海浪:

首先全景展示的UI设计与其他类型交互设计的UI设计最大的区别在于,全景展示的UI设计是附属于全景展示主体的,也就是说传统交互设计当中UI的颜色、形态、交互方式均是和交互主体是相关的、风格是融合的。而在全景展示当中,UI的设计就需要慎重,全景场景会随着用户的交互进行切换,色调、布局都可能发生较大的变化,所以全景展示项目当中UI的设计通常遵循如下设计原则:

  • 弱化UI的形态:不要过分强调UI的醒目度和形式感,颜色与形态的设计尽量做到不影响主体全景的展示效果;
  • 风格与色调与主题一致:这一点很重要,有些全景项目本身是一个很具有现代风的类型,但是按钮形态则设计成传统窗格、卷轴一类的元素,这样用户浏览起来就十分别扭,当然在某种程度上也再考验着设计师本身对项目的理解和把握能力;
  • UI图标涵义明确:UI的图标和图形涵义要简洁准确、尽量少使用复杂的、令人会产生歧义或者费解的图标和图形;
  • 考虑不同设备的视觉呈现:设计UI时需要考虑到在移动设备和web端的不同效果,移动设备上由于空间有限,则尽可能使用简单明了的设计,去除一些鼠标划入划出事件,并设计隐藏按钮的功能,以节约更多的屏幕空间,达到更好地全景体验效果。
  • 遵循设计潮流:全景界面的设计要遵循设计主潮流的趋势,例如:当下是扁平化幽灵按钮较为流行,则可以考虑采用这种呈现方式,使全景作品更具有现代感和视觉美观度。
  • UI元素的瘦身:UI元素设计方面尽可能通过巧妙构思减少使用大面积的png图片,能使用bgcolor就不使用jpg,能使用jpg就不用png,通过控制文件大小让全景展示的速度大大加快,提高用户体验。

0(2)


肥宗:

VR全景中的UI设计与普通全景的UI设计是否有所区分?

张海浪:

VR全景因为是通过可穿戴设备来进行浏览,所有交互也是通过陀螺仪进行操控,同时VR全景营造的是一种“沉浸式”的体验感受,所以VR全景设计的原则是用户在浏览过程当中“隐藏”UI,能够让用户更好地沉浸在全景环境当中,当用户移动手机或者转动头盔的时候,中间的“准星”会在屏幕当中触发交互按键,停留1秒既可以交互。


肥宗:

如果一个项目涉及到多种全景形式例如环物 全景视频 或者 全景VR 在UI设计时如何保持一致性?

张海浪:

全景视觉展示除了要体现“沉浸感”之外,还需要强调浏览过程中的“无缝衔接”,如果全景项目中包含全景图片与全景视频,切换转场则需要注意视角的衔接,例如:在全景图片与全景视频穿插展示的项目中,全景图片的拍摄节点一定要在全景视频游走的路线上,这样在转场切换的时候可以先转到同一个角度、同一个焦距状态下再进行切换,这样给用户的体验就是顺畅的、无缝的。
如全景中包含了环物,则点击热点之后,镜头移动拉近物体然后再出现环物全景,关闭环物全景,镜头恢复原位;
总之,全景视觉的呈现方式多种多样,不同的项目需要区别对待,一切的设计和构思都是围绕用户的观看体验为中心。

0(3)


肥宗:

移动端的交互设计的重点会放在什么地方?

张海浪:

随着越来越多的智能手机和平板电脑的普及,使得我们使用与移动设备观看全家那个的机会越来越多,与此同时,也有新的问题出现,不同的移动设备屏幕分辨率千差万别,很难用一套固定的UI尺寸来兼容所有的设备,所以,在移动设备上浏览全景的UI设计就变得更加复杂和棘手,首先需要采用等比例缩放的方式来设计UI的尺寸,即时手机屏幕分辨率如何变化,UI图标始终可以保持较好地视觉呈现效果。

0(4)


肥宗:

通常你的UI素材是如何收集和制作的?

张海浪:

UI的素材来源很多,可以上网搜索符合要求的图标和界面元素,本人更愿意的方式是自己创作,首先用手绘的方式设计各种UI图标和界面样式,然后扫描到电脑后通过ps进行后期制作,UI设计要当做一个创作来制作,生硬的套用照搬总是会有不协调的感觉;另外,平时也需要经常浏览国内外优秀的UI设计师的作品,遇到好的优秀的作品要拷贝保存,再设计UI的时候可以拿出来翻看找寻灵感,也是一种不错的方式。

0(5)


肥宗:

如何加强漫游与浏览者的交互性?

张海浪:

用户无论是在web端还是移动端、抑或是头戴显示设备里面浏览全景,要传达给用户的是“临场感”和“沉浸式”,所以需要在全景本身的色调处理、全景展示方式、UI界面的呈现、背景音乐音效以及视频的设计上花更多的心思去设计、去构思;从技术层面来说,全景漫游应该是“一次性”体验项目,如果在全景当中加入社交的属性或者加入更多的随机性,全景漫游本身就变成了一个更有趣味性的体验了。


肥宗:

整个UI设计的工作流是怎样的?

张海浪:

简单来说UI的设计工作应该分为如下几个步骤:
确立主题—UI风格形态的构思—草图绘制—计算机处理—与全景进行整合测试—不同设备的兼容性调试—打包发布。
当然,不同的设计师工作流程也有差异,只要尊从第一点里面的几个基本原则,同时加之具有一定的设计审美,一定可以创作出优秀的全景漫游作品的。

0(6)


肥宗:

你如何保护UI的知识产权

张海浪:

谈到这个话题,不得不苦笑一下,都说天下文章一大抄,一个好的UI设计可能被很多同行所抄袭,这也是一个十分无奈地事情,在此我也真诚的希望广大同行能够按照客户自身的需求进行UI的创意,这样作品才具有独特性和创意,抄袭在某种程度上也是一种学习,对于真正的商业项目来说还是要慎重使用抄袭的UI,以避免不必要的麻烦产生。

 

张海浪
互动视界全景视觉
www.sightpano.com) CEO&联合创始人
互动视界文化传媒
www.sightmedia.cn) 总经理

在 “虚拟漫游交互设计秘笈 – krpano中文网对话互动视界CEO” 上有 1 条评论

发表评论