> * 原文地址：[Yeah, redesign(Part 1)](https://medium.muz.li/yeah-redesign-part-1-b61af07eb41a)
> * 原文作者：[Jingxi Li](https://medium.muz.li/@jingxili)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 译者：[dongpeiguo](https://github.com/dongpeiguo)
> * 校对者：[horizon13th](https://github.com/horizon13th)

![](https://cdn-images-1.medium.com/max/2000/1*ZZP4Og3NWAYova0lgaTqHg.jpeg)

# 是的, 重新设计(第一部分) #

## 如何在移动世界中重新设计 ##

作为一个设计领导者，我经常问自己：“我的团队怎样才能够持续向我们的用户提供最好的产品体验？”我的答案总是相同的：我们需要考虑到我们用户是在持续变化以及在迅速发展的社会中不断提升的品位。但是，如果重新设计产品的体验就是解决方案的话，怎样从内部对话入手来开始这个过程呢？如何实现一个能够平衡新功能和设计的同时还能保持产品的一致性的可拓展的解决方案呢？

如果你也面临着同样的设计挑战，我希望这篇文章能够帮你找到以下问题的答案：

> **1. 为什么当用户已经爱上这个产品的时候仍需要重新设计？**

> **2. 如何在一个以数据驱动快节奏的公司中执行重新设计？**

> **3. 你如何衡量结果？**

> **4. 下一步是什么？**

为了帮助解答这些问题，我想通过分享我们对龙头产品 “唱吧！卡拉OK”（原文：sing！karaoke）的重新设计的经验，来带你看到我们团队在这一路上所克服的障碍。

两年半以前，当我第一次加入公司的时候，我们有四个团队，每个团队负责下列应用的其中一个： 唱吧！卡拉OK（Sing! Karaoke，以下简称唱吧！），魔术钢琴（Magic Piano），电子竖琴（Autoharp），弹吉他（Guitar）。每个团队由一名设计师，一名产品经理和两到三名工程师组成。随着成长速度的不同，我们看到“唱吧！”成为了 Smule 家族中领先的应用。公司决定将重点从基于应用开发的架构转变为基于功能的架构，这意味着更多的功能，更多的心血将倾注于“唱吧！”应用中，设计师们也需要更多的设计合作。随着业务变化，我们知道我们现有的产品设计和流程不能满足团队的扩展和用户的需求。

我们知道重新设计不会是一个孤立的项目，而是需要与用户，设计师，产品经理，工程师和执行人员的共同参与。为了重新设计，每一部分的人员都在项目初期就参与进来，针对“如何”重新设计提供意见反馈。这帮助我们设定了明确的目标，重新设计将从以下四个方面实现：

![](https://cdn-images-1.medium.com/max/2000/1*ZsWu9BZbUZzS0FqMxTPcPA.jpeg)

来源：shutterstock

> **提升用户体验**

> **授权设计团队进行规范化**

> **提升产品参与度**

> **建立可持续的工程解决方案**


### **1. 改善“唱吧！”的用户体验通过** ###

#### 给“唱吧”加入体验上的一致性和连续性 ####

从许多用户研究中，我们已经知道一致性是可用性最强的因素之一。“唱吧！”是一个有着很多功能的有趣产品。在 2012 年产品发布的时候，只有很少的功能和用户基础。由于功能很少，设计采用不同颜色来区分不同场景下的内容。比如，在“唱吧！”的早起版本中，我们用超过四种颜色来展示不同的“行为召唤”（在商场超市里，我们经常会看见一些新品上市，会推出免费试用以及低价促销的活动，用以刺激、吸引用户的购买行为。这就是行为召唤中的一种。译者注）的不同用途，旧的设计原本旨在取悦用户，但我们注意到这种花花绿绿的“行为召唤”反而会给新用户造成困惑。这意味着重新设计需要建立一致的 UI 语言来改善我们当前的用户体验。

#### 提升新用户的参与度 ####

通过进行用户研究，我们发现新用户往往会带着他们之前的经验，和其他应用或产品的 UI 交互的经历来假设他们和“唱吧！”的第一次交互也会如此。最重要的是，当“唱吧！”的界面没有符合用户的预期时，用户需要花费额外的精力来学习和理解这个界面，这将使得产品试用既让人兴奋又让人头疼。我们推测，用户界面的标准化，或者更新定制化的界面设计，使其与重新设计的设计模式相匹配，可以帮用户更快更容易地熟悉我们的产品。它可以帮助用户快速了解产品，从而更好的参与进来。

#### 增加现有用户存留 ####

与应用程序的交互具有可量化的物理和心理成本。物理成本是用户达到特定目标所需的步骤数量或时间来衡量。心理成本是通过让用户完成一个任务，或达到一个目标所需的内在和外在的认知负荷以及压力。比如，当“唱吧！”用户想要和其他用户开启一段合唱时，他们不得不在多个界面进行操作才能达到这个目的，这不仅仅消耗了用户时间成本，造成了用户心理压力，也没有帮助用户理解内容。有计划有信念地使用明确的标准交互和UI设计，将显著降低用户的身心成本。

![](https://cdn-images-1.medium.com/max/2000/1*ZH2VNJu33_eaMvPVikPUxg.jpeg)

来源:shutterstock



### 2. 赋予设计团队可拓展性 ###

#### 为“唱吧！”创造一个新字体 ####

“唱吧！”开始使用的是 Gotham 字体，是一种灵感来自纽约市中世纪建筑设计的字体。Gotham 是一款非常棒的字体，可以庆祝 Smule 的乐趣，异想天开的感觉。它仍然代表了 Smule 在今天的品牌形象。然而，Gotham 是用于打印和媒体应用程序的字体。在移动设备上呈现时，会引起许多问题。Gotham 有着较宽的字间距，会在同样的词句上占据更多的位置。移动设备具有有限的屏幕尺寸，因此设计师必须总是做出额外的努力，以确保文字在 iOS 和 Android 环境中都能显示正常。很多时候，由于存在用户可读性的问题，字体的大小需要缩小以适合小空间。Gotham 引起的另一个问题是基线较低。因此，工程师必须手动，在视觉上确保副本是居中的。正如你所看到的这些例子，我们在开发阶段遇到了很多设计问题。我们现在知道，找到可扩展和平台标准字体是我们在重新设计过程中必须做出的关键决定之一。

####  “唱吧！”需要规范其设计语言 ####


设计是一个既活泼又严肃的创作过程。如果没有一个标准的 UX/UI 设计指南，该产品将成为项目中的不同设计师对于美学理解的大杂烩。继续研究这些设计会使设计团队产生混乱，限制设计人员的产出，并降低了产品质量。我们知道我们以前的“唱吧！”没有明确定义设计标准。这种模糊标准加重了我们设计评审过程中的延迟和难点。当团队中没有人能够阐明我们的目标设计标准时，所有的反馈和审查都是基于个人偏好来判断的，其中大部分都是无效的。作为一个团队，我们明白我们需要共同努力为用户提供最好的产品和体验。为此，我们认识到，我们需要一个明确界定的标准，传达给所有设计团队成员，以便在整个重新设计和推进过程中使用。这将为团队的每个产品设计决策奠定基础。

设计团队的巨大增长使我们意识到需要建立一套规则。这个规范的建立是对于信息框架，布局，字体，颜色，图像和交互的处理。优点是，它将作为一个框架，适用于大多数设计问题，帮助设计人员在第一次就做出正确的设计决策来加快设计的过程。更重要的是，设计团队需要创建一个共享的中央存储库，根据需要经常更新，记录我们的样式，组件和规范。随着这个共享中心的到位，设计的一致性以及设计的质量和数量将得到改善。这意味着在“唱吧！”的重新设计中，设计团队需要制定这个指导方针，以减少脱节的空间，个人设计风格和产品的视觉吸引力将保持一致。我们的目标是最终，设计师们不必致力于图标的细节刻画，不必思考究竟什么才是正确的规范。相反，他们可以更多地关注用户的创意设计解决方案。


#### 设计团队需要扩大规模 ####

随着产品功能的更新，更多的用户加入了我们的“唱吧！”大家庭。我们的设计团队需要扩张，以及更多的合作。没有对于建立合作基础的模块的共识，压力将会在团队增长的同时一直伴随，使得沟通变得复杂。为了确保我们的团队成功，我们知道我们的设计方法和工作流程需要模块化。这意味着重新设计团队需要创建一些设计构建模块，这将是重新设计和所有设计工作的基础。这些单独的模块既能帮助我们的设计师轻松协作，又能在必要时进行产品分割。此外，当新设计师加入时，团队的高级成员可以利用这些模块来引导项目，并为新成员制定明确的计划。

![](https://cdn-images-1.medium.com/max/2000/1*Jh6XD2B8Nx3P7mOKZSqJGA.jpeg)

来源:shutterstock

### 3. 增加产品参与度 ###

#### 提升新用户的初体验 ####

当新用户尝试新应用时，他们他们会同时学习两件事情（1）此应用程序的功能和（2）如何访问这些功能。没有明确和标准化的 UI/UX 设计，用户可能无法完全了解应用程序中的各个界面元素并感到迷失。为了让用户专注于使用产品功能而不是导航界面设计，我们需要了解新用户的期望并明确传达对他们有价值的信息。总体而言，新设计应该简化我们应用程序的混乱部分，使得用户在尝试和新功能进行交互时感到舒服。

#### 增加用户留存 ####

在 Smule，我们密切监视用户存留，定义为在第一次使用体验后接下来的几天（例如第 2 天和第 7 天），有多少新用户回到应用程序。如果用户在第一次没有得到很好的体验他们在第 2 天不太可能回来。通过用户研究我们发现，如果用户找到了兴趣接入点，他们便会在乐享在新功能中，否则他们仍会停留于已有功能。这些发现表明，我们的设计导航与用户的意图不一致。如果设计没有帮助用户知道他们在哪里，以及他们如何访问他们所想的功能，他们可能会感到困惑，对于继续使用“唱吧！”失去了兴趣。通过重新设计，我们需要提供更好的导航，满足用户意图和产品商业目标。

#### 提升开发和发布周期 ####

在 2014 年，我们开始考虑重新设计时，iOS 和 Android 上的产品功能是不一样的。“唱吧！”在 iOS 上的功能要比 Android 上的功能多，iOS 和 Android 的不一致使设计团队的工作翻了一番，延迟了开发周期。当我们开始思考重新设计时，“唱吧！”已经获得了很多新用户。我们想，趁着这股势头，加快产品设计和开发周期。考虑到这一点，我们知道重新设计需要改进我们内部设计团队的工作流程和效率。重新设计可以将设计和开发时间缩短 50％，这将为我们提供更多的机会来测试和发布具有当前资源的新功能。

![](https://cdn-images-1.medium.com/max/2000/1*P4nIML48uPpJuVX-ut1tcg.jpeg)

来源:shutterstock

### 4. 建设可持续发展的工程解决方案 ###

#### 完善开发进程 ####

不一致的 UI 不仅引起了可用性问题，而且为设计师和工程师创造了额外的工作负担。例如，对于单个图标，设计人员创建了多种颜色或大小的组件以在不同的场景中使用。为了确保工程师将组件放在屏幕的正确位置上，设计人员花费了大约 40％的时间来为工程师规划和创建组件。另一方面，工程师需要遵循规范，编写自定义代码，以确保每个组件都位于正确的位置。这些听起来很容易，但是当考虑到其他变量时，比如屏幕尺寸和不同平台（IOS/Android），这过程简直可怕。在与工程师交谈之后，设计师和工程师都希望以更好的方式相互协作。这再次提出了重新设计需求的另一个视角：创造一个可以使设计师和工程师建立并构造产品更加有效的一套系统的方法。

#### 提升产品开发质量 ####

做设计质量保证是设计者的责任，并确保设计得到正确实施。对设计师和工程师来说，最令人沮丧的时刻是：工程师为了修复设计 bug，不得不修改设计的某些部分，当然这将会产生另一个设计 bug。这导致，工程师花费更多的时间来修复设计 bug，却仍然不能保证工程实现和设计是匹配没有 bug 的。我们知道，要重新设计解决可能遇到的所有设计错误是不切实际的，但是，创建一个统一设计规范，以界定如何设置边距，如何创建图标大小，如何申请压缩状态等等，将减少上述场景的发生。

#### 准备全球本地化 ####

当我们开始思考重新设计时，“唱吧！”从以美国为中心的应用程序转型为国际产品。为了适应不同国家地区用户的社区本地化，我们把“唱吧！”从12种语言发展到20种语言。将原本为英文的应用程序更新多语言时，用户界面很容易出问题。例如，与英语比起来，德语或俄语需要更多的字符来表达相同的含义。通常适合英文标签的限定空间将不适用于德语和俄语。如果没有一个清晰的规则，来制定如何设置间距，如何应用层级关系，当地语言字符会就被裁剪，或者以较小的尺寸呈现。逐一解决每种语言的这些问题，花费了我们工程师和质量保证团队的大量精力。我们知道，通过重新设计我们需要找到一个可持续的解决方案，可以优化我们现有以及未来会有的不同的语言。

![](https://cdn-images-1.medium.com/max/2000/1*cAPZbmDZEe5byrPDOB7QVA.jpeg)

来源:shutterstock

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)。
