Pinterest的再设计

当我还是一个在瑞典成长的孩子时,我房间里堆满了一些设计得很有趣的木质玩具。我记得我为这些简单的设计所着迷,明亮的颜色,抽象几何形状和有机形式的结合。它们的样子和动作能吸引你去和他们玩。
木质的火车系统是非常棒的。你可以把轨道部分组装成圆形,条形,s型,只要你想得到。但是你必须要思考你要怎么样创造路径——关于如何把碎片组装起来是有逻辑的,你不能违背几何构成。

二十年过去了,我的孩子也玩着我童年的那些玩具。现在我能听到他们正在用力地敲打木地板。这个持久性的设计已经跨过了很多年,经历了一代又一代的变化。
去年春天,当我第一次开始专注在一个关于Pinterest设计的大问题上时,这个奇妙的、自我证明的、有趣的童年景象出现在我脑海。实际上,是3个大问题。

1、我们的UI风格不统一
2、我们的视觉系统是过时的
3、我们的市场和我们的产品脱节

过去的这些年,我们网站、APP和营销的设计风格都在游移,所以大家都觉得它们不再是同一个性。很多新的特征被加进来,而没有一个清晰的视觉是关于如何适应整个设计的。所以界面就开始变得杂乱并且很难理解。当你浏览呈现给你的页面,没有视觉层次或系统帮助你理解什么是重要的。这样造成的结果就是,所有有灵感的人在Pinterest都没有最大的发挥——到目前为止,我们体验最重要的一部分正在消失。
事实证明,在某种程度上来说,我们很难设计出风格统一又独特好看的东西。
原则问题

Pinterest的整体体验非常需要保持简洁和统一。如果我们打算开始做,我们就需要想清楚我们自己的一些关键设计原则。
我退到Pinterest地下室的一个黑暗的角落,花了好几个星期的时间去研究设计。我甚至不确定我一开始要做什么——基本上就像是我自己的统一模块的升级版本。我开始琢磨这样的问题:为什么人们喜欢用Pinterest?是什么让我们的产品变得独特?我的个性特点是什么?我们是什么?
我越思考这些,我就越意识到Pinterest有很多的本质,就像我的家人喜爱收藏的有趣玩具。两者都鼓励你和不同的选项玩耍,把碎片连接起来,创造属于你自己的世界。你能开始做你自己的目标和项目,你能从别人正在做的和构建的东西中获得灵感。你投入进去,然后立即开始玩,在你想要的任何时候停止,然后回来,从你离开的地方拿起正确的。

再往更远的方向想,Pinterest和BRIO本质上有共同的3 个基本原则。这些描述了Pinterest如今最好的特征,奠定了我们想要在未来把产品带到哪里的基础。
1、清晰易懂的
它很直观,不需要学习
你能理解它怎么操作而不㤇任何直接的解释。
它可以让用户变得更强大
没有让你觉得不舒服的东西或者让你不能信任这个系统的东西。系统为您提供了正确的组件,会问你下一步做什么。
它让内容的阅读起来变得更好
框架是完全无缝和隐藏的。你没有必要注意它,除非你要和它发生互动。你可以决定它的样子,而不是我们强加给你的。
2、活泼的
它是富有色彩的
它的个性突出而醒目。
它是视觉上的反馈
是以物理的方式进行互动的体验
它是不意想不到的
这个体验是有趣好玩的,但不是压倒性的。
3、不易破损的
它是基于探索建立的
就像一个小孩的玩具,你想尝试它,看会发生什么。你研究得越多,你学的就越快,你得到得也就越多。
错误的点击是不可能出现的
被设计的内容都是帮助你导航的,让你准确地做你想做的。
它是可逆的
如果你不小心做了某个操作,结果不是你想要的,很显然你也知道怎么更改。
一旦我们概况出这3个原则。下一步就是把它们转化成有形的东西,可能是我们建立的一切向前发展的基础。
基本要素
形状——我们使用基本的容易触控的形状,人们很自然能理解,并想要和这些形状交互。边角是圆形的,目的是让用户觉得更加容易亲近。

1

颜色——我非常喜欢近似的配色方案。感觉很自然,让人觉得平静。当你把一点点不同类的颜色组合使用,最初是基于一些给定的互补色,结果是非常有趣和意想不到的。
2 3
层次——每个元素都是相当有层级的。最重要的信息总是很清晰。因为我们设计的时候问过自己,让用户理解最重要的是什么?我们能怎么变化去让信息更加明显?
4

留白——在旧版的Pinterest设计里,我们总关注在包含用户需要内容的边框上,它的比重甚至超过了内容本身。如你看到的,有很多的线条、渐变和灰色的阴影。没有让人呼吸的地方。留白会在元素之间有个自然的分割,而不会添加视觉的干扰。结果是平衡和稳固,空格的数量增加了个性和影响。
5

早期的探索和想法
我们想要知道如果我们把所有的边框从UI中移走会发生什么?能将焦点返回到对象本身吗?或者这个体验会完全让人崩溃?
结果证明减少边框后编排的感觉是很好的。Pinterest的设计师们终于重新找回了重点。我们并不是完全去掉边框,因为它们确实使得某条信息对应某个图片变得清晰。我们等着展示边框,知道你对点击拥有足够的好奇。通过这种方式,界面会教你怎么把信息和我们的系统连接重组。一旦理解了Pin是怎么被建立的,你就只需要去体验这个交互。

6
设计一套新的标准

经过了几个月对设计和交互的探索,团队和我最终把内容放到了我们觉得符合我们说的3个产品原则(清晰易懂、活跃的、不易破损的)的地方。我们准备对我们新建立的原则和设计系统进行测试。
我们想以一个边框系统开始,所以我们决定先使用在我们的iOS的APP上。对于我们的第一次测试,我们把焦点放在视觉设计上——之后将会重构信息架构。你可以在WIRED阅读所有关于iOS的改版设计和协调后端重建。
伴随着APP的改版,我们也重建了我们Pinterest的产品设计标准,包括:
系统——图形,文字,颜色,网格
框架——组件的组织
环境——所有我们正在设计的小东西
78

接下来9个月的时间,我们和开发人员紧密协作去建立每个组件,并且做了很多次的修改和调整。这需要难以想象的共同努力以确保我们建议的东西不仅仅满足我们的设计目标,同时也能被所有其他Pinterest产品的开发团队重复使用。
从系统、框架到环境:Pinterest 的再设计过程

史诗级的团队实现了改版
Pinterest的整个产品设计团队都为卷入审查和执行新的设计系统。
我们也有一个小型的优秀设计师团队 (Annie Teng, Jay Marsh,Kimberly Fellman, Linus Wahlstedt, LongCheng, Patrik Goethe, Rick Chatas,Susan Kare, TomWatson, Woosung Kang),他们和我以及一起紧密配合,我们很棒的工程师也一起进行设计迭代,来找到最适合的转场和曲线,做不同的手势图原型等等。这真的是这个过程最好的部分。跨团队合作,从多个角度整合了反馈意见(一个在Pinterest大家都知道叫做“编织”的方法),使得结果成倍增强。而在这个过程里,我们也感受到了很多乐趣。

最后,我和Pinterest的品牌团队密切配合去做新的品牌指南,这个指南能反映出这些相同的设计原则,我们最新的营销已经开始让人觉得它与我们的产品有着同样的气质了。

接下来,我们将着手解决下一波的iOS APP改进,重新设计Pinterest网站和Android APP,而且我们正在寻找更多主力设计师来帮助我们实现这个计划。当这个最终实现后,我希望你和我们一样兴奋

从一个项目实践说起,产品设计流程是什么

产品设计(Product Design)没有一个合乎情理的流程,即使人们总是呼吁敏捷开发(AD:Agile Development)、极限编程(XP:Extreme Programming),但必要的产品设计流程肯定是客观存在的,只是说产品的流程可能是敏捷的(Agile &Scrum)。下文是一个产品新人(PM)结合自己的项目实践对产品设计流程给予的一点思考

 

产品设计(Product Design)流程是一个怎样的流程?这个问题太高能,产品后生晚辈亦不敢贸然回答。事实上,我对“产品流程”并没有一个完整的概念,故不忍信口妄语,有辱行业。然静思己过,内心了然正躬身其中,却茫然不知。结合自身的实践和思考,以面向过程的方式回顾一下整个产品设计过程。

产品设计流程

尝试将产品设计流程大致分为四个阶段:顶层设计、框架设计、项目实施、回归迭代;那么这四个阶段究竟是个怎样的过程呢?一起来看一下:

1.顶层设计

概念上来讲,就是需求分析与设计,如何把握住用户的核心本质需求——是每一位优秀产品经理的必要涵养;

a.需求理解:用户/运营向产品提出了大量的需求。需求量大、需求表意模糊、需求浮躁;各路需求方都认为自己的需求是最重要、最紧急的;产品人员捉急,逼死也没用;如此多元复杂的情况下,产品(PM)如何保持冷静、理智对待需求呢?“淡定和理智”很重要!整理好需求,自己仔细阅读分析后,主动联系需求方核对、商讨,直到弄明白需求背后到底是什么。因此,将需求理解透测是其他后续一切工作的基础和保障,需求偏了理解错了,产品也就歇菜了…

b.情境研究:面向对象的产品设计,大家不要理解错:不是,面向对象的编程语言C++。这里的[对象]指的是[用户],是产品受众。设计的产品必须要用户画像,充分考虑产品适用的用户群体及该群体的使用习惯和思维方式等,用户在实际生活中使用产品的场景是产品设计时重点要考虑的因素。综合考虑用户使用场景和不同用户群体是优秀产品都不曾忽略的。

c.需求管理:需求量大、需求紧迫是每个产品人面对的现实问题。“把所以需求都做了!“你是在吹NB吗?快醒醒吧!显然,将需求排出优先级,迭代增量式解决;需求的迫切程度、各部门的战略优先级、老板的意思、公司技术资源共同决定了一个需求的优先级。当然,如果你够屌,也可以独断专行判断决定一个产品的未来。

2.框架设计

通俗地讲准确理解原质化需求、对明确划限的需求进行结构性设计。明确产品需求范围和结构框架,构建细化产品信息架构;

a.原型设计:用户需求最终都要可视化,抽象的需求最终都要反映在具体的产品形态上。产品经理借助AXURE等原型工具,将抽象需求具体化、图形化,变得更加真实、可见。产品经理晋升艺术家粉墨登场,建筑师般的犀利。搭建具备良好框架的页面,且看如何构建有价值、可用性良好的信息架构。

b.信息架构:信息架构主要是为信息与用户之间的认知搭建一座畅通的桥梁,是内容直观表达的载体。通俗点,信息架构(IA)就是研究信息的表达和传递。信息架构(IA)是设计信息的组织结构。


Original Definition:Information Architecture is utilized in web development, user interactions, database development, programming, technical writing, enterprise architecture, and other activities that require expressions of complex systems. Information architecture has somewhat different meanings in these different branches of what might be called IS and/or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling Web sites, intranets, and online communities, and ways of bringing principles of design and architecture to the digital landscape.


一个产品可以用来做什么,产品所呈现的信息层次;筛选有价值信息元素,简洁、直接地传达给用户,让信息与用户相互适应达到最佳平衡。毫不夸张地说,良好的信息架构远比华丽的页面结构要有价值的多。

c.视觉设计:设计产品结构模块和信息元素,随即交付UI美工的产品视觉设计。UI设计犹如”装修“,对产品经理设计的线框图/原型进行润色、美化、调整,以产出极具美感的产品,到达用户眼前。UI阶段谨记两大原则:

x.产品框架结构不能偏移原型设计,结构清晰、模块分明、层次协调;

y.不能被遗漏或串改产品内容信息架构,一字一眼、毫无误差;

1

产品设计流程细节

3.实施追踪

产品规划路线图规划是前提,关键看需要实现,这样才有意义。在用户眼中,可用、好用的产品最终展现在面前触手可及才具有价值。技术研发人员程序化实现产品经理设计的产品,是从“抽象”到“抽象”再到“抽象”的双重抽象转换过程。

a.项目追踪:技术研发过程中,产品的理解上必定存在不同程度的偏差,产品经理肯定是要保证[需求]的真实准确的,确保最终产出的产品实现的还原度。产品实施过程的追踪是产品经理对技术研发的需求保证,也是对产品实现进程的管控,确保产品的按时按量上线;

b.产品验收:完成产品技术性开发,接下来就是正式上线了!技术实现与产品设计之间是否存在偏差?技术实现的产品业务逻辑是否存在错误?研发完毕的产品与产品经理的设计初衷是否一致?不论理念还是业务逻辑设计上都是需要产品去把控的。尽管之前的需求评审阶段已经做了详细充分的需求澄清,但只有经得起反复检验的产品才是真正地好产品;

4、回归迭代

产品交付到用户手中,貌似产品经理的工作可以告一段乱了。结合实际情况,产品上线无形埋下两个大雷。

a.实现偏差:技术实施过程中,必然有些需求因为现实的局限性被耽搁或者简化实现,那么上线后第一时间需要给出小幅优化的迭代完成之前研发阶段的历史遗留问题。产品规划前期产品需求细化增量式迭代也迫使产品经理无力停歇,赶往下一个里程碑;

b.反馈优化:用户眼中的产品近乎完美,要求苛刻不止。用户通过产品需求反馈通道,给出使用新产品的感受以及提交发现的产品问题和不足,及时响应用户的所求、为用户排忧解难也是新产品建立口碑的机会。问题反馈通道建设对于一款新产品迭代优化初期显得尤为重要,对产品快速增量式迭代及改善用户体验的重要都是不可估量的;


行文小结

规范产品设计流程(PDP)有利于产品实现!产品设计流程将整条产品线上的人员都串联起来,将产品过程“数据流”化,可谓气贯长虹、如梦般丝滑。产品流程将产品从各个原本独立的实施过程聚合成一个统一的变现行为。一个(互联网)产品必定映射着规范、理性、高价值的产品设计过程。当然,规范的产品流程不是为了约束产品过程,如果拘泥于具体的要求,将失去流程的初衷;产品流程为产品优质畅快实现服务,是产品实现过程的参照物,是一个目标,是一种信仰。产品本质上是产品设计者对现实世界态度和认知的反应。将人性注入产品之中,其必然也因爱而生,而流程就是信仰和良知!

文/Daviiwong 原文链接:http://www.jianshu.com/p/92f651ab51f2