用户体验要素大PK：金山词霸 vs 有道词典

【金山词霸单词卡片页】

 第四，单词详情页。用于呈现详细的单词信息。如下图： 【有道词典单词详情页】 【金山词霸单词详情页】

好了说明了这些基础概念，下面木柄开始正式分析。

1 为什么要有单词卡片（概览）页

不同于pc端用户会正儿八经的坐在电脑桌前注意力较为集中的使用软件，移动端的特点是环境复杂化与时间碎片化。这些特点在单词本应用上会体现地更加极致——用户随时随地都有可能翻开单词本记背一下单词。因此不管是有道词典还是金山词霸都没有直接展示“单词详情页”，而是穿插了一个类卡片形式的单词卡片（概览）页，它仅仅展示一个单词最重要的信息：拼写、音标与中文含义，最大程度上减轻了用户查阅单词本的负担，使产品能够更好的应对复杂的用户使用场景。

本节要素： “人们只用一只手操作你的应用，只用一只眼睛看屏幕，只用一部分注意力在你精心雕琢的界面上，这和作为设计师的你所看到的应用可能完全不同。” ——《触动人心》

2 单词切换——小问题，大思考

请大家注意单词卡片页，有道词典通过底栏“上一个”、“下一个”按钮来实现单词切换操作，木柄认为这种设计方法是失败的。右上角和右下角是右手操作的用户最难点击的区域，产品设计者应该把不常用的操作，或者误点会造成严重后果的操作（比如不可逆的删除操作）放在那些地方。而对于单词卡片页而言，用户切换到“下一个”单词是最常用到的操作，把它放置在用户最难操作到的右下角，显然这是一种“反人类”的设计。 那么这个页面如何设计才是合理的呢？答案是，金山词霸单词卡片页的做法就值得称道。

从页面上看金山词霸甚至没有切换单词的按钮，仅仅在主卡片的左右两侧“故意”露出前一张卡片的右边缘与后一张卡片的左边缘，这就是手势操作的一种暗示：引导用户左右滑动，而这么做就能实现卡片的切换。金山词霸利用两个边缘的“废料”暗示用户“左右滑动卡片”来实现单词切换的方式完胜有道词典的“按钮”切换方式：一方面降低了用户的操作成本；另一方面利用了“废料”部分，把“按钮”的位置节省下来了。 当然，金山词霸仍然有值得改进的空间，从单词本单词列表页进入具体单词的卡片页已经有一个存在的隐喻：单词卡片页从下往上覆盖了单词列表页。那么，相对地从上往下滑动单词卡片页返回先前的单词列表页在逻辑角度上说是非常顺畅的，但是金山词霸却没有定义这个“向下滑动返回”的手势，这一点是很遗憾的。

本节要素： 1、不要把常用操作放置在拇指热区外。 2、“边角料”也有大用处——“暗示”用户。暗示用户使用手势操作，或者强化某些设计上的“隐喻”。 3、要利用“覆盖”、“切换”、“平移”等隐喻为用户设置贴心的手势操作。

3 真正走进用户背单词的场景

3.1用户检测自己单词掌握状况场景

用户会有检测自己单词掌握状况的需求，单词本应用需要在这一点上满足用户。金山词霸的单词卡片页右下方有一个眼睛状的按钮，它可以用来设置是否折叠中文释义，而我们可以观察到有道词典的单词卡片页并没有相关的操作。事实上，有道词典是有这个设置项的，只是被放置在了单词本的单词列表页，也就是单词列表页的这个折叠设置会在单词列表页与单词卡片页都起作用，下面木柄谈谈这么做的坏处。

首先，在单词卡片页测试单词掌握状况的场景下，用户才会有折叠中文的需求，而在这个场景下的页面中，用户找不到相对应的操作。“当用户意念一动的时候，我们已经把他想要的操作放在了手边”，这是产品用户体验需要追求的原则，而有道词典的做法显然违背了这个原则。当然这个原则还能衍生出另一个相对的原则：“当用户没有需要的时候，这些选项做好隐藏起来或者蜷缩在角落里，不去对用户产生噪声”。

其次，即使用户在单词列表页发现了折叠中文的功能，他们也不可能第一时间理解到这个设置会在单词卡片页一样生效。也就是我们尽量要把页面用松耦合的方式组织起来，每个页面都对自己负责，没有那些拉扯不清的关系，这样即方便了用户，也方便了设计者自己。

最后，即使用户折腾了一番，理解了有道词典的设置模式，这依然还是一个有问题的设计。设想一下这样的用户场景：用户可能会用不同的模式来浏览单词卡片页，比如第一遍浏览显示中文，第二遍浏览折叠中文来测试一下自己的掌握程度，第三遍浏览再显示中文做一下复习。如果在这个场景下，用户使用的是有道词典，那么他要不断切回单词列表页设置中文折叠/显示，再返回单词卡片页浏览，显然这种来回切换极大的影响了用户体验。

3.2睡觉前背记单词场景

睡觉前背一背单词，这是“单词本”非常常见的一种用户场景。金山词霸贴心的为用户做了基于这个场景的设计，在单词卡片页的右上角有白天/夜间模式的切换按钮，其图标为太阳/月亮，其隐喻非常容易被用户理解。而反观有道词典，并没有对这个普遍的用户场景做出相对应设计，这也是对典型用户场景理解不足的表现，用户就会感觉产品使用起来没有那么“贴心”。

3.3 小学语文老师的生词卡片与单词卡片内容布局

类比于小学语文老师手中字体又大又粗的生词卡片，事实上单词卡片也需要这样的视觉效果，因为粗大、简约的卡片设计能够方便用户的浏览与记忆。在这一点上，金山词霸比有道词典又要做得好，一方面金山词霸卡片页的字体要比有道词典的大，行间距也要比有道词典的宽；另一方面金山词霸把单词居中展示，强调了单词本身，方便用户记忆。不过，木柄对金山词霸的单词卡片也不满意，尽管它比有道词典要好一点，木柄认为字体与行距可以继续扩大，更大的字体与行距不但本身能够方便用户的记忆，而且只能给出更加少的内容（把冗杂的东西交给单词详情页），从而把用户浏览记忆负担降到最低。总之，“大而简”这是理想的单词卡片设计应该不断追求的境界，它一方面给用户提供了更好的体验效果，另一方面也提升了用户背记单词的实际效率。

本节要素： 1、设计者要深度体会、感知典型用户场景（比如本例中“用户检测自己单词掌握状况场景”、“睡觉前背记单词场景”），只有这样才能做出赢得用户口碑的产品。 2、充分联想现实场景，模拟实物为app设计提供灵感源。比如设计单词卡片的时候不妨学习、借鉴一下小学语文老师的生词卡片。

4 单词详情页——内容组织的学问

木柄计算了一下，有道词典单词详情页拥有词典、释义、相关词汇、例句等类型的小模块达12个之多。而这么多的小模块居然仅仅通过简单的罗列进行呈现，用户的使用负担可见一斑。《简约至上》告诉我们，如果想要有更好的用户体验，产品一定要满足简约四法则（删除、组织、隐藏、转移），那么怎么使用简约法则改良有道词典的单词详情页呢？木柄觉得，金山词霸的单词详情页设计就堪称典范。 第一，删除不必要的功能。有道词典单词详情页罗列的小模块多达12个，单单与例句相关的就有三个：双语例句、权威例句、原声例句。其实，用户根本不关心你是什么例句，他只是想在看了单词释义后读上几个例句，需要这么“为难”用户吗？金山词霸的做法就很好，它把例句简化成一个独立的小模块，然后在“例句模块”中简单罗列几个典型例句，这样就完成设计目标了。 第二，金山词霸单词详情页根据普遍性用户需求对所需呈现的内容进行了组织。不同于有道词典一股脑的简单罗列，金山词霸将内容组织成三个小类：释义、例句、讲解。一般用户查词主要是先查看一下释义，再读几个例句，内容归类方便了用户的使用，从而提升用户体验。 第三，金山词霸单词详情页使用了tab，一次只能显示释义、例句、讲解三个模块中的其中一个，对其他两个模块的内容进行了隐藏。这是符合用户体验要求的，“一个页面只做一件事情”，最大的获取用户注意力，同时把使用负担降到最低。

本节要素： 对于内容复杂的功能页要使用“简约至上”四法则进行设计： 第一，删除。删除用户不关心的，不重要的功能，以减轻用户使用负担，突出主要功能。 第二，组织。把元素按照一定的维度组织起来，分门别类，方便用户使用。 第三，隐藏。一个页面只有一个核心，一个页面只做一件事情，把其他分散用户注意力，导致用户困惑的内容隐藏起来。 第四，转移。这一部分在本节探讨中没有具体体现，在3.3这一节提出的“把冗杂的东西转移给单词详情页”，从而简化单词卡片的设计，算是“转移”法则的典型。

5 尾声：

木柄正在写“一系列产品方面”的纯干货（立足在产品体验上的本文算是这一系列的一篇新作），大家不要错过了，木柄的公共号mubing01，个人博客 www.mubing01.cn 期待您的关注。木柄正处于自由职业状态，如果您能提供靠谱的产品方面的工作也请联系我，谢谢。