云游敦煌小程序背后的设计故事.docx
- 文档编号:12957
- 上传时间:2022-09-30
- 格式:DOCX
- 页数:19
- 大小:16.05MB
云游敦煌小程序背后的设计故事.docx
《云游敦煌小程序背后的设计故事.docx》由会员分享,可在线阅读,更多相关《云游敦煌小程序背后的设计故事.docx(19页珍藏版)》请在冰豆网上搜索。
云游敦煌小程序背后的设计故事
「云游敦煌」小程序背后的设计故事。
肝儿颤。
相较于名画家,敦煌莫高窟那些无名画工在墙上绘制的牛鬼蛇神,让人肝儿颤。
记得看「局部」时,陈丹青老师如是形容莫高窟的壁画。
有幸,去年团队决定去敦煌团建。
进入洞窟,扑面阴冷畏惧,目瞪口呆。
其一洞窟本身环境阴冷,其二洞窟神秘而庄严,静谧而安详,阵势至眉目间,延绵千载,博大精深。
敦煌研究院与腾讯于2017年底达成战略合作,参与到敦煌文化的保护和传承事业当中,在合作两周年之际,敦煌研究院与腾讯计划共同打造微信小程序「云游敦煌」,指尖轻触方寸屏幕,就能遨游千里之外的文化遗产胜地。
此次合作是腾讯2018年首次提出「新文创」以来的一次新探索。
非常有缘分,设计团队从敦煌团建回来之后便加入到了项目当中。
莫高窟久远而璀璨的文化,应该被更多人看见。
帮助更多人探索、游览、守护莫高窟,是我们产品的愿景。
让游览敦煌,变成随时随地。
作为设计团队,把远在西北中敦煌石窟的感受,转译到每个老百姓的指尖,是这次我们要解决的难题。
好比我们去住主题酒店,不同房间环境下的规格、布局、光照、软硬装的风格、材质、颜色、纹理,饰品的气质等,这些环境因素都会给人极不相同的环境体验和感受。
我们将通过设计的方式,去建立属于敦煌石窟特有的产品环境。
建立「敦煌石窟」的产品环境
这次我们的产品环境,是老百姓手中的微信小程序。
在小程序中,可体现的环境要素主要包括字体、配色、图片与图形风格、特定的形状、空间与布局、动效以及它们之间的组合效果等。
在这里,为了营造用户探索敦煌石窟的入戏感,我们将会通过以下设计过程,将小程序建立成为具有敦煌石窟调性的产品环境。
让大家尝试表达对敦煌石窟的印象
如果把大家对敦煌石窟的印象,转化成产品设计中的界面,会是什么样的呢?
我们首先来了解一下,大家对敦煌石窟的印象是怎么样的。
我们做了一个小范围收集。
·目的
通过召集人员,让大家通过一定的填写方式,表达自己对敦煌的印象。
我们收集并统计大家填好的内容,并将其记录提炼,以助力后续的设计工作。
·召集人员
参与者包含产品负责人,项目核心成员,曾经去过敦煌的用户以及想去敦煌的潜在用户。
大约二十人左右。
·引导填写
为了更直观地收集信息,我们需要提前设定好填写的形式和范围。
给每人派发若干纸张,每张纸只需填写一个对敦煌石窟的印象物,这个印象物是真实且具体的,比如佛像、壁画、沙漠等。
我们把印象物叫做Object,Object是一个三合一的组成。
每个Object都含有客观描述+主观感受的填空。
客观描述是指按事物本来面目去考察,填写黄色的、圆的这类词汇。
主观感受是指大家对印象物内心的感受,神秘的,庄严的这类词汇。
做简要的填写说明之后,引导大家静默填写。
·收集统计
把大家填好的纸张,将已填写的词汇按Object、客观描述、主观感受三种类别进行统计,将重复出现次数高的词汇整理出来。
·总结提炼
经过统计,我们得到如下总结:
按词汇重复出现次数由高到低排序。
大家的印象物集中在壁画、佛像、洞窟。
客观描述主要是斑驳的、粗旷的、厚重的。
其中色彩主要是土色的、有一致的色系。
主观感受主要是震撼的、敬畏的。
除了词汇的统计,还有一些有趣的洞察,以下洞察也会助力到接下来的设计中。
·不多的人会写九色鹿,飞天
·少数的人会写九层楼
·更少的人会写供养人
·绝大部分的人都觉得敦煌的颜色很美
诚然,挖掘敦煌的调性,还包括了设计团队研读敦煌书籍,拜访敦煌研究院等桌面研究。
这些成果同样也会指导我们后续的设计。
一步步「造窟」
我们通过对敦煌调性的挖掘,以研究成果为基础,一步步建立敦煌石窟的产品环境。
经过对小程序框架和组件的梳理,我们将卡片、底纹、图标、字体视为界面的核心组成要素,针对其着重进行打磨,并考究他们之间组合的关系。
“不是纸,是墙。
”
在莫高窟陈列馆的时候,敦煌研究院的杜鹃老师对我说:
“壁画应该呈现的质感不是纸,是墙。
”
那里有个展区叫「地仗的制作」,我们停在那儿看。
敦煌的壁画是由岩壁层、地仗层、颜料层组成石块结构。
每改朝换代,莫高窟的无名画工们,就会在原来的壁画上重新敷色,绘制新的壁画。
确实,扁平破烂的纸素材好像更容易地去表现斑驳感。
但墙的厚重,是通过历史一层层覆盖上去的,将墙的感受表现到位,在构建产品环境的过程中,是更需要拿捏准确的一环。
在界面设计中,卡片是一种包含图片和文字在内的小矩形模块,可以作为用户了解更多细节信息的入口,因此卡片设计形式被大量的运用。
在敦煌小程序中,也存在大量的分类、话题及单品等入口,需要运用到大量的卡片设计。
为了靠拢敦煌石窟中「墙」的感受,我们将所有的卡片设计都转译为石块设计。
通过以下两个步骤,我们将石块一块块拼起来。
·清查与归类
将所有的石块按话题封面,类别封面、单品封面的类别梳理出来。
·设定视觉样式
为石块设定视觉样式,并根据不同类别件下的石块,在统一样式的前提下设置样式差异点。
然后将视觉样式赋予到归类单的各式石块中去。
石块视觉样式的设定。
通常,界面设计中卡片是由基础的矩形演变而成,矩形的基本设计条件为圆角、阴影、纹理、长宽比。
我们通过去调整和对比这些参数的最佳组合,来将矩形塑造成粗旷、厚重的石块。
圆角。
最初尝试是在iOS圆角建议值的范围去尝试,发现在这个范围内的圆角值,一当放上壁画,就会变得精致无比,直观感受就像AppStore里一个个精致的App。
这不太符合粗旷的感受。
如果尝试直角,尖锐的直角排列起来又是一种严谨的精致。
于是,我们尝试把直角磨去一点点,使用2Px的圆角值,使石板的角看上去好像被风雨磨去了棱角,有一点点顿挫的感觉,结合阴影的效果也起到了一定的厚度感。
阴影。
在界面设计中,通过调整阴影的纵向长短可以表现纸张不同的高度。
但是我们是石板,需要表现出厚重的感觉。
除了可以调整阴影的纵向长短,我们尝试将阴影的横向宽度适度减少。
如此一来,就能直观感受石板离墙面是有比较大的距离的,也让石板有了厚度,重量感。
当我们完成石板的视觉样式,就可以将其逐一赋予到我们的已经清查的归类单中。
在赋予的过程中,我们根据不同的类别条件,建立了7种不同横竖构图的比例尺寸,以及不同尺寸下的阴影效果。
关于比例的设置,我们设定了让后台的内容供应库只提供一张壁画,根据不同的类别请求自动进行相应的比例裁剪,这可以提高产品的请求效率和减少内存压力。
至于另一面墙,也就是底纹。
我们也是通过清查归类,将不同场景的底纹梳理出来,为其关联上类别标签,然后为相应类别的底纹,配置相应的斑驳纹理。
图标
图标的效果,设计上的操作手段是技法和表意。
对于主功能的图标,我们在表意上取了具有敦煌石窟代表性的几个意象。
技法上我们参考敦煌壁画传统的绘制工序,「勾线–敷色」。
其中这里的敷色与勾线的叠加效果,是代表图标被激活的状态。
敷色的造型是参考矿物颜料的敷色效果,色块具有斑驳的感受。
对于二级图标,我们采取了古代表意,现代线描绘制。
旨在表现上简约利落不干扰阅读,表意上贴合敦煌古韵。
字体
字体的效果,是产品环境因素中重要的一环。
但是小程序环境限于目前不兼容个性字体嵌入,我们考虑从核心的壁画体验的页面中入手。
在「每日画语」的壁画展中,我们都会为用户每天推送一款壁画和相应的「画语」。
我们选用了与莫高窟写经书法气质相近的古典明朝体,在「画语」展示中确认好个性字体的展示形式后,通过切图来实现。
确保用户在看壁画展的时候,在关键文字的阅读上也具有足够的入戏感。
标识
我们优先考虑的是,如何塑造出高辨识度,直观,具有敦煌气质的标志。
根据前期的研究,我们做了标识在视觉表意上的认知排序。
当下,每个人的手机里都有着众多的程序和信息,用户在使用手机的时候都在快速地滑动着每个内容,用户对微信小程序标识的认知机会是处于「寸土寸金」的前提下,稍不留神很难记住。
结合之前关于印象收集的结论,大家对九色鹿、飞天等敦煌形象的熟悉程度比较弱,我们经过不同方向尝试,决定使用直观的文字图形更节省用户的认知成本,更为有效。
有幸,在拜访敦煌研究院的时候,收集到了研究院华亮老师的书法作品。
我们得知,敦煌研究院标志的书法字体正是华亮老师的笔墨,于是我们决定将老师的书法进行设计加工,作为标志设计,也算是一种的传承吧。
打造流动的壁画展
在产品构思上,除了图书馆式的内容整理,展览式的内容推送也更能满足老百姓探索的心。
我们建立了「每日画语」和「每日画展」两种日更的形式。
回想在敦煌莫高窟的壁画展中,对于壁画的展示形式,没有做画框处理,是以「岩面」的样子去呈现,可见其还原「壁·画」之用心。
受其启发,在产品中的壁画展,我们运用了之前的「石块」和「底纹」相结合的设计样式作为展示形式。
并将每一张壁画,根据不同手机尺寸大小,将壁画的展示适配到最大化,营造用户看壁画的洞窟沉浸感。
敦煌的传统颜料主要起源于当地矿石、进口宝石及部分人工合成的颜料。
迄今约有千百年的历史。
要说去莫高窟除了参观洞窟以外的惊喜,那就是在陈列馆的「岩彩区」面前久久地发呆了。
每一种色号,都有十一管不同深浅的色筒,这些深浅都是经过一定的研磨工艺制作,晶体颗粒度越大,颜色就会越深。
除了好听的名字,每种颜色旁边都会放置一块「原材」作为展示。
虽然眼前这些辰砂、蛤壳、孔雀石是死的,但此景不由得让人想起「古鱼复苏」。
作为设计团队,我们需要挖掘敦煌岩彩的价值,将其传递给用户。
让游客观众带走喜欢的颜色
云游敦煌是指尖上的敦煌图书馆,是一款内容型的产品。
我们希望用户在获取信息的时候接受到尽可能少的阅读干扰,应满足到聚焦内容本身。
作为产品配色,敦煌丰富的色彩在产品环境中需要谨慎的考量运用。
面对这样的问题,我们构思了以下的解决方法。
我们将所有的色彩暂时性隐藏,每次仅出现一个主色,由主色+五种不同重量的灰色+两种底纹色构成产品环境的主要色彩。
这样可以保证产品环境大部分情况处于只有一个主色的状态,让内容更不受干扰地呈现。
有了主题色的构思,就要面临如何在敦煌石窟取色,如何在小程序敷色的问题。
取色
起初我们发现陈列馆的岩彩中,有部分像玛瑙末、蛤粉这类过于淡的色彩,从色彩之间的对比度来看过于微弱,不太适合做产品的主色,我们需要对其进行筛选。
我们常说光的三原色是红、绿、蓝。
那么在这些矿物颜料中,是否存在最早的基础颜色呢。
我们拜访了敦煌研究院美术研究所,当时范丽娟老师正在临摹壁画。
交流了我们遇到的问题之后,老师向我们建议了五个颜色,这也是老师在临摹壁画中常用到的颜色。
这些颜色都有其各自的象征意义。
朱砂属红,象征吉祥。
青金石与硅孔雀石属青绿,象征生机。
密陀僧属黄,象征土地。
赭石属褐,是敦煌壁画的主要代表色彩。
我们决定从陈列馆的十七个颜色中将这五个颜色剥离出来,作为小程序的主题色。
一个面临的问题是,陈列馆的岩彩每个颜色都有十一管色阶,我们如何取其一。
为了避免色彩过淡和过深,经过整体的对比之后,我们剥离最浅和最深的四管,在剩下的三管的颜色中,用Color.review去校验这个颜色在屏幕色彩对比度上的合理性。
Color.review是基于WCAG标准建立的校色工具,它可以检测颜色是否可以很容易地从背景中被辨识出来。
推荐给各位设计师同学。
敦煌的色彩不仅美,更具有着特别的历史价值及象征意义。
取色完成后,我们想进一步传递敦煌色彩的价值。
我们通过研读相关文献,提炼内容,将岩彩的文字知识与相应壁画作为封装,延续之前设定好的石块展览形式,放在产品色彩入口中,让用户可以在这里观看「岩彩展」、自定义小程序的主题色。
敷色
熟悉矿物颜料的同学知道,敷色时一上刷子,出来的色彩质感是带着矿物的残粒的,这些颗粒因其不同的大小在光线的折射下显得异常的美。
但是产品界面中色块是平滑的,于是我们梳理出产品界面中面积较大的颜色展示区域,将我们之前设定好的底纹叠加到主题色块当中,让颜色变得有岩面感。
我们通过清查并归类全局能够作为主题色的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 云游 敦煌 程序 背后 设计 故事