首页

如何快速成长?这5个思维助你完成职场跃迁

博博

口述:飞鱼船长

重述编写: Eireen (个人公众号:包总学习笔记)

全文共 7037 字 15 图,阅读需要 16 分钟

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

———— / BEGIN / ————


不少刚转行做运营没多久的新人,在目前的工作中,经常会遇上这样的问题:我刚入行做运营,到底要怎么做才能快速进步?


一、超越预期


假设一种情况,一家公司同时来了5个能力、天赋、背景都一模一样的实习生,经过半年的时间,他们的能力都会差不多吗?


不会!


一定会拉开很大的差距。


这些人最开始不是都差不多吗?为什么会被拉开很大的差距?


我们来具体看下,5个人在6个月里会怎么过:


刚开始由于每个人的经验尚浅,所以被分配的工作都是比较简单、基础的执行工作。


一段时间后,总会有个难一点的工作,交给谁呢?


应该是交给一个稍微更信任的一点的人来做,因为TA能做好的概率会稍微大一点。


这个人因为接手了一个更有难度的工作,比起还在做简单重复工作的同事相比,TA能力提升的速度也会更快些。


那么到了下次,还有一个比较有含金量的挑战型任务,会交给谁呢?


肯定还是这个人嘛!


所以最开始的一个小小的差距,就会带来后续巨大的改变。


那么,如何获得最开始的一个小小差距呢?


那就是不断超越领导的预期。


不断超越领导的预期,从而获得更多的信任。


得到更多的信任之后就能获得更大的权限,从而帮助自己更快的成长,达成正向循环。


0?wx_fmt=png


没有达成正向循环会怎么样?


举个例子,某公司的运营助理小张,他的上司每天交给他的任务就是排版、作图、制表等简单工作,偶尔还让他去打印资料、寄快递。


由于每天做事情做的非常杂,所以小张认为自己没什么提升,慢慢工作开始懈怠了下来;上司看到他这种样子,也就更加不可能给予他更多的机会,在不知不觉的情况,机会大门早已经被关闭。


我们如何才能避免出现小张这种情况呢?


有一个简单有效的方法:当我们接到一个任务的时候,有意识地去想这件事情如何能做的更好,提高自己的标准,而不是很随意地完成了手中的任务。


不要小看这件事,我们在职场中做的每一件事情都是在为我们获得更多的信任做准备,今天做出超越预期的事情是在为明天获得更多信任做积累。


我们做的任何事情都指向一个目的:让上司知道,我是值得被信任的人。


0?wx_fmt=png


职场中的信任跟机会有非常大的联系,公司会把重要的事情交给信任的人去做,而像小张这种不太靠谱的人自然是继续打杂。


有人可能会说:哎呀,我能力不行,做不出来很完美的结果。


慢着,这里纠正一个问题:超越预期并不是一项能力,而是一项意识。


「能力和意识有什么区别呢?」


区别在于能力是显性的,而意识是隐性的。


0?wx_fmt=png


能力很容易通过完成各种任务体现出来,而意识是非常难以察觉的。


这就导致很多人认为能力比意识要重要,但其实意识反而比能力更加重要,也更难培养,所以我们才需要把能力和意识区分开来。


如何从生活中的点滴可以培养自己超越预期的意识?


我们可以强加一些小动作,在电脑桌面上换上“超越预期”的背景,或者在小贴纸写上“超越预期”四个字,然后贴在电脑上。


每天提醒下自己:


0?wx_fmt=png


当你刻意培养了这种超越预期的意识时,潜移默化你的进步速度就会比那些没有这种意识的人快上很多。


为什么?


因为把一项工作做到60分及格的水准,其实是非常简单的;稍微好一点的能把事情做到80分,就觉得这件事已经做的很好了,然后就停在这里了。


更高的自我标准,决定了你更快的进步速度。


很多时候,我们做任何工作,都只喜欢把事情从0分做到80分,然后就开始做下一件0分到80分的事情。


但其实很多人都可以把工作从0分做到80分,例如招个大学生来,说不定他也可以把工作从0分做到80分,那对比他,你的优势其实就荡然无存了。


0?wx_fmt=png


看到这里你可以停下来想一下,自己之前的工作中,是不是很多时候仅仅只是把事情从0分做到80分?


所以,从今天起就可以开始刻意培养自己超越预期的意识,并且尝试去做一次超越预期的事情。


可能从短时间内看不出差距,但是把时间线拉到一年来看的话,差距就会变得非常明显。


0?wx_fmt=png


我相信不管是工作中,还是生活上,你很快会收到正面的反馈。


从而让自己从打杂的坑跳出来,去实自己现真正的价值。


二、差异化意识


如果有一件事情,能做到的人有很多,那这件事情的价值几乎为零,人们只会为这种工作付很少的钱。


比如说洗衣服、打扫卫生、扫大街这类大部分人都能做到的事,这种工作的工资会非常低。


如果一个工作只有少量的人能够做到,那么这个人就会很有价值,这个社会也会为他的工作付出很多的报酬。


比如那些顶尖的程序员、设计师、运营之所以工资这么高,就是因为他们能做到很多其他人都做不到的事情。


让自己成为不可替代的人,最重要的因素就是培养自己的差异化优势。


那么,如何培养自己的差异化呢?


互联网里有一个思维,叫紫牛效应。


如果你开车到草原上,路旁庞大的牛群吸引了你的目光,一大群黑白相间的奶牛在高速公路旁绵延数十公里。你惊讶的赞叹:“好美呀!此景只应天上有。”


二十分钟后,牛群已经引不起你的兴趣,反正每只黑白相间的牛都一样。刚才还觉得新鲜趣味的牛群,现在却已索然无味。


突然,你的视线中出现了一只紫色的奶牛,你会大吃一惊,“怎么会有紫色的牛,居然世界上会有紫色的牛,太不可思议了!!”


0?wx_fmt=png


你的目光会集中在这头紫色的牛身上,从此留下深深的印象,并且一辈子不会忘记。


这件事情带给我们什么样的启发?


与众不同的事情总能被人们津津乐道,而与众不同的人也会被公司深刻记住。


在职场中,你只有作为一头“紫牛”,才能引起注意。


很多人没有与众不同的闪光点,自然就没办法吸引注意。就像在投简历的时候,所有人的简历都是千篇一律 ,没有很突出的特点和优点。


甚至你可以回想一下自己以前被拒绝过的简历,是不是包含了以下的这些词:工作认真、积极向上、团结友爱。


每个人都会这么写,HR凭什么会把精力放在你这份简历上呢,要知道HR每天都很忙的。


TA每天收到几百份一模一样的简历,TA看完肯定很快会关掉,不会有任何反应,也不会叫你过来面试。


那什么样的简历会让TA有反应,并且停下来,去想让这个人来面试呢?


这也就回到了我们之前说的“紫牛效应”了。


一定是这个简历有特别突出的亮点,或者有很大的差异化,有好看的背景配图、有不同的过往经历、有好看的头像照片等,才会引起HR的注意,并且让他停下来,打电话叫你过去面试。


这句话听起来是句废话,但是生活中很多人都没有养成这种意识。

什么意识?


0?wx_fmt=png


假如没有这种差异化的意识,在竞争中我们是会处于劣势的。


举个例子:假设两个能力完全一样的人同时过来面试,其中一个人在面试前就针对公司运营现状写了一份长达8000字分析报告,而另外一个人只带了一张单薄无比的简历过来面试。


你觉得谁通过面试的可能性会大一些?


当然是那个准备了分析报告的的面试者,因为他有很明显的差异化优势,十分强烈地吸引了面试官的注意力。


差异化能天然产生注意力,如果大多数人做的事情和呈现的状态都一样的话,人们会更关注那些拥有更多闪光点的一方。


0?wx_fmt=png


差异化的优势就在于:在有同等实力的情况下,你比别人多那么一点机会。


哪怕为了这一点机会,我们都非常有必要去培养自己的差异化优势。


具体如何做?


刻意培养自己的某项能力,让自己的这项能力显得非常突出,在这个领域你就是公司里排名第一的。这些能力可以是:


  • 文案写得特别好

  • 活动策划得特别有吸引力

  • PPT水平特别高

  • 数据分析能力特别强

    ……


总找到别人不能替代的点,并加以持续刻意练习。


三、及时反馈


在《精益创业》一书中,有个概念叫“MVP”模型,这个概念被广泛应用在创业的过程中。


因为有时候创业者都不知道自己的设想不知道能不能最终达到终点,可能有时候我们做的产品不一定是用户真正想要的。


有些企业半年才推出一款产品,要么风口已经过了,要么竞争对手已经把市场占领完了。


所以,有一个办法能尽快提高创业的成功率,我们要用最有效的方法先做出一个功能不那么完善的雏形,然后把产品尽快推到市场里验证效果。


0?wx_fmt=png


你永远不知道用户想要的结果是什么——在汽车推出之前,用户以为自己想要的是一匹马,要求再高点充其量是一匹更快的马,但是但汽车被发明了之后,用户才知道自己原来要的是一辆汽车。


假如将精益创业这个概念应用在制造汽车上,会是个什么样子呢?

当我们要制造一辆汽车的时候,我们首先要找到构成汽车的最核心部件。


  • 第一步:找到2个轮子,找到杆,一辆最最最简单的汽车框架就构成了。

  • 第二步:不够稳,再加点轮子,变成4个轮子。

  • 第三步:加个发动机,让他能动起来。

  • 第四步:最后加个方向盘,让汽车能正常行驶。


看到这里,你可能会问:你不会是在忽悠我吧,汽车制造哪可能这么简单。


0?wx_fmt=png


但这才是一辆汽车,能够在没有技术和认知积累的情况下,被发明出来最快速的路径。


但现在很多人造汽车,他们在心中对汽车有无限的构想,认为汽车应该是这样那样的。


在还没开始制作就已经把细节描绘得非常细,脑补用户一定需要这些功能,等汽车生产出来后发现用户要的根本不是这些功能,销量也可想而知非常惨淡了。


所以我们要快速做最简化的版本,然后快速获得反馈,看用户喜不喜欢,如果用户说好,我们就继续造,不好我们就改进。


「MVP模型」不仅仅可以用于精益创业中,还可以应用在我们的工作上。


假想这样一种情况:领导交给你一个做PPT的的任务,你做完后交上去才发现做的方向不对,然后上司说“算了算了,还是我来吧”。


你不仅耽误了这件事的进度,还会让领导对你很失望。


然而这个过程中,其实你也是很用心和努力,只是你理解的方向和领导想的有偏差而已。


如何避免这种情况?


在一开始的时候,你可以做个最初的版本,快速“投放”到领导那里获得反馈,如果领导说没问题,那就可以继续做下去,反之就要进行修改。


做出一个大概的框架,以确保做出来的东西方向不会错,或者错的太多。


但新人常常会有这样的一个困惑:假如我经常去找上司核对不会被认为很烦吗?


不会。


因为假如你的工作方向已经偏离了轨道,做出来的东西不是领导想要的,他会付出更多的精力去修补这个错误。


及时反馈看上去是多花了领导的时间,但本质上是节约了领导的时间。


如果没有想明白这个问题的话,团队和个人的效益会非常低,看起来很忙,其实只是做了无用功。


0?wx_fmt=png


所以我们需要在偏离不太久时及时调整方向,以缩短我们完成结果的路径。


通常情况下,职场新人很难直接就做出老板想要的结果,所以提前确认的好处就在于,你会缩短通往最终目的地的路径,越早发现方向不对,所浪费的时间越少。


当你做这件事情做到10%或者30%就可以同步下进度了,不管是口头上,还是邮件进行沟通。


职场新人受限于经验和能力的不足,某些想法会比较幼稚和不成熟,及时反馈也能让上司更好的帮助到自己。


把自己的想法及时反馈给上司,他也许就能理清你的思路,帮助你解决目前所遇到的问题,这对助推个人成长有非常大的帮助。


当然了,及时反馈不是让你遇到任何问题都直接甩给领导,比如那些网上随便一搜就能搜到答案的问题。


而是确定要领导解答前,先给出自己的思考,即使是很浅显的思考,然后真的不懂了再去问领导。


而不是让领导手把手把所有的细节都教给你,如果是这样的话,那还不如他把所有事情都自己做了算了。


四、结果导向


前阵子有个面试者,他做的活动里有一个是花了200万预算,活动的结果是活动h5获得了1万人访问。


0?wx_fmt=png


然后问他,这个活动给公司带来了什么转化成果?


他说这个数据在别的部门,他不知道,而且活动主要是在H5上。

再问:你给这个活动打多少分?


他说80分,说有些细节做得不够好。


然后船长就马上告诉他不太合适,结束了面试。


这个活动对公司业务没什么正向的转化,我给负分。有犯过错误不可怕,可怕的是不知道自己错了。


对了,这个公司不是家拼车业务的公司,而是个查公交信息的App。


这就是一个结果导向不强烈的例子,花了200万却没有什么具体的结果产出。


所以说,缺乏结果导向思维是人在做事情的时候有多么可怕!


你想想,如果你在一条错误的路上越跑越快,那会怎样?


——会离目标越来越远。


方向正确,你离成功越近;方向错误,你离失败越近。


所以,在职场中,为了能让自己更成功,我们做任何事情的时候需要找到正确的方向。


你可能会问,那我怎么样来明确自己的做事方向呢?


先明确自己想要达到的结果。


养成结果导向的思维,目标即是灯塔,能照亮你的前进方向,并且还让你不会被各式各样的因素打扰,从而更好的达成最终目标。


假如没有结果导向的思维,就容易把精力放在花拳绣腿的无关紧要事情上,而忽视了最终的结果,捡了芝麻丢了西瓜。


举个例子,有一天上司让小明去写一篇商品的文案,小明根本没搞清楚这篇文案要达成什么样的目的就直接去写了。


加班加点认真写了几天,但却自嗨得认为把文笔文笔写得非常优美、辞藻非常华丽,就能达成好的效果。


结果这篇文案投放到市场上一点效果都没有,小明的努力和认真完全白费。


为什么?


这是因为这篇文案的目的是其实为了让商品卖得更好,需要的是极具销售力的文案,而不是辞藻华丽的文案。


所以在做一件事情的时候,先要明确做这件事情的目的和意义。


公司最终只看结果,过程虽然也重要,但其实结果比过程重要太多了,就算我们加班加到凌晨3点,但做出来的事情并不能让上司满意,其实就属于无效工作。


职场上,不看苦劳,只看功劳。


假如我们举办一场线下活动,你在汇报工作的时候说自己花了多长时间准备,消耗了多少心血。


但其实这都是没用的,因为公司只看最终用户反馈怎么样,报名人数有多少,这次活动对比上次活动效果有没有更好,公司盈利有没有进一步提高。


谁会关心你花了多长时间?


没有任何人会关心,他们只看你做到了没有。


我见过结果导向很强烈的人,TA来找船长去讲课,虽然我们一次次得拒绝了TA。


但为了达成目标,TA也没有放弃,而是坚持了一次又一次想要说服我们,想出各种解决方法、循循善诱地把利益和格局弄好。


到最后居然也真正办成了这件事情,而且用非常低的成本撬动了这件事情的发展,这就是TA的价值所在。


而正常人面对拒绝的第一想法是什么,就是感觉这件事情做不下去了,然后就放弃,但其实事情还没到完全做不下去的地步。


但很多人在做一件事情的时候之所以会失败,不是因为这件事本身不可能成功,而是很多人等不到成功的那一刻,就已经放弃了。


就像销售一样,假如顾客说不买,如果你就停下来什么都不做,这笔订单可以就真的不会成功了。


你应该去问下TA为什么不买,是原因不买,是有什么顾虑,如果哪些顾虑得到保障,会不会改变自己的选择。


只要不是完全停下来,就还会有成功的可能性。


所以,结果导向的意识不仅对个人、对公司的益处都是非常非常大的。


时刻想着为结
果负责,假如你是结果的负责人,就算老板说不行,你也要问清楚为什么,多问为什么,找到目前的困难和障碍点,扫清你达到最终目的地的所有障碍物。


为了更好的达成目标,我们需要想尽所有方法,找到更优的解决方案。


要善于利用外部的力量去帮助自己解决问题(包括团队的同事),虽然是你在负责,但是可以找团队讨论,头脑风暴一些问题,可能会比你自己写的更好。


做事情、创业、运营本身就是个团队协作的事情,多一个的思考可以帮助你打开更多的思路。


我们只要达到结果,任何方法都可以,职场不是考试,没人会关心你是不是带了小纸条。


五、全局意识


回顾前面的5个意识,之前我们有说到要超越预期,差异化意识,优化意识,其实这些都是建立在拥有全局意识的基础上。


什么是全局意识?


就是在做执行工作的时候可以把层面上升至项目负责人的角度,从项目负责人角度思考项目整体的规划、协调。


不断从整体出发考虑问题,看问题会更加全面,并且增强对这个项目的理解。


0?wx_fmt=png


如果没有全局思维,很多事情其实你根本不知道怎么去做好,比如超越预期,如果你仅仅关注手上的事情,是很难在大的层面上超越上司的预期,也很难让自己进步。


只看眼前的工作,就会出现,你觉得没有事情做,但事实很多事情都还没有做好的情况。


假如不仅仅从执行层面上思考问题,当项目遇到困难和阻碍的时候,你会想到很多不同的解决方法,能力的提升会比只局限于单点的人进步更快。


当我在接到一项任务的时候,我会先把我关于这个项目的想法全部列出来:


  • 拆解工作目标,把维度拆解得足够细致

  • 用流程图画出整个项目的大体流程,再继续细化

  • 从整体流程中各个点能优化的地方提炼出来,逐个优化

  • 依次拆解各个步骤,具体落实到可执行的操作

  • 把项目所有的执行流程用excel表列出来

    …….


0?wx_fmt=jpeg

(我司某实习生推进一个项目时做的全局规划导图)


如果无法培养出这种思维的话,这样的话你其实就只有基本的执行能力,这种情况下,你与螺丝钉没有任何区别。


所以,不要只是觉得把手头上的事情做得很好就行了,而是要提前培养自己,成为未来可能的项目负责人。


培养的方法就是,在接到一项任务,刻意思考这几个问题:


  • 如果我是这个大项目的负责人,我会如何思考和安排现在的项目?

  • 现有大方向所做的事情都已经优化到了吗?

  • 现有大方向还有哪些可以做的事情,可以让目前的结果更好?

  • 团队内部的人力和外部的资源可以怎么去沟通和调用?

    …..


有全局思维的人会主动推动项目的进展,他会自己去找任何有益于项目进展的事情去做。


而没有全局思维的人,一旦把事情做得差不多了,他就觉得没事做了,被动等待别人给他安排任务。


而有全局思维的人,有清晰的导向和意识,有一系列的事情可以做去提升目标,而且会清晰地知道要做事情的优先级。


我们在接到任何一项任务的时候,都需要刻意让自己从项目整体去思考问题,这会是让你受益终身的习惯。


六、结语


上述说的很多意识,都是为了给我们持续进步做积累,这些积累到了一定程度,便会突然爆发。


我们努力让自己变得更好,不是为了去证明什么,而是为了看到,一个更大的世界。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


———— / END / ————

你真的明白用户需求是什么吗?

博博

你真的明白用户需求是什么吗?

人人都是产品经理 2016-03-14 18:26:26

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

文章中的观点是鄙人在各大运营类网站学习总结的知识,加上本人对运营的一点看法,愚昧之见,还望批评指正。

你真的明白用户需求是什么吗?

相信很多在互联网公司工作的朋友们都晓得用户需求挖掘这件让人头疼的事情。产品之所以会被生产出来,其主要目的,就是为了满足使用者的需求。而使用者的需求是什么?如何去挖掘这些需求?这些繁杂的需求中又有哪些是真,哪些是假等等问题,都是每一个产品/运营人员头疼的一件事情。

你真的明白用户需求是什么吗?

产品的存在源于用户的需求。像汽车的出现,是人们对于更高交通效率的需求,电脑的出现,源于人们对办公的需求等等。观察移动互联网时代下的手机应用市场,各类产品出现的原因也正是源于人们越来越多,越复杂的需求。像滴滴打车满足了人们方便叫车的需求,饿了么满足了人们选择订餐的需求等等。上面举的两个例子只是众多需求中最基本的需求。而根据马斯洛需求分析层次理论,人类的需求有五层,在满足生理与安全需求之后,人们还会往上追求尊重需求社会需求和个人实现需求。这些需求成为产品生产源源不断的动力。如果把产品看作是一个孩子,那么用户需求,就可以看作是决定这个孩子形态的DNA。用户需求不仅对产品的诞生有着决定性的影响,而且在未来,在产品发展的过程中,还会不断地影响产品的形态,决定产品最终的样子。 所以产品需求对产品的重要性不言而喻。本文将从用户需求挖掘的方法,用户需求挖掘后的选择,用户需求挖掘中的误区三个方面的问题出发进行讨论。

你真的明白用户需求是什么吗?

1.用户需求挖掘的方法

(1)需求挖掘的渠道

A.产品开发前

1. 市场调研

任何一款产品的出现都是因为这个市场有需求,需求在哪,大旗就得往哪里挥。所以市场调研,毫无疑问是需求挖掘最重要的事情。设计好调研的问卷,利用网络渠道,像QQ群,帖吧,社区,微信群等,在线下,通过深入目标用户的群体进行走访调查,深入了解目标用户的需求。线上线下,深入目标人群,获得足够多的调查结果,并确保获得的需求具有一般性。

2. 产品分析

现在移动市场的商品已经有很多,可以说目前可以被想到的产品已经有人在做了。所以要开发的产品难免会有类似的竞品。这时候就需要我们去分析这些竞品,找到共同点即已经被满足的需求,找到差异点,即未被满足的空白区。比如如果你想要开发一款社交软件,那么就要寻找像微信,YY语音,QQ,陌陌等一系列的社交产品作为竞品进行分析,在这些竞品中找到社交软件应该有的通用的功能,找到这些社交软件中没有的,同时用户又有需求的功能作为你的产品的差异点。

3. 数据分析

随着大数据时代的到来,数据在决策中的作用越来越大。用户的很多潜意识或者有意识的行为,都可以通过大数据体现出来。很多情况下,用户很难清楚地说明他们的实际需求,很多时候他们的判断与实际的需求是不一致的。显性的需求没办法很好的表达出来,更不要说那些用户觉察不到的隐藏的需求。所以数据,这个不会骗人的东西,可以很好地帮助我们去分析需求。通过对用户数据的分析,需求可以较清楚地被表现出来。在产品未开发之前,数据的来源可以有很多方面,各大搜索引擎的关键字排行榜,微博热搜榜,同行的数据报告,或者是一些数据网站的免费或者付费的数据报告,都可以成为我们的数据分析来源。

你真的明白用户需求是什么吗?

B.产品开发后

1. 搜索记录和用户行径

在产品上线后,用户的搜索行为和用户的行径是分析需求的一个重要来源。用户搜索过程提及的关键词,举个简单的例子,比如婚恋产品中,如果搜索词中“35岁以后”“北京户口“的搜索频率很高,那么我们就可以知道用户对对象筛选有需求,就可以考虑加入对象筛选这个功能。另一个是用户行径,哪个功能是重度使用功能,哪个功能使用率不高,哪个功能用户的中途放弃率最高,都是需求分析中的重要数据。

2. 用户日志和用户数据

如果拥有大量的用户日志和用户数据,那么要好好地利用这笔难得的资源。找一个用户IP出来,GREP一下,分分钟就能获得这个用户的完整访问和操作轨迹,分析用户的操作行为,设身处地的理解用户的心情,理解用户的处境,从而理解自己产品和运营中,是不是有一些不合适,不妥当的地方,真正把自己代入到用户的体验中,理解用户的不满,理解用户的挣扎,理解用户在使用中的困惑和障碍。

3. 用户反馈

产品在上线之后,通过各种渠道获取尽可能多的用户反馈或者邀请用户面对面进行产品的评测。通过用户反馈了解产品还没有满足的需求还有产品中的伪需求或者说是冗余的功能是最直接最有效的方式。因为这群用户是你最珍贵的种子用户。

你真的明白用户需求是什么吗?

(2)需求挖掘的思想方法

A.头脑风暴法

在收集产品需求的过程中,最常使用的是头脑风暴法。让参与者敞开思想,集体讨论,相互启发、相互激励、相互弥补知识缺陷,引起创造性设想的连锁反应,产生尽可能多的创意。

B.创意分合法

创意分合法是创意思维训练方法之一,主要是将原不相同亦无关联的元素加以整合,产生新的意念、面貌。分为两种心理运作过程:使熟悉的事物变得新奇(由合而分)、使新奇的事物变得熟悉(由分而合),主要是运用类推(analogies)和譬喻(metaphors)的技术来协助分析问题,并形成相异的观点。

C.属性列举法

属性列举法即特性列举法也称为分布改变法,特别适用于老产品的升级换代。其特点是将一种产品的特点列举出来,制成表格,然后再把改善这些特点的事项列成表。属性列举法是根据设计对象的构造及性能,按名词、动词、形容词等特性提出各种改进属性的思路,从而萌发新设想的一种方法。

D.6W3H问题法

面对庞杂的需求分析工作、不知从何做起时,6W3H分析法不仅有利于较系统和周密的思考问题,使思维具有条理性,也有利于较深入地发掘问题,有针对性地提出更多的可行性设想,帮助产品经理制定有效的目标。

6W3H分别是:

  1. Who(什么人)产品的目标客户是谁?是一类群体还是几类群体?针对产品的用户群进行分析,了解目前用户群的年龄、性别、特征、区域、习惯、兴趣、爱好、收入、消费等情况。
  2. When(什么时间)用户可能会在什么时候使用到产品。产品推介的时,必须选择合适的时机,同时还要考虑用户的停留时间、使用高峰时间、跳出时间。
  3. Where(什么地方)用户可能在那些条件和环境使用产品。针对什么样的环境条件,如,针对不同的操作系统环境、不同的地理位置,要有不同的方案。
  4. Why(为什么)此法主要用于了解设计产品新功能是的目的是什么?是现有产品没有满足用户需求还是为了满足用户的新需求、又或者仅仅是跟风凑热闹。
  5. What(是什么)产品功能分析。用来分析产品基本功能和辅助功能的相互关系如何,用户到底需要什么功能?
  6. Which(哪些)除了我们的产品,市场上还有可替代产品吗?
  7. How do(怎么做)用户怎么使用产品,使用产品的流程是什么?怎么样更省力?符合用户的使用习惯吗?体验怎样?
  8. How much(多少钱)用户使用产品需要付费吗?需要付多少?是否超出了用户的支付能力?
  9. How many(多少次)用户的使用频率是怎样的?经常使用?偶尔使用?还是不定期?

2.用户需求挖掘后的选择

A. 甄别真假需求

用户的需求和用户的痛点 .需要注意的是,用户提出的需求不一定是用户真正的需求。

  • 第一,用户没有很强的产品意识,很多都是模棱两可的感觉。
  • 第二,用户是贪婪的,他们往往会提很多自私的需求。

如果能够躺在床上每天有人送钱送吃的给你洗衣服打扫房间这种需求绝对是强需求,但是可能么?

有些需求可能是低频率的需求甚至是违背商业规则的需求,像春联O2O,一键挑选春联送货上门,新用户还能免单哦~~这种需求用户求之不得,需求可以说是大了去了。但是有企业会做吗?明显不可能!所以不要一味地跟着用户的需求走,不理智的需求分析行为,无疑是一种自杀的行为。

B.从需求中需找真正的痛点

在需求分析中,甄别真伪需求,对需求进行抽丝剥茧的分析,剥开表面浅显的需求,通过逻辑思维分析,代入用户使用的场景,去寻找造成这些需求下面更深层次的痛点。

举个例子:360安全浏览器,看起来是好像用户使用的需求是需要一个安全的浏览器,能够保护他们上网的安全。但是如果给用户一个绝对安全的,但是很卡的浏览器呢?如果我们给用户一个安全系数较低,但是已经能够保证隐私等基本信息安全,同时又能够保证浏览速度和浏览质量的浏览器时,用户会选择哪个呢?

浏览器本质还是网上冲浪的工具,核心问题还是使用过程的流畅度,浏览体验。安全性问题,只是因为现在越来越多的信息泄露,用户担心自己信息安全而产生的一个附带需求罢了。

2007年微软推出vista时,提高了安全性,但是同时也影响了使用效率。很多用户由于没有办法忍受vista糟糕的操作体验而放弃使用它而转用XP系统,即使vista的安全性比xp的要高。所以从这两个例子我们可以看到,很多时候,我们以为理所当然的需求,其实并不是用户核心的需求,又或者说,存在这种需求,但是在需求平衡,他并不是占大头的。所以寻找需求,要求我们抽丝剥茧,发掘最最本质的需求。至于怎么找,这个就要看对产品和所在领域的深挖程度了。

3.用户需求挖掘中的误区

在需求分析中,常见的错误有以下几个方面:

  1. 分析对象出错
  2. 分析方法错误
  3. 永远以为自己比客户更聪明
  4. 不尊重用户的现实选择
  5. 客户和用户没有区别来对待对需求的一厢情愿,理解出错

很多产品人员对于产品的理解,很大程度上是取决于个人的感觉+身边人的感觉。但是这种需求理解方式无疑是错误的,几个人并不能代表大多数人的想法,统计学上有个著名的观点,当数据越来越大时,趋势将会越来越稳定,某些值将会越来越稳定在某个数值范围区间,所以要求我们在分析需求时,不能以偏概全,一厢情愿,必须跳出自己的圈子,去目标客户群那里,跟大量的人接触,跟他们聊产品。让他们来评价产品,这样得到的产品需求,才能够真正的反映绝大部分用户的需求。

你真的明白用户需求是什么吗?
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

这些小小的改变,能够让UI动效更上一层楼

蓝蓝

UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。

css布局——flex布局

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

图片


容器属性:

flex-direction:(排列方向横向还是纵向)
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。

图片

flex-wrap:(如何换行)
nowrap
(默认):不换行。

wrap
:换行,第一行在上方。

wrap-reverse
:换行,第一行在下方。


flex-flow:(
flex-directionflex-wrap简称,默认值为row nowrap

justify-content:(横向对齐方式)
flex-start(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

图片

align-items:(纵向对齐方式)
flex-start:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: 项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

图片

align-content:(多根轴线的对齐方式)
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值):轴线占满整个交叉轴。

图片

 
box属性:


order:(排列顺序)
数值越小,排列越靠前,默认为0。

flex-grow:(剩余空间分配,box放大比例,默认为0,即如果存在剩余空间,也不放大)

图片

flex-shrink:(box缩小比例,默认为1,即如果空间不足,该项目将缩小)

图片

flex-basis:(box占据的宽度或高度)

图片

align-self:(单个box的对齐方式,与其他box对齐方式)

图片
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

博博

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

人人都是产品经理 2016-04-19 11:20:31



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里



来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

初尝竞品分析,能力以及对行业理解有限,暂无法从大的架构上完整支撑起整篇文章。希望能通过自己的亲身体验,从产品结构,产品功能,产品核心功能使用流程等角度上对腾讯课堂和网易云课堂两款产品加以梳理。之后根据用户数据调查,定位用户群,建立用户使用场景模型。并且根据KANO模型对用户需求进行归纳。进而站在用户体验的角度上给出对比分析,最后给出自己如果自己是PM的建议。期待读者和前辈拍砖给建议~

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

脑图太大无法完整显示,若脑图不清晰请移步文末网盘链接,文中涉及完整报告也保存在网盘中。

1.产品初体验

1.1 产品简介

腾讯课堂:腾讯课堂是腾讯推出的依托于QQ群的专业在线教育平台,以兴趣、语言类学习内容见长,聚合了优质教育机构和教师的海量课程资源。并于2014年4月1日上线移动端APP,作为免费的开放式的平台,腾讯课堂帮助线下教育机构入驻,不参与机构分成,还为其提供流量和功能支持。

网易云课堂:由陈能干(杭州蓝脑教育科技创始人、CEO,知米英语系列产品创始人)联合丁磊发起,网易成立项目组开发,以偏职业化的学习内容为主。产品于2012年12月上线,以实用技能类内容为主,衔接高等教育和职业应用,打造综合学习服务平台。目前有近6000门课程,覆盖近20个教学领域,百余细致分类,近5万课程视频,超过700万注册用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.2 产品结构

腾讯课堂产品结构:

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂产品结构

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从产品结构图对比来看,两款产品均从推荐,搜索,分类以及已学习课程四个方面设置入口导向课程学习板块,分别对应了不同用户(见下文)在寻求课程途径上的需求差异:第一类专业类用户可能搜索比较多,第三类兴趣类会关注推荐排行更多,第二类职业类用户可能更会比较全面使用;同时与豆瓣、知乎等流行的相关产品使用户养成的习惯一致。

腾讯课堂醒目的位置设置了学团入口,并且为机构开设单独的介绍界面,体现了作为免费的开放式平台,吸引用户互动和机构入驻的发展策略。

网易云课堂在首页设置消息提示,因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

1.3 产品功能

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.4 使用流程

腾讯课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从使用流程上看,两款产品允许在非登陆条件下进行试用,直到用户找到目标课程,准备学习/付费或者有意使用个人设置时再提醒用户进行登陆,降低使用门槛,提升了用户体验。

在登陆方式上,腾讯课堂仅支持自家qq及微信登陆,一方面利用自身通讯平台,方便以消息推送等方式进行推广宣传;另一方面保证了用户与平台(产品、客服、老师机构)间获的即时通讯。而网易云课堂采除用自家邮箱外还包括腾讯系列,微博,手机等多种身份验证方式,满足习惯不同平台用户的需求。

2.竞品分析

2.1 用户分析

根据企鹅智库发布的《在线教育市场深度报告》,我们可以获得一系列接受在线教育用户的核心信息。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从上图信息中我们可以分析得出:

  1. 用户学习学习内容主要为以英语为主的外语学习和其他留学相关学习,其次为兴趣类内容学习,以及职业证书、职业技能在内的职业提升类学习。
  2. 用户学习时间集中在晚上8:00-10:00这一绝大多数个人支配时间段,其次为晚上6:00-8:00这一通常为下班(学)通勤时间段;
  3. 用户主要集中在北上广江浙等一二线大城市,身份主要是学生和白领;
  1. 以外企职员和准备出国深造色学生为主进行语言方面学习的群体;
  2. 以都市白领为主的职业从事者,为了提升职业技能或者改变职业方向而学习的群体;
  3. 以都市白领为主为了充实生活进行兴趣类学习的群体;

之后建立用户使用场景模型:

1. 一位准备出国/语言考试的学生/外企职员,在结束一天学习/工作之后,利用晚上8:00-10:00这段个人支配时间,打开经过仔细筛选的语言课程,系统地持续学习1-2小时。在此期间认真做好笔记,提醒自己有哪些疑问点和老师布置的作业。

该类用户学习意愿较强,自控能力较好,有较强的付费意识。该类用户的学习内容比较固定,因此需要有优质的学习资源,同时由于语言学习的特点,需要有充足的互动指导。

2. 一位期望提升职业技能/改变职业方向的职场人员,查找和了解与自己期望提升职场能力相关的课程,在大致规划好课程范围后,开始在相关平台寻找是否有相关配套的课程套餐。在失望的发现没有完全契合自己规划内容后,开始按每门课独立学习的方式学习。

该类用户多是迫于找工作和升职的压力而去学习,需要提升职业技能、明确职业发展,付费意识强,也是学习意愿和自控能力最强的。该类用户时间有限,工作压力较大,因此需要学习内容有相当的实用性,能够快速学习并进行实操。

3. 一位职场人员/学生在晚上18:00下班/放学后,乘坐地铁/公交回家,途中打开手机/平板中的在线教育app,选择感兴趣的/正在学习的/随机推荐的/提前下载完成的课程进行学习。学习15-30分钟后,由于疲劳/到家结束此段学习。到家忙碌完吃饭、家务、洗澡等事情后开始学习,直到晚上22:00休息。

兴趣类学习用户多是基于某种业余爱好,利用工作之余进行学习,学习时间短、内容广泛、学习意愿并不强烈,付费意识弱。该类用户并不追求学习内容的深入,但是需要多样化,且更贴近生活和实际。

2.2 用户需求分析

根据《在线教育市场深度报告》,我们从不使用在线学习产品原因、在线学习受关注问题、在线学习产品功能需求、在线产品付费意愿等方面了解用户需求,并结合KANO法则进行分析。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

我们不妨把不使用在线学习产品原因在线学习受关注问题所包含的因素看作会使户满意度降低因素;把在线学习产品功能需求看作会使使户满意度增加因素;把在线产品付费意愿所包含因素看作使用户满意度大幅增加因素。由此,根据KANO法则,我们可以列出以下类型功能需求:

期望因素(一维因素):

  • 展示教学质量和课程内容是否优秀、价格是否合理。除了加强筛选课程质量本身外,为了让学习者快速了解课程质量和内容,相对应功能可以为:提供课程咨询、提供与学习该课程的学员交流机会、课程讲义大纲预览、付费课程试用、提供明确收退款流程等等。
  • 互动交流。相对应功能可以为:直播课堂随堂提问、录播课堂有相应交流平台、有问答答疑平台、与老师有明确联系方式等等。

必备因素

核心学习功能是否完整,使用流程是否清晰流畅,交互界面是否明确友好。相对应功能可以为:推荐、搜索、筛选、收藏分享、学习界面等基础功能。

魅力因素:

学习相关方向的内容丰富程度。相对应功能可以为:提供配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎入口等等。

2.3 功能对比分析

2.3.1 期望因素(一维因素)

2.3.1.1 了解课程:

该功能主要促使用户快速得到一些列自己关心的课程信息,进而判断课程是否适合自己,决策是否值得花费时间金钱学习,打消负面判断,最终实现课程学习。对于满足第一类对课程内容十分在意,有较强付费意识的用户格外重要。

腾讯课堂:

优点:与老师直接通过qq交谈了解课程,能够得到及时的回复,交流效率高。用户处于主动地位,因为消息接收不及时而被冷漠的概率降低,能够帮助用户顺利获得必要的信息,做出行动决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.课程介绍的内容过于笼统,不能满足用户通过查看介绍来判断课程是否值得去学的需求,没能实现将初步的兴趣转化为实际使用的过渡。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.评论区不能互动,无法通过回复评论或者私信的方式与已学过课程学员交流,新学员不能在与老学员的互动中得到期望的更适合自己的信息,这与用户在贴吧、知乎等社区形成的使用习惯相违背,新用户从老用户获得针对性信息的需求没有被实现。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。尤其对于第三类用户,进一步减少其付费积极性。

4.付费课程缺少体验学习部分,用户不确定课程质量,会认为盲目付费有一定风险性,提高了付费课程的使用门槛。

网易云课堂:

优点:课程简介内容相对充实,对适合人群有一定划分,能够帮助用户对自身进行定位,用户能够快速进行决策判断是否应该学习该课程。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.通过站内信与开课老师或机构咨询,与qq等IM工具相比,沟通效率低,用户在交流中处于被动等待的地位,容易因为回复不及时被冷漠,而丧失或者转移付费意愿。并且仅有付费课程和少数免费课程有咨询功能,但是付费和开始学习之后咨询功能消失,无法持续与老师交流。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。

2.3.1.2 互动交流:

该功能目的在于使用户与老师及其他学院通过在线交流,实现学习过程中答疑和互动的环节,更有效地达到在线学习的效果。对于第二类用户更期望主要通过网课取得一定学习效果的用户会更加在意。

腾讯课堂:

优点:

1.能够与老师直接通过qq交谈进行答疑,与现实学习习惯和行为相匹配,促使用户能够在思考和问 题得到解决的过程中获得知识,满足在对学习质量需要。

2.学团功能,提供问答式UGC互动平台,意在利用已有的老师和用户资源满足用户的针问答需求。目前在一 些专业性不是很强的板块已经取得了一定的使用量。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.无论是学习功能还是学团功能,用户之间无法进行直接交流。这作为现实学习中重要的一环,已成为日常的行为和习惯。用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,与学习期望不符,使在线学习的体验和效果变差。

2.学团功能在运营上有一定欠缺,在某些板块中提出问题久久不能得到回应,同时缺少优质的推送内容。用户的对于个性化问答以及相关内容的推送的期望得不到实现,久而久之用户将会放弃对该功能的进一步使用,造成恶性循环,UGC社区将面临崩盘。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从图中可以看出,作为本应较为热门的雅思学习学团,并没有多少参与度,仅有一些平台推送的相关消息。多少可以反映出该板块运营不足,缺少优质用户和资源的问题。

虽然提供了私信功能,但是仅能收到课程推荐和客服(咨询)消息。不能实现与老师和学员进行互动交流。虽然网易云课堂强调课程内容,但是相互交流作为现实学习中重要的一环,用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,使在线学习的体验和效果变差。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2 必备因素:

2.3.2.1 搜索:

作为定向指向用户需求的功能,应为用户提供准确内容范围,减少无关选择量。

1.显示热门搜索和历史搜索,帮助用户更快捷得进行搜索,尤其是第一类用户,需要在不同时间对相同内容进行重复性搜索时,有历史搜索功能明显提供便利。

2.在搜索结果界面提供排筛选序功能,用户能进一步缩小搜索范围,能更快捷找到自己的目标课程。

缺点:

在搜索结果界面提供分类功能,与搜索功能本身向矛盾,会误导用户使其认为能够在搜索之后继续进行分类筛查,但使用结果是跳转到分类界面,徒增麻烦。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.搜索界面未显示搜索历史,对于需要在不同时间对相同内容进行重复性搜索的用户会产生繁琐之感。

2.搜索结果界面没有筛选排序功能,用户在搜索之后需要进行大量的查看比较工作,使找到合适课程的门槛增加,体验非常不友好。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.2 分类:

使用户在内容层面上全面了解产品提供的资源,并且根据预设步骤,引导用户细化、明确自己目标课程的类别,最终实现目标课程与产品资源的契合。

采用三级分类,最大化地引导用户定位和细化目标课程,排除无关课程。起到了分类功能节省用户时间和精力用来寻找到目标课程的作用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

入口放在首页,与推荐板块结合在一起不明显。在同一个标签页中内容标题上有重复,用户不能第一时间区分掌握理解内容框架,易产生混淆之感。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

单独作为一个界面,用户能第一时间掌握理解完整内容和框架,不会产生混淆。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 仅有二级分类,没有做到最大化地帮助用户一步步定位和细化目标课程。

2. 用户在使用分类功能之后依然需要花费相当精力把无关课程排除掉,找到合适课程的门槛增加,体验非常不友好。

3. 筛选排序:把课程按照与用户需求点相符程度排列呈现给用户,为其进一步决策提供优先级。

关键词条目多,满足了用户对于价格,时新度,人气等多方面的筛选需要,有综合排序,高低排序等更加适应需求多样化的排序方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

不能进行并列排序,用户每次仅能选择一个关心的方面进行排列,手段比较单一,与用户使用最多的购物排序习惯不一致。

能够进行并列排序,可以就用户所关心的价格、时新度等同时排列,与用户习惯的网购筛选排序功能相似,满足多样的排序需求,所呈现结果让用户更容易做出决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 关键词条目单一,价格上仅能选择收费免费,排列所得结果仍然不够清晰,用户仍需要付出一定精力时间自己筛选。

2.3.2.3 推荐:

把自身优质内容呈现给用户,减少决策成本,吸引用户产生学习行动。因为三类用户所敏感内容不同可能采取不同推送策略。

推荐板块为一级课程分类+二级课程分类+课程,有学习目的用户可以轻易地理解所推荐内容大致包含信息,进而快速做出决策来判断是否有必要进一步仔细了解关注。意在吸引第一类第二类对内容质量比较敏感的用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.此环节显得与分类环节有重复之感,相同内容重复出现并占用过多空间,使用户产生疲劳感。

2.仅仅是内容的分类填充,缺少吸引用户的点,没有起到推荐的作用。

采用用户关注点作为大标题+推荐课程。相比之下,作为推荐环节网易云课堂更能吸引用户眼球,抓住用户需求点,符合推荐板块应起到的创造用户需求,吸引用户产生学习行动的作用。更多的是吸引第二类和第三类,对职场和兴趣十分关注的用户进行使用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.4 学习界面:

观看课程界面中的基础功能应该扎实完整,让用户在整个学习流程核心部分获得良好的体验。

基本功能不完整,缺少主流移动端播放器共有的手势调节等功能;对于在线学习必备的倍速播放也不支持,比较严重地影响用户的使用效果。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

而网易云课堂

优点:

1.有手势调节音量亮度、清晰度,选择线路等主流移动端播放器所具备的功能,顺应用户的使用习惯。

2.添加调整播放速度,退出全屏,一键设为已学等功能,更加迎合移动用户快节奏、使用环境多样的在线学习需求。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

亮度调节功能,手势仅能调节音量,不能调节亮度,与用户习惯相违背,没有考虑到夜间使用的情况。

2.3.2.5 收藏:

腾讯课堂提供添加课程到收藏的功能,可以在我的课程页面找到已收藏课程。而网易云课堂却缺少这一基本功能。

优点:

满足用户找到期望课程,但暂时不想报名的使用情景。比如一些有时效的付费课程,但是暂时没有足够的时间学习,用户可以通过添加到收藏来避免遗忘。

缺点:

仅能收藏课程不能收藏机构。当比较关注某一机构的课程时,需要反复搜索或者进入已学习该机构的课程,在详情界面查看该机构,比较繁琐。

2.3.3 魅力因素:

  • 在相关系列课程方面,两款产品均没有此功能。但是网页版网易云课堂推出微专业板块,提供某一领域的系列课程并颁发证书,相信之后移动端也会普及此功能。
  • 在相关资料方面,两款产品也均未提供相关功能。在网页版网易云课堂在计算机、四六级等四个方面提供相关试题,但是这些服务在向移动端的转移中可能仍需时间。不过据传腾讯课堂将在下一个版本中加入在线测试题目功能,测试版本已经发出。

2.3 流程及界面分析:

(1)整体界面

腾讯课堂:

采用上方4个Tab标签导航,分别对应发现(首页)、学团、学习计划、我的四个主要功能板块。可能因为认为用户查看已报名课程是高频行为,所以将收纳用户报名课程的学习计划放到醒目的Tab标签中。学团功能反应了腾讯课堂作为免费的开放式的平台,建立UGC、PGC社区的发展定位。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.虽然Tab标签放在上方起到显而易见效果,但是与主流app使用户养成的下Tab标签习惯相冲突,同时因为上方蓝色区域过大造成视觉上的不协调。

2.界面显得粗糙,配图与课程名称不相符,图标大而丑,占据用户过多视线,在一个屏面里提供给用户信息较少,用户需要花费更多时间和耐心去翻屏,影响用户使用的情绪。

3.因为要给学团和学习计划两个功能让出空间,分类板块被放在首页(推荐)里,而且内容上与推荐的内容有重复,在使用时会对整体框架产生不清晰的感觉。

4.推荐板块全部采用固定格式,没有滚动窗口,导致推送内容单一,更新频率低(开学后将近两个月仍然显示开学前后推送的内容)。

网易云课堂:

采用底部三个Tab标签导航,将首页(内容)、全部课程、学习中心三个主要功能包含进来,体现了网易云课堂以内容为主,所有功能围绕着将用户和课程内容更好连接而建立。

因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

优点:

1.底部三个Tab标签导航与主流应用设置一致,使用起来比较顺手,不需要让用户重新适应操作方式。

2.相比之下网易云课堂界面简洁美观得多,图标控制在合适的大小,所配图片也与主题相符,能够在一个页面获得更多信息,用户体验感好。

3.分类板块完全归纳在全部课程标签中,推荐界面完全是推荐内容。用户使用起来一目了然,整体框架结构十分清晰。

(2)使用流程

1.点击一门课程,转到课程介绍界面,包含目录、详情、评论三个界面。打开目录后无法直接进入课程,需点击下方查看任务后,再次得到任务界面的目录后才能进入课程。

没有任何意义地多添加了一个步骤,让使用过程变得繁琐,与用户的在目录中直接进入学习的习惯相违背。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.在详情界面,提供的目录摘要和学员评论两个模块没有实质内容,反而徒增用户阅读量;在点击“查看全部”后,又返回目录和评论环节。

这种设计不仅与上方标签栏重复,又增加用户阅读无意义信息的数量,掩盖了本应出现在该环节对课程进行介绍的内容。流程设计上对必要信息和无用信息筛选不当,缺少逻辑感。

网易云课堂:

相比之下网易云课堂在目录界面随点随学,虽然只减少一个环节,但是不会因为显而易见的不必要的繁琐,使用户在使用时产生抵触情绪。同时简介、目录、评价三个板块间没有相互掺杂,表现出来的无论是内容还是逻辑都更为清晰。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3期望&改进

3.1假如我是腾讯课堂PM:

3.1.1.在期望因素方面:

提供学生私信功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

按照相应分类,在课程相关页面上提供学团功能的入口,以促进用户了解并使用学团功能。同时加强对学团的运营,首先通过奖赏机制(如根据在学团上提供优质内容情况,为相应老师或者机构增加曝光度)建立优质的知识内容(比如在魅力因素中提到的相关内容),留住一批优质用户,进而进行推广,成为真正的UGC答疑平台。

提供付费课程试用,课程大纲讲义预览,在付费课程支付界面提供退款相关规则和流程等。使用户放心地花费时间或者金钱,避免因为信息缺失让用户在比较和犹豫过程中流失。

3.1.2 在必备因素方面:

解决首页的推荐和分类两个模块的重复性,去掉相对丑陋的大图标,将分类放在下拉菜单中,点击相应内容会进行跳转,在“腾讯课堂”logo处用小三角箭头作为标识。相比之前在最上面放一堆图标,然后需要不断下拉才能看完整推荐,用户的使用逻辑会更加清楚:点击腾讯课堂,用户将快速得到并掌握该产品所包含内容,点击感兴趣的内容跳转到相应推荐,之后可以继续进一步查看所有下一级分类进行了解。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

完善观看课程界面的基础功能,添加手势调控,倍速播放等一系列视频必备功能。

解决课程详情界面混乱,观看课程步骤繁琐的问题:在目录中提供进入学习界面的入口,去掉”查看任务“改为“立即学习”;在任务详情界面去掉”目录摘要“和”学员评论“两个模块。

3.1.3 在魅力因素方面:

充分利用学团平台,改变推送内容。对如配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎精华内容入口等等进行整理,作为优质内容进行推送。使用户除了学习课程内容,愿意花更多时间浏览学团提供的相关领域内容,更大化增加用户粘性。

3.2 假如我是网易云课堂PM

3.2.1 在期望因素方面:

  • 强化学员与授课老师的联系,尤其是长期、付费的课程。在详情页面老师头像出建立联系老师的入口,采用站内信或者最好能与即时通讯工具以及邮箱账号相关联。避免付费/报名后就无法联系老师的情况。
  • 提供用户间站内信联系功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。
  • 可以允许通过开课老师或者机构申请,为课程提供专属网易云协作群,在课程介绍界面提供加入入口,并且在学习中心界面中设立群列表。

3.2.2 在必备因素方面:

  • 不得不说网易云课堂界面的整体视觉效果基本没有什么可以挑剔的,只是在基础功能上还有一些值得优化的地方:首先在搜索结果界面应当加上筛选功能,其次筛选功能应当增加筛选的项目和顺序(如价格高低排序) ,同时分类功能需要增加分类层级(如编程语言需要细分成C,PHP等等),最后在课程列表界面去除无意义并且占据大量空间的分类板块,或者收纳入下拉菜单。
腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3.2.3 在魅力因素方面:

将微专业功能向移动端转移,利用中国大学mooc网的优势资源,根据用户的搜索报名情况,给用户提供更多优质并且满足其需求的教育资源,迎合用户对更多相关信息,更多专业知识的需要。比如在首页推荐中,增加推荐mooc课程板块,并且优先推荐用户关注方向相关课程。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

谈谈BFC

周周

一、什么是BFC
       BFC(block formatting context)简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
    中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念, 从样式上看,具有 BFC 的元素与普通的容器没有什么区别,但是从功能上,具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

如何触发 BFC

      上面介绍了 BFC 的定义,那么如何触发 BFC 呢?
    满足下面任一条件的元素,会触发为 BFC :
    1、浮动元素,float 除 none 以外的值
    2、绝对定位元素,position(absolute,fixed)
    3、display 为以下其中之一的值 inline-blocks,table-cells,table-captions
    4、overflow 除了 visible 以外的值(hidden,auto,scroll)

BFC布局与普通文档流布局区别      
    普通文档流布局规则
    1.浮动的元素是不会被父级计算高度
    2.非浮动元素会覆盖浮动元素的位置
    3.margin会传递给父级
    4.两个相邻元素上下margin会重叠

    BFC布局规则
    1.浮动的元素会被父级计算高度(父级触发了BFC)
    2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)
    3.margin不会传递给父级(父级触发了BFC)

    4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

   下面来说一下BFC的实际使用场景
   场景1:解决子盒子都浮动时 父盒子高度不参与计算问题
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根据overflow 除了 visible 以外的值(hidden,auto,scroll)就会触发BFC的原则 计算BFC高度时 ,floatbox也参与其中。


    场景2:box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ,这就是margin上下间值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解决这个问题我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了,解决代码如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    场景3:实现左侧固定右侧自适应等类似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

Google设计语言:如何将品牌DNA融入产品

蓝蓝

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文转自,头条号的人人都是产品经理,的一个大神。

Google设计语言:如何将品牌DNA融入产品

2018年5月9日凌晨1点,Google开发者大会上对 Material Design做了更新的讲解,其中令我印象深刻的是Google对图形语言单独拿出来做一个模块来解释,如下图我标红的地方。

Google设计语言:如何将品牌DNA融入产品

OLD NEW

对!就是这个SHAPE的单词,为什么我会如此看重,大家应该知道构成设计语言的四大基础原子是:字体/颜色/网格系统/图形。

这里的图形包括图标和一些辅助图形,它有什么不同呢?

大家看之前以往的版本,材质设计语言里面没有单独去说形状这一元素,当然也有做的比较好的产品,比如:韩国的 29cm 和 11街,国内天猫/网易蜗牛读书等等。

图形语言对我们产品影响极其大,之前网上也有这样的文章,比如:提取logo上面视觉基因,然后运用到图标里面。对,这个没错,但是我觉得不够好,不全。

今天和大家一起来分析下Google是如何做的。

我对图形的理解

图形无处不在,人眼对图形的识别能力远远高于字体,图形便于记忆、传播,这就是为何每次做LOGO时候都需要去考虑图形延展呢?

目的为了传播品牌,在用户心中打造产品形象,比如:可口可乐弧线、阿迪达斯、苹果logo这些国际性大牌子的logo都是易于记忆与传播的。

那么在产品设计中如何体现呢?

我们常用在图标里面去展现一些品牌元素,比如:天猫猫头直接和图标融合,这是一个很成功的例子。还有韩国的Genie音乐产品,也是直接logo和图标集合。

那么仅仅只是这些吗?

当然不够,如果我们想传达我们产品的品牌理念,深入到用户心中,只在图标里运用是不够的。

比如:可口可乐每年做产品运营推广,不断大量的重复它logo弧线元素,这样能长期在用户心中形成记忆点。

Google是如何做的?

Google这次让我们打开眼界,下面Google的原话:

形状可以引导注意力,让用户易于识别组件,沟通状态和品牌语言传达。

对次有了一些更深刻的认识,形状其实运用不止我们平常所理解的。我之前写过一篇文章,就是形状对布局的影响,里面就是讲了形状的一些基础作用。

下图是来自材质语言的截图:

Google设计语言:如何将品牌DNA融入产品

图片来自google

Google的想法非常大胆:一个方形的变化,延伸出不同的形状,当然并不是单独一个产品设计里面放这么多形状,而是运用到不同产品,运用不同的图形,传达其特殊品牌调性、大统一,局部战略调整。

Google设计语言:如何将品牌DNA融入产品

比如:上图凹槽图形用在主TAB上,形成视觉焦点,容易吸引用户区关注它,一般核心功能会如此设计。

Google设计语言:如何将品牌DNA融入产品

Google已提到了可以用于区分不同组件,这观点我很赞同,之前我对爱奇艺做了视觉分析,发现它们一级导航和二级导航样式一样,那么这样用户如何区分呢?

Google设计语言:如何将品牌DNA融入产品

图形可以用于表达某一正在交互的状态,比如:选中状态,当然并不是单独去使用。Google特定强调了:需要和其他视觉元素集合起来使用,比如:颜色

其实这一观点以前就有啦!比如:咱们的check box控件,选中前后状态不一样。

不过Google这个是否略显夸张些?

Google设计语言:如何将品牌DNA融入产品

最后重点来啦!比如:可以用于表达品牌语言,那么图形来自哪里?用在哪里?

如:上图是一个Crane的应用,他们logo是中间一个图形加外带椭圆底,这里Google提取了椭圆作为视觉DNA,并沿用到产品的每一个控件。

Google设计语言:如何将品牌DNA融入产品

同一产品多终端统一符号语言。

Google设计语言:如何将品牌DNA融入产品

如下图提取LOGO关键特殊符号:

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

下图Shrine提取菱形棱角图形运用到产品设计细节里面。

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

看完你想说什么?我只想冷静三分钟!!!

其实说实话,对于品牌DNA的延续早在年初的时候就思考过,如何去把品牌语言在产品设计里面体现?

我当时理解是:首先要了解我们的品牌核心是什么?

我们的品牌理念是啥?品牌solgan,我们要给用户传达一种什么样的情怀?然后如何去巧妙提取产品logo里面的视觉基因,比如:某一图形元素;比如:线条/点/某一特殊图形符号,这图形一定是易于延展,拓展性强的。

然后运用到产品的每一个细节里面,比如:图标、按钮、异常状态、启动页、运营banner、情感化设计等等,如今大佬Google 已经去这样做了,而且做得很系统,包括动效都有引子。

当时也有一些产品已经这样做了,比如:韩国29cm,设计细节非常好,图形运用非常到位。国内天猫猫头运用也是渗透到产品里面去了。

Google这次又给我我们一些大胆的思考,能运用这么广的范围?

Google设计语言:如何将品牌DNA融入产品

需要注意点

Google举了几个反面例子,我们在提取图形或者使用时需要注意的几点,如下:

Google设计语言:如何将品牌DNA融入产品

注意图形的指向性和触摸大小,千万别影响用户正常使用。

Google设计语言:如何将品牌DNA融入产品

同一含义的组建样式必须一致。

Google设计语言:如何将品牌DNA融入产品

别使用形状来暗示其他含义, 这个对话框的形状表明它与它背后的卡片相关。

Google设计语言:如何将品牌DNA融入产品

总结思考

Google的本次材质设计语言的更新,我相信后续会有一些产品为了打造一些品牌调性,也会慢慢去融入更多的品牌符号语言进去。

当然我们一定要克制与统一,这是最难做的一部分,Google虽然此次系统性的解释图形的意义及延伸使用,但是某些地方稍微有些过了,所以我们在设计提取DNA时候需要克制与统一。

那么我们可以从中取学习了解如何才能让我们产品更加差异化?在同质化的今天,你是如何打造个性化与具有调性的产品呢?

如今AI已来临,机器人对设计影响极其大,从Google本次更新迭代中就大量提到了AI对产品的影响,以及如何去学习用户的习惯,然后预测用户的下一步需求。

我们以后产品会越来越智能,越来越了解人性,除了硬件的升级,研发能力加强,我们也要多去思考下:如何打造独具匠心的产品?如何打造一个无缝体验、多平台、跨语言产品视觉统一体验?

这方面跨平台多终端体验,苹果已经做得很不错了,当然还有spotify 音乐产品无缝跨平台,听歌/切歌/选歌体验。相信这只是一个开始,后续会有更多精彩

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

案例讲解 | 移动端的长表单应该如何设计?

博博

案例讲解 | 移动端的长表单应该如何设计? 

原创 UEDC  2017-10-24

作者 Echo

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

本文大纲:

1.三种主方案

2.主方案1的设计讨论

3.主方案2的设计讨论

4.主方案3的设计讨论

5.总结

1.三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:

PS:图中的举例的关键字段仅仅为举例需要。

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

2.主方案1的设计讨论

主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案2和3,减少了页面跳转操作和查看。

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。

针对于主方案1,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示:

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法在输入法中没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

方案1.1解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到顶部操作。

方案1.2提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

3.主方案2的设计讨论

主方案2的设计优缺点

优点:与主方案3相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

缺点:来回跳转,操作负荷较大,会把用户绕晕。

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

4.主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

主方案3的设计优缺点

优点:流程分步操作,相对于主方案1,用户操作成功率大幅度提高。

缺点:如果用户操作到了第三步,需要返回第一步确认填写信息的准确性,那么用户需要两次返回。

用户填写的信息做保存(缓存),用户返回上一步,填写的数据做保留。H5依旧适用,用户填写的数据保存在数据库,用户返回上一步时,同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况,且不存在按钮被键盘挡住,所以方案3.0最佳。

移动端长表单设计总结

主方案1、2和3,都有各自不同的优缺点。

一个交互流程的好坏,一个最重要的标准之一是让用户顺利完成操作流程,保证操作流程的成功率,才能完成用户的目标。以此标准来看,主方案3是最好的。

接下来探讨一个细节问题,就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?

这里分为4种情况:

情况1:内容区加上操作按钮不被键盘覆盖,建议按钮放在内容区内。

情况2:必填的内容未被键盘覆盖,非必填被覆盖,建议操作按钮放在导航栏上,例如朋友圈、QQ空间和新浪微博。

情况3:必填的表单超过一屏,建议按钮放在内容区。不建议放在导航栏上的原因有两个:

a.视觉流错误,从上往下,信息量很大,用户滑动浏览时,会忽略且很难联想点击导航栏上的操作,行业常见放在导航栏上是因为必填的不超过一屏。

b.当必填项过多时,要滑动屏幕才能填完。 把按钮放在右上角的导航栏,当用户还没填写完成,那么在按钮放在导航栏上很容易去点击,容易引导用户犯错。

情况4:必填超过一屏,且无非文本输入,建议可使用底部悬浮。


设计师的知识管理体系怎么建立?只需4个步骤,实现能力价值提升

博博

设计师的知识管理体系怎么建立?只需4个步骤,实现能力价值提升 

设计夹  2018-05-10

作者 NEPO


想要知道设计师如何根据行业变化建立知识管理体系,首先要了解行业整体的变化趋势。

 

/一/

行业的发展变化


国内UI 行业2007年萌芽,至今经历以下几个阶段:

 

随着2007年第一代 iPhone面世,国内进入界面设计时代。iPhone等智能手机的兴起,令各个行业迎来移动界面设计的业务和挑战,不同类型的设计公司承接了相关零散业务。后因为业务量不断增加,出现了专注于界面设计的工作室,就正式进入了界面设计时代,这一时期持续到2012年左右。

 

到了2012、2013年,移动互联网的普及加速了界面设计行业的升温。业务形态多元化,业务内容不断增多,UI 设计师岗位供不应求。市场上涌现大量的相关培训,UI 设计师一度成为掘金岗位。短短两年内,快餐式培训培养出大批量UI设计师。


 

同时,2012到2013年也被称为交互设计时代的开端。需求方开始从注重界面美观度转向更注重产品使用的流畅度,这一时期萌生了交互设计师这一岗位。但由于市场需求大,准入门槛低,行业内怪象丛生。大小设计公司/工作室之间价格战严重,各种压价,甚至聘请资历尚浅的实习生负责项目,出品质量参差不齐。

 

直到2016年,移动互联网创业热潮冷却,行业归于平静,进入理性探索期。建立规范,沉淀、收获,行业发生裂变。加之外部大环境,例如移动互联网、国家政策、整体经济形势等多方面的变化,使得行业走势不明朗。

 

在这个时候,对于设计师而言,唯有不断提升自身能力,找准行业内定位,才能去追赶甚至走在行业变化的前列。


 

/二/

设计师价值的演变


设计师在企业内的角色一直在变化。从以往纯粹的业务协同,到今天逐渐能够通过设计来提升产品和品牌的价值。未来设计师将更加深入业务体系,以设计驱动商业创新,实现业务价值放大。

在这个过程中,设计师的职能、视野会不断往上下游延伸,设计师自身要参与到更多的业务体系,对产品和品牌的商业模式有更清晰的认知,与业务部门的同事一起发现问题,将问题转化为设计问题,进而提出设计策略。


 

/三/

设计师的自我成长


行业趋势不断变化,对设计师综合能力的要求不断提高。据此,我们梳理出各阶段设计师能力价值的模型,将设计师按初级、中级、高级、专家级等四个层级划分,展现不同的能力需求。

设计师个人的知识体系建立,则需要围绕着这个过程进行。


1、什么是个人知识管理


设计师构建个人知识管理体系的第一步,是有意识培养收集、整理、思考的习惯。

 

  • 在项目早期有意识地收集各类头脑风暴的资料,包括照片、资料等;

  • 在项目完成后,对各个时期迭代的设计素材、稿件进行归纳整理,总结;

  • 每隔一个季度,调阅以前的项目进行研究和重新设计。

 

通过这些习惯的训练和不断重复,培养自己的思维,以期在未来的某个时间点量变达到质变。

 

个人知识管理是一套解决问题的技巧,本身不创造价值。它的意义在于融入你关注的业务领域当中,帮助你获得分析和解决问题的能力。它是催化剂,必须依附于行业。

 

2、如何根据设计师价值模型建立个人知识管理体系


知识的进阶应与个人价值模型相匹配。


初级设计师的定位是协助执行。初级者主要配合切图、延展类的工作,专注于输出,依赖于各类资料和参考素材,创新成分10%-30%。而对于很多初级设计师来讲,建设素材库可能是一个无序的过程,需要有意识地通过一些方法、借助一些工具使这个过程有序起来。

 

中级设计师要能快速进行设计延展,他们专注于推动设计任务,创新成分30%-40%。中级者需要更注重设计规范的建立和应用,使之成为潜意思里的常识。

 

高级设计师的定位是拥有自己的设计风格,能够独立完成提案,创新的成分50%以上。他们能够将此前所累积的经验,内化为自己的方法理论,并重复利用这套方法理论,完成高质量的设计作品,除此之外还能够善于总结和分享。阶段的重点在于设计创新和反复打磨方法论。


专家级设计师的定位在于具有独创性的设计趋势和概念,能够引领行业发展,创新成分80%以上。他们已经完成底层思维的构建,多数是研究者的角色,专注于探索某个行业的未来走向,找出设计能参与并发挥最大价值的节点。他们的研究成果、设计观点和理念将会对行业产生积极影响并发挥推动作用,甚至引领一个时代。

 

3、不断刻意练习

 

知识的进阶需要和设计师价值模型相匹配,同样需要找到对应的个人知识管理步骤。资源对应“浏览、储存”,“常识”对应“整理、分类”,“方法”对应“课题、分享”,“思维”对应“利用、探索”,一共4个步骤。

但这不意味我们提倡在对应阶段只做对应的事。正相反,即使是一名初级设计师,我们也会建议他尽可能多加练习,争取能够完整地完成这4个步骤并不断重复。只有不断刻意练习,你才能实现向上一层的跃迁。差别只在于,不同阶段不同步骤所花费的时间精力占比不同。

 

对于设计师相对熟悉的前两个步骤(浏览、储存),这里就不一一说明。重点讲解后面的步骤。

 

关于整理和分类,我们提倡尝试多维度分类。这样能够快速调用资源,应对不同的设计需求及问题。

分享前的梳理和复习是巩固已有知识的大好机会。分享时则是深层次思考的过程,能够开阔思路,发现问题。当然,分享之后获得的成就感也是不言而喻的,这种尊重感一方面会驱动自我不断帮助他人,另一方面激励自己不断学习,形成良性循环.

 

从利己角度来讲,分享可以把你的【隐性知识】变为【显性知识】,从而实现【让别人知道你知道】的目的,创建个人品牌,提升核心竞争力。

 

个人知识管理是一个从【海绵式】到【淘金式】的过程。无序浏览、收集、分类整理是海绵期,需要如海绵吸水般发散式学习;分享、实践运用、独立探索属于淘金期,需要总结和找到适合自己的方法、理论,而不是一味地吸收。

中间是转化期也是转折点。这个时候选择比努力更重要。只有找到合适的环境,才能去独立探索、实践应用。



九品也尽力为全员创造更加开放的探索环境。几周前我们举办了关于“如何快速了解一个新领域,并找到设计策略”的研讨会,讨论了设计师在接触全新领域及客户时,该如何快速学习,从哪些维度、用哪些方法和资源去学习;以及,如何找到与客户的共鸣、发现潜在问题、找到设计策略……

研讨会的热烈程度超乎每一个人的想象。会议中大家纷纷分享自己的相关经历和看法,会后也将讨论成果带入到项目中进行实践和修正。


未来我们会持续探索新经济时代下设计师在各个领域的角色定位和价值范围,优化、深化客户服务体系,专精、专进地提供服务。

 

-end-

使用three.js的着色器通道渲染地球模型

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们都知道,three.js库里面内置了很多着色器通道对象供我们渲染场景,本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现:

1.RenderPass这个通道会在当前场景(scene)和摄像机(camera)的基础上渲染出一个新场景,新建:

[javascript] view plain copy
  1. let renderPass = new THREE.RenderPass(scene, camera);  

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果,实现的效果超有时代感,新建:

[javascript] view plain copy
  1. /*四个参数分别为粗糙程度,扫描线强度,扫描线数量,是否转换为灰度图*/  
  2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  3. //将渲染结果输出到屏幕  
  4. effectFilm.renderToScreen = true;  

3.EffectComposer可以理解为着色器通道容器,着色器通道按照先后顺序添加进来并执行,新建:

[javascript] view plain copy
  1. /*渲染效果组合器,每个通道都按照传入的顺序执行*/  
  2. let composer = new THREE.EffectComposer(renderer);  
  3. composer.addPass(renderPass);  
  4. composer.addPass(effectFilm);  

本文实现的demo基于three.js_r86(请自行下载),代码所用js文件和图片都在下载的那个包里面,请读者自行引用。

实现效果:



代码:

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>shader_2_earth</title>  
  6.     <style>  
  7.         body{  
  8.             margin: 0;  
  9.             overflow: hidden;  
  10.         }  
  11.     </style>  
  12. </head>  
  13. <body>  
  14. <script src="build/three.js"></script>  
  15. <script src="js/libs/stats.min.js"></script>  
  16. <script src="js/libs/dat.gui.min.js"></script>  
  17. <script src="js/controls/OrbitControls.js"></script>  
  18. <script src="js/Detector.js"></script>  
  19.   
  20. <script src="js/postprocessing/EffectComposer.js"></script>  
  21. <script src="js/postprocessing/ShaderPass.js"></script>  
  22. <script src="js/postprocessing/MaskPass.js"></script>  
  23. <script src="js/postprocessing/FilmPass.js"></script>  
  24. <script src="js/postprocessing/BloomPass.js"></script>  
  25. <script src="js/postprocessing/RenderPass.js"></script>  
  26.   
  27. <script src="js/shaders/CopyShader.js"></script>  
  28. <script src="js/shaders/FilmShader.js"></script>  
  29.   
  30. <div id="stats"></div>  
  31. <div id="container"></div>  
  32. <script>  
  33.     //检测webgl的兼容性  
  34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
  35.   
  36.    let scene;  
  37.    let camera, renderer, sphere, controls, stats;  
  38.    let ambientLight, spotLight;  
  39.    let composer;  
  40.    let clock;  
  41.   
  42.    main();  
  43.    render();  
  44.   
  45.    function main() {  
  46.        scene = new THREE.Scene();  
  47.   
  48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
  49.        camera.position.set(-10, 15, 25);  
  50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
  51.   
  52.        renderer = new THREE.WebGLRenderer({antialias:true});  
  53.        renderer.setClearColor(new THREE.Color(0,0,0));  
  54.        renderer.setSize(window.innerWidth, window.innerHeight);  
  55.        renderer.shadowMapEnabled = true;  
  56.   
  57.        controls = new THREE.OrbitControls(camera);  
  58.        controls.autoRotate = false;  
  59.   
  60.        clock = new THREE.Clock();  
  61.   
  62.        ambientLight = new THREE.AmbientLight(0x181818);  
  63.        scene.add(ambientLight);  
  64.   
  65.        spotLight = new THREE.SpotLight(0xffffff);  
  66.        spotLight.position.set(550, 100, 550);  
  67.        spotLight.intensity = 0.6;  
  68.        scene.add(spotLight);  
  69.   
  70.        //创建地球  
  71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
  72.        scene.add(sphere);  
  73.   
  74.        document.getElementById("container").appendChild(renderer.domElement);  
  75.   
  76.        /**  
  77.         * 添加渲染通道  
  78.         */  
  79.        //在当前场景和摄像机的基础上渲染一个新场景  
  80.        let renderPass = new THREE.RenderPass(scene, camera);  
  81.        //通过扫描线和失真来实现模拟电视屏幕的效果  
  82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  83.        //将渲染结果输出到屏幕  
  84.        effectFilm.renderToScreen = true;  
  85.   
  86.        //渲染效果组合器,每个通道都按照传入的顺序执行  
  87.        composer = new THREE.EffectComposer(renderer);  
  88.        composer.addPass(renderPass);  
  89.        composer.addPass(effectFilm);  
  90.   
  91.        //菜单栏元素  
  92.        let guiFields = {  
  93.            "扫描线数量": 256,  
  94.            "灰度图像": false,  
  95.            "扫描线强度": 0.3,  
  96.            "粗糙程度": 0.8,  
  97.            "updateEffectFilm": function () {  
  98.                effectFilm.uniforms.grayscale.value = guiFields.灰度图像;  
  99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
  100.                effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;  
  101.                effectFilm.uniforms.sCount.value = guiFields.扫描线数量;  
  102.            }  
  103.        };  
  104.   
  105.        //新建一个菜单栏  
  106.        let gui = new dat.GUI();  
  107.        gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);  
  108.        gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);  
  109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
  110.        gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);  
  111.   
  112.        stats = initStats();  
  113.    }  
  114.   
  115.    //创建一个Mesh  
  116.    function createMesh(geometry) {  
  117.   
  118.        //初始化纹理加载器  
  119.        let textureLoader = new THREE.TextureLoader();  
  120.        //加载图片  
  121.        let uniforms = {  
  122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
  123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
  124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
  125.        };  
  126.   
  127.        //创建phong材料,并进行相应图片的贴图  
  128.        let planetMaterial = new THREE.MeshPhongMaterial();  
  129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
  130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
  131.   
  132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
  133.        planetMaterial.map = uniforms.planetTexture.value;  
  134.   
  135.        //新建一个mesh  
  136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
  137.   
  138.        return mesh;  
  139.    }  
  140.   
  141.    //渲染更新场景  
  142.   
  143.    function render() {  
  144.        stats.update();  
  145.        let delta = clock.getDelta();  
  146.        controls.update(delta);  
  147.        sphere.rotation.y += 0.002;  
  148.        requestAnimationFrame(render);  
  149.   
  150.        //没有着色器通道系统默认为WebGLRenderer.render  
  151.        //使用着色器通道后,应使用使用composer.render  
  152.        composer.render(delta);  
  153.    }  
  154.   
  155.    //左上角帧显示  
  156.    function initStats() {  
  157.        let stats = new Stats();  
  158.        stats.setMode(0);  
  159.        stats.domElement.style.position = 'absolute';  
  160.        stats.domElement.style.left = '0px';  
  161.        stats.domElement.style.top = '0px';  
  162.        document.getElementById("stats").appendChild(stats.domElement);  
  163.   
  164.        return stats;  
  165.    }  
  166. </script>  
  167. </body>  
  168. </html>  
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档