[译] 是的,重新设计(第一部分)

本文讲的是[译] 是的,重新设计(第一部分),

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

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

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

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

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

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

3. 你如何衡量结果?

4. 下一步是什么?

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

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

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



来源:shutterstock

提升用户体验

授权设计团队进行规范化

提升产品参与度

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

1. 改善“唱吧!”的用户体验通过

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

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

提升新用户的参与度

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

增加现有用户存留

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



来源:shutterstock

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

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

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

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

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

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

设计团队需要扩大规模

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



来源:shutterstock

3. 增加产品参与度

提升新用户的初体验

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

增加用户留存

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

提升开发和发布周期

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



来源:shutterstock

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

完善开发进程

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

提升产品开发质量

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

准备全球本地化

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






原文发布时间为:2017年6月14日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-11-05 18:24:22

[译] 是的,重新设计(第一部分)的相关文章

【邓侃】哈佛大学机器翻译开源项目 OpenNMT的工作原理

一. 哈佛大学机器翻译开源项目 OpenNMT 2016年12月20日,哈佛大学自然语言处理研究组,宣布开源了他们研发的机器翻译系统 OpenNMT [1],并声称该系统的质量已经达到商用水准. 在 OpenNMT 官网上,有这么一段话, The main model is based on the papers "Neural Machine Translation by Jointly Learning to Align and Translate" Bahdanau et al.

100 Gbit网络交换机的蓝图,Facebook打开了

现如今,你完全可以把Facebook视为一个提供IT基础设施服务的公司,而不是仅仅展示那些无聊照片和谣言新闻的网站.这也是为什么,Facebook正在成为一家IT技术为先导的关键领导厂商之一. 该公司最新的代号为'背包'backpack的第二代模块化开放交换机平台近日面世,其旨在提高数据从40到100Gbps吞吐量.这就需要重新设计第一交换机的整体架构,以便在其底盘架构中处理100GE ASIC芯片和光学器件的冷却机制,以及一些潜在的改进空间. "我们正在尝试建立一个端到端的基础设施,可以移动更

[译] 可口可乐自由风格售卖亭界面用户体验的回顾和重新设计

本文讲的是[译] 可口可乐自由风格售卖亭界面用户体验的回顾和重新设计, 原文地址:UX Review and Redesign of the CocaCola Freestyle Kiosk Interface 原文作者:Ved 译文出自:掘金翻译计划 译者:ylq167 校对者:horizon13th yzgyyang 一个可口可乐自由风格售卖亭的界面 任务 理解这个售卖亭和它的用户体验 找到痛点以及用户体验的障碍 优化可口可乐自由风格售卖亭的用户体验和界面设计 设计流程 这是这个项目的设计流

[译] Swift 中关于并发的一切:第一部分 — 当前

本文讲的是[译] Swift 中关于并发的一切:第一部分 - 当前, 原文地址:All about Concurrency in Swift - Part 1: The Present 原文作者:Umberto Raimondi 译文出自:掘金翻译计划 译者:Deepmissea 校对者:Feximin,zhangqippp Swift 中关于并发的一切:第一部分 - 当前 在 Swift 语言的当前版本中,并没有像其他现代语言如 Go 或 Rust 一样,包含任何原生的并发功能. 如果你计划异

[译]跌宕起伏的函数式编程(软件编写)(第一部分)

本文讲的是[译]跌宕起伏的函数式编程(软件编写)(第一部分), 烟雾的方块艺术 -MattysFlicks -(CC BY 2.0) 注意:这是从基础学习函数式编程和使用 JavaScript ES6+ 编写软件的第一部分.保持关注,接下来还有很多! 当我 6 岁时,我花了很多时间跟我的小伙伴玩电脑游戏,他家有一个装满电脑的房间.对于我说,它们有不可抗拒的魔力.我花了很多时间探索所有的游戏.一天我问他,"我们怎样做一个游戏?" 他不知道,所以我们问了他的老爸,他的老爸爬上一个很高的架子

【译】探索 Kotlin 中的隐性成本(第一部分)

本文讲的是[译]探索 Kotlin 中的隐性成本(第一部分), 原文地址:Exploring Kotlin's hidden costs - Part 1 原文作者:Christophe B. 译文出自:掘金翻译计划 译文地址:github.com/xitu/gold-m- 译者:Feximin 校对者:CACppuccino .phxnirvana Lambda 表达式和伴生对象 2016年,Jake Wharton 做了一系列有趣的关于 Java 的隐性成本 的讨论.差不多同一时期他开始提倡

(译)如何优化cocos2d程序的内存使用和程序大小:第一部分

译者: 在我完成第一个游戏项目的时候,我深切地意识到"使用cocos2d来制作游戏的开发者们,他们大多会被cocos2d的内存问题所困扰".而我刚开始接触cocos2d的时候,社区里面的人们讨论了一个非常有意义的话题:"请简单地讲述你认为新手cocos2d程序员在他开始编码之前,最应该先知道,或者应该关注和注意的事项."这个问题的答案很多,有人讲是"如何加载和保存游戏数据",有人讲的是"如何实现有限状态机"等等.而最吸引我的则

[译]更好的表单设计: 每一页,一件事(实例研究)

本文讲的是[译]更好的表单设计: 每一页,一件事(实例研究), 原文地址:Better Form Design: One Thing Per Page (Case Study) 原文作者:Adam Silver 译文出自:掘金翻译计划 译者:horizon13th 校对者:LeviDing, laiyun90 更好的表单设计: 每一页,一件事(实例研究) 2008 年,我在 Boots.com 工作时,团队提出需求,要设计当时最流行的单页表单进行付款操作,主要技术有折叠选项卡,AJAX,客户端验

[译] 设计作品集网站的真正角色是什么?

本文讲的是[译] 设计作品集网站的真正角色是什么?, 原文地址:What is the real role of a design portfolio website? 原文作者:Fabricio Teixeira 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:noturnot 校对者:LeviDing 设计作品集网站的真正角色是什么? 或"在了解其目的之前,不要评价其作品集". 设计作品集应该是简洁易懂的并且专注于作品,还是应该成为展现设