被交口称赞的App《韩熙载夜宴图》背后,其操刀团队是什么样的交互设计思路?
2015-02-06 15:30

被交口称赞的App《韩熙载夜宴图》背后,其操刀团队是什么样的交互设计思路?

2015年1月8日,故宫博物院《韩熙载夜宴图》App正式上线,当天即获得App Store推荐。和此前故宫博物院已经发布的《胤禛美人图》、《紫禁城祥瑞》、《皇帝的一天》三款App一样,《韩熙载夜宴图》一上线就被网友们疯狂安利了起来:


@严锋:非常棒!故宫之前出的 App 胤禛美人图和紫禁城祥瑞也都是精品,对得起故宫这个牌子。


@李慕白的小屋:故宫博物院上周新出的 App 《韩熙载夜宴图》精致非凡,加载视频讲解后总容量有 1.3G 以上,融绘画赏析、历史文化于一炉,真的很期待后续能出《兰亭序》、《祭侄稿》、《自叙帖》等这类书法名作欣赏的 App


@Slumber青柳:故宫博物院新出的 App 韩熙载夜宴图,特别棒,画面,文字,所有印章,出现人物,乐器,器皿,服饰一一介绍,几个位置还设置了真人演示,配乐也很专业!【不禁想到要是出一款汉宫春晓得费多少人力物力……】


是什么让这些下载了一个1300多M的App、却只为看一幅图的网友如此兴奋?


1月末妖风阵阵的北京清晨,虎嗅君来到位于塔园外交公寓的某集体交互媒体工作室,和《紫禁城祥瑞》和《韩熙载夜宴图》两款App的创意总监、中央美术学院数码媒体工作室副教授——费俊,聊聊这些“指尖上的文物”是如何成功穿越得宠的。


一个“难以定义”的团队


费俊不太喜欢“工作室”的叫法,他递来一张名片,上面写着他的设计团队:“某集体”。


“工作室,我觉得是上个世纪的事了,以某人的名字命名的工作室凸显的是个人魅力和能力,我们想去品牌化,就用‘某’,‘集体’就是‘新集体主义’概念,这是新的组合和结构方式,能更激活创造力。”费俊解释道。


团队.jpg

“某集体”有将近30名成员。费俊点开电脑里团队成员海报,“这是一个复合型的设计团队,和传统的设计公司不一样,比较多元化,有传统的平面设计师,用户体验设计师,还有界面设计师,有专门画原画的,插画师,动画师,声音设计师,后期,更重要的是还有程序员,这是个跨设计产业的、设计和技术融合的团体。”


这个费俊口中“难以定义”的团队历时近两年,设计制作了素材累计容量将近900G的“韩熙载夜宴图”App,2014年他们设计制作的《紫禁城祥瑞》也曾创下单周下载量超10万的成绩。


故宫文物穿越到智能终端,还能让用户玩起来,费俊认为,这正是依靠了团队的复合能力:


“要做复合感的产品,用传统的模式已经很困难了,所谓传统模式就是设计公司设计完去找别人制作,但设计公司往往对技术不怎么了解,现在需要的是有对技术有认知的设计团队,同时还得有对艺术有追求的技术团队。”


最想挖掘的是当下语境里看似“没用”的古代文化


2010年,“某集体”雏形初具,摸索阶段的费俊团队还只能提供网站的外包设计服务。


转机出现在半年后,费俊团队接手了时尚全媒体第一本交互数字杂志的设计研发工作,“那时候国内还没有关于这方面的成熟的产品,《时尚》是我们第一个大客户,后来的客户很多都是通过这篇产品认识我们的。” 故宫就是其中之一。


时尚.jpg

在费俊团队为《时尚》、《瑞丽》等设计的iPad、iPhone移动端的数字期刊上,用户看到的不仅是封面大片,还有拍摄花絮,甚至模特日常生活里的样子。从研发最初的两、三个月一期,到模式成熟后的一月一期,费俊和他的团队慢慢成熟了起来。

黄帝内经.jpg《黄帝内经》App


除此之外,费俊还曾带着他的学生们挖掘《山海经》、《黄帝内经》内容,做成能为现代生活服务的相关App。


交互设计的经验加上学院派的审美素养,让费俊团队在故宫项目与其他投标者的比稿中脱颖而出。


为什么对传统文化数字化产品如此感兴趣?费俊说,“美的内容最值得挖掘的就是古代文化,那些当下语境里大家可能觉得‘没用’的东西。” 


“所有的形象都是从无数的版本里迭代出来的”


聊到《紫禁城祥瑞》和《韩熙载夜宴图》的研发过程时,费俊用的一个词是“慢工出细活”。


将文物藏品的内容和故宫的文化体系转化成交互数字产品不仅是“动起来”就可以,前期的概念规划花费了费俊团队半年的时间。


他们提出了三­点设想:


第一,这个产品不应只局限于故宫,故宫里的瑞兽是整个中国吉祥文化的一个缩影,他们希望借用“奥林匹亚众神之山”的逻辑,将这些瑞兽做成一个中国吉祥文化的图谱;


第二,瑞兽的形象在产品中应该更当代、年轻,最好有点“萌萌哒”。


第三,产品不能光是讲解,应该有公众的参与感。


宏观规划后的素材设计阶段,是费俊和他的团队“一根线一根线手绘出来的”。从《紫禁城祥瑞》长轴里的窗棂、栏杆到《韩熙载夜宴图》开篇动画里背景远山的形状,都是他们和故宫专家“死磕”细节后才成型的。手绘要符合史实地还原场景,他们还要在此基础上创造用户更喜欢的新形象。


“所有的细节都必须准确,所有的形象都是从无数的版本里迭代出来的,”费俊笑道,“返工的工作量特别大,这就是我们总是熬夜的原因。”


反互联网思维:把简单的东西复杂化


在内容上做加法,在界面上做减法,是费俊一直强调的设计理念。他坦诚这样的尝试会带来用户的学习成本,但是这同时也是文化数字产品的乐趣所在:


“这种产品不同于微信等工具性的产品,天天要滑。效率性不是它的第一诉求,有时候反而需要一种探索的乐趣。为了极致的界面体验,要尽量去UI,去掉很多按钮、菜单。像《紫禁城祥瑞》,一打开是一个大长轴而非常规目录,用户不知道哪些可以点,哪些不可以,又怎么进到下一层,对于用户来说这些都是挺高的学习成本。”


这个让费俊引以为豪的长轴设计,一度成为了产品技术研发上的最大挑战。长轴上面是无数的序列帧和上千张图片,在iPad终端,当时很少有这样的设计尝试。苹果公司在收到这个App申请时,甚至提出派几个苹果工程师帮费俊团队再做优化。“最后他们查完代码,发现他们也没办法,能做到的已经做到了。”


紫禁城祥瑞.jpg《紫禁城祥瑞》App


虽然有很多人对长轴设计提出过质疑,费俊团队最后还是坚持使用这个设计,他们认为这正是欣赏艺术时应该具备的感性的复杂化,像真正地去欣赏一本画册,用户不带功利的在使用过程中不断有新发现,不一定是坏事。


每次做产品都得牺牲一些东西,留下一点遗憾


说到做产品留下的遗憾,费俊略作沉思,用手再一次码齐面前整齐摆放的四摞名片。


“比如《紫禁城祥瑞》的长轴,我们本想做成一个卷轴,界面中设计一个陀螺仪,当用户转动陀螺仪,他们可以绕着这个山走,这是个特别有体验感、沉浸感的功能,最后因为技术等各种各样的原因,产品停留在了一个偏平面的状态。”


对于刚上线的《韩熙载夜宴图》,费俊也有遗憾。安卓版本的《韩熙载夜宴图》“秉烛夜游”模式下,长按屏幕安卓系统无法启动真人表演。在专家解读的部分,费俊曾提出希望有更多社会上的专家,如陈丹青等艺术文人参与进来,给用户多样的声音,但最终也由于种种原因没能实现。


“虽然总得牺牲一些东西,总体上我们还是比较满意这款产品,跟故宫团队的合作是一个很好的将产品丰满的过程。他们对画的研究不用多说,还为我们引荐了汉唐乐府这样的表演团队,给产品增添了‘彩蛋’,最后形成我们现在看见的三层结构。”

韩熙载IPAD效果图2.png

费俊希望用户在使用他设计的产品的时候,像真的进入了博物馆欣赏艺术品:


“先不废话,先看这幅画,看完之后再给你一些标签性的知识点,一层层深入。体验先行,鉴赏其次,这就是我们设计这款产品的逻辑。”


“未来我们只有一个能力值得放大”


采访进行到一半,两个姑娘笑着冲进了会议室,没等费俊说话,她们就争抢着告诉费俊,团队之前设计的一个交互网站刚刚收到邮件通知,获得了德国IF设计奖。


费俊没有显出特别的惊喜,只说了句:“真的吗?太好了。”他说团队在商业运作上还不成熟,不会“吆喝”,这是第一次将自己的作品拿到国际去报奖。


经过了五年,数个产品的积累,费俊和他的团队正在脱离学院派做学术实验的做法,他希望和团队从之前2B的被动接受选题的运作方式,转型成为自己主动策划做2C产品的商业模式。产品方面,要从做外包时期的”杂“转向专注以传统文化、寓教于乐为特征的App和线下交互体验中心。


“但是是否有我们自己亲自来做2C就不一定了,未来可以找一些合作伙伴。”费俊说。


但不管怎样,这都对费俊团队的商业运作能力提出了更高要求。


虎嗅采访现场,费俊团队上财务课的板书还留在会议室一角的白板上,费俊请来专业财务顾问给定期给团队上课,恶补公司财务的相关知识,希望尽快将他们在这个行业多年的储备放大成为更成熟的商业能力:


“未来我们只有一个能力是值得放大的,不是设计也不是技术,是传统文化的转译能力,通过设计和技术把传统文化转译成当代人可以解读和传播的数字内容。”


移动端交互设计已经到了该出精品的年代


自从参与设计了一系列“故宫出品”的交互产品,费俊以交互设计师的身份为更多人所知。而27年前,费俊刚进入中央美术学院时,学习的是版画专业。1992年,他留学美国阿尔弗雷德美术学院,选择了电子综合艺术专业,创作物料从木版变成了代码。


交互媒体是费俊让艺术返回生活的方式。虽然在交互媒体产品诞生的初期,技术给用户带来的吸引力大于本身内容,但是经过了多年的探索,当越来越多的产品开始用理性的态度使用技术,将技术隐性化,费俊认为,移动端交互设计已经到了该出精品的年代。

本内容为作者独立观点,不代表虎嗅立场。未经允许不得转载,授权事宜请联系hezuo@huxiu.com
如对本稿件有异议或投诉,请联系tougao@huxiu.com
正在改变与想要改变世界的人,都在 虎嗅APP
赞赏
关闭赞赏 开启赞赏

支持一下   修改

确定