如何保证风格的统一设计

深圳/UI设计师/6年前/639浏览
如何保证风格的统一设计
Bo_wen

寺院app-抄经设计流程优化分析,寻求更好的线上抄经体验。


你是否对佛教有所理解?在佛教中最重要的修行方式就是依法修行,而佛法学习的是经律论,抄经是其中一种学习修行方式。



一、前言

这篇文章讲述的并不是大而全的整体app设计理念,只着重于对其中抄经流程优化的痛点、目标、优化过程、结果进行讲述。


1. 原因

当进行完大的版本迭代,由于敏捷开发便于市场试错,大的版本往往很粗糙,需要在不断迭代的过程中逐步对某一流程进行优化,这一流程所具有的特点往往是比较重要的功能、比较有亮点和特色的功能。


2. 介绍

对于这次所做的寺院app来说也是这样,我解释一下什么叫寺院app,因为这听起来并不像一个app的名字,寺院app并不是指具体某个app,这与公司的商业模式有关,它是一个对所有寺院做的app总称。


举例:你可以理解为我们是一个外包公司,提供技术为每个独立寺院开发app,这个app中有寺院自己需要的功能,并由寺院自行运营。


目前已经开发了十多个寺院,运营较好的是北京圣泉寺app,如果感兴趣可以下载接触一下。




二、工作定义

从1.0到3.0、从业务和设计都进行了磨合期和发展期逐渐走向稳定,由于这个项目是一开始就接手的,所以对它已经非常熟悉,很清楚的知道其中存在的问题。


1. 痛点

  • 无仪式感。很明显,宗教的一个特点就是极具仪式感、庄严感,之前的版本太过于现代化,遵循普遍的app规则,就显得很平凡没有特色。


  • 无成就感。这主要在于提升用户的体验,当抄经完成给用户展示成果,并鼓励他分享、给他一个分享的理由。


  • 交互操作上的不便。由于用户大多是年龄较大的信徒,对于字体要求和按钮要求要大,需要易点击、易操作、易理解。


所以这次迭代就着重从这三个痛点入手,进行优化。




三、风格定义

为了保证这段流程的统一性,需要找到一个适用整体的色调、元素,即能够包容界面设计规则,又能包容特殊的表现设计。


1. 全局规则

色调/背景。如果是白色背景很难表达一种佛教氛围,如果背景太突兀又会看起来不像一个可操作性的界面。经过尝试最终选择一种亚麻色,具有纸质感的背景,是考虑到抄经所用的纸张,采用的是一种隐喻设计。


2. 元素

佛教是具有很多元素的,每个都有不同的意义和代表,其实是不能随意使用的,比如不能直接使用佛像、菩萨,不能用Q版插画,这些都是对佛的不敬。


有些人对佛教设计的理解可能有偏差,以为是大红、大黄特别俗艳的颜色,其实不是,佛教中像禅宗的设计就很具有灵性、简约、干净的特点。有一些花纹和图饰设计的也是精妙绝伦,包含的构思也非常巧妙。


回归到具体的元素,是佛教行内人士的指导,可以准确无误地使用。从中挑选了适合使用的两个元素:




四、界面设计

这部分采用对比分析的方法,并尝试给出设计过程中的想法。


1. 首次体验

在开始之前添加了一个界面,只在首次进入抄经功能显示,因为考虑到第一次进入并没有产生任何的抄经数据,用户的目的也很明确,就是要去抄经,所以简化操作只给一个入口,并且由此产生一种仪式感。


2. 首页

毛笔尖藏着一个小的寓意,在第一次进入的时候是白色毛笔未经书写的,而抄过经的毛笔是沾染了墨迹的。


在成就感提升方面体现在数据可视化,第一个是环形进度直观的表现目标抄经的多少,第二个是抄写一遍后就展示一本小经书,比单纯的文字展示更有魅力。


关于抄一遍就得一本经书这个设想,发生了有意思的事情,开始的想法是不做限制,只要抄一遍就得一本经书,成就感爆棚的感觉,但由于可控性比较差,还是选择超过5本数量后就以一摞加文字描述的形式展示。


3. 经书选择

抄经必然要选择一本经书,在这个界面中特殊情况是有主目录和子目录,旧版本的层级划分不够明显,会造成用户选择上的迟疑和困难。


4. 抄经界面

这是长期停留书写页面,以更柔和的背景色调,对于常操作按钮(下一个字)做了突出,相对比之前用颜色区分更易区分、易操作。


5. 抄经记录

主要对交互操作上进行优化,唯一可交互的是已抄完的按钮(查看抄完的经书),但是不够明显,整体的可交互区域和不可交互区域区分不够明显。


6. 抄经预览

表现力上加入了佛教元素(金刚力士护法托举),统一按钮的样式。


7. 抄经完成

这个页面要着重做出仪式感和成就感,才能让用户感到鼓励并心生愉悦的去分享,对比旧版本加入了坐骑的元素,四大菩萨的坐骑随机显现,每个坐骑代表不同的寓意。


8. 抄经分享页

成就是分享的动机,分享页面里直接展示抄经的成果,并有设置的回向文(发心抄经的目的)。


这里就是我分享的全部内容,感谢你的阅读(:


9
Report
|
10
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
一梦大唐·长恨歌
Homepage recommendation
相关收藏夹
app
app
app
app
作品收藏夹
123
123
123
123
作品收藏夹
历史感
历史感
历史感
历史感
作品收藏夹
L
L
L
L
作品收藏夹
。
。
。
。
作品收藏夹
大家都在看
Log in