被交口称赞的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.50个设计简约的移动APPUI设计作品设计达人对于设计师来说,经常浏览一些新颖的设计作品是非常重要的,特别是入门或进阶级别的设计师更需要多看、多想、多做,以便获得更好的灵感、创意,并追求不一样、不重复的设计来提高自己的水平。 今天和大家分享50个设计简约的移动 APP UI 设计作品,所有界面都是以简洁风格为主,看起来舒服美观,案例包含注册页、数据页、商...https://www.shejidaren.com/?p=27529
2.UI中国灵感库查看全部热门榜单 大禧手写字集 29.3° 渠道营销管理app 29.3° 作品 文章 即刻 素材 源文件 设计师 团队 搜索 作品集AEui设计aigciconlogoapp 上传作品 上传经验 上传即刻 登录 您的意见是我们 UI 中国进步的动力! 点击立即反馈按钮,发表您的意见! http://idea.ui.cn/
3.动漫视频app设计素材网站图片免费下载产品侧app买量视频设计 62 alan_l 过往心情记录社交手机app界面交互设计展示视频 4 鲸人设计 跑步健身手机app界面交互设计视频展示 281 鲸人设计 创意家具设计购物手机app界面交互展示宣传视频 1 鲸人设计 私人订制智能家居手机app设计交互动画操作演示视频 2 鲸人设计 智能数字穿搭衣柜手机app设计展示演示操作动画视频...https://www.zcool.com.cn/tag/ZMTUyMjcwMA==.html
4.UI交互设计系统界面设计用户体验设计研究公司faceui 是中国领先的用户体验创新设计咨询公司,为众多世界级企业创造出具有极致品质的智能互联网产品体验,提供战略性的服务创新设计、UI交互设计、系统界面设计和用户体验研究咨询服务。http://faceui.com/
5.6个极具创意的APP下拉刷新交互设计动画欣赏之前25学堂也分享了有趣的APP下拉刷新动画交互设计学习和移动端常见的手势交互操作方式详解,你不得不看等关于APP下拉刷新的交互设计知识。 今天着重跟大家分享一些比较酷炫的极具设计创意的APP下拉刷新交互设计动画。让你大饱眼福! 如果你也感觉这些APP下拉刷新交互动画设计的蛮不错的!记得点赞哦~ ...https://www.25xt.com/appdesign/15377.html
6.视觉同盟文化创意产业先锋媒体:设计资讯设计招聘·【征集】2024未来城市AI创意设计大赛 设计招聘 北京上海深圳广州设计猎头 ·小米汽车招聘HMI设计师/专家(座舱/APP) ·百度智能驾驶体验设计中心招聘设计师 ·腾讯网设计中心招聘设计师 ·百度用户体验中心招聘视觉、交互、用研 ·网易用户体验设计中心招聘若干设计师 ...http://www.visionunion.com/
7.UI设计10种流行的设计手法,让你的作品更有创意感!你可能注意到了,越来越多的网站和平台开始有意识地使用各种各样的动画,以及不那么死板的元素,比如不规则的流体。这些像水一样的多变元素,让网站和APP 显得更加富有生机。 流体动画效果可以创造更好的过渡效果,吸引用户注意力。这种动效的关键在于控制流体的运动速度,平滑流畅感是设计的核心。 http://yanguosheji.com/h-nd-489.html
1.App优秀UI设计案例:视觉盛宴的背后设计技巧随着移动互联网的飞速发展,越来越多的App应用软件出现在我们的生活中,在这些应用软件中,优秀的UI设计能够给用户带来更好的使用体验,增强用户对产品的忠诚度,我们将分享一些优秀的App UI设计案例,这些案例不仅在设计上独具匠心,而且在实际使用中也得到了用户的广泛好评。 https://www.wenanmiao.com/22679.html
2.国内市场有哪些创意交互性强,重视用户体验的APP/小程序?专注于打造超越客户预期的产品,优联前端小程序正是这一理念的完美诠释。我们充分利用前端技术优势,融入流畅自然的动画效果和新颖独特的交互设计,让客户在体验中直观感受到我们的实力。 交互设计 以宇宙星空为设计背景,诠释无穷尽概念——无穷技术,无限创意。黑白经典配色,稳重大气。毛玻璃风格图标,重叠设计,与3D立体空间...https://blog.csdn.net/ufrontend/article/details/139243871
3.创意十足!折叠效果在移动App中的应用优设网在今天的移动 App 界面设计中,你可以看到不同创意类型的视觉效果。特别是在Dribbble上面,有很多应用程序的 UI 概念设计让你惊叹。当然,他们大多只是作为一个概念设计,可能永远也不会成为一个真正的应用程序。 但如果你想获得灵感,那很有必要看看下面这些极具创意的动效设计。 https://www.uisdc.com/folding-effect-mobile-apps
4.这5个做APP设计的网站,让你设计创意无限!即时设计是国内很多 UI/UX 设计师和产品经理都在使用的专业 APP 设计网站,内置 iOS、Android 设计系统资源,能帮助快速启动 UI 设计工作。即时设计集原型、UI/UX 设计、交互、交付、资源管理等众多功能于一体,自带专业设计工具,即使是浏览器在线操作,同样可以拥有丝滑的创作体验。 https://js.design/special/article/app-website.html
5.UI交互设计教程App界面设计6创意片库创意片库 后期特效后期特效 舞台背景舞台背景 VR360VR360 商用 免费商用 (CC协议)免费商用 (CC协议) 版权商用 (39元/条)版权商用 (39元/条) 平面 素材 图标图标 元素元素 背景背景 PPTPPT 字体字体 动图动图 模板 在线设计在线设计 样机样机 ...https://www.aigei.com/item/ui_jiao_hu_she_5.html
6.《设计思维:产品与交互设计的创新方案》课程展示PartOne本课程由创艺学院以设计研究、设计发展为主要研究方向的教授团队共同授课。课程以创意、创新为最大驱动力,致力于使学生使用设计思维的方法和工具,提升发现问题和解决问题的能力;并将洞察力应用于各个领域,建立应对多重技术和专业研究内容的平衡与融合;训练团队合作和协同的能力。 https://sca.shanghaitech.edu.cn/2022/0119/c3651a286268/page.htm
7.基于用户体验的老年人睡眠APP设计研究创意设计源2023年03期基于用户体验的老年人睡眠APP设计研究,用户体验,老年人,交互设计,睡眠APP,通过分析国内具有代表性的睡眠APP,发现当前睡眠APP的界面、功能和操作多数是为18~45岁年龄段的人设计的,无法满足老年人的睡眠...https://wap.cnki.net/qikan-CYJY202303007.html
8.关于举办2024年湖南省大学生数字媒体创意设计大赛的通知B1-2数字绘画设计分为两个竞赛单元:静态绘画组及动态绘画组。创作需基于数字技术及数字综合媒介,作品应主题突出,创作形式具有创新性,风格特色鲜明,视觉冲击力强。 B1-3数字交互设计分为三个竞赛单元:交互App设计;微信小程序游戏设计;HTML5设计。交互设计类作品需具有良好的应用价值,功能架构具有一定的创新性,界面视觉...http://ysxy.ccsu.cn/info/1070/4933.htm
9.界面设计模式APP和Web交互流程图整理腾讯云开发者社区信息架构图对于一个产品起到了至关重要的作品,产品越复杂,信息架构越重要,比如淘宝APP这种体量的产品,信息架构做的是否合理,直接关系着产品的逻辑,及运行效率,所以对于产品的信息架构在做创意设计阶段就需要考虑去清楚。 ?APP交互流程表达 APP 交互流程图的表达方式,在这里包括了界面的之间的信息流动连接,还有非常的...https://cloud.tencent.com/developer/article/1081656
10.杭州网站建设品牌网站设计小程序开发APP开发杭州乐邦科技建立于2002年,是一家提供高端网站建设、小程序定制、APP开发等服务的一体化互联网公司,二十余年来为大量企业品牌提供专业高端网站设计,将视觉创意、技术、商业融合于一体,找杭州网站建设,网页设计公司就上lebang.comhttps://lebang.com/
11.武汉轻工大学图书馆系统UI设计古田路9号古田路9号网站(www.gtn9.com),国内专业品牌创意平台,以品牌为核心,集创意作品分享、活动招聘发布、广告推广、正版字体素材下载等多元化的交流分享平台。会员交流涉及:艺术创作、广告创意、交互设计、时尚文化等诸多创意产业。https://www.gtn9.com/work_show.aspx?id=5CB62BB0E011DCE4
12.ui设计设计题目56.基于手机游戏的UI设计方法研究 57.论互联网+背景下的平面设计 58.基于HTML5和jQueryMobile的移动学习APP设计与实现 59.UI设计中图形创意方法 60.UI设计的交互性与界面视觉设计研究 61.浅谈艺术设计中UI界面设计及应用 62.手机操作系统ui设计浅析 63.浅析用户交互设计中的视觉性设计 ...https://www.yjbys.com/biyesheji/1488368.html
13.灵感专题—2019年优秀APP界面设计作品赏析#5月51CTO博客灵感专题—2019年优秀APP界面设计作品赏析#5月,App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时又面临无限机遇,https://blog.51cto.com/u_9540389/3231410
14.好多App的UI设计都长得差不多但这可能并不是一件坏事界面新闻...在过去的几个月里,一些创意设计师将极简设计发展到了一个新高度。Facebook、Airbnb和Apple前赴后继地以同一种思路简化旗下的主打产品,这反映出了移动端设计“界面简化”的新趋势。 “界面简化”究竟是什么? 你可能会说,你从没有听说过“界面简化”。这就对啦,因为它是我创造出来的概念。它超脱于简单的扁平化...https://www.jiemian.com/article/738209_qq.html
15.APP设计视频教程APP设计视频教程页面主要提供UI设计的APP设计入门、实用技巧和应用案例、创意设计和插画绘制、高级技术和深入应用等一系列入门知识,让初学者能快速上手。https://www.yutu.cn/ud_85_0_0_1.html