赞助商
立即赞助

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

UI设计3年前 (2021)发布 流光
3.7K 0 0

相较于名画家,敦煌莫高窟那些名画工在墙上绘制鬼蛇神,让肝儿颤。记看「局部」时,陈丹青师如是形容莫高窟壁画。

幸,去团队决去敦煌团建。入洞窟,扑面阴冷畏惧,目瞪口呆。其一洞窟本身环境阴冷,其二洞窟神秘庄严,静谧安详,阵势至眉目间,延绵千载,博精深。

敦煌研究院与腾讯于 2017 年达成战略合作,参与到敦煌的保护和传承事当中,在合作两周年之际,敦煌研究院与腾讯计划共同打微信小程序「 云游敦煌 」,指尖轻触方寸屏幕,就能遨游千里之外的文化遗产胜。此次合作腾讯 2018 首次提出「新文创」以的一次新探索。非常分,设团队从敦煌团建回之后便加入到了项目当中。

莫窟久远而璀璨的,应该被更多人看见。帮助更多人探索、游览、守护莫窟,是我们产的愿景。游览敦煌,变成随时随地。作为设计团队,把远在西中敦煌石窟的感受,转译到每个老百姓的指尖,是这次我们要解决的难题。

比我们去住主题酒店,不同房间境下的规、局、光照、软硬装的风、材质、颜、纹理,饰品的气质等,境因素给人极不相同的境验和感受。我们将通设计的方式,去建立属敦煌石窟特有的产品境。

建立「敦煌石窟」的产品环境

次我们的产品境,是老百姓手中的微信小程序。在小程序中,现的境要素主要包括字、、图与图形风、特定的形状、空间与局、动效以及它们之间的组合效果等。

在这,为了营造用户探索敦煌窟的入戏,将会通过以下计过程,将程序建立成为有敦煌窟调性的产品环。

1. 让大家尝试表达对敦煌石窟的印象

如果把大家对敦煌窟的印象,转化成产品设计中的界面,是什么样的呢?我们首先来一下,大家对敦煌石窟的印象是怎么样的?我们做一个小范围收集。

目的

通召集人,让大家通一定的填写方式,表达自己对敦煌的印象。我们收集并统计大家填的内容,并将其录提炼,以助力续的设计工。

召集人

参与者包含产品负责人,项目核心成,曾经去敦煌的用户以及想去敦煌的潜在用户。大约二人左右。

引导填写

为更直观地收集信息,我们需要提前设定填写的形式和范围。给每人派若干纸,每纸只需填写一个对敦煌石窟的印象物,个印象物是且具的,比佛像、壁画、沙漠等。我们把印象物叫做 Object,Object 是一个三合一的组成。每个 Object 含有客观描述+主观感受的填空。客观描述是指按物来面目去考察,填写黄的、圆的类词汇。主观感受是指大家对印象物内心的感受,神秘的,严的类词汇。做简要的填写说明之,引导大家静默填写。

收集统计

把大家填的纸,将已填写的词汇按 Object、客观描述、主观感受三种类别进行统计,将重复出现次数高的词汇整理出来。

总结提炼

经统计,我们得到下总结:按词汇重复出现次数由高到低排序。大家的印象物集中在壁画、佛像、洞窟。客观描述主要是斑驳的、粗旷的、厚重的。其中彩主要是土的、有一致的系。主观感受主要是震撼的、敬畏的。

除了词的统计,还有一些有趣的洞察,以下洞察也会助力下来的计中。

  • 不的人写九鹿,飞天
  • 少数的人会写九层楼
  • 更少会写供养
  • 绝部分的人都觉得敦煌的颜色很

诚然,挖掘敦煌调性,括了设计团队研读敦煌书籍,拜访敦煌研究院等桌研究。这些成样也会指导我们后续设计。

2. 一步步「造窟」

我们过敦煌调性挖掘,以研究成为基础,步步立敦煌石窟品环境。经过小程序框架和组件梳理,我们将卡片、底纹、图标、体视为界核心组成要素,针其着进打磨,并考究他们组合关系。

「不是纸,是墙。」

在莫高窟陈列馆时候,敦煌研究院杜鹃师我说:「壁画应该呈现质感不是纸,是墙。」

那里展区叫「仗的制作」,我们停那儿看。

敦煌的壁画是由岩壁层、地仗层、颜层组成石结构。每改换代,莫窟的无名画工们,就会在原来的壁画上重敷色,绘制的壁画。确实,扁平破烂的纸素材好像更容易地表现斑驳感。但墙的厚重,是通过历史一层层覆盖上的,将墙的感受表现到位,在构建产环境的过程中,是更需要拿捏准确的一环。

在界面设计中,卡是一种包含图和文字在内的小矩形模块,以为用户更细节信息的口,因此卡设计形式被大量的运用。在敦煌小程序中,也存在大量的分类、题及单品等口,需要运用到大量的卡设计。为靠拢敦煌石窟中「墙」的感受,我们将所有的卡设计转译为石块设计。通以下两个步骤,我们将石块一块块拼来。

清查与归类

将所有的石块按题封面,类别封面、单品封面的类别梳理出来。

设定视样式

为石块设定视样式,并根据不同类别件下的石块,在统一样式的前提下设置样式差异点。将视样式赋予到归类单的各式石块中去。

块视觉式的定。通常,界面计中卡片是由基础的矩形演变而成,矩形的基本计条件为圆角、阴、纹理、长宽比。通过去调整和对比这些参数的最佳组,来将矩形塑造成粗旷、厚重的块。

圆。最初尝试是在 iOS 圆议值范围去尝试,发现在这个范围内圆值,旦放上壁画,会变精致比,观感受像 App Store 里个个精致 App。这不太符合粗旷感受。如尝试,尖锐排列起来又是严谨精致。于是,我们尝试把磨去,使用 2Px 圆值,使石板看上去好像被风雨磨去了棱,有顿挫感觉,结合阴影效也起到了定厚度感。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

阴影。在界设计,过调阴影纵长短可以表现纸张不高度。是我们是石板,需要表现出厚感觉。除了可以调阴影纵长短,我们尝试将阴影宽度适度减少。如此来,能观感受石板离墙是有比较大距离,也让石板有了厚度,量感。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

我们完成石板视觉样,可以将其逐赋予到我们已经查归类单。在赋予过程,我们根据不类条件,立了 7 不竖构图比例尺寸,以及不尺寸下阴影效。关于比例设,我们设定了让后台内容供应库提供张壁画,根据不类请求自动进相应比例裁剪,这可以提高品请求效率和减少内存压力。

至于另一面墙,也就底纹。我们也通过清查归类,将不同场景的底纹梳理出,其关联类别标签,然后相应类别的底纹,配置相应的斑驳纹理。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

3. 图标

图标效,设计上操作手段是技法和表意。于主功能图标,我们在表意上取了具有敦煌石窟代表性几个意象。技法上我们参考敦煌壁画传统绘制工序,「勾线 – 敷色」。其这里敷色与勾线叠加效,是代表图标被激活状态。敷色造型是参考矿物颜料敷色效,色块具有斑驳感受。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

于级图标,我们采取了代表意,现代线描绘制。旨在表现上简约利落不干扰阅读,表意上贴合敦煌韵。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

4. 字体

字体的效果,是产品环因素中重要的一环。但是程序环限于目前不兼容个性字体嵌入,考虑从核心的壁画体验的页面中入。在「每日画语」的壁画展中,都会为用户每推送一款壁画和相应的「画语」。选用了莫高窟写经书法气质相近的古典朝体,在「画语」展示中确认好个性字体的展示形式后,通过切图来实现。确保用户在壁画展的候,在关键文字的阅读上也有足够的入戏。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

5. 标识

我们优先考虑的是,何塑造出高辨识度,直观,具有敦煌气质的标志。根据前期的研究,我们做标识在视表意上的认排序。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

当下,每个人的手机里有着众的程序和信息,用户在使用手机的时在快速地滑动着每个内容,用户对微信小程序标识的认机是处「寸土寸金」的前提下,稍不留神很难住。结合之前关印象收集的结论,大家对九鹿、飞天等敦煌形象的熟悉程度比弱,我们经不同方向尝试,决定使用直观的文字图形更节省用户的认成,更为有效。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

有幸,在拜访敦煌研究院的时,收集到研究院华亮老师的书法品。我们得,敦煌研究院标志的书法字正是华亮老师的笔墨,是我们决定将老师的书法进行设计加工,为标志设计,也是一种传承吧。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

打造流动的壁画展

在产构思上,除了图书馆式的容整,展览式的容推送更满足老百姓探索的心。我们建立了「每日画语」和「每日画展」两种日更的形式。想在敦煌莫窟的壁画展中,对于壁画的展示形式,没有做画框处,是「岩面」的样子呈现,可见还原「壁 · 画」之心。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

受启发,在产中的壁画展,我们了之前的「石」和「纹」相结合的设计样式作为展示形式。并将每一张壁画,根据同手机尺寸大小,将壁画的展示适配到最大,营户看壁画的洞窟沉浸感。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

采岩

敦煌的传统颜料主起源于当矿石、口宝石及部分人合的颜料。迄今约千的历史。

要说莫窟除了参观洞窟外的惊,那就是在陈列馆的「岩彩区」面前久久地发呆了。每一种色号,都有十一管同深浅的色筒,这些深浅都是经过一定的研磨工艺制作,晶体颗粒越大,颜色就会越深。除了好听的名字,每种颜色旁边都会放置一「原材」作为展示。虽然眼前这些辰砂、蛤壳、孔雀石是死的,但此景由得人想起「古鱼复苏」。

为设计团,我们需要挖掘敦煌岩彩的价值,将其传递给用户。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

让游客观众带走喜欢的颜色

游敦煌是指尖上的敦煌图书馆,是一款容的产。我们希望户在获取信息的时候接受到尽可的阅读干扰,应满足到聚焦容本身。作为产配色,敦煌丰富的色彩在产环境中需要谨慎的考量。

面对样的问题,我们构思以下的决方法。

将所有的色彩暂性隐藏,每次仅出现一个主色,由主色 + 五种不同重量的灰色 + 种底纹色构成产品环的主要色彩。这可以保证产品环大部情况于只有一个主色的状,让内容更不受干扰地呈现。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

有了主题色的构思,就要面临如何在敦煌窟取色,如何在程序敷色的问题。

1. 取色

起初发现陈列馆的岩彩中,有部像玛瑙末、蛤这类过于淡的色彩,从色彩之间的对比度来过于弱,不适做产品的主色,需要对其进行筛选。常说光的三色是红、绿、蓝。那在这些矿物颜料中,是否存在最早的基础颜色呢?

我们拜访了敦煌研究院美术研究所,时范丽娟师正在临摹壁画。交流了我们遇到问题后,师我们议了五个颜色,这也是师在临摹壁画常用到颜色。

这些颜色都其各自的象征意义。朱砂属,象征吉祥。青金石与硅孔雀石属青绿,象征机。密陀僧属黄,象征土。赭石属褐,敦煌壁画的主表色彩。

我们决定从陈列馆的十七个颜色中将这五个颜色剥离来,作为小程序的题色。

一个面临的问题是,陈列的岩彩每个颜有一管阶,我们何取其一。为避免彩淡和深,经整的对比之,我们剥离最浅和最深的四管,在剩下的三管的颜中,用 Color.review 去校验个颜在屏幕彩对比度上的合理。Color.review 是基 WCAG 标准建立的校工具,它以检测颜是否以很容易地从背中被辨识出来。

敦煌的彩不仅美,更具有着特别的历史价值及象征意义。取完成,我们想进一步传递敦煌彩的价值。

通过研读相关文献,提炼内容,将岩彩的文字知识相应壁画作为封装,延续之前定好的块展览形式,放在产品色彩入中,让用户可以在这观「岩彩展」、定义程序的主题色。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

2. 敷

熟悉矿物颜料的同学道,敷时一上刷子,出来的彩质感是带着矿物的残粒的,颗粒因其不同的大小在光的折射下显得异常的美。但是产品界面中块是平滑的,是我们梳理出产品界面中面积大的颜展示区域,将我们之前设定的底纹叠加到主题块当中,让颜变得有岩面感。

通过清查并归类全局能够作为主题色的界面组件,比如关键按钮、高亮文字、关键背景等。按相应的需要为其定变色式,比如面积大的地方配置一定的底纹,细的地方让其保持滑。用户就可以在整个环中受定好主题色,带喜欢的颜色。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

把「密陀僧」的壁画看完

密陀僧是音译,是一款在东汉时期从波斯传来的颜,是载在「图经草」中含有药物效用的矿物颜料,中国是最早运用密陀僧为绘画颜料的国家之一。当范丽娟老师介绍个颜的时,就想把个颜的壁画看一遍。

既然是让老百姓在指尖上游览敦煌窟,然也为大家提供了更丰的探索方式,敦煌的色彩是个大菜,然少不了让观众按颜色探索壁画。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

首先将莫高窟陈列馆的十个颜色,作为的「色库」。每探索栏目会从色库中抽取一个颜色推送给用户,用户可以在这该颜色所有的壁画。

那么壁画和色库如何关联起来呢,我们设定策略是「壁画若含有个与指定颜色符合接近范围颜色,视为匹配成功。幅壁画可以和多个指定颜色关联」。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

有了构思,要临如何解剖壁画颜色,如何将解剖颜色匹配指定颜色问题。

1. 从壁画里解剖颜色

壁画留载千年,存在众多破损和杂色痕迹,这情况下会临个废色过多,色分布零散问题。我们都知幅画有很多颜色,哪个颜色才算数,是积大颜色吗?这会导致,很多壁画都是其大积颜色被检测到,这是不够。我们需要解剖出壁画那些突出颜色,于是我们做了如下尝试。

过划分明度分离颜色

我们发现旧敦煌壁画,许多突出颜色已经变淡。我们将壁画划分三层明度,将突出颜色新在各个明度分层里解剖出来。这样解剖出来颜色更加全。

聚类颜色

初步解剖出第批颜色后,为了让颜色后续被更有序地拾取,我们需将这批颜色进打理。过设定颜色相似度范围,颜色进聚类。

杂色过滤

过聚类颜色后 , 需要进步将杂色过滤掉。我们将明度和饱和度来时过滤,为到颜色设立明度等级及在级明度下设立饱和度范围,级级将不合范围效色过滤掉。

设排序

如将敦煌壁画划分为高低三个明度,我们发现,权颜色主要在等明度,我们将最后到颜色结按明度优先级去排序,到最终解剖色。

2. 将解剖的颜色与色库匹配

实现了壁画颜色解剖,要进颜色匹配了。我们有大量壁画需要和色库匹配,此需要设定个自动匹配制。在技术上,我们选用 H(色调)、S(饱和度)、V(明度) 模作为颜色模。 HSV 模下色可以视为个圆锥立体模型, H 是 0°~360° 顶部圆,不度代表着不色调倾。S 是圆上径,单位长度径代表着该长度下相应饱和度色调。V 应是圆锥轴,代表明度。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

基于圆锥立体模型几何概念,立该模型(x,y,z)三维坐标算法。在边长 R,底圆半径为 r,高为 h  HSV 圆锥体内,以地圆心为原,H=0 为 x 轴正立坐标轴。那么色值是(H,S,V)三维坐标(x,y,z)是:

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

如此来,所有颜色都可以过坐标计算出在立体圆锥里位。过以下几步可实现颜色与壁画自动匹配。

  • 确认指定颜色,如密陀僧在圆锥中的坐标是 A。
  • 将所有壁画颜色解剖,并将解剖颜色投入圆锥,过以上算法出所有颜色具体坐标位。
  • 遍历所颜色圆锥中与坐标 A 距离。
  • 设定与坐标 A 距离的名范围,取与坐标 A 距离最的前颜色。
  • 则批颜所属壁画就成功匹为属密陀僧的壁画。

在小程序中技术只是连接观众与敦煌石窟的桥梁,我们希望送到大眼前的,是触手可及的敦煌岩彩展,壁画展。虽然过程会遇到一些困难,尤是从颜色探索壁画,相一般的图像取色,从老旧的敦煌壁画解剖原本的颜色会更困难。在进行明划分的时候,看到同明的颜色面被一层层分离,仿佛感受到壁画中的一层层物件被重唤醒。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

一步步「采岩」,一步步沉甸甸。我们实现了户自定义题色、看敦煌色彩展览、从颜色探索壁画这几件事。望整个和敦煌岩彩打交道的过程,从陌生到熟悉,从熟悉到传递,我们都知道了敦煌岩彩都是有厚重的意义和值。

当看着小程序敦煌彩页面的设计图,不由得又想「古复苏」。我们相信敦煌彩的美,应该更地被世人看到。

后记

随着项目的深,设计的一个个想法需要确确地落地,开始变得棘手。尤其在产品接近上的节骨点期间,快速应急出方案的同时,还需耐心、快速并反复地校验开的效果是否吻合设计稿,为所有的 BUG 梳理待办优先级,并且一条条盯着直到它被决。我们在最几天感叹,BUG是 修不完的。即使到产品上,我们还是在一个与 BUG 赛跑的状态没缓来。

当人日报、敦煌研究、腾讯等运营的助推及将程序直固定在服栏;当 CAN 博物馆、理想、ONE 等喜欢的媒体用的语言去推;当博上千多万条关于#云游敦煌#的讨论的声音;当的云游敦煌程序用户量过百万,才缓过神来,喔,来一期杀青了,并且也得了大家的肯定。

看到个学生网友发微:

Day 10。看网课。写作业。计算级。背单词。云游敦煌。

我们旨在这段特殊时期,希望大家能在家里,看看敦煌美。闷着头做设计这么久,忽然听到这声音, 焕然想起我们今日画语:「今日,宜知足」。

今后的云游敦煌项目中,我们团队依然会保持优化迭,引入多形式的敦煌展览。

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

深圳到敦煌直航,需兰州或者安转机一趟。每次去都感觉挺远的,作南方人吃的也不习惯。但到终点那里可以看到让人肝儿颤的中壁画,也得。

上次的时候是冬季,飞机路过青海的的时候,被手机里的歌叫醒了。当时好放的是坂本龙一的《Mar Mediterrani》。 外一看全是冰山。和白混在一起,美轮美奂,想着终于有场景可承托起这个曲子了,当时坐在位子上真的是感到想付钱。

是的,最看的东西,也许不一定在终点。感谢一段造窟采岩的设计经历。

欢迎关注作者「腾讯CDC验设计」的微信众号:

腾讯案例复盘!「云游敦煌」小程序背后的设计故事

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

随着技术的发展,我们常常会觉得,如果想要做好产品必须遵循新的规则。实际上,这并不是真的。人类本身并没有我们想象中变化...
Eugen Eşanu
做竞品分析的目的,就是做到人无我有,人有我优。那么如何才能做好竞品分析?来看看大厂设计师是怎么做的。 竞品的6个参考价...
产品设计
背景 “操作系统对我们而言已不是最重要的了,更重要的是应用和服务。” [1]- 微软 CEO Satya Nadella 去年微软发布的便携折叠...
实战案例
你有没有尝试过各种各样的能够影响用户行文的设计策略和设计方法?无论是指向性明确的配色方案,还是 A/B 测试,抑或是在着陆...
Adam Fard
@Daidai丶呆 :早些年入行做交互的时候,会对任何类型的页面都做一些分析与总结,旨在提升自己的思考能力。所以当然也写过关...
产品设计
编者按:设计师和设计爱好者的区别在哪里,本文用一个实战案例,帮你揭开两者思维的差异。 ...
产品思维
项目背景 随着手机拍摄能力和通讯行业的不断发展,使用手机拍照已经成为人们的一种生活习惯,在这个每天都要拍摄、查看、接收...
一刻相册
“大而全”还是“小而精”的观点争论,相信大家肯定都听到过,抑或是正在深陷其中。传统的观念认为,一个产品的功能越多,似乎就...
产品设计