赞助商
立即赞助

我们用这个设计方法,从零开始做出了「轻芒杂志」

UI设计3年前 (2021)更新 流光
1.9K 0 0

@Fornever :豌豆荚在 2011 年引 Design Workshop 的方法论做产品设计,并使用种方法设计出豌豆荚 2.0 的 Windows 端和 Android 端、豌豆荚视频搜索等产品。来拆分出来做轻芒的团也是通 Design Workshop 做出轻芒志个产品。今天篇文章,我们想跟大家分享一下轻芒志是何从 Design Workshop 诞生的, 让大家能深地 Design Workshop 个产品设计方法的运用。

Design Workshop 有什么价值?

Design Workshop 非常适合在产品定义阶段使用,它最直接的产出结果就是能够产出 1-2 个产品原型并进行用户验证。Design Workshop 以将项目的所有参与者(不仅仅是产品设计师)高效的组织在一,快速现量的散的想法,将想法抽象聚焦到核心问题,落地到产品设计草图和产品原型,并迅速对原型进行用户测试、得到反馈。

Design Workshop 的实践过程,也不同角色背景的团队员提供了平交流相互碰撞的机会,并且能够帮家增对目标用户的理解。

Design Workshop 的流程是什么?

Design Workshop 遵循了「从发散到抽象再到具体」的思维过程,也就我们比较熟悉的提问、脑风暴、Idea 分类完善、方案设四环节。

1. 提问

每产品都了解决某问题存的。提问的目的就搞清楚我们解决什么问题。

提问是一个从发散抽象的过程。首先从各个角度提出问题,需要破常规的思维方式,避免进一个狭窄的「既定命题」。之后对提出的所有问题进行梳理、归纳和取舍。这个环节结束,应该确定了要解决的核心问题。

2. 头脑风暴

下来,要基于核心问题,由的、无拘无束的阐述解决方案。这个环节不关心对错、优先、复杂度,而是要确保不会错失有关产品计的各种可能性和细节。这个环节结束,应该得了 100-200 个 Idea。

3. Idea分类和完善

在这个环节把所有 Idea 类,整理出 100-200 个 Idea 中暗含的产品逻辑和需求。这些抽象出来的需求就可以为计提供体的产品思路。

4. 方案设计

最后要落地可用的产品。计根据抽象出来的产品需求别绘制产品草图。决策者决定采用其中哪一个方案,然后队用成本最的方式做出产品型。如果条件允许,可以请用户用并给出反馈。这个环节保证所有的想法和需求都能落地成为可见的计,并且已经可以开始迭代成更成熟的产品。

在实际操作中,这个环节可会根据情况进行灵调整,每个环节有同的方法、技巧成,甚至可单独拎来解决产研发过程中的同问题。因此,Design Workshop 实是个非宏大的话题,有点像「各种设计方法论的春节联晚会」。今天篇幅有限,我们就先「轻芒杂志」为例,来看一 Design Workshop 是如何孕一个产的。

轻芒杂志诞生记

在做 Design Workshop 之前,我们面一个很大的命题:希望为「对世界保持兴趣的人」供质的信息和容,填补他们的空白时间。于是,我们做了一个为期 5 天的 Design Workshop,希望产 1-2 个具体的产要值并且成保真的可点击原,并进行户验证。

日程安排

我们用这个设计方法,从零开始做出了「轻芒杂志」

DAY 1 提问、脑风暴、Idea 分类完善

这一天始的时候,家都下每日里的好伙伴电脑手机,只身到会议室。每人都领到了五颜六色的便签纸一支笔。

进入发散提问的间,每个人将关于大命题的问题写在便签纸上。这个过程是安静的,大家并不互相讨论,这可以让大家能独立而不受限制地思考。

最后我们把有人的问题汇聚到了几个点:

  • 目标用户群是谁?有多大?
  • 我们否为同类的目标户供质容和信息?
  • 高品质内容和信息目标用户吸引力是否足够强,能占据他们空白时?

为了更具体的确定问题,我们接着引入了一个方法 —— 用户体验地图(Customer Journey Map)。大家一起开始头脑风暴,一步步解用户在不同景之下获取内容的行为,再将这些行为总画出一个 workflow,这些不同景下的 workflow 就组成了一张用户体验地图。当产出的用户体验地图大概长这:

我们用这个设计方法,从零开始做出了「轻芒杂志」

这个用户体验地图有许多关键节点。再针对这些关键节点提问并要求大家使用「How might we (HMW)……」的句式提问。比如,用户在阅览新内容的环节开 App 之后马上会面对海量息流,这通常会认为用户面临的问题是「不知道哪个」,但如果用「How might we」提问,就会变成「HMW 让用户容易找某个主题的高质量内容?」「HMW 让用户轻地在内容之间跳来跳去?」。在哪个节点上提的问题最多,说这个节点上用户的痛点最多。

这样反复的问,我们就慢慢地在户体验地图上到了焦点:访户浏览容的环节。,现在我们从希望为「对世界保持兴趣的人」供质的信息和容、填补他们的空白时间这个宏大的命题,定位到了一个非具体的问题,户在空白时间打开应后,直接看到质的容。

接下来,不多已经是这天收尾时候了,我们做了比较轻松 Inspiration 分享,基于这个具体问题,继续用 HMW 法去分析:「HMW 让用户在空白时打开应用后能接看到高品质内容?」。大家开始穷举我们用到过可能解决这个问题线上或者线下品,从找到可以借鉴有趣 Idea,为第天具体设计提供素材。

Tips

Q:我们这天用到用户体验地图有什么帮助?它适用于什么情况?

A:用户验地图以帮助我们更有效地提问,但也并不是非用不。要画出一个的用户验地图是很难的,它需要我们非常理用户,最团有前期用户研究的基础,目标用户的用户画像。在此基础上去做用户验地图才能更的帮助我们聚焦问题。

一张很完整的用户体验图这样子的,图 Dare Agency  2016  Airbnb 制作的一张概念图,它展示了 Airbnb 未如何运用科技产品提升用户的旅行体验。

我们用这个设计方法,从零开始做出了「轻芒杂志」

△ 图片源:PSFK 

Customer Journey of an Uber Customer

我们用这个设计方法,从零开始做出了「轻芒杂志」

△ 图片来源:cxdlabs Experience Designers

Q:为么要反复 HMW 的方式问?

A:有时候我们看到个问题时会很自然接跳到出解决案那步,这也许不能从根本上解决问题。用 HMW 提问追求是全、打破常规思维和,不需要评价它是不是严谨,是不是可实现,不要着急提出具体解决案,为从各个度理解楚问题才是最要。

Q:脑暴的时思枯竭怎么办?

A:遵守这几项原则可以减少思维局限性。

  • 追求数量,先不要考虑行,不要被想法住。例,感老大不批钱的,我们人手肯定不够,技术现来像很烦等等。
  • 站巨人的肩膀,闷苦效率很低,试从别人的 idea 中获得灵感。
  • Idea 要体,不要讲过于抽象的西,譬如「做一个更好的产品」。

DAY 2 方案设计

我们用这个设计方法,从零开始做出了「轻芒杂志」

我们所有在这天都埋头画起了草图。大家首先在 5 分钟内画八不案草图,严格计时,过 ⅛ 时需要报时,目是让大家不要陷入细节,而是尽可能多发散思维。这也是个自己脑暴个过程,画着画着会知自己想要继续哪案了。最后用半小时在张 A4 纸画出最终草图来阐述自己案,讲楚核心主意是什么。

设计师将方案贴到墙上展示,时大家不表评论,所有团成安静的看方案,并且为方案上的亮点投票。投票,方案的创者依次介绍自己的方案,个程中听众不提问、不讨论。介绍完成,刚刚在方案上为亮点投票的同学来说说为什么喜欢地方。在里有能者和观众对方案的理有差异,差异也是收获。一天就到里结束。

我们用这个设计方法,从零开始做出了「轻芒杂志」

Tips

Q: 为什么定是张纸图文展示呢?

A: 因为一个方案的核心主意必须是一纸能够简单直接写明白的,不能做到的说明设计师还没有思考的特别清楚。

Q:什么设师展示方案的时候听众不能论?

A:这的环节计是为了让计能完整的展示和表达的计图。评论或者讨论往往会断的展示,而且即的评论并不是听众非常深入的思考,往往使得对话没有效率。所以在计展示的候不鼓励对话,而是让大家认真倾听并将的想法记录下来,之后大家再去整理和交流这些记录下来的内容,这些都可能是之后在体计中会用的思路。

DAY 3 确定方案

决策者参考昨大家的投票来决定采用哪一个方案,或是将三个方案的亮点组成一个新方案。

在确定了采哪个设计方案之后,我们做了个有趣的事情。有人一起将方案的草图做成故事。故事描述了一位户从第一次接触产,一直到进入产后的有户行为和交互作。这是第天最后一个环节,大已经开始非具体的思考这个产的实现细节,如会考虑户从哪里获取这个应,户首次登陆后的引导流程会是么样子,户从哪里可进行反馈,户怎么将产推荐给友等。

这天结束时我们生了两案故事板:视界和兴趣树。

DAY 4 开发品原型

为了在最后天能够到有效用户反馈,我们要尽量让用户以为他们使用是真实应用,所以出应该是可交互原型。于 App 来说,用最小成本来做出高保真品原型工具有很多,比如:Keynote、Pixate、Origami。在这个环节,并不是品设计师在工作,个都有分工,有学准备材料(比如文案、界元素),有学用工具做动画。这天结束时候,我们在视界和兴趣树两个故事板基础上分开发完成了个品原型。

DAY 5 用户测试

做出原型后我们需要进用户验证,我们邀请了 5 位用户来公司,由用户研究员引导用户使用新做出品原型。我们将访谈全程记录下来,用户访谈结束时,团队会增进用户了解,明白我们已知什么,什么是我们不知,找出最明显结论。接下来改明显问题,再进测试。

我们用这个设计方法,从零开始做出了「轻芒杂志」

第 Design Workshop 后,我们如期出了两个高保真原型并第时到用户宝贵反馈,不过存在些遗留问题,此后续我们又做了两相简单 Workshop(不定做全套,可以根据实情况从不环节切入),再打磨和验证,最终出了轻芒杂志这个品。

我们用这个设计方法,从零开始做出了「轻芒杂志」

总结

Design Workshop 遵循了「从发散到抽象再到具体」的思维过程。

「发散」:提问、头脑风暴,保证了我们不会失有关品设计各可能性和细节。

「抽象」:Idea 分类和完善,帮助我们整理出想法中的产品逻辑和需求次。

「再具体」:方案设,保证我们所的法需求都能落可见的设。

通过 Design Workshop 的方式,能够快速、准确的整理出一条正确的产品计方向。最重要的是把产品实现出来获得用户反馈,迅速反应和调整,不断磨产品。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷...
UI动效
读者提问: 最近领导要求对直播间送礼面板做改版,我去找了一些竞品做了分析,发现很多直播间开始支持横屏模式。在横屏模式下...
B站设计
每个人都在关注趋势。Dribbble 是设计师的集散地,也是设计趋势最容易体现的地方。如果你经常关注 Dribbble 上的那些设计作品...
2018设计趋势
王M争:我最近在做改版设计,所以很长时间没有更文了。期间遇到了很多问题,其中一个就是顶部栏配色,后来我索性就针对移动端...
Tab
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE
Riceman :《阴阳师》、《王者荣耀》、《绝地求生》、《旅行青蛙》——爆款游戏在过去两年层出不穷。不知道你有没有想过,那些...
专访
彻底的设计改版最好使用 A/B 测试来验证,而 MVT(多变量测试)则表示不同的 UI 元素之间是如何相互影响的,并支持对设计的渐...
A/B测试
UI 设计师在做需求的时候,经常会接到以提升点击率为目标的需求。 提升点击率,设计师朋友第一反应就是提升操作功能的视觉抢...
交互设计