首页

全网都说好的vivo新系统,跟用户体验走了反方向?

涛涛

不知道各位铁子们的朋友圈是啥样,反正我的朋友圈几乎被vivo刷屏了;吓的我赶紧看了看微博和知乎这个号称 “前苹果设计师操刀” 的系统到底有什么不一样。

全网都说好的vivo新系统,跟用户体验走了反方向

浏览了几十篇相关文章和报道,好评如潮,我根据这些输入总结了如下几个特性:

OriginOS参考了原生安卓、iOS和Windows 10的交互特点,将传统安卓的抽屉、桌面、小部件整合起来,按用户的使用习惯和用户行为感知形成一个叫做TimeLine的时间流动线。

全网都说好的vivo新系统,跟用户体验走了反方向

在OriginOS原子界面中,vivo希望用户不再区分桌面、抽屉和插件,而是根据自己的实际需要在桌面安排想要的内容。这个内容可能是APP图标、可能是APP小部件、也可以是系统插件。总之,根据用户的行为,在桌面展示用户需要的东西。

全网都说好的vivo新系统,跟用户体验走了反方向

全网都说好的vivo新系统,跟用户体验走了反方向

在安卓设计规范之外,vivo发明了一个叫做“华容网格体系”和“原子组件”的新规范。这一规范可以看到Windows 10和iOS 14的影子。这一规范从生态角度来说,跨越十分激进,想做到理想化的状态,需要全行业来支撑这些组件具备更宽泛的信息展示能力。

全网都说好的vivo新系统,跟用户体验走了反方向

坦诚地讲vivo属实付出了很多,在细节的追求上甚至可以跟当年的锤子有点一拼了,但站在用户体验的角度上,我斗胆泼个冷水~

朗朗上口的名字是用户体验的起点

全网都说好的vivo新系统,跟用户体验走了反方向

Origin?这是个什么,经受了9年义务教育和4年高等教育的洗礼,我居然读不出来,是我不行还是蓝厂阳春白雪?不难看出,蓝厂另外一个号称“OS”的funtouch,我用了几分钟的时间才知道是“放他吃”啊!

对比下MIUI,colorOS和flyme已经弱爆了,更别提 “充电2小时5分钟,通话5分钟2小时” 这种神级文案了,所以我奉劝vivo放下包袱,说点人话。一个用户都读不出来的名字,又怎么谈用户体验呢?

自由开放的尽头就是禁锢与枷锁

我很是认同OriginOS的最大亮点就是华容网格,官方号称“通过不同尺寸磁贴的自由变化和放置,形成每个用户独有的行为驱动逻辑和动线设计”,极大的鼓励用户自定义桌面,表面看“用户自定义”是用户体验的,但这就好比把你抛在大草原里骑马,哪都能去,去哪都行,因为并没有一条路可以走…图图新鲜还行,但最终我还是不敢走。WindowsPhone当年的界面就是这种情况,官方动态配图看好的不行,可是对用户有着极大的审美要求,排列的不好可真是相当丑。

再有一点,这个网格系统让我想起了魅族Flyme的smartbar:

Smart bar 是魅族在旗舰手机 MX2 发布时推出的一项操作解决方案。它智能整合系统返回键和菜单键,使其与软件功能栏合二为一。“底栏”左右分别显示返回与菜单键,中间三个空位留给软件功能按钮。如果软件功能按钮过多,Smart bar会将其自动放进菜单栏。双层变单层,优先的屏幕显示区域被更好的释放,上下点击也不会出现误操作,而且界面更美观,风格也更加统一。

全网都说好的vivo新系统,跟用户体验走了反方向

本身是好心,但需要第三方来适配,无形中加大了第三方的工作量,显然vivo还不具备像苹果一样的号召力来牵动生态内的伙伴来搞这个。

混乱的设计语言

全网都说好的vivo新系统,跟用户体验走了反方向

△ colorOS

想比OPPO的“无边有界”,vivo没有一个统一的视觉语言来Cover,你能看到三种形式“扁平”“拟物”“新拟态”共存其中,特别是今年在Dribbble流行起来的“新拟态”,完完全全的概念设计居然被搬到系统上?真是大跌眼镜。甚至你可以看得到这是 “Fluent Design” “Metro” 和 “Materia design” 的结合体,就是没有一点苹果的影子,所以说是前苹果设计师操刀,我是有点质疑的…

全网都说好的vivo新系统,跟用户体验走了反方向

△ 微软 Fluent Design

全网都说好的vivo新系统,跟用户体验走了反方向

以图标为例,上图展示了3种截然不同的风格,在一个设计师的眼里这可能是个设计还原的事故。我理解的设计语言应该有一个完整的世界观,像Fluent Design一样,ta是对自然世界的高度抽象和概括,并不是仅仅为了好看,反观OriginOS,一个系统里二次元和三次元搞起了暧昧,就像初音和擎天柱谈起了恋爱一样让人难以接受。

食之无味弃之可惜的交互细节

全网都说好的vivo新系统,跟用户体验走了反方向

在交互方面,点击OriginOS桌面的击交互池图标,就能直接在桌面上自由调整交互形式。要知道,以往vivo每款新机都可能更换一套手势逻辑,现在OriginOS把选择权交还给了用户:用户可以按照自己的习惯,在26种不同组合当中选择更适合自己的手势操作组合。

全网都说好的vivo新系统,跟用户体验走了反方向

但这又跟锤子的“大爆炸”和“一步”类似,你说这事是个问题吧,但也不是那么大的问题,导致费了大心思又获得不了市场的局面。

双系统并行?大型A/B测试

全网都说好的vivo新系统,跟用户体验走了反方向

最有意思的莫过于双系统并行了,OriginOS和Funtouch可以自由切换,有点像我做设计不知道哪个方案更好事出了灰度大法一样。这种做法无疑让我觉着整个OS团队对自己作品信心的折扣,既然是自己认为最好的,那又何必在意批评呢,放松一点,大胆一点。

总结一下

不过吐槽归吐槽,不足归不足,vivo能有觉悟来下定决心搞搞系统这事还是值得鼓励的,明显可以看得到细节上下的功夫,也明显可以感觉vivo是从用户体验的角度出发,尽量不让APP绑架用户,最大化的把刚需搬到你能看得到的地方,所以还是要给vivo一个赞!今天的发布也才是第一步,相信未来OriginOS可以做的更好!

文章来源:优设    

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

超多案例!APP 弹窗类型总结

涛涛

弹窗是我们平时在设计APP时候绕不开的一个元素,选择合适的弹窗形式,是我们需要多加思考的地方,避免变成只会完善产品原型的线框美工。

弹窗是我们与机器界面进行互动的一扇窗,它是一种用户与产品直接对话的方式,它可以传达信息,反馈状态以及引导用户操作。弹窗分为两种类型:模态弹窗与非模态弹窗(有些地方可能翻译为无模式窗口)。

超多案例!APP 弹窗类型总结

模态弹窗

用户需要先与其进行交互,才能继续操作。也就是说它是强制性的,用户无法忽视它的存在。确保人们收到关键信息,并在必要时采取心动。

非模态弹窗

存在一定的时间限制,通常用于系统反馈,用户无需对其进行回应。

超多案例!APP 弹窗类型总结

模态弹窗

1. 对话框 Dialog / 警告框 Alerts

超多案例!APP 弹窗类型总结

出现在需要打断用户操作的情况下,可以大致分为信息下发(被动)例如:版本更新,消息通知,运营广告等。信息提交(主动),例如:修改信息,登录注册等。

超多案例!APP 弹窗类型总结

通过上面几个案例我们还能发现几个特点,按钮可以通过差异化设计引导用户去点击(例如美团的版本更新),运营类弹窗一般更注重视觉冲击力,且刻意将关闭按钮弱化远离弹窗主体,背景蒙版颜色更深一点,营造更强的沉浸感。对于承载输入功能的弹窗,需要注意键盘弹出后的位置。类似系统功能的弹窗,比如清理缓存可以考虑直接调用平台的系统弹窗。

2. 浮层 Popover / Popup

超多案例!APP 弹窗类型总结

通常在用户进行交互后出现,比如常见的下拉菜单,下拉弹窗等,更加强调弹窗的从属关系。(在腾讯ISUX腾讯文档的文章中使用了模态浮层与非模态浮层的概念,有兴趣可以去看看)。

 

超多案例!APP 弹窗类型总结

同样都是下拉弹窗,但是很多产品有着不同的处理方式,微博通过暗色系弹窗来明确区分弹窗内容与背景内容,钉钉通过加深背景蒙版来突出弹窗内容,大众点评只使用了淡淡的投影,去掉了背景蒙版,使得弹窗内容与背景内容对比无法拉开,在实际体验中相当影响用户的识别效率。

3. 操作栏 Action bar / 操作列表 Action Sheets / 操作视图 Activity Views

超多案例!APP 弹窗类型总结

跟浮层有点类似,也是通过用户的主动交互后唤出的功能菜单。通常出现在屏幕下方,占用屏幕比例较高,为了方便用户使用,底部会放置取消功能。(Action Sheets和Activity Views是IOS官网规范中的叫法。)

超多案例!APP 弹窗类型总结

这种类型的弹窗最常见的场景就是分享模块,比起其他的模态弹窗,它能够承载更多更丰富的功能(多为选择项功能)。支付宝和微信公众号分享算是最标准的Action Sheets,为了减少用户不必要的记忆负担,弹窗高度限制较低,露出更多的背景内容协助用户记忆。

4. 卡片 Sheet

超多案例!APP 弹窗类型总结

Sheet是出现在IOS人机交互指南中的一种模态窗口,形式为一张从底图出现的卡片,几乎覆盖了全部的原页面。但是未覆盖的区域也会使用暗色蒙版来帮助用户记忆暂停的任务。因为它支持上下拖动,所以比起浮层,它能够承载更多的复杂信息内容,常用于一些表格无法承载的复杂任务但又非沉浸式的情况下。

超多案例!APP 弹窗类型总结

比起Action Sheets,Sheet的屏幕覆盖率更高,且更多时候承载的是信息录入型功能。Sheet需要顶部标题告知用户当前所处步骤信息,通过底部卡片形式的叠加让用户感知当前处理的任务流程为主流程的分支任务。

5. 其他补充

超多案例!APP 弹窗类型总结

随着交互体验与产品技术的不断发展,如今的设备都能承载越来越多复杂精细化的模块。所以渐渐有越来越多特殊的弹窗形式。(底层逻辑是互通的)

超多案例!APP 弹窗类型总结

例如网易云音乐的分享使用了沉浸式模态,多个弹窗组合的形式,还有动效引导,以此来承载自身丰富的分享形式。IOS桌面使用聚焦类型的弹窗菜单,帮助用户进行视觉聚焦。

非模态弹窗

1. 提示框 Toast

超多案例!APP 弹窗类型总结

常见用于反馈用户的操作结果,反馈应用的状态改变,一般持续2s左右便自动消失,可能出现在任何位置。(不能通过主动滑动关闭)

超多案例!APP 弹窗类型总结

目前最常见的场景就是各种刷新反馈信息,一般来说存在感都比较弱,比如案例中的知乎,B站和INS。比起B站和INS,微博和知乎都在其中融入了自己的品牌特征:主题色点缀,虽然只是个小细节,但是对用户的品牌感知能起到潜移默化的作用。

2. 提示对话框 Snackbar

超多案例!APP 弹窗类型总结

Snackbar最早是出现在Android的一种弹窗形式,不过现在很多IOS端产品上也会出现。它有点类似Dialog和Toast的衍生,很多时候像Dialog一样可交互,有时候又像Toast一样有时间限制。通常出现在屏幕底部,由页面底部向上滑动出现,向下滑动消失。

超多案例!APP 弹窗类型总结

由于目前手头木有Android手机,所以截了Material Design的官方说明案例来帮助理解。主要强调了两个点:1.不要加Icon,2.只能有一个操作项;因为snackbar及时不操作也会消失,所以比较常见运用与工具类产品,需要保持操作的连贯性。例如邮箱类产品,用户删除了邮件,snackbar可以及时反馈删除成功的状态的同时提供撤销的操作。

3. 透明指示层 HUD

超多案例!APP 弹窗类型总结

HUD是出现在IOS端常用的一种非模态类型,最早出现在屏幕中间,由于容易影响用户的沉浸式体验,所以在IOS13版本中对HUD进行了边缘化调整。

超多案例!APP 弹窗类型总结

对比左侧与右侧的HUD就会体会到为什么早期会被那么多人吐槽,特别是在游戏类的沉浸式应用中,很容易破坏用户的体验。

弹窗设计时需要关注

1. 展现形式

展现形式核心是分场景,一些偏向系统报错考虑使用最简单系统的弹窗展现形式,运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做,一定要让用户懂得,这是一个弹窗。非模态弹窗一般多以最简单的形式出现,避免传递状态信息时干扰用户的关键信息获取。

2. 按钮模态弹窗一般情况下只放置1-2个按钮,信息告知类型的放个“确定”,重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗,可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上,对于用户体验上来说相当的不友好,但是对于运营数据上来说可能会很好看。

3. 动效因为弹窗承载文本量有限,得利于设备技术的发展,现在越来越多的产品会在模态弹窗中使用动态的形式传递信息,例如很多产品的功能引导。对于非模态弹窗来说,由于本身存在感较弱,动效运用于合理顺应用户的视觉动线,例如你下拉刷新后,一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。

4. 时机频率把握好弹窗出现的时机和频率

模态弹窗会直接打断用户的操作状态,一般只有在不可逆,或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下,比如运营广告,那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机,反馈一定要足够及时,这样才能不会让用户在操作中产生疑虑。

5. 文案表述

由于弹窗的信息承载量非常小,所以一定要用最精炼,恰当的表述来告知用户信息或者当前状态,可以考虑使用“动词+名词”的组合短语,例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的,文案字数要更加注意(可以考虑增加一些通用icon颜色辅助表达,比如正确使用绿色打勾)。

6. 输入内容

很多弹窗承载着表单输入的任务,然而弹窗并不适合过多的表单输入,特别还有一些多到需要下拉了- -如果需要用户填写很多表单,乖乖跳转新页面吧。况且弹窗本身出现就已经中断了用户原有的操作,还要填一大堆东西的话。。(除了IOS的Sheet,它的出现就是IOS官方为了解决常用于一些表格无法承载的复杂任务但又非沉浸式的情况。)

写在最后

由于目前手头目前没有Android,所以截图案例都是基于IOS端,下次有机会继续修改更新。不过目前来说两端很多交互形式越来越趋向共通。

借由这篇文章开了“设计控件”系列的坑,接下来会继续学习与分享其他的设计控件相关知识。包括之前的设计原则系列,也会继续分享设计心理学法则等等。最近一直在思考自己的学习框架,除了设计基础原则,设计控件外,还有设计模型以及设计工具等等。坑已挖好,接下来就靠自己一铲子一铲子去填了。

文章来源:优设    作者:Chinn 


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

内容类产品“小红点”设计研究

涛涛

“小红点”表面上是一个视觉设计问题,但背后其实是一个产品策略和如何调度用户注意力的问题。



你是否遇到这种场景,打开一个APP想赶紧用呢,结果满屏“小红点”提醒,强迫症的你必须咬咬牙把它们先消掉,才能舒心的正常使用。



这种事儿发生在微信还能接受,毕竟你妈联系你,喜欢的人联系你,领导联系你,“红色”的强提醒还是很有必要的,不然你可能错过重要的事情。


但对于非IM产品,比如内容消费类产品,大多“小红点”的出现对用户并没有那么重要和紧急,更多的是把产品意愿强加给用户(产品导流、提活)。


这种“小红点”对用户来说,只是为了消除而点击,或者麻木了连消都不想消;对平台来说“为了消除而点击的行为”也带不来真正的产品价值。


那内容类产品的“小红点”应该怎么设计呢?有什么差异化的处理手法吗?今天跟大家分享下大牙最近的思考。




 “小红点”认知思考 


说实话我最近理“小红点”理的,对它都起了敬畏之心。


“小红点”表面上是一个视觉设计问题,但背后其实是一个产品策略和如何调度用户注意力的问题。而用户的注意力如何被调度和分配,更是一个产品长期战略问题。


用户对不同产品消息提醒,接受度和投入的注意力是不同的:


比如,用户对于微信(IM产品)消息的 时效性要高于快手/抖音/微博(内容型产品);

这意味着:我妈在微信上给我发消息,我希望微信及时推送过来,不然她看我一直不回会以为我出啥事了;
而快手/抖音/微博的消息在时间上我可能没那么强的诉求,有可能白天给我推,我太忙点了也没时间看,反而晚上躺到床上你给我推我就看了。

用户对于微信(IM产品) 关系亲密度和稳定性高于快手/抖音/微博(内容型产品)。

这意味着:微信里都是熟人朋友,就算他们给我发很多消息,微信提醒我,我也觉得还好,毕竟是我朋友嘛;
但如果快手/抖音/微博里的一名路人甲给我发很多消息,我可能会觉得一直推送好烦啊,忍耐度会更低。
所以,适合别人的消息提醒的逻辑和设计,不一定适合自己。


而且,小红点的设计,最终需要回归“用户价值”。目前大部分产品对于“小红点”所追求的是:高打开率。


这个诉求在短期内可以用产品或设计手段来满足,无非就是“红点”出现的更多、更大、更闪亮。
但长期是需要靠 “红点通知的价值”是否与“对用户的价值”相匹配,通俗的说,再醒目的设计,如果内容对于用户没有价值,那么最终也只是一个“狼来了”的案例。

其实用户不是怕打扰,用户只是关心它跟“我”有什么关系。

因此,在做“内容类产品小红点”提示时最需要思考的是:如何产出符合内容型产品特点,以用户价值为中心的通知提醒设计方案。






 怎么做?


解答这个问题的核心切入点有两个:1.视觉样式(长啥样),2.展示策略(啥时候出现)。

因为读我文章的更多是设计师,所以这篇重点聊一下“视觉样式”。构成消息提醒视觉样式的核心元素有两个:a.色彩;b.形状。



 a.色彩


看了下市面大部分产品对“小红点”的色彩解法,得出以下结论:


1)大多数互联网产品的提示色采用的是“红色”;

猜测原因:大家本能的认为用“红色”总不会出错。



追溯了下“小红点”的由来:它最早来自于黑莓手机系统。


在诺基亚一统天下的时代,新消息的提醒是图标+数字的形式。黑莓在2009年推出的9700系列,搭载的黑莓系统开始使用了带星号的小红点形式。


Apple公司在2013年注册了相关专利,并在iOS系统上开始正式使用。




目前小红点已经变成了一个通用的提醒机制,且出现被滥用的趋势。



2)“品牌主色”与“红色”接近的产品,大多倾向于采用“品牌主色”作为提示色;

猜测原因:“红色”和“橙红,玫红,粉红等相近主色”并存且柔和到一起时,页面会显得混乱,所以他们把自己“主色”也作为提示色。





不过这种处理手法也一般,还是乱。



3)虽然“黄色”也具备一定的警惕和提示性,但仅存在于少数的黑色界面产品中;

猜测原因:黄色在白色背景上看不清。




4)部分产品采用“两种消息提醒色”,进行分层处理(1级页面红色,2级页面其他颜色)。

猜测原因:1级页面强提醒,2级页面用弱级色彩,降低消息的打扰度,增加用户可控感。





看到第4种方式时,我就很开心了,因为这就是我想找到的答案。平常用的时候没有意识到,在研究“小红点”的时候才发现他们设计的挺用心。


拿QQ邮箱举例:


左图,当收件箱已经有4000多封未读邮件时,它并不是出红点,或者红点上“...”或“99+”来警示我。而仅是弱化的蓝底+数字,告诉我里面有多少封。


如果是红色,会有种逼迫我必须读完才消除,对于拥有4565条未读邮件的我,应该想死。而且对用户来说,并不一定每封邮件是非读不可的。

类似“每日悦读”,采用小红点通知,能够满足平台的可控权(合理的下发策略),进行流量的分配。

右图,二级页采用的也是蓝色点,将阅读的选择权交给用户,节省用户有限的注意力,不过多打扰。






基于以上分析,我觉得第四种处理方式同样适用于内容类产品,原因是:


1)像开头所说,用户对于内容型消息的“实时性”,“关系稳定性”较弱,因此对于较强提示带来干扰的忍耐度会更低。而“红色”给人给人非看不可,不看不消的印象。


基于内容型平台特点,其实并不是所有的消息都需要全局“红色”那么强化。“红色”可在一级界面保留,满足从平台角度的可控性即可。


2)“蓝色”是第二种辅助提示色的备选方案,从以下几个角度分析:

a.从互联网产品角度:蓝色在互联网产品中常被用作“更新”;




b.从交通系统色彩心理角度:蓝色有“指示性”作用;


当然,这也不是绝对的,有时候也得基于自己产品的主色进行具体问题具体分析。拓宽下大家对“内容类产品”消息提示的色彩思路,不用太局限于满屏“红”。


好,说完“色彩”接下来我们来聊聊“形状”。




 b.形状 


“形状”决定着提醒控件的:色彩占比、承载信息、透穿能力。

目前市面上常见的形状有几种:1.小红点、2.数字+红点、3.文字+红点、4.头像+红点。


1.小红点

这个就不用多说了,一般有“小红点”的出现就以为着“这里有个新消息”或“这里有个新内容”,快来戳我。




2.数字+红点


它是由小红点演变而来的,增加“数字”代表里面具体有多少条未读,一般用在社交场景或与消息相关的APP中居多,辅助用户获取更多信息,做出判断。






但也有一些平台,为了吸引用户更多的点击,或者对于“数字+红点”下发的策略和规则不够完善,滥用这种形式,内容的价值并没有与这种形式相匹配,同时采用过于警示的红色,有些干扰用户。




3.文字+红点


不可否认,有些场景光靠一个“小红点”是传递不清晰的,采用“文字”的透穿能够让用户点击之前更多的了解信息,决策是否需要点击,这种形式还是友好的,但别满屏都是就行。



4.头像+红点


越是跟“人”相关的产品,越适合采用这种形式,以“人”为抓手促进点击。

常用于QQ,微信,微博,小红书,快手,抖音等平台,通过你关注大V或你朋友头像外显,吸引你点击。



这些形状,一般跟着产品的诉求进行灵活使用,或者并行使用。


那针对内容类平台如何选择形状呢?


对于内容类产品,一般会涉及到“内容消费者”和“内容生产者”,作为平台方如何采用更合适的提示样式对他们赋能,也是需要设计时思考的。





作为内容生产者,肯定希望自己发布内容push给更多粉丝,这样才有更多的流量嘛。


但平台也要考虑消费者的体验(不被打扰),所以平台可以根据用户消费的历史行为或数据进行精准匹配不同的样式。

拿短视频产品举例,消息提醒可分为:强、中、弱不同提示样式。



弱提醒:


当内容生产者刚被关注时,只给粉丝下发普通“小红点”或“文字+小红点”消息通知。


中提醒:


当通过粉丝历史操作/观看数据,发现TA对你的内容高度感兴趣,你更新时他都愿意看且完播率高时,那平台就可以赋能“中提醒”的样式给你,外露更多信息带来更多流量(转化如果不高可再打回“小红点”);


强提醒:
当粉丝手动订阅你直播或短视频时,说明他对你足够感兴趣,这时候平台可以给你“强通知”样式的特权,将内容推送给用户(但要给用户提供关闭提醒的入口)。



作为内容平台,这种做法即保证了消费者的体验,也满足了内容生产者的流量分发的诉求。不过以上的“形状”案例只是一个简单的思路,优秀的做法还有很多。

意思是这么个意思。




 总结


大致的结论是: 基于“内容型产品特点”和“以用户价值为中心”角度,可以保留一级页面“红色”提醒,给平台一定的控制权;选择次级界面辅助提示色,降低干扰性,给用户更多选择权(使他们不想消可以不消,也是舒服的)。

基于内容平台中“内容生产者”角度:可增加更多元化提醒样式,分层处理消息类型,赋能创作者的同时,也让用户不错过真正关心的内容。






整体来看,虽然它的名字叫“小红点”,但我们在设计的时候不能只局限于“红”和“点”。它可以是任意“颜色”,它也可以是任意“形状”,本质是如何更和友好的提醒用户。


文章来源:站酷    作者:苏大牙


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

拼多多抢走了我妈,从淘宝手里

高劲

编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。

上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。

我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。

弄完之后,我们又展开了这样的对话:

我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多啊!

我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!

我:但是拼多多很多假货啊!

我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!

我:……

我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。

我:我早就叫你开个支付宝账号,你自己又不开!

我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……

我:哪有黑客黑你,你又不是马云……

我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。

我:好吧。

我妈:以后我就用拼多多,我那些舞友都在用!

我:你开心就好。

我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像:

  • 年龄特征:60岁左右
  • 工作与生活特征:退休在家,时间较多
  • 消费能力:退休金4000元左右
  • 家庭情况:已有孙辈
  • 人际关系:以广场舞舞友、同学、工友、插友为主的人际关系圈,集聚在微信上
  • 消费态度:不追求牌子,追求低价
  • 网购习惯:淘宝的老用户,但没有支付宝账号;网购品类主要为衣物及家居用品
  • 触媒习惯:微信(微信群、朋友圈)、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?

首先,我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。

其次,来看看用户定位。

根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。

那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。

另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。

品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢?

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢?

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。

在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。

在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。

谈到这里,我还意识到一个重要的问题。

从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。

再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗?

一点个人小想法,想到哪写到哪。

如果你有不同的意见和想法,欢迎评论或留言。


文章来源:人人都是产品经理           作者:@源记物语


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

TikTok 的真正优势,从来都不是算法(上)

涛涛

在如今大数据的时代,一些软件会根据我们的地理位置、性别、喜好等等进行算法推荐;能够对一定规范的输入,在有限时间内获得所要求的输出;比如TikTok,以用户为中心进行推荐,度很高;本文作者分析了TikTok 的真正优势,我们一起来看一下。

字节跳动往往被说成是一家算法公司,很多人认为, TikTok是靠算法的黑科技才取得成功的。

事实真的是这样吗?

eugenewei认为不是:TikTok的算法跟其他公司使用的并没有太大的不同;TikTok最大的优势是它采取了对算法友好的设计模式,在自己内部建立了一个飞轮,帮助其机器学习算法看到了优化自己所需要看到的东西。

原文发表在其个人博客上,标题是:Seeing Like an Algorithm;篇幅关系,我们分两部分刊出,此为上半部分。

划重点:

  • TikTok的算法本身没什么不一样;
  • TikTok的不一样在于它的app设计让算法“看到”有效地执行匹配工作所需的所有细节;
  • 现代社交网络巨头的傲慢导致自己陷入到错综复杂的问题不能自拔;
  • 为了让自己的算法发挥最大的效用,TikTok成为了自己的训练数据源;
  • 以用户为中心的设计模式一直占据主导,但算法友好型设计正在逆袭;
  • 为了最大限度地服务好用户,请先服务好你的算法;
  • TikTok的设计使得它的视频、用户和用户首选项对For You Page算法清晰可见。

在我上一篇关于TikTok的文章中,我讨论了为什么它的For You Page算法是让TikTok发挥作用的结缔组织;它就是主板的总线,用来连接和关闭所有的反馈回路。

但是,在急于了解为什么各家公司都想收购TikTok的情况下,如果字节跳动把这款热门的短视频app拆分出来的话,围绕着它的算法的炒作已经有点被异化成那种往往被归纳为最近西方对中国科技分析的套路了。

在这篇文章中,我想讨论一下TikTok的设计究竟是如何帮助它的算法表现得跟它一样好的。

上次我讨论了为什么FYP(For You Page)算法是TikTok飞轮的核心,但是如果这一算法不够有效的话,那整个反馈回路就会崩溃;哪怕你对TikTok或短视频领域不感兴趣,了解一下这个算法是如何实现性也很重要,因为各行各业的公司都日益面临着核心优势是机器学习算法的竞争对手的竞争。

我想讨论的是TikTok的设计是如何帮助它的算法“看”东西的。

一、《国家的视角》 Vs 算法的视角

James C. Scott的《国家的视角》(Seeing Like a State)是那种很独特的书,看过之后你会意识到硅谷就有那种使用(滥用)清晰性这个术语的类型。

我是在看到Venkatesh Rao的书摘之后第一次听说这本书的,如果你不打算看原著的话,那篇书摘仍然是很好的tldr入门读物(Scott Alexander的书评也不错,只不过他的书评也已经长到可以做自己的tldr );不过,我建议你还是要好好看看原著。

Scott那本书的副标题是“那些试图改善人类状况的项目是如何失败的”。

这本书可以提高你对日常生活当中的各种意外后果的意识,当我们也有着伟人一般的傲慢时,不妨保持更谦卑的态度;这个世界比我们想象的要更丰富、更复杂。

比方说,Scott的讨论有很多都跟我们的现代社交网络巨头的某种傲慢感有关;这些占主导地位的应用的目的就是要提高自身用户群的清晰性,其中包括促进互动、防止用户流失并最终提供定向广告;反过来,这又导致他们的母公司陷入到错综复杂的问题之中,至今都未能摆脱困境。

不过这是需要另行讨论的话题了;Scott关注的是民族国家如何用简化的抽象在概要的层面 “看清”自己的公民,而我想讨论的是TikTok的app设计是如何让它的算法“看到”有效地执行匹配工作所需的所有细节的——这篇文章讨论的则是是应用和服务在设计时最大限度利用机器学习新模式。(我知道,这种讨论有点讽刺意味,因为这种“看法”有可能被塑造为另一种决定用户看法的看法,一种美国的科技公司只能作壁上观的看法。)

二、TikTok把自己变成算法的训练源

近年来,至少在像我这样的门外汉看来,我们意识到,只需要通过把训练的数据量增加几个数量级,机器学习就可以取得很大程度的进步;也就是说,就算算法本身跟几年前没有太大的不同,仅通过在更大的数据集上对其进行训练,人工智能研究人员就能取得像GPT-3这样的突破(GPT-3暂时给科技Twitter们带来了高潮) 。

当大家说TikTok的算法是取得成功的关键时,很多人会把某些神奇的代码段看作是公该司的秘密武器。

俄罗斯当代后现代主义作家Viktor Pelevin说,所有的现代电影都是同一个主角:一个装满钱的公文包;从《死吻》的放射性物质公文包,到《低俗小说》里面的那个类似的里面金光闪闪的、不知道装着什么的公文包;从《魔头对捕头》(The Formula)的创世纪方程,到大卫·马梅特(David Mamet)的《西班牙囚犯》(The Spanish Prisoner)里面的秘密的金融处理,我们长期以来一直对有魔力的麦格芬(McGuffin,推动情节发展的对象或事件)感到痴迷。

最近几周,对TikTok算法的讨论已经把它提升成了类似的东西,这个算法就好像是《夺宝奇兵》系列电影(如《法柜奇兵》、《圣战奇兵》…)里面那些神秘的考古文物一样。

但是这个领域大多数的专家的态度不会是这样,他们不相信TikTok在机器学习推荐算法方面取得了迄今为止我们所不知道的进步;实际上,大多数人会说,TikTok的做法大概跟别人的解决问题方法无异。

但是要记住的是,机器学习算法的有效性不仅仅取决于算法,还要取决于利用某些数据集训练过后的算法;GPT-3也许并没有什么新鲜,但是通过接受大规模的数据训练,以及设置大量的参数,其输出往往令人惊讶。

同样地,基于自身数据集训练过的TikTok FYP算法,在将视频与认为该视频有趣的人进行匹配方面非常准确有效(而且,同样重要的是,在不向那些不认为视频有趣的人推送方面也很有效) 。

有些领域,比方说文本,可以轻松获得大量训练得很好的数据;比方说,要想训练出像GPT-3这样的AI模型,你可以到互联网、书籍等上面找到大量可用的文本集;如果你想训练视觉AI,可以在网上和各种数据库里面找到大量照片;训练仍然很费钱,但是至少你手头有足够的训练数据。

但对于TikTok (或者抖音)来说,它那擅长推荐短视频给受众的算法可就没有公开可用的这么大规模的训练数据集了。

去哪里可以找到模因、小孩跳舞、对口型、可爱的宠物、推销品牌的网红、士兵越障训练、小孩模仿品牌等内容的短视频呢?就算你有这样的视频,又该去哪里找到关于大众对此类视频感受的可比数据呢?除了Musical.ly的数据集以外(主要是美国喜欢玩对口型的青少年),这样的数据并不存在。

这是一个独特的鸡生蛋还是蛋生鸡的问题,如果没有这款app的的摄像头工具和滤镜,以及拿到版权的音乐剪辑的话,TikTok的算法需要训练的那种视频就很难创建。

那么,这就是TikTok设计的魔力所在:app会激发和促进视频的创作与浏览,算法然后用这些视频进行训练,再反过来激发和促进视频的创作与浏览,形成反馈回环

为了让自己的算法发挥最大的效用,TikTok成为了自己的训练数据源

三、以用户中心 Vs 对算法友好

要了解TikTok是如何做出这么强大的学习飞轮,我们需要对它的设计进行深入研究。

关于科技的UI设计,主导的思想流派(至少是我成长的过去二十年里)关注的重点是消除用户所做事情的摩擦,并让他们在此过程中感到愉悦;其设计目标是优雅,什么是优雅:优雅就是直观、巧妙,甚至时尚。

也许没有一家公司比苹果把这种设计风格体现得更加淋漓尽致,巅峰状态下的苹果总能把自己的软硬件做出优雅的感觉——“就是这么好用(it just works)”,但同时又很迷人,让用户觉得很雅致。

(苹果控制风格的名声就没那么光彩了——手机、笔记本电脑不可替换的电池,目前有关应用商店规则的争论)在发布新品的主旨演讲时,展示一块硬邦邦的铝块是如何变成崭新的MacBook Pro机身的视频的理由是什么?

因为听到工业激光把那块铝雕刻成一体化机身时发生的声音很性感?然后,当你在咖啡店用那台笔记本电脑敲击一封电子邮件时,在你的潜意识里,有关那段视频的一点残留的记忆里面会不会让你的多巴胺受到一点点的触动?

这种以用户为中心的设计模式在这么长时间以来一直占据着主导地位是有原因的,尤其是在消费类技术里面。

首先,这的确有用——苹果的市值最终超过了2万亿美元(还记得假冒的Sean Parker说过十亿美元很酷吗?那还是十年前,现在十亿美元不再是金牛了,财富的量级在飞速发展。)

此外,我们生活在大规模网络效应时代,应用了Ben Thompson的聚合理论并获得大量用户群的科技巨头,可以在他们所参与的市场当中发挥出不可思议的杠杆作用——要先做到这一点,最佳的办法之一就是设计出能比竞争对手更好地满足用户需求的产品和服务

长期以来,这种设计流派一直占据着主导地位,以至于我几乎忘记了过去时代惯常采用过的一些蛮不讲理的软件设计了。(不要把它跟野兽派设计混为一谈,后者其实就像它在建筑方面的表亲一样,在设计上是相当美的。)

但是,如果要想最大限度地服务好用户的关键要取决于对机器学习算法的训练呢?如果这个ML算法需要庞大的训练数据集该怎么办?在机器学习方兴未艾的时代,这日益成为关键的设计目标。

在考虑如何设计app时,你日益必须考虑怎么才能最好地帮助算法去“看”——为了最大限度地服务好用户,请先服务好你的算法

TikTok让我着迷,因为不管是意外还是有意而为之,这都是一个为了尽可能多地给自己的算法提供有用信号的现代app的典范——这就是我所谓的算法友好型设计的范本。(我曾经想过把它叫做以算法为中心的设计,但觉得这种说法有点过头了;一个帮助算法看见东西的设计到头来仍然是为了给用户提供尽可能好的体验。)

我们仍然可以认为这只是以用户为中心的设计的一种变体,但是对于那些大量采用机器学习算法组件进行产品开发的团队来说,明确地承认这一点也许有用;毕竟,当产品经理,设计师和工程师开会讨论app设计时,算法是不会出席的;但是,对算法的训练需求必须得到体现。

James Scott在谈到《国家的视角》,谈到了城市设计等领域的巨大变化,比如让土地面积和业主数量对征税者“清晰可见”;TikTok的设计使得它的视频、用户和用户首选项对For You Page算法清晰可见;这种app设计履行了它的主要职责之一:“像算法一样看东西”。

我们不妨仔细看看,TikTok打开后就是“For You Page”页面,然后直接进入视频。这就是它的样子。

这个是到目前为止有史以来最热门的TikTok视频,截止到我发布这篇文章时,它的34.1M个点赞可能已经不止了;你可以看看有关这条TikTok是如何诞生的故事,看过之后你仍然会觉得这是一个充满悖论的文化难题,但是你看过后会喜欢的。

我把这个给我侄女看了,然后我们一起循环播放了好几十次,然后我们一起开始大喊“从M到B,从M到B”,然后一起笑了起来,这是我在这场疫情当中真正的感受不是绝望的少数几次之一。

整个屏幕被一个视频填满。只有一个视频,视频用竖屏全屏显示;注意,这是不能滚动的,而是分页。视频几乎是立即自动播放(接下来的几个视频被加载到后台,所以轮到的时候可以很快播放出来)。

这种设计让用户要面对一个紧迫的问题:你对这个短视频的感觉如何?就这个短视频。

从视频开始播放到现在,你所做的一切都是你对该视频的感受的信号;你是不是在它还没播放完就滑向了下一个视频?是的话就隐含(尽管边界是显性的)表示你对它不感兴趣。

你是不是看了不止一次,让它循环播放了好几次?似乎不知怎的它就吸引了你。你有没有通过内置的分享面板分享了这段视频?这是正面情绪的另一个有力指标。

如果你点击右下角旋转的LP图标,看了更多有着同样背景音乐的视频的话,就是该视频对你胃口的进一步信号;音乐线索往往是模因的代名词,现在TikTok又有了一条为你推荐视频的轴线了。

还有,你是不是跑去看了看视频创作者的个人资料页面?你是不是看过她其他的视频,然后还关注了对方?是的话说明你除了欣赏视频以外,也许你还特别欣赏对方这个人。

但是,我们不妨再退后一步,看看这你还没有看到这个视频之前,TikTok的算法自己是怎么“看见”这个视频的;在这个视频通过FYP算法发送到你的手机之前,TikTok的运营团队有人已经看了这个视频,并添加了大量相关标签或标记。

这个视频是跟跳舞有关的吗?是对口型?还是视频游戏?有小猫吗?还是花栗鼠?是搞笑的吗?主体是男的还是女的?大概几岁?是群视频吗?背景在哪里?用的是什么滤镜或视觉效果?如果里面包括有食物,是什么食物?等等,所有这些标签都成为了算法现在可以看到的功能。

视频还要在视觉AI这里处理一下,并为自己能看到的东西做出贡献;TikTok有些摄像头滤镜能够跟踪人脸、手或者手势,所以视觉AI往往在视频被创建出来之前就被调用过了。

这个算法还可以看到TikTok所了解到的有关你的信息,你过去喜欢什么类型的视频?有关你的人口统计学信息或心理学信息有哪些?你是在哪里看这个视频的?你用的是什么类型的设备?等等,除此之外,还有哪些其他用户跟你相似?


文章来源:人人都是产品经理    作者:纸盒小卡车


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

这就是仪式感设计?看完我懂了

涛涛

随着生活品质的提高,我们越来越注重“仪式感”,过年、过节、生日等,我们都想有一些仪式感来庆祝,设计产品也不例外,这些小小的仪式感可以给人带来好感;本文作者分享了关于仪式感的设计,我们一起来看一下。

在我们日常生活中,存在着各种各样的仪式感:婚庆、过节,升国旗奏国歌,它可以使我们的生活充满各种趣味性,是人们表达内心最直接的方式。

而在互联网产品中,为了使用户的产品体验更贴近于真实生活、有情感共鸣,不少产品在仪式感这块也下不了不少功夫;不管是出于竞争需要,还是日常用户运营。

所以这次写下这方面的内容,以便给自己的设计提供更好的切入点和灵感参考,避免毫无头绪。

一、有意思的大厂案例

先来看看一些大厂的、有意思的仪式感设计:

网易云音乐:收听特定的歌曲时,会有右上角会有’LTL’入口。

这就是仪式感设计?看完我懂了

点击会联动触发手机闪光灯,对歌曲赋予浓浓的演唱氛围(黑夜中效果更绝,亲测~)。

这就是仪式感设计?看完我懂了

爱奇艺:中秋国庆期间,点击视频时会有“烟花”效果,让用户看视频也能过节。

这就是仪式感设计?看完我懂了

QQ音乐:用户生日时 直接将歌单封面设置成祝福语,一进入应用就能感受到满满的祝福。

这就是仪式感设计?看完我懂了

财付通:实名首次进入后,以“vip客户卡”的形式欢迎用户。

这就是仪式感设计?看完我懂了

看了以上例子,相信你对仪式感的作用也有一定的了解,它可以:

  • 营造使用氛围,增加用户好感度;
  • 构建产品形象,传达品牌感知;
  • 提供差异化表现,增加竞争力。

除了以上作(废)用(话)之外,个人觉得最好的一点,就是可以加强设计师的创意表现,让设计方案更加有创新点。

二、如何设计仪式感?

看了这么多例子,相信你自己有的判断;在笔者个人看来,互联网产品的仪式感设计无非由两部分组成:特定的场景支持+贴近现实的表现。

举例说明:微信读书的电子签名。

只有在微信读书里购买书籍后(场景触发),才会模拟现实生活进行签名(现实表现)。

这就是仪式感设计?看完我懂了

三、特定的场景支持

任何形式的设计都是需要场景支持的,否则无从谈起。

笔者觉得,以下3个切入点足以覆盖绝大多数场景,帮助挖掘出可设计仪式感的点。

1. 时间与日期

1)时间

一天中某个时间点、时间段,引发该时刻里对用户的情绪与感知;可应用的时效性较长,可以用于每天中的某个时刻。

举例:

下班点打卡,钉钉都会对辛勤工作的员工进行暖心慰问,用仪式感来减少工作一天的负面情绪。

这就是仪式感设计?看完我懂了

之前企业微信的启动页,针对深夜时间段会进行员工关怀。

这就是仪式感设计?看完我懂了

而除了上诉之外,是不是还有更细分的时间维度等着我们去挖掘与设计呢?

像清晨与黄昏、早上/下午/晚上、早茶/下午茶/宵夜/时间点?是不是可以挖掘出更多仪式感场景?

2)日期

可以是各种节日、特定事件日期、天数、季度等等;这种应用的时效性不是很强,只能满足于特定的日期,一般作为运营事件使用。

如百度搜索“愚人节”时,出现的结果会倒转过来,愚你一下很开心。

这就是仪式感设计?看完我懂了

抖音会记录用户的使用日期,针对性进行信息提示。

这就是仪式感设计?看完我懂了

遇到喜庆或沉痛节日时,不也得针对其氛围进行仪式感设计。

这就是仪式感设计?看完我懂了

文章开头的QQ音乐对用户生日的祝福、爱奇艺国庆期间的烟花点击效果。

2. 特定的行为条件

这个不像前面都是产品/系统主动触发仪式感,而是只有当用户满足一定的条件才会触发。

是一种较为被动的反馈设计。如操作结果、等级阶梯。

1)操作结果

当用户执行对应的任务后,根据任务的状态、属性等关键词提炼出合适的仪式感。

爱奇艺在直播预约成功后,针对预约成功以“入场券”的形式设计。

这就是仪式感设计?看完我懂了

和平精英在吃鸡(游戏结束)后,不也有一个举杯胜利的表现。

这就是仪式感设计?看完我懂了

文章开头的微信读书也是一个例子,在用户购买完成后触发。

继续举一反三的话,除了操作成功、结束之外,像无法操作、操作失败、操作中断等状态,是不是也可以挖掘出对应的仪式感呢?

2)等级阶梯:

当用户的操作/任务累积到一定的门槛、等级或阶梯后,所赋予的一种荣誉、奖励设计。

鼓励用户执行更多的操作/任务,以获取更珍贵、稀有的目标。最常见的就是各种勋章、会员、积分设计。

这就是仪式感设计?看完我懂了

3. 首次与新事物推荐

这种应该是被运用得最广的方式,常见于首次进入/对新用户的欢迎、新功能的介绍、新内容的推荐。

1)首次使用的欢迎:

如有道精品课,首次进入时以“入学通知书”的方式欢迎用户,打造符合产品调性的仪式感。

这就是仪式感设计?看完我懂了

再如健康160的欢迎新老用户回归。

这就是仪式感设计?看完我懂了

还有文章开头的财付通vip卡欢迎动画。

2)新内容的推荐:

如UC浏览器,对首次进入的用户都会引导选择感兴趣的内容类型,以便推送更符合兴趣的资讯信息。

这就是仪式感设计?看完我懂了

暂时以这些场景举例说明,其他的你是不是也能举一反三呢?欢迎底部留言一起讨论。

四、贴近生活的表现

有了相应的场景支持后,具体的仪式感设计才能顺利成章。

而仪式感在表现上由2个因素构成:主体与环境。

1. 主体

组成仪式感的核心部分,是传达感知、引起情绪的重要体现。

而主体的设计,往往模拟现实生活中某事物元素,将其特征点进行图形化,是最直接的灵感来源。

这就是仪式感设计?看完我懂了

这就是仪式感设计?看完我懂了

2. 环境

虽然主体的设计已完成了仪式感的大部分工作,但是鲜花也需要绿叶的衬托呢。

拥有环境的衬托,可以让主体的整体氛围更上一层楼,文章开头的网易云音乐就是一个例子。

还有58同城的勋章设计,有环境光的衬托显得更加闪亮。

这就是仪式感设计?看完我懂了

五、最后

说了这么多,仪式感的设计更多也只是 在基础内容/功能上做体验优化,属于一种“锦上添花”的作用。

应该先满足基础内容/功能的“好用易懂”的情况下,再来设计仪式感上的“好看好玩”,不要本末倒置。

‍‍‍还有,‍‍‍不同的仪式感存在着不同的用户心理,因此需要特别注意该场景下的用户心理或情绪。

这就是仪式感设计?看完我懂了


文章来源:人人都是产品经理    作者:和出此严


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

从饿了么超级会员改版,聊聊背后的产品设计

涛涛


之前我也无意中看到饿了么把「超级会员」改成了「吃货卡」,感觉还不错。虽然并不了解饿了么的会员业务,但这次改版体现了一些有趣的设计思路,正好对应了我们在设计上的疑惑点。于是就着该读者的问题,一起来聊聊其中有意思的点。

从饿了么超级会员改版,聊聊背后的产品设计

比如,如何在同质化的功能上做出一些创新且有价值的改变;如何降低营销感,把商业需求统一到用户需求上;如何不需要再纠结今天到底吃什么了……

我们「以为」的,就是真实的吗?

今天的文章,从一张图开始。

在《认知与设计》的第一章里,作者提到了关于感知的话题,在影响感知的几种方式里,第一种就是「感知的启动」,其中很典型的案例是下面的一张素描,你能看出画面中是什么吗?

从饿了么超级会员改版,聊聊背后的产品设计

一条斑点狗。

或者你没看出来?如果你看到了这只狗,就很难再回头把这张素描看做随机无序的点了。就像书里说的那样,我们看到的很多东西取决于别人告诉我们它是什么。

产品功能也是如此,它告诉了我们这是什么,我们就会这么认为。如果一开始设计的就是吃货卡,也许很多人不会想到它是会员的变体,而是仅仅当做一个福利卡来看了。对于超级会员和吃货卡的感知差别仅仅在于定义上的不同,而非本质的改变,这是很有意思的一个点。

拿生活中的一个例子去看,相同的杯子,我们可以叫它咖啡杯,同样也可以叫它养生杯,当面对不同的叫法时,我们是不是就会产生不同的代入感?

而产品大多数时候都是通过渲染场景、营造氛围来达到这个目的,我们通常将其称之为产品定位。

所以产品需要定位,需要一个鲜明的形象,然后让产品中的所有信息、功能、风格、色彩都去表现它,才能树立起用户的认知,带来深入人心的记忆点。于是,相同的功能在不同产品中的差异除了内容的填充、使用的方法、规则的定义外,还可以改变的就是 —— 包装。

就饿了么这次改版的「吃货卡」而言,它本身并非一个新功能,只是「超级会员」的一个变体,会员的本质就是产品根据用户的投入而给予的特权。所以产品只是集合了这一部分有投入有特权的群体罢了,至于怎么称呼,会员也好、吃货也罢,在产品层面都是一样的。

会员,官方的解释是:通过正式手续加入某个会社或专业组织的人。

在任何地方,我们都可以成为会员,但不是任何地方,我们都能变成吃货。所以吃货卡这个定义,一下子就把强烈的产品属性透传了出来,并联结了我们的目标用户,会员的「积分」也自然地转化成了「吃货豆」,这种概念上的改变,就是一种包装。

这是我在这篇文章中要聊的第一个点,就是通过品牌塑造来重新包装一个功能,而包装的形式要依附于产品定位。

第二大点,我们来聊营销广告与产品功能的碰撞。

在广告滥用和形式多变的今天,我们已经逐渐习惯至无感那些具有丰富色彩和设计元素的广告内容,以至于可以自动筛选出它们,打上标签,从我们的视觉中过滤出去。

但总有一些广告似乎天生具有一种隐秘的商人气质,带着精明的窥探,去诱导大家浏览、点击、分享、消费。

广告是产品的一种营销语言,而营销有时就是让利,以广告的形式,通过优惠与福利来抓住用户的心,而用户往往会认为这是欺骗。那么当商业目标和用户目标无法趋于一致的时候,我们又该如何让用户为产品站台呢?

首先,对于广告的刻板印象常源自我们接触广告的失败经验,其大致可分为三类。

第一类「虚假利益」。夸大好处,或拿非最终的利益引诱,直到我们了解了详情才发现自己是个被骗的傻瓜。

于是,产品通过弱化营销性的信息流广告,并加上清晰的广告标签,公开透明的让用户感受到自己被平等地尊重,即满足商业利益,又解决了用户的诉求问题,将两者利益统一。

从饿了么超级会员改版,聊聊背后的产品设计

但这一类并不是我们今天要聊的重点,我们继续往下看。

第二类「难度操作」,比如那些假的关闭图标、广告背景中极小的跳过按钮、或者在领取福利时的层层步骤,都是用户在接触广告时难度操作的体现。

前两种对用户来说无法原谅,而最后一种往往会作为一种营销策略,去增加用户获得奖励前对产品的投入,比如浏览、转发、消费等,这是没有问题的,关键是用户是否提前获知了我们得到奖励的所有条件。我们厌恶的,是超出我们预期的那些负担任务。

从饿了么超级会员改版,聊聊背后的产品设计

吃货卡的任务模块在优化后就直接展示了任务详情。但是首页领任务的提示却隐藏了任务的重要条件,比如「下 2 单,赚 400 吃货豆」,实际是两笔超 20 元的订单。那是否会存在一类用户,没有点击查看详情而直接下单,下单之后,发现并没有完成进度?因为外卖费用没有超过 20 元。

如果产品是担心用户因为 20 元的门槛而不做任务,那么在点击查看后的任务详情不是把这一类用户推向进一步的否定吗?我们因这样的手段能够额外获得多少增长,同时,又有多少用户因此对所有的任务失去信任,我们无法准确计算,因为得到是显性的,而失去是隐性的。比如一些音乐产品的会员机制,用户办理好之后想听某首歌,发现还需要另外再付费,于是卸载了软件。

另外,改版后吃货豆的领取方式也对应发生了改变,不是直接的发放,而是转为点击领取。

虽然趣味的动效消解了部分用户对冗余操作的厌恶感,但还是能从反馈渠道中看到用户对这种强制限时去领取奖励做法的反感。这种领取模式也可说是一种变相签到,只不过这种签到的奖励不是你通过额外行为主动赚取的,而是在已经得到的情况下被迫操作领取,和支付宝领取积分的方式一样。限定时间内不领取,还会消失。

从饿了么超级会员改版,聊聊背后的产品设计

游戏积分的领取,之所以有领取操作,是因为积分积攒的宝箱奖励,是额外的收获。玩家玩游戏的目的是体验游戏而不是为了积分与宝箱,这两者之间是有差异的。

多余的操作看起来增加了页面的曝光度,带来了更多的转化可能,却「实在」地提高了用户获得奖励的成本,从而间接降低了奖励的价值,因为投入产出比太低,所以用户常常宁愿放弃这样的奖励。

产品想要让用户感觉到方便和实惠,体验满意,但又通过这种点击才能领取的方式,强制绑定用户与页面,来触发用户的下一步行动。表面上可玩性增强了,实则是体验感的缺失。

第三类是关于「过度选择」。交互设计有一本经典的入门书籍叫《Don’t make me think》,描述了如何通过设计帮助用户理解与操作,来提高产品的易用性。同理,当我们思考营销在产品中的表现时,难道就不需要考虑用户了么?

过去的营销就像过去的产品一样,以产品实现而非用户为中心,表现产品的实现方式而不去考虑用户的心理模型。

比如软件需要我们命名才能保存,特别是系统自带的记事本软件,不仅需要自己输入文件名,还用 *txt 占了命名位,使用星号让我们无法直接保存。相比之下,很多软件已不再需要用户命名,会直接提供默认命名,还有像 Typora 这类产品,可以自动将我们的第一段文本内容作为默认文件名。

从饿了么超级会员改版,聊聊背后的产品设计

从饿了么超级会员改版,聊聊背后的产品设计

对营销而言,以实现为中心的设计想法体现在制造了尽可能多的活动类型和规则上,希望触达不同的用户。而事实是,在过度选择的压力下,很多用户直接选择了忽视。

如果去看饿了么会员旧版的设计,我们会发现它有红包、奖励金和折扣商品三类福利,三者的关系是相对分离的。

从饿了么超级会员改版,聊聊背后的产品设计

其中的规则是,当我们成为了会员:

  • 可以直接领取红包;
  • 可以通过消费得到奖励金,再去兑换红包;
  • 可以直接低价购买红包;
  • 折扣商品与红包无关,只展示优惠价格,可直接购买。

所以我们有三种获得红包的途径:领取、购买、兑换。

再看新版吃货卡的设计,在直接领取与购买红包不变之外,新版强调以用户的消费去获得奖励,不管是直接兑换红包或者兑换店铺的专属红包,都是以吃货豆兑换为核心。相比旧版,将商铺折扣商品,替换为吃货豆兑换专项红包,其实本质是一样的,无非就是为了提高吃货豆与吃货卡的利用率罢了。

从饿了么超级会员改版,聊聊背后的产品设计

在这样一个前提下,产品增加了红包类别,给予了用户更多选择的自由。虽然随着红包的分类维度变多(专享和吃货联盟的红包、特定品牌和分类的红包、具体店铺的红包),产品的规则趋向复杂,但是理解变简单了,我们也只需要做好兑换这一件事就可以。

复杂的规则仍然可以呈现出简明的设计,我们不需要用户来负责过滤这些复杂信息,而应当要求产品,站在用户这边,去降低理解成本。自然地,产品与用户就能并轨而走,商业需求与用户需求也可统一。

当然,或许也会有用户反感这样的功能被活动化,但不得不说,这确实是一个品牌的升级。

这篇文章从几个角度聊了「吃货卡」好与不好的地方。

当然它不仅仅是一个会员功能的改版,在概念玩法上也是一种升级。从设计角度看,确实有创意的表现,虽然也有不可取之处,但是它背后的设计思考是值得学习的。

我们知道,设计虽然会受到许多框架和规则的限制,但从问题出发,思考方案的过程才是设计本身最有意思的地方。好比游戏,也是因为规则与框架的限制,以至于才有了如今丰富多彩的游戏形态。

所以即使看向那些常规的功能和成熟的设计,我们也可以融入一些不一样的东西,站在过去到现在的经验上,再做出一点改变,使其更具可玩性。


文章来源:优设    作者:呆呆U理

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

设计师要懂的“产品导流”背后知识点。

鹤鹤

设计师不仅要低头画图,也要了解“图”背后的逻辑和需求本质 。嗯,下面用直白的语言跟大家聊一波相关知识点。




说到产品导流,大家都不陌生。



身为设计师,应该经常听到产品同学提需求:“在这里给XX功能加个入口吧”,“这个宣传新产品的banner可以再大一些吗”,“这个场景可以宣传下我们的新功能诶”…


很多设计师在不了解背景的情况下往往内心是排斥的,心想怎么老是在犄角旮旯里加这么多小广告啊,都不关心用户体验的嘛,balabala...



但是有谁在吐槽时,深究其背后的原因呢,举起小爪子让大牙康康。比如:什么是产品导流?为什么需要产品导流?它有哪些的形式?如何做效果好又能兼顾产品体验呢?



最近正好在搞相关的事情,所以撸一篇文章,分享一波相关思考。





什么是产品导流? 



“产品导流”指的是:一款产品采用某种形式,增加对另一款产品/功能的曝光,使自己的用户群体(流量)去使用或探索另一款产品/功能。



眉头一紧,感觉上面的描述有点拗口,善良的牙尝试着用大白话,把导流和被导流的关系,分为两种形式解释下:1.父子关系;2.兄弟关系。

1.父子关系


画风是:“爸爸,大腿借我一抱吧”,比如:“抖音”里增加“多闪”入口,“微信”里增加“微视”入口,通过自家体量大的产品(爸爸)给自己导流。



2.兄弟关系


画风是:“外面环境恶劣,是好兄弟,就互导一下吧”,比如:京东的会员可以享受爱奇艺的会员福利,同辈之间互相导流。



所以,这么说就好理解什么是产品导流,和它们之间的关系了吧。






产品为什么需要导流? 


产品之间导流的目的,大致分为两种:1.获得新增;2.企业生态。




1.获得新增



试想你费劲巴拉的搞了个新产品,没人知道,也没人来用,就算你产品做的再妖娆,是不是也白搭,更不用说后续的商业变现之类的。


所以,这个时候如果你有一个相对成熟的产品(爸爸)大腿,让它给你导流,实现一波冷启动,是顺利迈过第一个坎儿的手段。


当然,在目前激烈的竞争环境下,不仅是新产品需要导流,扩大规模和获得新增流量,是每一个互联网企业里产品或运营同学OKR中必不可少且另他们头秃的一项指标。



所以,不管是新产品,还是相对成熟的产品,都需要通过导流的手段,来获得新增用户。





2.企业生态


“产品导流”除了为了获得新增,还有就是为了企业生态的体验闭环。


做成一款产品的公司很牛逼,但是如果能够持续做出一系列牛逼产品的公司,一定有成功的基因,或者有一套做事儿的逻辑。


比如:亚马逊的飞轮效应,要想形成飞轮,打造自己的生态,业务上就得有自己的闭环,并且闭环上的每一个步骤都可以为其它步骤助力,其次就是以第一个飞轮作为根据地,拉动周边其它业务,形成第二个或者更大的飞轮。


这个时候,就需要各个业务线之间的互通及联动(互相导流)了。






比如,阿里也是在打造自己的生态,产品之间相互赋能和联动,一旦建立起来这些基础设施后,壁垒和护城河就非常坚固。



整体来看,“产品导流”不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。





产品导流的形式有哪些? 



目前,市面上导流形式大致有以下几种:1.场景化导流;2.会员制捆绑;3.固定入口扶持;4.广告位推荐。


1.场景化导流


场景化导流,翻译成大白话就是,让导流的过程更加无缝衔接。


这种做法,能兼顾用户体验,同时对导流量也更有利,一般用于“功能”层面的互通。比如,用户正好需要XX产品或功能,你见缝插针的增加导流入口,同时功能和设计元素也跟母产品保持一致,这样用户不会觉得干扰或反感。


类似这种做法的产品比如:QQ&微云,抖音&剪映;视频号&公众号...


QQ&微云


我们用QQ聊天时,好友之间总会有一些分享文件的行为,有“分享”就有“接收”,有“接收”就有“保存”的诉求,在这种场景下,QQ聊天页面里用户长按当前“文件”,就可以将文件保存到“微云”上。






除此之外,QQ首页点击左上角的侧边栏,能看到一列与“我”相关的功能入口,其中有一项是“我的文件”,点击进去后就能看到“我”在QQ里消费过的历史文件。


同时还有“微云”小程序的入口,点击直接跳转至微云小程序(做的很服帖,跟自体脂肪填充似的,导流过程不会让用户感到突兀)。




除此之外,微云作为基础的云存储能力,也在跟腾讯系的QQ音乐互通,满足用户将下载的歌曲保存到“微云”。





这么做,不仅满足了QQ音乐用户的存储诉求,还提升了QQ音乐的登录率(用户想要使用音乐网盘,必须先登录),同时增加了QQ音乐用户粘性(用户一旦在一款产品上存下自己的东西,就会存在迁移成本),最后还为微云带来了新增用户(更多QQ的用户使用微云进行存储),扩大其规模。


这样的互通/导流手段,就实现了产品间1+1大于2的效果。





抖音&剪映


刷抖音的兄弟们应该经常见很多视频下面有一个小标签,叫“剪映-抖音出品”(意味着博主的那条短视频是用剪映做的)。


很多人看到好玩好看新奇的短视频,都会觉得真香我也要剪同款,因此抖音就是这种恰到好处的投喂给你,点击标签,直接跳转到下载页,如果已经安装了的用户,可以直接进行剪同款。




抖音不仅送你出去,还负责接你回来,一条龙服务给你安排(导)的明明白白的。


比如,当你剪辑完成后,就引导你回抖音里分享,毕竟他们不希望你剪完之后保存到本地然后美滋滋去竞品(快手之类的)分享吧。





他们的目的就是,不管你怎么折腾,也逃不出我大字节的手掌。


包括,最近的视频号,发完视频号还能附带公众号的链接,高频带低频,通过公域流量,帮助作者往私域导流(顺便做个广告,快去关注我的视频号:大牙兄,哈哈哈)。





所以微信现在的导流方式是:视频号能够链公众号,公众号能够挂小程序,小程序又能开直播,直播又能去变现。


整体来看,场景化的进行导流,更适合“功能”层面的互通,满足用户和企业的诉求,还平衡了产品体验,相对更加丝滑。





2.会员制捆绑


会员制捆绑,已经成为互联网常见导流+变现的方式了,指的就是用户在你这买了会员,在别的合作产品里也享有它们的特权福利。利用用户“爱占小便宜”的心理,产品间互相导流。


比如我们常见的方式有:88会员、联合会员...

88会员


开过88会员的同学举个爪!好,放下吧,反正我也看不到。


88会员算是阿里生态体系的重要布局了,也就是你开通了88会员,阿里系的很多产品你可以劈着叉去用,而且很划算。


比如,饿了么会员每年108元,虾米每年128元,优酷每年也差不多180元,还不算其它的,这些价格在用户心中已经是锚定价格,加到一起怎么着也大1000了吧,跟88元一比,稳赚不赔啊!






我们来看看88会员里包含什么,各种阿里系的七大姑八大姨的产品都包含进去了,从吃饭、购物、娱乐、旅行再到看病,生活里的方方面面都包含了。





所以,我身边的人开了88会员后,画风是这样的:明明想用QQ音乐听歌呢,不!我是88会员!我要去用虾米!明明想用美团点个外卖呢,不!我要去饿了么!明明我想去爱奇艺看看视频呢,不!我要去优酷看!(不过他们如果想看“淡黄色长裙蓬松的头发”还是得去爱奇艺)。


可以看出,阿里用这套会员体系,把用户死死的框在(导流)自己的产品矩阵中了,产品群们被自己爸爸carry的明明白白的。





联合会员


联合会员跟上面说的88会员有点类似了,只是88是自己企业内产品的互相导流,而很多联合会员是跨公司,跨界整合资源。 

比如,京东的PLUS京典卡,就是跨公司跟别人合作,有和腾讯视频、酷狗音乐、喜马拉雅、携程、爱奇艺的联合会员。 





其实也能看出,京东和其它产品这么搞,也是对阿里系的反击,没有爸爸,只能兄弟之间互相导流,抱团取暖,一致对外了。



3.固定入口扶持


固定入口扶持,一般出现在规模较大的平台级产品上,它们利用自己的流量优势,在固定位置给自己的子孙/兄弟产品们导流。


扶持下一代,努力做到子又生孙,孙又生子,子子孙孙无穷尽也。



比如:淘宝、支付宝、美团,在首页金刚位给自己企业相关产品导流,同时也补足/丰富自己产品的其它场景。






比如,各家的小程序,也是相对固定的入口给自己的产品或第三方产品进行导流,完善自己的产品生态。






4.广告位推荐


广告位推荐的导流方式应该是大家非常熟悉的了,它区别于上面的导流方式的核心点在于一般是产品/活动的介绍,引导安装之类的,形式大致分为:闪屏、 banner、角标、feed流...




闪屏

闪屏指的是用户在使用产品时,打开的第一个启动页。


用它进行导流的优点就是全屏沉浸展示,用户的目光就聚焦到这里了,但缺点是:时间短,如果在短时间内传达不清晰的话,很容易一闪而过,钱就白花了。



所以,闪屏的导流,最好找重叠用户较高的产品,比如,在汽车之家闪屏投个刮胡刀啊,在亲宝宝闪屏投奶粉啊之类的,用户在短时间内好接受好理解。


投放越精准,对产品体验和对广告主的导流效果越好。





角标

角标导流这种形式,在电商类平台搞活动的时候经常见,各种小角标纷纷出来拉客,角标的着陆页一般都是活动H5类型的居多。




这种形式的优点在于能够一直常驻,不像闪屏,闪一下就没了,它只要用户不手动关闭就一直在这杵着。


但对于设计师的挑战就是,如何在小小的区域里,把被导流的产品/活动核心利益点传递清楚,吸引用户点击。

而且,这种形式也要谨慎使用,如果乱八七糟的飚小角标也挺伤害体验的。





Banner


Banner位的导流大家更常见了,一般都是自己家产品/业务,夹杂着第三方广告推广,无限轮播着进行导流,大家都太熟悉了,我就不啰嗦的说了。





Feed流


一般资讯类或者社区类产品,喜欢用这种方式进行导流,因为用户在其产品上的核心操作就是撸Feed。


所以,撸着撸着给用户投喂一个通过算法推荐的广告,然后再把广告包装成跟Feed内容很相近的设计,吸引(pian)用户点进去,从而进行导流。


比如: 知乎、最右、百度、头条 ...




不得不说第二张“最右”的推荐内容,让我不禁抚摸了下自己的胡子。

不过除了最右给我推“大胸妹子”,百度给我推“游戏”,头条给我推“汽车”,难道在他们的算法中,我是个油腻中年男???


看来他们的人工还不够智能,机器还得再学习学习,大牙对你萌hin失望。





总结  


总的来说,“产品导流”不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。


形式大致分为:1.场景化导流,无缝衔接式的体验,让用户在产品功能间丝滑的流转;2.会员制捆绑,低价获得跨产品福利,利用用户占小便宜的心理跨界导流;3.固定入口扶持,平台型产品常用手段,丰富自己产品场景又能给自己小弟带流量;4.广告位推荐,灵活可配形式多变的导流方式(闪屏、 banner、角标、feed流)但搞不好很伤用户体验。



但是,不管什么导流形式,导进来的用户,只有看到满足他们诉求和预期的着陆页才是最关键的,不然就算给你再大的流量入口,用户搞不明白该走还是会走。


同时,也不能为了导流而不分场景的尬导,这样很容易伤害原有产品的用户体验,捡了芝麻,丢了西瓜。

转自:站酷-苏大牙


如何从零到一设计产品?

涛涛

手把手教你 「如何 7 步从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件!」

据不完全了解,身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计,设计过程中不知道你是否有过这样的疑惑:

  • 设计稿都做了 100 版了,但产品经理还是不满意,是我设计不行吗?
  • 产品目标、用户目标都标得清清楚楚了,但总是找不好设计关键词,来来去去只会用「年轻化、轻量化」?
  • 产品目标明确了,设计关键词也有了,但为什么做出来的稿子不是太概念,就是跟竞品太像呢?

在解决这些困惑之后,我总结了一套自用的,适合从 0 ~ 1 进行软件设计或项目改版的方法 ,并在其他项目上进行了二次验证。

以实践项目 —— 有道少儿词典为例,上线一年期间,用户次日留存峰值 36% 以上,也非常幸运,被 App Store Today 推荐 4 次,App Store 编辑推荐 8 次,被 App Store 纳入 2019 本土优秀 App 盘点中,同时被预装到苹果线下直营店,作为样机体验软件之一。所以,这个方法亲测有效!

这篇文章,通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题,整理出 7 个帮你从 0 ~ 1 设计一款软件的步骤。

文章较长,大概需要花费 15 分钟,建议大家先看大纲,优先阅读符合自身情况的部分。

产品经理为什么不满意?

从 0 ~ 1 进行软件设计,免不了要多出几个设计稿,但做了 100 稿,产品经理对页面设计还是不满意的话,很有可能有 2 点原因:

原因 1:目标不明确

一拿到需求就开始做,很容易忽略需求背后的目标,从 0 到 1 做一款新软件更是要了解业务目标和用户目标。

在提出解决办法前,我们需要先捋清楚以下 2 个问题:

为什么要了解目标?

公司开发软件是为了达到某些目标或是实现某个目的的,只有了解目标才能更好地为公司创造价值。

什么是业务需求、业务目标和用户目标?

平时产品经理跟我们说,要设计一个页面,设计 一个流程,这就是一个业务需求,而这个需求的背后,能够解释清楚这个需求是为了什么,要做到什么程度,这就是业务目标(通常包括用什么手段,给用户带来什么价值,达到什么目的)。而软件的目标用户,他们在一个具体的时间、地点、环境下做了什么操作,想达到什么程度,满足自己的什么要求,这可以理解为用户目标。

解决办法 :多使用 「为什么+动词」 的问法,向产品经理了解业务目标、用户目标。

从 0 ~1 做软件需要了解的业务目标和用户目标,我们都可以从产品经理那里得到。

少儿词典的产品经理很早就给出了业务目标和用户目标。但,当我们需要更多细节的时候,可以使用「为什么+动词」这样的问法。例如:

  • 「我们要做一个少儿查词软件,定位是一款拥有权威释义背书,在视、听、触方面打造良好体验,紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧!」「为什么做这个?」
  • 「现在儿童教育KOL越来越多,很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
  • 「为什么这样的定位可以满足用户需求呢?」「为什么是适合少儿和家长使用呢?」
  • 「为什么……」

在少儿词典项目中

  • 我们的业务目标是:一款拥有权威释义背书,在视、听、触方面打造良好体验,紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。
  • 目标用户群体是:小学 1~6 年级的孩子和他们的家长。
  • 用户目标是:当小学低年级的孩子在家学习的时候,他们的家长需要一款软件,能缓解家长伴学的压力。高年级的孩子需要一款软件,为他们提供准确教学。
原因 2 :没有对产品关键词形成共识

我们既了解产品的业务目标,也知道用户目标的情况下,方案还是被 pass 的话,可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢?怎么才能弄清楚产品经理想要的是什么?我们可以用产品关键词来回答这个问题。

为什么业务目标在这里不起作用了呢?

我们常见的业务目标的内容是很长的,用户目标的内容也是很长的,在这种所有已知内容都很长的情况下,如果没有准确理解内容,没有对重点内容达成一致,就很容易产生偏差。例如我要向你描述一位美女,她的头发很柔顺,脸蛋很漂亮,身材比例很好,衣品很好等…… 90% 的可能,我们脑海中想的不是同一个美女。但是,如果我跟你说,这是一个跟芭比娃娃很像的美女的时候,我们脑海中的形象会接近很多。

怎么才能弄清楚产品经理想要的是什么?

就像设计师在进行页面设计时,需要设计关键词一样,产品经理在描述自己的业务目标的时候,也需要能概括业务目标重点,突出卖点的产品关键词,这个产品关键词能帮助设计师弄清楚产品经理想要的东西。

部分产品经理为了方便大家达成共识,会早早亮出产品关键词,如果当你们的产品经理没有办法提供产品关键词的时候,我们要学会在讨论中找到。

解决办法 :从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词

从业务目标和用户目标开始跟产品经理讨论项目信息,在讨论的过程中,我们可以留意产品多次提到的几个形容词,写下来,然后跟产品反复核对确认,最后双方确认且保留下来的这 3~4 个形容词,就是这个项目的产品关键词。

少儿词典的产品关键词是:权威内容,寓教于乐,适合孩子使用。这些关键词被我贴在屏幕的显眼处,就怕自己哪天忘记了。

设计关键词为什么总是找不对

寻找设计关键词,是设计师非常熟悉的步骤,但常常也在这里翻车,甚至还会出现,不管做什么软件,反反复复就那几个关键词的情况,我们可以把原因归结为:

原因:对用户不够了解

为什么不了解用户会导致关键词找不对?

我们的用户在选择软件、使用软件的时候,了解到的是软件的设计、体验和功能。用户下载软件时,他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色,小女孩的衣服是嫩粉色一样,如果用户想要一件天蓝色的衣服,而我们给他展示的是深蓝色或是嫩粉色的衣服,这都会让用户产生疑惑甚至离开。因此,如果对用户了解不准确,会导致我们输出错误的设计关键词。

而了解目标用户是又一件复杂的事情。

首先,我们的目标用户可能是一类人,如有道词典,下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多,如少儿词典,下载用户是家长,使用用户是家长和孩子,企业协作软件也类似。

从接触软件,下载软件,使用软件,到判断是否继续使用软件,不同的阶段的目标用户是不一样的,目标用户在不同阶段的需求也是不一样的。

其次,开发软件的周期是很长的,在开发软件的过程中,我们的用户在不断地接收新的知识和观点,用户的喜好,认知可能会发生很大的变化。

因此,为了更好地了解用户,我们需要找到用户跟软件之间的交互关系,以及影响用户喜好的因素。一共有 2 个步骤:

步骤 1. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料

在这一步骤中,我们加入了 2 个概念,接触点和未来趋势。

什么是接触点?

接触点指的是用户与产品发生交互的关键点,用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例,家长和软件之间的接触点,可以罗列为:家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品,仅仅优化软件的体验是不够的。

为什么要从未来趋势和用户当前认知角度去收集用户资料?

刚刚有提到新软件的周期是较长的,前期定好的风格、关键词等,到了开发上线后却不适用了,既浪费人力,也浪费资源,因此要考虑未来趋势对用户的影响。同时,用户在选择软件的时候,已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时,脑海中会浮现冰块、西瓜等元素,因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销,但是受到大部分买家越来越注重卡路里这一未来趋势的影响,低卡的西瓜冷饮也可能在未来一段时间大卖。

接触点和未来趋势、用户认知之间有什么关系?

了解用户接触点之后,我们就可以猜测用户在这一接触点的需求和心理,加入未来趋势和用户认知,能让我们做出来的东西更符合用户预期。

寻找接触点。我们了解到,少儿词典的目标用户群体是 1~6 年级的学生和他们的家长,即 6~12 岁孩子,和 30~44 岁家长。然后,我们粗略地将用户的接触点划分为,筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件,孩子、家长跟接触点之间的关系就可以展示为:

孩子是软件查询、练习、核心功能体验者,家长是内容审核者、软件筛选者、伴学时软件使用者。

找到接触点之后,我们还需要把影响用户认知的内容具象化。

例如,我们想了解夏天做什么口味的饮品更好,我们可以从夏日饮品口味销量排行榜,夏日新品类型,夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是,家长在筛选软件时,老师的要求,未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式,来联想更多影响用户认知的内容。然后我们将得到类似下面的表格:

根据表格,我收集了 近 10 页的用户信息

步骤 2. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词

杂乱无序的信息只有经过归纳之后才能被大家使用。

怎么归纳总结杂乱的信息呢?

UI 设计师都清楚,在进行界面设计时,大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理,要做的是找到信息的重点,然后把信息归类,最后再用一句对内容进行总结,方便大家理解。应用到我们提取关键词的环节中就是,挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。

挑选重要信息。以家长筛选软件为例,当我们将热门大 V 推荐的教学方法、内容,进行整理的时候,会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法(自然拼读)等内容出现的频率很高,在一堆内容中挑选跟少儿词典相关的内容,如美学、外文图书、儿童心理教育等。

放入四象限中。在这一方法中,我们将四象限划分为设计和用户认知 2 个方向,其中设计划分为视觉风格和体验风格,用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例,这是一个属于未来家长会越来越关注的少儿视觉发展方向,所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似,不断地提取出现频率高、用户热点高的内容,并根据内容类型放入四象限中

总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例,我们收集到大 V 的美学教育,未来的课本发展趋势,小学建筑风格发展趋势,他们都有一个特点,颜色柔和无攻击,色彩丰富,因此,我们总结出一个视觉关键词是柔和多彩。

其他内容也采用相同的方法进行总结,少儿词典的视觉关键词是柔和多彩,轻质感,亲和陪伴,体验关键词是,探索多变,感官刺激和重复熟悉。

为什么做出来的设计稿不是太概念就是没风格?

视觉关键词出来了,产品的业务目标也出来了,从关键词到页面样式的逻辑也很严谨,但出来的风格却会觉得跟关键词不太搭,或是跟竞品差异不大,在多款 App 实践后,我们发现可能是这样的原因:

没有把关键词的作用发挥出来

引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的,以「年轻」为例子,一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服,设计风格上可能是隔好几条街的。因此,仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向,我们还需要将关键词组合和具体化。一共有 2 个步骤:

步骤 1. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则

为什么将关键词结合能让关键词的作用发挥出来呢?

我们的目的是要做一款满足产品需求,符合用户认知的软件。

从问题 1 和问题 2 中,我们得到了符合产品需求的产品关键词,和符合用户认知的视觉关键词和体验关键词,想要同时满足产品需求和用户认知,我们需要找到他们的重合点。如下图所示,将产品关键词和视觉关键词、体验关键词分别结合,这样的出来的规则就能最大限度地符合我们的要求,既满足产品需求,又符合用户认知。

具体怎么做呢?下面将分别从视觉和体验角度举例子。

视觉角度,以权威内容和柔和多彩结合为例:

「权威内容」 要求我们输出的内容是符合教材,符合老师标准的,内容是准确无误的、来源是可靠的;「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用,色彩柔和,且颜色多样。

将两者结合,我们得到的规则是:

  • 市面上的语文和英语教材以橙色封面为主,因此软件把橙色作为主色,仅在重点区域使用橙色;
  • 展示内容要准确,在牛津内容布局上参考《牛津小学生》字典,中文字体采用跟教材相似的文鼎新中楷,英文字体采用跟衡水体相似的 Averta Std;
  • 参考大 V 推荐的绘本、动画片常用的颜色,将颜色定为橙色、黄色、蓝色和绿色,降低颜色饱和度;
  • 参考绘本的图案,选择圆形作为主要的形状,加入柔和色彩,使用深色和浅色叠加的圆形;
  • ……

根据这些内容,我们将得到下面的 4 个颜色和圆形叠加的形式。(ps:通过这样的形式确定的是规则,如:以橙色为主结合另外 3 个颜色,圆形,使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整)

体验角度,以权威内容和探索多变为例:

体验上,「权威内容」要求我们的操作形式是跟老师的教学相似,学习方法需要参考成熟且有效的方法;「探索多变」要求我们在交互形式上可以采用多种形式,给孩子探索未知的机会,交互形式要符合儿童操作习惯,如涂抹、翻转、拖拉等

将两者结合,我们得到的规则是:

  • 中文字体跟写,手写涂抹交互形式,添加错误抖动反馈;
  • 单词记忆,参考如师通学习方法,采用卡片翻转形式,将单词和图片内容分离;
  • 英文跟读,采用表情代替评分机制;
  • ……

其他几个关键词的结合也是使用这样的形式,这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。

步骤 2. 选择复杂的核心页面,把具象化的体验规则、视觉规则融进页面中,确定设计风格

规则梳理出来后,我们就要挑选一些重要页面进行风格尝试,以结构复杂的中文查词单字结果页为例:

分析小学一年级到六年级的考试内容,我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户(小学三年级及以下)会使用到,他们要求信息完整且准确;像词组、造句这些信息则是针对高年级学生,要求快速准确定位到具体的内容板块。

分析完内容结构后,我们就需要根据内容布局,加入表格中总结的体验规则:

  • 重复熟悉,针对低年级用户的使用习惯,我们将顶部信息划分为展示区域和操作区域,方便用户操作,降低用户学习成本;
  • 重复熟悉,中文查词结果页中,使用田字格上下布局的形式,使用课本同款楷体字,满足学生的识别文字书写规范的需求,也符合用户认知;
  • 探索多变,在 tab 切换的时候,我们将 tab 选中的颜色变成软件的 4 个主色循环切换,激发孩子对软件的探索欲望;
  • 探索多变,按钮形式上采用出血的图案形式,打破常规;
  • ……

最后,梳理好页面的体验形式之后,我们开始给页面添加视觉规则:

  • 在推导中,我们选择多彩的颜色模式,常见的小学课本是以橙色为主,因此,软件也选择橙色作为主色,并加入黄色、绿色和蓝色作为辅助颜色;
  • 图标采用的是孩子熟悉的元素+轻质感这样的组合;
  • 结合绘本和孩子常见元素,使用两个圆形叠加的形式,作为软件的主要元素;
  • 为了让内容更符合孩子阅读和使用习惯,使用大字号和大间距的形式,常用字号是 32px,最小字号是 28px;
  • ……

对比产品原型和市面上的一些竞品,我们可以发现,查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标,同时符合用户认知的规则,我们将被淹没在一群查词软件中。

步骤 3. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作

最后一步,相信很多设计师都会在设计过程中建立一套方便好用的设计规范库,这里就不展开来说了。

总结

最后,再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:

  1. 多使用「为什么+动词」的问法,向产品经理了解业务目标、用户目标。
  2. 从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词。
  3. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料。
  4. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词。
  5. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则。
  6. 选择复杂的核心页面,把具体化的体验规则、视觉规则融进页面中,确定设计风格。
  7. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作。

完成这 7 步,将可以让你从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件。

B端产品的导航菜单设计5步法

涛涛

导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结。

在任意一个 B 端后台系统中,导航菜单都是不可或缺的一部分,每个导航菜单都有其固定位置,通常这个位置是不可撼动的。所以说:导航菜单是 B 端产品层级重要的交互控件。

对于 B 端产品的用户而言,他们使用导航菜单的目的性很强。

到后台主要是对具体功能进行操作,导航菜单在功能的引导中发挥了巨大作用。因此,其主要的功能就是对 B 端产品进行分发、引导;帮助用户在复杂的后台页面中,寻找出自己真正想要的功能。

合理规划

1. 遵循7±2原则

导航菜单建议最多不要超过 9 个,最少不要低于 5 个。

原则解释:1956 年乔治米勒对短时记忆能力进行的定量研究,他发现人类头脑最好的状态能记忆含有 7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆,这样会使难度降低很多,米勒称这种单位为「组块」。

是不是通过分组记忆以后,自己能记住的更多?这就是 7±2 原则的分组。

通过上面 7±2 原则描述我们明确到:在导航菜单当中,超过 9 个会给用户查找时带来困难,低于 5 个说明导航菜单的分发效率不够。

有人会说,在实际业务中,不会有那么理想,如果需要超过 9 个时,应该怎么办?

超过 9 个时,一定要对菜单进行分组,因为导航过多,用户寻找会十分迷茫,通过分组的方式,能够对菜单进行再次分类,提高查找效率。

举个例子:

比如在微盟、有赞、小鹅通的导航设计当中,微盟、小鹅通有很大不足,我们来一一拆解。

  • 小鹅通:共有 14 个导航菜单, 且菜单之间形式不同,表现也会有所差异, 也因此对于用户而言使用起来会产生很强的疑惑感。
  • 微盟:一共有 11 个一级菜单,不符合 7±2 原则,同时也能够感受到在视觉层面上,微盟的导航菜单没有分组,难以寻找和记忆。
  • 有赞:虽然在导航的数量上也是有 9 个以上,但是它对菜单进行分组,有效提高了用户查找时的效率,因此在设计上更加合理。
2. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时,代表着产品在用户的使用规划中,没有深入思考整个用户体验

导航菜单层级越多,用户体验就会越差,你会发现一些拥有三级导航的菜单,都会通过设计优化来实现隐藏导航的合并,从而减少用户操作负担。

比如有赞就是一个典型例子,在有赞零售的导航菜单中其实是有三个层级,但是通过交互层面的优化,将二、三级菜单直接展示出来,形成一个整体,提升了用户体验避免用户层层寻找。

同时在交互上,采用悬停+点击结合的形式,用户既可以通过悬停鼠标进行快捷操作。同时又可以通过点击,确定跳转查看该一级导航下的菜单,能够提高用户的操作效率。

3. 鼠标悬停还是鼠标点击

作为导航来说,其操作本身并不多,但是设计上,点击与悬停(hover)之间,还是存在很大差距。

这里想要说明这两个操作本身而言,并没有对与错,但是适用场景的不同,导致在设计属性上存在着较大差异。

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂,会给用户带来很强烈的挫败感,同时在悬停选择下一级菜单时,鼠标移动悬停也同样会造成这样的结果。因此在设计时,对鼠标悬停时的操作要格外留意。通常在悬停操作当中,只适用于只有一个菜单层级的菜单选项,这样用户在操作时更加方便。

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作,同时鼠标点击的形式,会给用户正向的反馈,用户点击后明确知道菜单栏不会隐藏,因此在两个操作之间进行选择操作时一定要多加思考。

确定菜单广度和深度

导航菜单广度和深度的区别:

  • 菜单广度,导航菜单中每一个层级包含的菜单项数目为广度。
  • 菜单深度,导航菜单层级的数目为深度。

深广度平衡帮助用户进行快速选择,能够对整个产品架构有着第一眼的认识。

1. 当菜单广度过大时,怎么办?

当菜单广度过大,我们也能够通过设计的方法来优化导航菜单。

我举一个比较具有代表性的例子:腾讯云。

腾讯云目前拥有大概 100+ 个云产品,他们都分布在导航菜单上,因此在导航设计上,它采取一种新的模式:全部菜单导航、搜索菜单、自定义导航。

在全部菜单中,展示了腾讯云 100+ 个云产品项目,通过搜索进行筛选得到用户想要的菜单。同时在导航栏上,支持用户去自定义 5 个菜单选项,也因此用户将常用的菜单添加至此,更方便用户去寻找。这样在满足业务的前提下,通过一些个性的设计,使 100+个菜单也能够塞得进整个导航中。

2. 菜单深度过深时,怎么办?

当面临菜单深度过深时,通常需要从以下几个方面去考虑。

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通,了解到菜单的架构设计的原因,以及能否为你的设计进行一次重新的梳理,寻找一些值得优化的点。

建议在寻找产品经理之间,自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来,能够先多思考,为下面的沟通节约时间、提率。

用户体验地图的绘制

在一个 B 端产品中,用户的目的虽然复杂,但是研究用户每一步操作,还是会查找出一些规律,我们可以从这些规律中做些文章。

比如我们之前在一个医疗系统中,根据角色的不同,将医疗角色分为:前台、咨询师、医生、老板这四种角色,每个角色所关心的点都会有所不同。

老板最关心每个门店目前的情况数据,比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。

将这些情况分析以后,提炼出核心的需求点。

然后绘制完成他们的用户地图后,根据角色,明确每一个角色的日常操作有哪些,从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。

菜单层级有区分

我将常见的导航区分进行总结,分为以下三种形式。

1. 颜色区分

颜色区分作为最直接最有效的一种形式,这种形式也是后台页面最初的状态,我通常会用颜色区分和移动端顶部状态栏的演变史做对比,就其功能而言他们都有很多相似的点。

微信在 2018 年 12 月份时,发布微信 7.0,将顶部导航由黑色转变为白色,引得大家争论不休,而经过时间不断洗礼,大家也逐渐接受了这个事情,渐渐忘去。

延伸阅读:

2019 年也有类似的事情发生,有几个产品的 WEB 端进行了一系列的大改,YouTube、Twitch、Twitter 都进行了重新设计,他们也不约而同的将块面去除,去掉多余的灰色,通过留白和空间将页面拉开。

这是否是下一个 WEB 端所要追寻的趋势,我还不得而知。

如果 WEB 端都有此改变,那么 B 端产品还会远吗?

说回 B 端设计,颜色上的区分和移动端类似,更多体现在导航层和内容层之间的区别,因为从本质上讲,这两个本身就属于不同的业务模块,通过颜色的区分,是最为直接,最简单的一种方式。

这种形式常见于很多复杂系统,例如:飞书。

左侧导航为深色,能够让用户获得更沉浸的体验,因为屏幕边缘都为深色,用户在使用时能够真正做到有区分。

2. 投影区分

在现如今的移动端产品,投影大行其道,弥散投影,高级投影随处可见,也逐渐影响更多 WEB 端的产品使用投影,增加自身产品 Z 轴空间。

Z 轴空间给导航带来了纵深感,同时也能够在功能层级上,通过分层设计,使页面层级关系明确,引导用户使用导航。

Material Design 设计的出现,正是 Z 轴空间的鼻祖,在我们的屏幕中开辟了第三个设计维度,在 Z 轴上展示增加了更多的交互形式。在几何体系中,Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴,我们通过引入 Z 轴在交互设计中呈现三维的物理空间感,使页面内容能够得到有效区分。

比如 Teambiton 在页面中运用投影,强化了页面层级的关系:

3. 分割线区分

分割线针对导航功能性不高,同时要满足很高设计感的产品。

分割线太深,页面十分割裂,分割线太浅,页面划分又不明确,因此需要设计师对分割线的把控十分合理。

分割线在 Dribbble 上见到过很多,通过简单的线条加上空间的分割,将导航区与内容区分开,形成很好的视觉感受。如果你是刚开始尝试做导航,不太建议尝试这种形式,因为对于页面空间的把控要十分苛刻。

导航可配置

B 端产品易操作性中,导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升,而如何让菜单可配置,通常的做法有两种。

1. 我的菜单

如果你的产品是针对多数角色不同的用户进行设计,那么在导航设计时,可以考虑增加一个菜单选项:我的菜单,对于菜单进行标签处理。

设置一个我的菜单,将用户常用的菜单进行添加,能够满足每一位用户的菜单快速选择的需求,通过这样的自定义,用户在常用的菜单下,能够通过我的菜单进行快速跳转。

举个例子:在印象笔记当中,其快捷方式就是可以将用户想要的模块放置在此,可以快速跳转。

2. 角色配置

如果你的产品是为特定几类角色进行服务,那么在导航设计时,可以考虑根据用户角色的不同,给用户不同的导航展示。

通过角色的筛选,对复杂导航进行简化,同时管理员可以根据自身公司的业务不同,给用户配置出不同的角色权限予以满足用户的导航需求,这样在设计层面上能够减少很多不必要的麻烦。

四种常见导航菜单

1. 侧边导航

侧边导航是国内的 B 端产品当中最为常见的。

将菜单栏放置在左侧,页面布局上基本为左右结构,将导航菜单放置左侧固定。

因为侧边导航在国内产品中最为常见,因此把它优先提出来讲,国内厂商对于侧边栏导航尤为偏爱,在很多人心目中,感觉就只有侧边导航和其他导航两种导航形式,也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视,在设计上也开始多元化。话不多说,我们先来看看侧边导航的优点有哪些。

优点

  • 扩展性较强:多级导航可以流畅展示,可以涵盖很多大而全的产品。
  • 展示灵活:侧边导航可收折,收折过后用户的横向核心空间将会增大,页面展示效率也会大大提高。
  • 快速定位:视觉起始线统一,用户可以根据首字进行查找,快速便捷。

缺点

  • 不易阅读:侧边导航文字垂直排列,有悖于眼动的正常视觉方向。
  • 阅读沉浸感低:侧边导航容易打断用户的正常阅读顺序,使阅读感降低。

线上产品:我们拿有赞零售进行举例,他就是一个典型例子。

菜单栏+功能菜单共有 15 个,然后通过导航的间隔将菜单进行分组,最多一个导航菜单共 9 个,满足 7±2 原则。

同时可以看到,有赞在使用三级导航时,通过右侧面积统一展示二、三级导航,方便了用户导航展示的同时,优化了用户的使用体验。

为什么国内B端产品大多数是侧边导航?

我在我的设计剪贴板中有回答过这一个问题,直接分享给大家。

2. 顶部导航

顶部导航在国外的产品当中,算是较为常见的。

将菜单栏放置在顶部,页面布局上基本为上下结构,将导航菜单放置上方固定。

顶部导航早期出现于各类门户网站,比如企业官网,各种咨询类的网站经常会采取这样的导航形式。说回 B 端产品中,顶部导航通常在 B 端产品中也是十分常见的,其中以国外产品最为集中,比如国外 CRM 三剑客:salesforces、hubspot、zoho 都是采取的顶部导航的形式。

优点

  • 满足阅读习惯:导航为水平布局,阅读方式更贴近眼动的正常阅读顺序。
  • 沉浸感强:顶部导航通常不会打断用户的阅读行为,对用户的干扰少。
  • 设备影响小:导航顶部,整体页面稳定,页面对于用户显示器分辨率影响较小。

缺点

  • 通用性差:同时受导航栏标题文字限制,对于每一个菜单的字数限制严格。
  • 横向 Tab 数量少:承载不了太多菜单数量,超过 7 个后菜单排布会十分困难,横向空间利用率差。
  • 扩展性差:水平导航最好不要超过二级菜单,超过二级菜单,用户使用成本高。

线上产品:


△ salesforce

销售 CRM 传奇人物,千亿美元估值,每年营收百亿美元,无疑是 B 端产品当中的一个标杆。

如果你是做 CRM,或者是 B 端产品,必看的一个竞品。

salesforce 采取的就是一个顶部导航,只是不同的是,salesforce 的顶部导航更多是将页头的功能进行合并叠加,虽然 salesforce 的交互方式不算优秀,但是因为其业务线不断庞大,这样才能支撑其整条业务线。就因为这样的问题,需要设计师在设计时,要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似后端同学写代码,我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。

△ hubspot

Hubspot 采取就是顶部菜单,二级菜单下拉展示,同时 Hubspot 是按照角色去划分顶部菜单,能够给用户减轻认知负担,更好的被用户所使用。同时在一些设计小细节上,比如顶部的主题色,既可以提升品牌感,同时在适当时可以作为进度进行一个展示,使用户能够更加深入地感知到其设计。

3. 混合导航

在 B 端产品中,感觉混合导航也是一个后起之秀。

它的页面布局为顶部和侧边,简单来讲,就是将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部,通过一级菜单的点击后,展示侧边的二、三级菜单。在一些拥有复杂的逻辑关系,菜单之间关系分明的产品中,混合导航也越来越被大众所接受。在很多复杂的系统当中,混合导航真的是很不错的一个选择,我们来看看他的优缺点

优点

  • 承载大型业务:在导航上,他能够展示 3 级甚至 4 级菜单,对于很多大型 B 端项目,混合导航算是更加合理的选择。
  • 扩展性强:对以后有规划大量功能的产品,用混合导航,能使之后菜单扩展性更强。

缺点

  • 占用面积大:要切换多个菜单,所以顶部和左侧会占用大量的空间。
  • 菜单交互路径长:一、二级菜单间来回交互成本高,操作繁琐。

线上产品

云产品其实就是一个很好的例子,比如阿里云,他们因为自身产品线众多,对于导航的设计也是以复杂著称,多数情况下,面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航,使用户对于导航每一个功能模块都有一个深刻的认识。

金蝶-星空定位就以 Paas 进行定制销售,分析过他的产品你就会了解到,他一共有 100+ 个菜单,同时算是金蝶的王牌产品,因此对于此类产品,应该着重去了解,也因此,对于每一个模块,都是通过大标题+小标题的形式进行设计,使用户在使用时能够明确知道自己想要什么。

现在各大复杂的产品都会采取混合导航,这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助。

4. 平台类导航的新趋势

平台类导航是我们团队内部自己的取名,给他的定义通常是拥有很多模块,比如 Teambition、明道云,拥有很多个模块,通过一个统一的平台进行内容的分发,比如移动端的钉钉、企业微信、纷享销客都采用同样的方式,但在 WEB 端当中,平台导航通常伴随着其他导航同时出现。

比如最近很火的明道云,就是使用了平台导航,他们将自己的产品分别陈列在页面的核心区域,通过对于工作台的设计,形成对页面的展示,同时形成一个平台类的导航,于此相对应的还有钉钉后台管理页面,以及企业微信后台管理页面,他们都是通过一个个平台类的模块对导航进行分发的。

文章来源:优设

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档