6

网易有道词典 9.0 全新设计,来看完整复盘!

 3 years ago
source link: https://www.uisdc.com/netease-youdao-dictionary
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

全新网易有道词典 9.0 在设计与功能上进行了双重升级,其中承载了诸多对于美好学习生活的憧憬,让我们一起分享这次改变的历程。

Bn6Z3uQ.jpg!mobile

2020,这充满戏剧性的一年即将收官。即使充满种种变数,求知路上的收获总能赋予我们继续前行的力量。感谢每一位学习者的努力与热爱,你们为自己和他人带来了更多的光。“河海不择细流,故能就其深”,点滴分秒的努力都将汇成你的璀璨星空。

见证着大家的努力,身为词典设计团队的我们也在思考如何更懂得学习者的所需所爱。9.0 版本作为年终献给大家的一份礼物,承载了我们对于美好学习生活的憧憬,我们希望与你分享这次改变的历程。

nmyABb.jpg!mobile

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

  • 更高效:查词流程全新升级,懂你所需
  • 更多元:Wow 学习社区,在一起,更好学
  • 更有范:探索词典气质,是语言,更是文化

查词流程全新升级 懂 你 所 需

我们很高兴地看到,有道词典每天为大家接收和处理超过 5000 万次的查词诉求。万千学习者的信任让我们倍感欣喜的同时,也让这份责任感更有重量。任何一次求知的目光都值得被关注 —— 如何把更多的时间留给理解与快速记忆,成为了此次查词流程升级的首要目标。

1. 扶稳坐好,准备提速!

或许你不曾留意,看似简单的查词操作,流程上分为了三步:

7fA7NnI.jpg!mobile

当我们急于查询一个单词时,瞬时记忆是我们的主要依靠,这就要求流程中尽可能减少页面元素的“噪音”,为这些暂存的信息开辟一条快速输入、展示的通道,使注意力尽可能被分配到理解和记忆环节。因此,我们对每一步进行了细致的打磨,力求提升查词的整体流畅度与效率。

唤起搜索是一次查词历程的起始步骤。对比此前跳转新页面开始输入的方式,我们尝试将首页查词框、搜索页输入框“合二为一”,在词典首页轻触查词框即可唤起输入,将均时从 1.5 秒提速到 0.5 秒,节省跳转中消耗的时间。

bi2Efiz.gif!mobile

其次是“视觉锚定法”的使用。在查词各步骤中始终保持搜索框提示文字、输入的单词、释义页单词在同一水平线上,使文本元素形成页面切换时不变的视觉焦点,让使用者能够“神定”而不散。这样的改变能够增强内容加载与切换时的连贯性,减少视线跳转对注意力的消耗,打造更加轻松的查词体验。

最后是查词与翻译“场景一体化”。以往的数据告诉我们,在首页搜索框内输入长文本、段落进行翻译的比例占翻译总请求量的 30% 以上 —— 然而,原先的长句翻译在视觉展示上并不友好。我们尝试在 9.0 版本中改善这一体验,在查词页翻译单词或长文本,采用清晰、一致的视觉呈现,覆盖了更多学习场景,满足大家对于搜索框的种种期待。

fMJjeuV.jpg!mobile

2. 看得越清晰,记得越容易

身处信息爆炸时代的你们,是否有过这些烦恼:

  • 阅读效率不高,一段看好久 …
  • 反复阅读还是 GET 不到重点 …
  • 好不容易读完,读完就忘 …

这些并不一定是阅读者的问题,或许更多的是来自不够友好的排版“阻力”。

我们获取信息的效率、阅读的情绪、理解信息的能力都由“秩序”主导 —— 字体、字号、文字灰度以及行间距,这些元素的不同结合方式形成了不同的秩序感。如何带来更有助于提升阅读效率的秩序感,也是新版查词释义页升级的重要方向。

eYBbMbM.jpg!mobile

在单词的展示上,新版释义页采用了更强的文本字号、字色对比和信息层级,将最为常用的简明释义重点突出,弱化页面其他“噪音”元素,让你一眼就能定位到“单词 + 关键简明释义”的组合,而非视线反复浏览查找,从而保持良好的阅读情绪。

R7vA7za.gif!mobile

此外,新版本在英美发音、加入单词本等高频功能上,也通过调整按钮间距、采用更直观的胶囊点击区域等设计形式,增强用户点击明确感,让可以点击的“更好点”。

视觉上强化结构分组是另一个优化秩序的重点。根据格式塔接近性原则,我们的大脑会把临近内容自动归为同类。这与 “分类记忆法” 类似 —— 当要记的东西太多,先定大纲,再记忆个体,能有效地帮助我们更清晰地记住。例如下面这组信息,在分组后更易被理解和记忆。

67zeayr.jpg!mobile

9.0 版本中,以上提及的各功能区(原文、发音、释义、附加内容)都被以更加清晰、严谨的 4 倍网格系统明确地区隔开。重点信息一眼便知,理解快人一步~

UZR36rJ.gif!mobile

视觉焦点测试显示,新版查词结果页的信息结构和分组模式,可让视线更好地附着在关键信息上,同时阅读更舒适,通过排版的优化间接达到辅助高效理解的目的。

此外,在页面中的灰度色阶定义方面,我们利用更加贴合自然规律的贝塞尔曲线来调整 HSB (色相、饱和度、明度) 取值,科学的灰度色管理能使信息层级更加突出,浏览更加舒适。同时,广泛的学习人群也让我们更加关注无障碍阅读的重要性。有道词典选用的灰度对比符合国际通行的 WCAG 2.1 AAA 标准,为包含视觉障碍在内的人群都提供了更好的界面信息可读性。

eYzu6vV.jpg!mobile

查词流程中的更多彩蛋,欢迎大家在 9.0 版本中实际探索和发现~

Wow 学习社区:在 一 起 , 更 好 学

我们努力用各种学习功能让你学得更高效、记得更轻松。但学习更像一场长跑 —— 作为伴随我们终身的漫长旅途,慢慢的,值得求索的世界变大了,身边原先的同行者却逐渐减少。但你或许未曾发觉的是,在有道词典中正有亿万人与你并肩同行。

为了连结词典内数以亿计学习者的小世界,从一个人的学习进化为一群求知者的相聚,词典 9.0 全新上线 “WOW 学习圈”。激动地搓搓手,让我们一起来了解下这个好玩好学的小世界~

1. 好玩好学,让词典“活”起来

你印象中的词典App 是什么样的?相信专业权威、略带严肃是很多人的一贯印象。数据显示,有道词典作为教育类头部应用正在被越来越多的 90、00 甚至 10 后使用。Wow 圈作为学习资源分享社区,是词典向年轻化转变的第一步。学习圈如何承接这种转变,让滚滚“后浪”用得得心应手,让前辈们持续信任,成为了我们倍加关注的核心点。

v6nEze3.jpg!mobile

历经多番脑暴、尝试后,我们明确了设计的方向 —— 静态活力。

何谓“静态活力”?在我们看来,小至一个标题,大到一篇复杂的文章都应该与使用者存在互动和关联。因此为了使原本静态的元素“活”起来。在 9.0 版本中我们为你引入了“灵魂小弧线”。它来源于语言文字中的右侧着重括号(「 」右边这个 ),同时也代表着小小的微笑,希望你在使用词典的每一天,能够嘴角上扬,发现所爱。

YRNBvq6.gif!mobile

2. 不期而遇的动效,来点小惊喜

生活需要一些不期而遇的惊喜和仪式感,设计团队选择了学习圈中典型场景:点赞、收藏、WOW ! (推荐) 、加入新圈子,以精致、模拟真实场景的动态效果,为学习“加点戏”。

例如,收藏操作模拟真实下落时的抖动质感;点赞/取消点赞使用不同的动效 —— 心动/ 心碎模拟用户点击时的心境,而非直接采用逆向动效;WOW ! 则以庆祝感十足的彩带烟花形式为这一操作增加更多好玩的仪式感。

rYR3mui.gif!mobile

ZnA7Bnr.gif!mobile

小小细节,希望你能在每一次点击中感到快乐。

探索词典气质:是语言 , 更是文化

语言的背后是文化,掌握的前提是了解。学习语言,亦是在学习对应地域的文化。为了尽可能化被动学习为主动探索,全新的 9.0 版本将不仅为你呈现语言的表层含义,更与你一同感受文化意境。

1. 优雅字型,透视经典文化格调

一款符合用户阅读需要与喜好的字型,能够潜移默化地提升对内容的理解效率与使用好感度。信息时代的效率导向让非衬线字形在界面设计中逐渐成为主流,但效率与情感理应并重 —— 在覆盖全局的简约笔画之间,选择更有气质的字型进行点缀,会带来赏心悦目的视觉感受。

bAzmeqz.jpg!mobile

9.0 版本中我们精心挑选了一种优雅而易读的衬线字体,彰显着文艺不凡的气质,在关键的搜索区域让你对单词留下眼前一亮的印象;而在正文内容部分,我们依旧使用更加简洁高效的非衬线体,让氛围与效率在界面中并存。

2. 艺术点染,为学习加些「仪式感」

学习是为了更美好的生活,而文学艺术源于生活且高于生活。除了上述的字形,我们通过背景氛围的营造与元素符号的提取,希望在不打扰的前提下给你营造学习所必须的「仪式感」。

印象派艺术家莫奈的作品《日出 · 印象》描绘了晨雾笼罩中的日出港口景象,用朦胧的色彩变幻展现迷人景色。我们从中提取了色相渐变的表现手法,在重要页面的背景予以小范围的点缀,营造富含美好愿景的「文学印象」。

zMre6zZ.gif!mobile

ya6vea7.jpg!mobile

3. 文化符号,每个细节好看亦有趣

符号是文化的凝练表现。我们提取了经典的文化符号:优雅的赫本、羽毛笔、福尔摩斯等元素应用到图标设计当中,带来独特的文化质感。

iARzQvm.gif!mobile

为了更有进入「英语学习角」的代入感,我们精心设计了专属的身份卡片,这些形象也是源于古典名画或影视佳作的经典文化符号。快来翻开你的专属身份卡,彰显独特的文化气质吧~

32yIR3e.gif!mobile

Always, on the way

让每一个使用者学习更高效、收获更愉悦的体验是我们的使命。

希望你喜欢这份为你精心呈现的礼物,在词典构筑的小宇宙中不断求索新知。

全新的有道词典 9.0 亦只是一个开始,我们将始终珍藏一颗服务学习者的初心不断蜕变,为你提供更贴心的支持。

今后的时光里,无论熟悉的灯下或是异域他乡,有道就在你的身边,陪你发现这世界。

我们期待成为更懂你的词典,与你一道前行。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK