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

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

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

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

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

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

一个“难以定义”的团队

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

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

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

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

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

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

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

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

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

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

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

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

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

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

他们提出了三-点设想:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

THE END
1.手机交互设计软件有哪些?网友(匿名用户)职场问答3、Bon App! 在交互上,这款APP的两点在于选择停车点后出现的信息卡,并且快速地绘制最佳路线,穿插停车点的数量并推送停车点图片信息。 4、WIP Discover Music 这款APP把用户的注意力聚焦到了导航的过程当中,将发现音乐这个交互过程变得顺滑和灵动。此外这种交互方式也增强了使用的沉浸感,是一款创意和交互出彩的音乐...https://zq-mobile.zhaopin.com/zpdOutputQuestionForXZH/5502470
2.创意篇:人类获取信息83%来自视觉记忆70%来自交互今天,有没有一种广告做到赤瑞特拉“实验二”的部分,让渠道与创意有效的统一,让消费者从交互中获取认知。 见过却从未意识到的交互创意 5秒、10秒、15秒是常见的广告标准时长,但你有没有听过15秒+5秒的广告?下面我们来看一看基于小米OTT系统级的能力,广告创意如何突破传统。 https://ishare.ifeng.com/c/s/7oKNaPFR7LX
1.这5款有趣的AI应用,实用好玩有创意一只狗狗狗DW 在得物App发布了一条热门动态!快来围观,就等你啦!https://m.dewu.com/note/trend/details?id=245906697
2.七个有创意的数据结构与算法可视化网站,推荐给老师学生和开发...今天特别推荐一些有创意的数据结构与算法交互式可视化平台。特别适合学生、教师以及算法开发工程师。 学习数据结构与算法,如果没有可视化,许多过程或者结构只能自己脑补,这无疑是枯燥、低效的。 今天特别推荐一些有创意的数据结构与算法交互式可视化平台。特别适合学生、教师以及算法开发工程师。 https://www.51cto.com/article/774723.html
3.苏州UID/UED交互设计课程苏州UI设计培训培训目标和发展方向 培训目标:打造全链路全平台设计师=平面+网页+移动端 主讲:美术手绘+软件+创意元素+UE设计+交互设计+WUI训练+MUI训练+就业推荐!达到工作中需求的实战效果、培训完以后相当于有半年左右的实战经验 发展方向:平面设计、广告设计、创意设计、网页美工、界面设计、智能设计、UI设计、APP设计、web设计等...https://www.thea.cn/course/428068.htm
4.展现APP独特价值:新媒体创意设计亮点在新媒体创意设计中,策略与实践是相辅相成的。作为设计者,我们需要根据APP的定位和目标用户群体,制定切实可行的设计策略,并在实践中不断优化和完善。 1、设计策略的制定 制定设计策略时,我们需要深入了解目标用户的需求和偏好,结合市场趋势和竞品分析,确定APP的视觉风格、交互方式等核心要素。 https://www.batmanit.cn/blog/k/51144.html
5.互联网广告的种类类型&发展历史移动广告对用户的精准定位,透过各种传感器,位置定位,推送等功能,给用户提供更加适合自己的广告服务;同时,广告的展现形式也已不再像传统互联网广告那样生硬,移动网络广告从硬件环境的提升,以及软件及网络环境的变化,成为了更加富有创意性与交互性的新广告媒介,使用户在得到有用信息的同时,更可以感受到移动网络互动广告所...https://www.doooor.com/thread-2196-1.html
6.交互方式的系统总结:如何让App拥有一个有趣的“灵魂”?不过在App内的这样的交互设计并不常见,我能想到的仅是相册App里快速查看照片时有这种“左右刷”的交互方式。如果有某个App在业务上比较贴合,不妨考虑将这一交互方式利用起来,说不定能起到意料之外的效果。 好了,关于滑动已经聊了够多了,就不再展开了,不过还有一个我们在前文留下的一个坑这里需要补上。我们在...https://cloud.tencent.com/developer/news/428463
7.亲热软件:重塑现代人际互动的创新工具例如,在心理治疗中,此类软件可以为患者提供更为沉浸的治疗体验,使得身处不同地理位置的医生和患者能够进行更深层次的互动。此外,在企业培训和团队建设中,它同样显示出了巨大的潜力,通过模拟真实环境和交互方式,能够有效提升参与者的体验和学习效果。 虽然亲热软件为现代人际互动带来了诸多可能性,但同时也面临着一些挑战...http://www.zzibs.com/zzzx/103280.html
8.10款功能强大资源丰富的学英语软件词根单词:创意十足帮助记忆 记单词对很多英语学习者来说都是枯燥乏味的过程,但词根单词这款软件却以其独特的创意设计吸引了无数用户。它最核心也最有创意的设计就是词根树这一版块。这是一个以词根为核心构建的思维导图,上面分支纷呈,每个分支代表一个词根或词缀,包含的词汇都由这个词根或词缀构成。这种视觉结构更...https://www.66offer.com/155746.html
9.app交互设计用什么软件APP交互设计常用软件有:Flinto、After Effects、Principle、Framer、Origami等。 1、Flinto 是一款轻巧而全面的原型制作和UI动画工具。设计师为应用程序和Web创建交互式和动画原型。提供了动画工具,供设计人员快速创建基于过渡的动画,能够快速实现各种滚动、转场、点击反馈交互效果,在移动设备和PC上都能流畅预览; 2、After...https://wap.hxsd.com/wenda/64099/
10.移动应用开发(APP开发)市场调研报告12篇(全文)随着信息技术的不断发展, Hybrid混合开发技术得到有效应用, 促进了移动图书馆APP的诞生, 为学生们带来更多便利。Hybrid App (混合模式移动应用) 是指介于web-app、native-app这两者之间的app, 兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。https://www.99xueshu.com/w/file015bgpe9.html
11.盘点那些让用户玩起来的交互方式极客公园也许是考虑到这样的交互方式太累,只要点击屏幕正中的框也可以扑,扑到的蝴蝶是一些商品的优惠。右下角是博物馆,展示所有你扑到的蝴蝶。这是个很有创意的交互方式,在此之前我从没有想到手机摄像头还可以这样玩,或许可以给国内的应用开发者一些启发。 钢琴解锁:最悦耳的解锁...https://www.geekpark.net/news/178522
12.ui设计交互设计界面设计APP设计上海洛可可整合设计有限公司(https://lkkued.gys.cn)主营产品包括ui设计、交互设计、界面设计、APP设计等,上海洛可可整合设计有限公司负责人洛先生,上海洛可可整合设计有限公司希望能与您成为合作伙伴http://lkkued.cn.china.cn/
13.苹果公布今年AppStoreAwards入围者名单,10个类别近40款...11 月 15 日消息,苹果公司今天发布新闻稿,揭晓公布了 2023 年 App Store Awards 入围者名单,有近 40 款 App 和游戏的开发者为用户呈现了出众的体验,产生了深远的文化影响。 App Store 编辑团队今年在 10 个类别中,精心挑选了近 40 款 App 和游戏,认可他们在 App 和游戏领域创造的卓越体验、创新精神和技术...https://stock.10jqka.com.cn/20231115/c652203887.shtml
14.数字交互艺术的创意呈现与价值表达数字交互艺术的创意呈现与价值表达,数字交互艺术,艺术特征,创意呈现,价值表达,当今时代,数字技术的广泛普及和应用给人们的生活方式带来了巨大的变化,同时也对艺术领域进行了革新。数字技术与艺术的融合,突破了...https://wap.cnki.net/lunwen-1019909564.html
15.这13个常用的大厂App里,藏着诸多设计师的匠心和巧思基于用户的需求,京东APP的商品列表顶部有导航栏、全局操作栏、垂直内容筛选栏,加上状态栏,在移动设备中的纵向占比是相当的大,为了解决这一问题,京东通过改变交互的方式,当页面上滑,会隐藏导航栏和全局筛选栏,下滑后则再次显示。 在交互方面,做了这样的思考,当出现上滑的操作后,可以理解为用户已经开始在挑选商品,...https://www.uisdc.com/13-product-design-details/
16.UI设计师不容错过的12款APPUI交互设计手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。 1. History Animation by UISTAR 重新加载 这款APP的概念促使人思考手机阅读的方式,可以点击和滑动书籍标题,当你选择了一本...https://www.douban.com/note/644340730/
17.发发奇AppFarfetchWonderland全球时尚潮品·圣诞整合营销...前期造势- 发发奇 FARFETCH App 节日电商活动主页 效果展示 移动端交互创意 创意概念- FARFETCH WONDERLAND · 圣诞奇境 手机端竖版短视频创意-#FARFETCH WONDERLAND-激发话题感性 在移动端的执行内容中,除了 H5 个性化交互开发,我们还围绕【Wonderland·圣诞奇幻岛】 这个核?创意点,创作了一条用于数字移动端...https://www.digitaling.com/projects/232980.html