:::success 更多资讯请关注原文账号 ::: 原文链接:

image.png

背景

随着产品用户定位的变化及用户体量的提升,逐步上新内容和功能,优化视觉风格,是我们重要的一步,面对多元的产品使用场景,设计从“如何让下棋更有趣”的角度出发,打造一个既满足少儿学棋,又符合“广泛棋类爱好者”使用的下棋平台。

有道纵横棋院是一款免费对弈和学习的平台,随着棋类文化的普及,越来越多人对下棋产生浓厚兴趣,在下棋的同时,提升逻辑思维能力和培养文化修养、大局观、专注力、抗挫折能力等。目前有道棋院推出了三大棋类,分别是“围棋”“国际象棋”“中国象棋”。本次设计探索主要针对围棋品类开展。

在之前版本中,围棋主要目标群体是青少年,整体产品风格更加低龄化,为拉近与更广泛棋类爱好者用户的距离,产品需要在视觉上突破以往的低龄感,在体验上更加清晰流畅和有趣。以更包容、趣味性的方式和广泛棋类爱好者建立联系。让用户爱上围棋,感受中国传统文化的魅力,在享受博弈快乐的同时感悟下棋之道,养成优秀的、能伴随一生的思考习惯。我们希望与你分享这次改变历程。

image.png

先来看看本次改版都有哪些重要改变👇

更具中国传统文化感: 品牌进化,从精神内核到视觉感知
更高效: 围棋首页体验升级,功能分类直观,认知更轻松
更智能: AI复盘,辅助分析,知己知彼进步更快
01

品牌进化

从精神内核到视觉感知
数据显示,有道棋院作为益智棋类教育产品正在被越来越多的“棋类爱好者”用户所关注,随着产品目标人群从青少年到“棋类爱好者用户”的扩充,我们需要让青少年用户持续信任,并且在视觉感知上包容棋类爱好者用户。让广泛的棋类爱好者用得舒心。

image.png

用户定位扩充

1.1 明确品牌核心价值,找到精神内核

在“用户特质”和“品牌价值”当中寻找契合点,让用户在品牌中看到自己,达到情感共鸣。

image.png

1.2 将品牌价值贯穿于产品体验

让用户通过丰富的场景设定和功能体验,感知到有道棋院的品牌核心价值。

a. 古朴清新的文化氛围感 · 场景设定

围棋是富有竞技哲学的。从文化角度而言,不是让人去争胜负,而是去取势、去求常、去悟道。苏轼有云,“胜固欣然,败亦可喜”,道出了围棋的奥妙所在,因此我们认为围棋是平静的,坚韧且有力量。在文人意象中,围棋是和云雨、疏帘、青山、绿水、红袖、鸟语、书画、琴箫等等连成一体。从文化意向中我们提炼出场景创意,将青山、小溪、亭台、大雁、棋子等元素构成一副清新古朴的画面,让用户置身于悠闲自得的场景之中,开启轻松愉快的下棋之旅。

网易 | 有道LCT设计团队 - 图5

场景构图上运用 “三分法” 进行平视构图,亭台、两侧树木作为前景,草地小溪作为中景,远处山脉作为远景,画面呈现空间纵深感,从水平方向和垂直方向分别分成三部分时,线条交汇的地方就是黄金分割点,也是留给功能入口焦点的最佳位置。

同样,下棋界面保留了真实棋盘的木质感与真实棋子的立体感,延续场景清新古朴的氛围。

网易 | 有道LCT设计团队 - 图6

b. 真实亲切的趣味性 · 动效/音效

我们为了营造真实亲切的氛围感,在场景细节处增加模拟现实环境中的动态效果:微风吹过水面波光粼粼、小草和树木伴随着微风轻轻摇曳、远处云雾缭绕的深山大雁飞过。这些微动效恰当好处,既不抢占核心功能的“风头”,也为整体意境添彩。

网易 | 有道LCT设计团队 - 图7

我们还在商城获得商品场景中为用户准备了惊喜,当购买完商品时,商品卡片将会被挂上一个专属“已拥有”的标签牌,同时光效刷新卡片,结合撒花🎉形式,用精致的动态效果为获得挂件增加更多有趣的仪式感。

网易 | 有道LCT设计团队 - 图8

在对弈中,我们也通过轻松愉悦的背景音,加上落子模拟真实敲在木板上的声音,结合被吃掉子消失的动效,从视觉和听觉上打造真实亲切的趣味体验。

网易 | 有道LCT设计团队 - 图9

c. 内敛有力的竞技感 · 红和绿的博弈

围棋体验的核心在于对弈,设计如何通过视觉呈现中式的竞技哲学呢?
设计灵感来源于“松树”和“枫树”。松树长青,枫树火红,在传统文化中两种树都寓意坚定勇敢、无谓挑战、象征着一种积极向上的精神,这都与围棋的竞技精神契合。我们从“松树”和“枫树”中提炼出图形和颜色,贯穿整个对弈体系。

网易 | 有道LCT设计团队 - 图10

02

围棋首页体验升级

功能分类直观,认知更轻松

2.1 整合信息,聚焦核心功能

根据用户群需求的分布,以及用户使用场景,我们提炼出对应核心功能,在首屏进行聚类,分为:下棋、比赛、做题、课程4大核心模块。

image.png

用户需求分布
同时根据功能优先级进行分区,调整界面布局,将4大核心功能以底部tab切换形式展示,中心区域对应显示核心功能入口,使功能更聚焦,减少跳转,缩短核心功能触达路径,也让首页布局更具有拓展性。将原本下方次要功能图标入口移动到右侧悬挂展示,减少对核心功能的干扰。

image.png

功能入口图标的绘制使用更加具象的展现形式,减少用户理解成本,强化认知记忆。

image.png

2.2 利用渐变过渡替代色块分割

相对旧版的设计,新版本更加注重沉浸式体验,顶部导航栏个人信息位置利用渐变过渡替代明确形状带来的割裂感,减少信息色块对界面主体按钮的干扰,从而凸显出页面下方比赛、下棋、做题、课程主功能tab的层次。

image.png

网易 | 有道LCT设计团队 - 图15

用户反馈新版本布局结构的优化,使得界面更加简洁,功能聚类更加明确,达到高效选择的目的。不同需求的棋友都能够快速找到匹配的功能。
⏰ tips:首页赛事模块将不定时举办专业赛事活动,欢迎广大棋友前来一试身手👍~
03

智能AI复盘

辅助分析、知己知彼进步更快
围棋的复盘也称“复局”,指对局完毕后复演该盘棋的记录,以检查和思考对局中招法的优劣与得失关键。复盘是增长棋力的最重要方法。
我们通过AI技术为用户提供核心功能:胜率曲线,变换图、好坏手分析、形势判断、试下功能,全方位辅助用户分析棋局提升棋力—如何让用户高效、专注的思考分析棋局,成为了复盘功能设计的首要目标。

3.1 “吃子”场景复盘

“吃子”场景下为用户提供的核心功能:

image.png

为了让用户更快速的分辨好手与问题手,减少认知成本,设计采用直观的“哭脸”和“笑脸”来展示。考虑吃子场景的棋局步数一般比较少,在视觉展示上利用卡片形式,增强用户点击明确感,同时交互通过左右手势滚动查看更多。
当选择某一问题手后,左侧棋盘也会展示对应棋局,大拇指则表示AI推荐的最优走法落子位置。

网易 | 有道LCT设计团队 - 图17

在查看棋局步数时,为了让用户可以更快速的定位棋局某一手,设计上通过进度条拖动形式来辅助定位区间,提高查看效率。
分析结果搭配语音合成讲解,让原本枯燥的“复盘”变得直观和有趣。在设计上考虑到不同用户的使用场景,语音播放可点击关闭,用户可以根据所处环境选择听语音还是看文字。

3.2 “围空”场景复盘

“围空”场景下棋局步数相对会比较多,所以在设计上通过胜率曲线的形式展示,让用户清晰看到本盘棋的形式和胜率情况,用户可通过点击表情来定位查看分析结果。

网易 | 有道LCT设计团队 - 图18

写在最后

有道纵横棋院围棋升级只是一个开始。
让每一个棋手都能够快速提高棋力水平,并在下棋中收获更愉悦的体验是我们的使命。
希望你喜欢有道纵横棋院围棋的全新体验,在有道纵横棋院的文化氛围中收获快乐与成长。
我们将秉承真正服务用户的初心不断蜕变,为你提供更多的创新服务。
除了围棋,有道棋院还有“中国象棋”和“国际象棋” ,欢迎棋友们扫码下载有道棋院app进行探索和体验。

点击查看【bilibili】

扫描二维码下载有道纵横棋院进行体验吧👇

image.png