Bing Dictionary
Dictionary & Translation App

必应词典 字典和翻译应用程序

PERIOD
Aug 2016 to Apr 2017

MY ROLE
UX & UI Designer

DESIGN PEERS
Bingnan Jiang
Hao Guo
Rong Yu

Microsoft's Bing dictionary is Microsoft's official launch of a new generation of English learning services, won a 2010 Asian Innovation Awards —— "The Readers Choice Awards." With the rich thesaurus and authority of the library, the Bing dictionary can discover and include network new words timely to provide you with a high-quality free dictionary and translation services.

微软必应词典是微软官方推出的新一代英语学习服务，荣获2010年亚洲创新大奖——“读者选择奖”。 必应词典凭借丰富的词库和图书馆的权威性，及时发现和收录网络生词，为您提供优质的免费词典和翻译服务。

2016

When I first joined Microsoft in 2016, there’s a redesign project about Bing Dictionary. With two more designers, we together finished the project. We dramatically simplified the user experience, mainly focusing on the structure, core interactions, speed, simplified navigation, and a better interface.

当我在 2016 年第一次加入微软时，有一个关于必应词典的重新设计项目。 我们与另外两名设计师一起完成了这个项目。 我们大幅简化了用户体验，主要关注结构、核心交互、速度、简化导航和更好的界面。

2017

In 2017, we focused on more specific details of the experience, tried to solve more problems that the users mentioned, or found annoying to make the experience as a whole. Besides that, we also add some additional value to this APP during this time.

2017年，我们专注于更具体的体验细节，尝试解决用户提到的更多问题，或者让体验成为一个整体。 除此之外，我们还在这段时间为这个APP增加了一些额外的价值。

As you can see, it was a pretty old app, which meant the user experience didn't feel native to the web, some features were lagging, components are not well organized, and the UI needed an update.

正如您所看到的，这是一个相当老的应用程序，这意味着用户体验不是 Web 原生的，一些功能滞后，组件没有很好地组织，UI 需要更新。

So we started by reorganizing the whole organization network. And we did make some substantial improvements over a few months, but the UX still was disconnected and loose, rather than a smooth, lightweight.

所以我们从重组整个组织网络开始。在几个月的时间里，我们确实做出了一些实质性的改进，但 UX 仍然断开连接和松散，而不是平滑、轻量级。

After several months’ maintenance, we still have so many problems in both product property and experience. But for me, it is an excellent opportunity to improve the experience. Except for perfecting some core experiences, we also promoted some additional value to the product.

And the design goals are, firstly, to close the gap in the user experience; secondly, to add additional value to the product. So here I am going to show you some of the essential features that we updated.

经过几个月的维护，我们在产品性能和体验上仍然存在很多问题。 但对我来说，这是一个改善体验的绝佳机会。 除了完善一些核心体验之外，我们还为产品提升了一些附加价值。

设计目标首先是缩小用户体验的差距； 其次，为产品增加附加值。 所以在这里我将向您展示我们更新的一些基本功能。

Step One: Close The Gap 第一步：缩小差距

Workflow of search content 搜索内容的工作流程

Besides searching for new words, users also need deep learning through the content.

In the past, if you searched a word from the content, you will enter a whole new page, but getting back to the previous term will be difficult. But now, we simplified the process by changing the subordinate relationship between the search pages. And that means you are searching for the new word in the content under the previous word page, and the "back" button will show the last word beside the "arrow."

除了搜索生词，用户还需要通过内容进行深度学习。

过去，从内容中搜索一个词，会进入一个全新的页面，但很难回到上一个词条。 但是现在，我们通过更改搜索页面之间的从属关系来简化流程。 这意味着您在上一个单词页面下的内容中搜索新单词，“返回”按钮将在“箭头”旁边显示最后一个单词。

English text input efficiency 英文文本输入效率

When talking about input efficiency, there is a general way —— auto-suggestion. Let’s imagine that you find a new word, and you open your dictionary app, tap the search box, and then do you need to switch to English input before you tap? Of course, our input apps are never so bright that we always get English words through Chinese Pinyin input. So we will treat the Chinese Pinyin letters as English Letters and show the auto-suggestion according to it.

说到输入效率，有一个通用的方法——自动建议。 假设您找到一个新单词，然后打开字典应用程序，点击搜索框，然后在点击之前需要切换到英文输入吗？ 当然，我们的输入法应用程序从来没有这么聪明，以至于我们总是通过中文拼音输入来获取英文单词。 所以我们将中文拼音字母视为英文字母，并根据它显示自动建议。

We also change the place of a word and its meaning so users will see more auto-suggestions when tapping.

我们还更改了单词的位置及其含义，以便用户在点击时会看到更多自动建议。

Start your searching anytime​ 随时开始搜索

Considering the finger comfort area, we added a search button on the bottom of the screen. And also, the controller will show this on different pages, so it will be more available for users to start their searching anywhere, anytime.

考虑到手指舒适度，我们在屏幕底部添加了搜索按钮。 而且，控制器将在不同的页面上显示这一点，因此用户可以随时随地开始搜索。

View Related Words 查看相关词

Suppose you want to know some related words. For example, if you are looking for the English word "blueberry," don't you want to know other fruits' names? I bet you want to. And here in Bing Dictionary, we provide you a more exciting way to search. It looks like a vocabulary globe, and you can also roll this globe using your finger and click the ones you are interested in at any time.

假设你想知道一些相关的词。 例如，如果您正在寻找英文单词“blueberry”，您不想知道其他水果的名称吗？ 我打赌你想。 在必应词典中，我们为您提供了一种更令人兴奋的搜索方式。 它看起来像一个词汇地球，你也可以用手指滚动这个地球，随时点击你感兴趣的。

Step Two: Add Additional Value​ 第二步：增加附加价值

Navigation between different source items​ 不同源项目之间的导航

Each word has different meanings from different sources, and the source items could be folded and unfold separately. And according to the word users input, the number of the items is different. What’s more, other users have their favorite things, and they check only some specific ones. So it’s tough to navigate between so many items.

But now, what we offer is a very flexible navigation menu. It hides on the right side before you dragging to trigger it out. Then you can switch from different sources smoothly and rearrange them according to your preference.

每个词都有不同的含义，来源不同，来源项目可以单独折叠和展开。 并且根据用户输入的单词，项目的数量是不同的。 而且，其他用户有自己喜欢的东西，他们只检查一些特定的东西。 所以很难在这么多项目之间导航。

但是现在，我们提供的是一个非常灵活的导航菜单。 在您拖动以触发它之前，它会隐藏在右侧。 然后您可以顺利地从不同的来源切换并根据您的喜好重新排列它们。

Short Cut to Translate 翻译的捷径

Sometimes we use copy and paste to translate words or sentences. But we still need to click the entry box and the “paste” button next, finally, the search button to get the information we want. Now you don’t have to click that extra time. All because of our smart engine, which can automatically detect the “copy words.”

So all you need to do is click one time, then you can have the translation quickly.

有时我们使用复制和粘贴来翻译单词或句子。 但是我们还是需要点击输入框和接下来的“粘贴”按钮，最后点击搜索按钮，才能得到我们想要的信息。 现在您不必点击额外的时间。 这一切都归功于我们的智能引擎，它可以自动检测“复制词”。

因此，您只需单击一次，即可快速进行翻译。

Photo Translator​ 照片翻译器

There must be many times that you find it difficult to type all the things in a short time, or you have a photo on your phone that you don't know what that word means. But dot worry, our photo translator can help you with that.

肯定有很多时候你发现很难在短时间内把所有的东西都打出来，或者你手机里有一张你不知道那个词是什么意思的照片。 不过不用担心，我们的照片翻译器可以帮助您解决这个问题。

Wonderful Rolling Pictures from Bing.com in “Daily Sentence”
《每日一言》必应网精彩滚动图片

With the “Daily Sentence,” there’s always a beautiful picture from Bing.com in the background, and if you click it, the image will expand to your whole screen. And what’s more? If you roll your phone left and right, the picture will be moving with you. It’s like you are inside of this beautiful adventure!​

使用“每日一句”，背景中总会有一张来自 Bing.com 的精美图片，如果您单击它，图片将扩展到您的整个屏幕。 还有什么？ 如果您左右滚动手机，图片将随您一起移动。 仿佛置身于这场美丽的冒险之中！