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

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

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

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

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

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

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

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

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

先来M I ) = t G (看看新版本都有哪些重要改变

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

查词流程全新升级^ e J A s ! 懂 你 所 需

我们很高兴地看到2 o Q t . `,有道词典每天为大家接收和处理超过 5000 万次w $ d / & V W的查词诉求。万千学习者的信任让我们倍感欣喜* M z f的同时,也让这份责任感更; k 0有重量p e z Q } z y .。任何一次求知的目光都值得被关注 —— 如何# } z _ ! h把更多的时V Z V a ,间留给理解与快速记忆,成为了此次查词流程升级的首要目标。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们获取信息的效] ] 7 y : | ; }率、阅读的情绪、理解信息的能力都由“秩序”主导 —— 字体、字号、文字灰度以及行间距S z , 1 9 3 : H,这些元素的不同结合方式形成了不同的秩序感。如何带来更有助c q + v * l于提升阅读X b 5 q _ S + H效率的秩序感,也是新版查词释义页升级的重要方向。

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

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

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

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

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

此外,E _ ` &新版本在英美发音、加入单词本等高频功能上,也通过调整按钮间距r m L @ s p + u a、采用更直[ # @ l X o f P X观的胶囊点击区域等设计形式,增强用户点击明确感,让可以点击的“更好点”。

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

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

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

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

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

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

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

此外,在页面中的灰度色阶定义方面9 } 2 ; E ,我们利用更加贴合s u J } r D r自然规律的贝塞尔k 0 l * C曲线来调k & k p `整 HSB (色相、饱和度、明度) 取值,科学的灰度色管理能使信息层级更加突出,浏览更加舒适。同时,广泛的学习人群也让我} H 6们更加关M $ P y注无障碍_ ^ h s { 2阅读的重要性。有道词典选用的灰度对比符合国际通行的 WCAG 2.1 AAA 标准,为包含视觉障碍在内的人群都提供了更好的界面信息可读性。

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

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

查词流程中的更多彩蛋,欢迎大家在D ^ [ p ! s v r 9.0 版本中实际探索和发现~

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Always, on the way

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

希望你喜欢这份为你精心呈现的礼物,z g m在词典构筑的小宇宙中不断求s e e o = | E索新知。

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
教程分享

从4个方面,深度解析App中的卡片切换与交互手势

2021-1-10 2:52:37

教程分享

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!

2021-1-10 3:39:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索