首页

你知道为什么对话框中的“确定”按钮会在右边吗?

博博

聊聊关于“确认”和“取消”按钮的位置摆放逻辑~

目录

平台一致性的问题

按钮的位置非常重要

为什么"确定"按钮在右侧效果更好

按钮放置在角落还是放在一起?

结论

正文

大家好,我是西瓜~

这次我们聊一个设计知识点,这个知识点平日会被设计师忽视,因为它太过于默许,但我们应该知道的是,很多默认的东西也是有自身的知识结构支撑,久而久之被人忽视了。

大家应该都见到过弹窗、表单里的"确定"和"取消"按钮吧,这两个按钮大家还记得会放在页面中的哪个位置吗?"确定"按钮是完成任务的主要操作,而"取消"按钮是辅助操作,它主要的作用是用于返回到起点屏幕而放弃任务。那么,根据它们的功能,最佳的按钮顺序是什么?"确定"按钮应该放在"取消"按钮之前还是之后呢?

平台一致性的问题

可能这时候很多设计师会按照习惯,选择遵循一致性,采用一些常见的组件样式进行操作。虽然这看起来似乎是解决问题的方法,但实际上并非如此。这并没有回答哪种位置对用户更有效以及为什么,单纯遵循已有组件并不足以让设计师有更好的思维和主动思考的意识。

"一致性"是设计师中常用的一个词。然而,这常常也被用作一个借口,让设计师不深入思考用户面临的设计问题,如果一个设计师都不知道为什么一致性的规则存在,那么遵循这种设计惯例又有什么意义呢?

如果某种设计惯例对用户来说是有害的,那么设计师是否应该盲目遵循它,仅仅因为要追求一致性?体验极差的设计样式和结果是否应该因为设计师希望迎合大家都默认的设计一致性而继续存在?这其实本质就是个问题...

现在网上有很多组建和参考,都被设计师天天借鉴和广泛使用,因为它们适用于用户。但关键在于,设计师永远不应该满足于墨守成规的选择设计的一致性,将其作为做设计的唯一理由,我们关键还是要理解为什么应该以某种方式而不是其他方式来设计用户界面。

按钮的位置非常重要

这时候有的设计师可能会主张通过赋予操作按钮更多的视觉重量和清晰明了的标签来突出界面中的操作按钮,而不是仅关注按钮的位置,虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但它们并不是唯一的方面。

真正一名有思想,会独立思考的设计师会综合考虑每个设计方面对用户的影响,而不只是关注其中的一个方面,对于设计师来说,最难的是确定主要操作和次要操作的最佳放置方式。这就是我为什么关于"确定"/"取消"按钮的位置进行说明的原因。

为什么"确定"按钮在右侧效果更好

当我们在使用设计组建框架前进行考虑时,你可能会开始明白哪个位置会对用户效果更好一些,我们可以通过分析设计对用户的影响来解决这个问题。

1、减少视觉注视

有些设计师认为,将主要操作放在左侧,在次要操作之前,对用户来说更好,因为它更近,所以点击所需时间更少,这看起来好像有点道理,但我们不能忽视一个问题,即在选择要执行的操作之前,用户会查看所有选项,这意味着大多数用户不会在不查看旁边的次要操作按钮的情况下盲目地点击主要操作按钮。

他们将首先看到左侧的主要操作,然后再看右侧的次要操作,然后他们会将视线转回主要操作按钮进行点击。这里总共涉及到三个视觉注视点,在多个方向上分散了用户的注意力。

与将主要操作放在左侧相比,将主要操作放在对话框的右侧,将次要操作放在左侧,用户只需注视每个按钮一次,并在主要操作按钮上结束。这样一来,视觉注视的数量就减少了,并且在一个方向上产生了更流畅的视觉流动。

用户只关注每个按钮一次,并最终停留在主要操作按钮上,将主要操作放在左侧可能会使用户更容易点击,但从用户的心理过程和视觉注视速度来看,将主要操作放在对话框的右侧实际上更快。

2、与预期的按钮功能相匹配

当用户点击“取消”操作按钮时,他们期望的是产品不进行任何操作,而是将他们返回到起始屏幕位置,因此,"取消"按钮的功能类似于"返回"按钮。

当用户点击“确定”操作按钮时,他们期望产品进行按钮所表示的操作,并将他们带到下一个屏幕。因此,"确定"按钮的功能类似于"下一步"按钮,将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以与用户期望的"后退"和"下一步"按钮功能相匹配。

这类似于分页按钮的放置方式,将用户带到下一页的按钮位于右侧,将用户带回先前页面的按钮位于左侧。这种按钮位置的安排是有效的,因为它与用户从左到右的阅读和导航方向相吻合,其中右侧是前进方向,左侧是后退方向。

3、"确定"让用户前进到下一个屏幕,"取消"让用户返回到原始屏幕。

对话框中的"确定"和"取消"按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮,另外这种左右方向模式也是用户熟悉的。将主要操作放在右侧,将次要操作放在左侧,可以使对话框按钮对用户更易于理解和使用。

4、提供更高效的任务流程

将按钮放置在对话框的右下角更容易被用户点击,因为这符合【古腾堡图表】。在古腾堡图表中,右下角区域是终端区域,用户在扫视后的最终目的地。

将按钮放在终端区域可以使用户在视觉扫描时看到他们最后需要执行的主要操作,这不仅改善了视觉流动,还改善了任务流程。用户在扫视过程中不会错过主要操作按钮,当他们经过时,他们的目光会停留在上面,从而可以立即点击它。

扫视对话框并采取行动变得更快更容易,因为用户的目光最终会落在主要操作按钮上。


按钮放置在角落还是放在一起?

我们需要考虑另一个问题,那就是我们应该将按钮放在角落还是放在一起,当将主要操作和次要操作放在对话框的角落时,这与左右导航方向相吻合,这是很好的映射。然而,由于"确定"和"取消"按钮并不是导航按钮,因此并不需要遵循方向映射,有时候这样做可能带来更多的弊端。

较大的视觉分离使得比较操作变得困难,并将一个操作与另一个操作隔离开来 如果产品页面即将执行用户无法撤销的关键操作,那么用户可以看到"取消"按钮和"确定"按钮是很重要的。在这种情况下,"取消"按钮的功能可能类似于"上一步"按钮,但它更重要,因为它充当安全按钮以防止任何更改。

将"取消"按钮放置在最左下角的危险在于,由于两个按钮之间的视觉分离较大,可能会导致用户忽略它。将"取消"按钮与"确定"按钮放在一起可以让用户更轻松地在一次注视中查看和比较这两个操作,以选择最佳操作。  


作者:西瓜聊设计
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

设计师-必须打造影响力

博博

用你的影响力在互联网留下足迹,说不定很多机会就是这样悄然无声的慢慢走到你的面
前。

作者:施施_Seven
来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。                           

办事上百度-百度便民服务体验建设

博博

响应百度服务化战略,设计通过服务分发+供给的建设,为用户提供发现、使用、复访的闭环查询服务体验。


作者:百度MEUX
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

除了大厂的社交app,这些小众app你也会喜欢

博博

1.遥望app

1.视觉设计

遥望app的设计在整体上的风格化很强,有自己的独特性。为了让用户之间的粘性更好,更是在活动上、动效上花了很多心思,给用户带来很多有趣且良好的体验,让我带你去体验一下吧



2.设计语言

整个app的设计语言贯穿了星形、圆形和三角形 ,同时增加上面三种图形的线性来点缀设计。tab图标是圆形和三角形的排列组合,同时增加线的形式点缀其中,层次更加丰富。其他页面的设计也是同理,通过将上面3种图形排列组合,贯穿到整个页面,设计语言十分统一。



3.空界面设计

空界面的设计运用手的动作将每个页面的情绪感拉的满满的,在互动消息的版块,从关注到@我,每一个页面通过不同的情绪表达方式极大了缓解了用户的焦虑,同时也增加了一些趣味性。



4.勋章设计

勋章是根据你的确幸值的多少,等级的高低,送礼物的多少,以及你在平台的表现会给你发放不同的勋章,以此让用户享受到尊享和定制的感觉,增加用户的参与感和在平台的粘性。



2.动效设计

遥望app的动效设计也是十分的流畅和有趣,线性的风格特征的插画、温暖的文案和趣味的动效,带来的丝滑体验感十分强烈。

1.匹配器

遥望app首页上面的头像是匹配器,随着头像慢慢的流过,头像旁边还有对话框弹出介绍用户的信息,点击会有两只手彼此召唤,再点击幸会就可以和其他的朋友打招呼了。在匹配器下面的“遥望一下”点击也可进入到好友快速闪过的页面,点击可以同样到打招呼页面,多个入口引导用户相互吸引从而形成社交动机。



2.下拉加载

加载的动态效果加入了遥望的IP形象,一个是像地球一样的自转,一个是像风筝一样在天空飞的效果,动态十分流畅且有趣。



3.记录心情

记录心情这个是个很有趣的设计细节,在记录心情发表后,在查看心情的小罐子里就能够看到你的心情小表情,并且还有心情占比、情绪波动分析,最后在日历上还能看到每日心情的状态,可以很好的记录每日的心情。



查看心情



3.彩蛋设计

1.放个气球

放个气球把心情写进气球发送出去,可以抒发自己的情绪。同时,你想自己接收就可以点收一个,出现气球动效加载,就会接收到别人发出的信息,不想要了,可以点放飞消息就没有了。



收气球



2.发射泡泡

虽然泡泡这种形式很常见,但是遥望在细节处做的设计还是很用心,很容易触动用户。发射泡泡很容易让然想到泡泡相机,加上“biubiu”的音效,有很强的场景感。



2. 配配app

1.视觉设计

配配app的设计可以说是以IP形象为切入的设计,app里面有着各种各样的表情和动势,生动且逗比。而且配配在设计的时候会融入很多小的细节,也能带给我们很多不一样的感受。整个ip融入可以说做的很彻底,能够让用户的品牌感知十分深刻。



2.文字字体

贴贴功能用了一个超大的特殊的文字字体设计,十分醒目,在瀑布流的页面对用户的信息区分的比较清楚,但是对于用户的照片也形成了遮挡,有的时候并不是很好。发布贴贴的超大字体的设计很少有人这么设计,虽然看起来粗糙,但是却与众不同。



3.品牌融入

配配app让人印象比较深刻的就是这个IP的形象了,在页面的各种地方都能看到他,无论是在催促你、还是在悠闲的吃东西,还是举起手或是一起打call,哪里都少不了它。它的设定非常生活化,也很贴近我们的日常,所以这样才更够亲近。



2.动效设计

1.点亮

点亮设计就是点击后,写下一个故事就可以和其他用户打招呼了,点亮后灯泡会发出光,然后有星星散落下来,将表情运用在按钮上也是很新颖的设计方法了。



2.发布动态

发布动态的功能IP会向你招招手,引导用户参与发布动态。



3.动态背景

配配的动态背景很有意思,打call、吃苹果、打盹,根据不同用户展示不同的动态背景。




3.糖果app

糖果app的设计在于匹配器和其他的很与众不同,像是在一起炫舞的样子,看起来很有场景感。糖果app的整体视觉风格比较中规中矩,

不过有一些的功能设计和设计小细节值得体验一下。



1.广场匹配器

糖果的首页的匹配器设计是一群人在广场上一起炫舞,然后各自摆着不同的怪异的姿势,设计上十分新颖。



2.恋爱上上签

恋爱上上签就像我们去寺庙里求姻缘一样,通过摇晃签子就可以找寻到好姻缘。罐子上的表情左看看右看看然后闭上眼睛,最后终于连接上一个十分匹配的好友。



3.解忧罐子

解忧罐子就是把心情放在罐子里,发送出去,别人可以看到你的罐子,然后你自己也可以做罐子发送给别人。



4.无聊哔哔鸡

无聊哔哔鸡就是一只鸡不停的晃动,可以发送一句消息直接可以连接到好友。



4.Blurrr app

Blurrr app是一款功能强大的视频剪辑软件,Blurrr虽然是一款工具软件,但是在配色和设计上还是十分大胆,荧光绿的颜色和黑色的结合,十分亮眼,里面的动效也十分细腻,非常吸引人的眼球。



引导页的设计用多彩的图形设计+表情+动效设计的方式,打造了灵动的引导页设计,形成了自己很独特的风格。




作者:章鱼铺里
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

比Midjourney还实用!深度体验PS新出的AI绘画功能

博博

一、Photoshop(Beta)版本安装

PS的AI功能需要在Beta版本中才能使用,安装过程很简单,可以从下列这个网址前往Adobe官网下载Photoshop(Beta)版本:

https://helpx.adobe.com/cn/photoshop/using/generative-fill.html



点击「试用」按钮,会调起电脑中的Creative Cloud应用,正常来说大家电脑里有Adobe软件一般都会有Creative Cloud,没下载的话按提示下载就可。

在Creative Cloud中找到①Beta应用程序,点击②安装按钮,再点击③打开按钮,就可以启动Beta版PS啦!(我这里已经安装过,所以直接显示了安装按钮)



Beta版PS白色的logo和有趣的启动页面⬇️



二、AI创意填充功能

Midjourney生成的图默认是方形,主体位于画面的中央。如果我们想把主体的位置移到画面左侧或右侧,需要花费很大的精力,而PS(Beta)的AI创意填充功能可以很好解决这个痛点问题!

下图是在Midjourney中生成的例图,人物在画面的正中间,关键词描述:

「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」



如果我想在不抠像、不变形拉伸的情况下,把图片变成横版尺寸,并把人物移到画面右边,需要在PS(Beta)中怎么操作呢?

① 先把例图拖到PS中,用[C]裁剪工具在画布左边拉一个空白。



② 切换到[M]选框工具,框选刚才拉出的空白画布,下方会出现一个工具栏。



③ 点击工具栏的第一个「创成式填充」按钮,进入到AI创意填充功能。



PS的创意填充看起来很像把Midjourney的输入框移植到PS中,但功能上又和Midjourney不太一样:

·PS的输入框没有复杂的指令,只需要输入关键词描述,就能够在选区内生成想要的内容;

·支持不输入内容,直接点击「生成」按钮,AI会根据画面周围的内容智能填充选区。

三、不输入内容直接生成

第一次体验我没有输入任何内容,直接点击PS的「生成」按钮,一次能生成3张图片。点击左右箭头可以切换查看3张图,如果觉得不满意可以再点击「生成」,再生成3张填充图。

效果图1⬇️



效果图2⬇️



效果图3⬇️



第一次测试生成的图片效果远超出预期,和原图风格也很接近,唯一不足的地方是和原图拼接处有一条白线,看起来有点碍眼。

经过多次尝试后,终于发现了问题所在:如果框选时刚好只选取了空白画布,生成出来的新图和原图之间就会产生明显的接缝。简单高效的解决方式是在框选画布的时候多框一点点原图。



这样再点击「生成」按钮,运算出来就会有很完美的过渡,看不出破绽。



四、输入关键词描述

体验完不输入关键词直接生成后,接下来体验一下输入关键词描述后生成的图片效果如何~这次使用同样的方法在例图右侧先拉出一个空白画布,输入关键词描述:

「Particle effect, sense of technology」

生成的图片效果很棒,和原图完美地融合在一起,不得不服啊太厉害了!

效果图1⬇️



效果图2⬇️



右侧的属性栏会记录你刚输入的关键词,可以随时修改关键词,点击再次生成3张图,依次类推,生成的所有图都会保留下来,方便选择。

最后



通过这次体验感觉PS的AI填充非常强大,而且效果很精准,谁能想到在PS中就能完成对一张图的拉伸和智能填充。


作者:Clippp
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

竞品分析实例拆解

博博

一、竞品调研的结构


首先说明,竞品调研的方法有很多,本文只提供一种方法供参考,建议大家活学活用。

建议从下面4个方面入手:


1)调研背景
主要说一些为什么要调研,希望通过调研答达到什么样的目的?是视觉升级、体验升级还是为了提升转化率?只有了解为什么做调研这件事情,才能知道从哪几个维度调研。


2)调研样本
建议选几个直接竞品,再选几个优秀的次要竞品也是可以的,可以帮助补齐盲点。


3)调研维度
调研维度要根据调研目的来确定,例如如果是为了视觉升级,那么调研维度主要就集中在视觉效果上,如果是体验升级,那么调研维度主要集中在交互体验层面。
所以维度的选择一定是和此次调研的目的紧密相关的,不过,倒也不是说如果是视觉升级就只调研视觉方面的内容,而是咱们要有一个主要的调研方向,啥都想要,最后啥都做不好。


4)结论
结论是最重要的,毕竟,做这次的调研不就是为了这份结论吗?所以最后一定要有结论,也就是咱们通过调研得到了什么结论。


二、实例拆解

1、调研背景


我公司这个项目是做一个官网的改版,官网主要就改版主要目标有两个:


第一个目标是视觉体验升级,拆解下来就是界面更好看,内容更好找。
第二个目标是提升用户转化率,更细致的拆解一下就是让更多的用户点击【咨询】按钮。

可以得到关键词:界面更好看、内容更好找、咨询客服的人数更多。

好,咱们继续,下一步是找样本。


2、调研样本


前面提到过,样本最好是直接竞品+间接竞品(主要是一线大厂竞品)。
所以这次调研我选择了几个直接竞品的官网,以及华为、飞书等这样的做的比较优秀的产品进行辅助分析。

3、选取调研维度


调研维度又可以分为两大部分:整体结构、内容拆解。

了解整体架构是每个竞品调研都离不开的步骤,可以帮助我们快速了解行业内的通识性做法,毕竟站在巨人的肩膀上才能看得更远嘛。

1)整体架构
我当时的做法是把主要竞品的官网都截图下来,然后一个模块一个模块的去分析,其实看下来你会发现,大家的做法都是有迹可循的。
看下面的图片,我把他们类似的模块用同样的颜色框出来,框出来后就会发现,哦,原来,这就是行业内的通识性做法。




然后我把这种通识性做法归纳总结出来,发现,其实官网首页可以划分为四大板块:

  • 常规内容:head、foot
  • 建立认知:banner、产品介绍、解决方案、产品优势
  • 增加信任:客户评价、客户案例、新闻资讯、行业认可
  • 转化:免费试用、在线咨询、电话咨询



你看,看似有很多复杂内容的官网, 其实也就这几个模块,这样看是不是就清晰多了。

既然咱们通过架构梳理来了官网的内容,下一步就进行内容的拆解了,拆解什么内容?就是拆解上面总结出来的规律呀。


2)内容拆解


为啥要拆解内容呢?
因为咱们竞品分析的目的不就是要做到“人有我优”嘛,咱们竞品分析是为了青出于蓝而胜于蓝呀,所以咱们不能直接抄人家的内容,这是无效设计,咱们要做的是分析他们的优点,然后借鉴,然后超越。

进行内容拆解的时候,建议先定几个拆解维度,不然会没有方向,这里我分了三个维度来进行拆解:

  • 用户诉求:用户的需求、疑问或者想达到的目标
  • 业务策略:针对用户诉求,网站做出的一系列解决方案
  • 表达形式:完成业务策略的交互/视觉展现方式


我就拿【建立认知】板块来举例。

官网首页的建立认知是什么?

是让进来的用户对整个网站有一个基础的认知,顾客来了,对店铺总要有一个第一印象吧。

通过前面的架构拆解我们发现,首页一般使用4种方法来对用户建立认知,哪四种?
banner、产品介绍、解决方案、产品优势


一个用户看了banner,浏览了产品介绍和解决方案,看了产品优势,是不是对咱们的产品有了一个认知了,这就是建立认知的过程。
那么咱们如何去分析呢?
我的做法是一个个板块分析,有些麻烦啊,但是相信我,值得。

下面我就拿建立认知里面的“产品介绍”来举例子,看看如何去分析产品介绍这个板块。

使用3个维度来分析:
维度1:用户诉求(用户进来之后的诉求)
产品介绍内容是否有我需要的产品和功能?是否满足我的需求?
维度2:业务策略(针对用户诉求,业务是怎么解决的)
讲清楚三个问题,即“我们的产品是什么”、“我们能做什么”、“我们有什么优势“
维度3:常用表达形式(用什么样的表达方式来实现策略)

  • 分点描述:减少大段落文字,分点描述,增强阅读性,降低理解成本
  • 提炼卖点:将核心功能提炼出来,吸引用户注意力,精准打击,结合图标提升可读性
  • 试用入口:视觉上强化按钮,引导转化
  • 图文结合:图>文,可视化表达降低理解成本,增强临场感


拆解下来,是不是对产品介绍板块很了解了,产品介绍板块主要的目的就是为了讲清楚咱们是谁,咱们的优势啊。王婆卖瓜,瓜虽好,但是咱们得让来的人知道咱们的瓜好呀,所以表达方式也是至关重要的,用什么形式去表达这个板块呢?其实竞品已经有了很好的解决方案,那就是上面描述的。

你看,这样一通分析,其实你的方案就自然而出来了,你知道往哪个方向去使劲了,而不是看别人有啥咱们就做啥。


作者:馊面包
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

用户心智模型的3运用和3匹配

博博

你听过用户心智模型这个名词吗?设计方案时有考虑过匹配用户心智模型吗?如何匹配?下文将梳理智模型到底是什么以及如何运用。



先问你一个问题。
拼多多、淘宝、京东这三家购物平台,你认为它们的区别是什么?
或者换个方式问你。
买电器你去哪个平台?
买衣服你去哪个平台? 买垃圾袋你去哪个平台?
是不是有了答案了?
没猜错的话, 大部分人的答案是:买电器去京东、买衣服去淘宝、买垃圾袋去拼多多。
你看,这就是一个购物心智模型,你的心里对这三家平台已经产生了固有的心智,如果让你去京东买衣服,你会不会觉得,有些别扭?
没错,这就是心智模型。


百度百科对心智模型的定义是:
“深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。”
关键词是:故事、习惯、局限。


淘宝一开始就我们讲了一个故事,一个万能的集市,我们习惯在上面买衣服,但是也产生了局限性,那就是,当我们想买大额电器的时候,还是会选择京东。
我个人对心智模型的理解是:
我们内心深处对一个事物的看法。
空口聊天多没意思,下面举个例子。
这是一尊陶俑,第一眼你觉得她像什么?


是不是觉得像米老鼠?


为什么?


因为陶俑的头上的发髻和米老鼠标志性的耳朵很像。


如果你从没见过米老鼠,你还会觉得她像米老鼠吗?


一定不会。


这就是心智模型,你对头顶的大圆形的心智是“米老鼠”,所以一旦你看到类似的形状,米老鼠的形象就会浮现出来,这个发髻的形状和你心里对米老鼠的形象产生了匹配。



对心智模型有没有一点印象了?

下面我们接着聊。

我不想用具体的界面来聊,那样的话太散,我认为要想理解一个概念,最好还是从“面”的角度来说,所以下面我会举一些商业上的案例来辅助理解。

心智模型有哪三种运用方式?


第一种:创建新的心智模型


第二种:改变旧的心智模型


第三种:匹配现有的心智模型


可以理解成一件事情的新生、改变和延续。



下面咱们一个个来。
第一种:创建新的心智模型


难度指数:难啊。


记得《盗梦空间》里最难的是什么吗?


最难的不是盗梦,而是植入一个想法。


创建新的心智模型有异曲同工之妙,都是让别人内心接收一个事物,需要刻意培养。


举几个例子。


当年外卖刚开始的时候,家家搞补贴,很多时候几乎不花钱就可以点外卖,后来这些福利没有了,为啥?


因为点外卖的心智已经培养好了,你离不开它了,所以平台可以“不惯着你了”。


还有唯品会的正品低价、瑞幸一开始的星巴克平替,这些都是他们想要植入到用户大脑中的心智。


为什么要费劲植入一个新的想法?


因为一旦植入了,就很难改变。


现在我身边的很多朋友想买一些低价的品牌都会上唯品会,买咖啡会喝瑞幸,一旦用户的习惯养成就很难改变,意味着什么?

意味着留存和转化的成本更低了。


第二种:改变旧的心智模型


难度指数:也难。


《盗梦空间》里小李子的妻子被他植入了一个想法“你不在现实世界里”,当他和他妻子回到现实世界后,他妻子仍旧认为自己不在现实世界里,这个被植入的想法已经根深蒂固,很难改变。


所以改变旧的心智也不简单。


例如小米最初主打极致性价比,后来想往高端路线走,很难,大家心里已经认准了小米就是“性价比之王”,也就是你的产品不仅要好还要便宜。


这就导致小米一涨价,大家就骂他们忘了初心……所以小米拆分出了红米主攻性价比,小米往高端发展,但是仍旧很难。



拼多多的百亿补贴也是一样的道理,一开始的砍一刀深入人心,大家对拼多多的心智已经成型:便宜,质量一般。拼多多想改变这个心智,推出百亿补贴,并承诺假一赔十,就是想告诉大家,我拼多多,也是有正品好货的。不过,效果嘛,见仁见智。

第三种:匹配现有的心智模型


难度指数:相对简单。


其实匹配现有的心智模型,是相对最简单的方法,市场已经帮你把用户习惯培养好了,你直接使用,那肯定事半功倍,省时省力啊。


举个例子,大家最近有关注小米的 13 Ultra 吗?


小米和徕卡联合研发的,主打徕卡调色的相机。


我有一个同事就直接把手里的微单换成了 13 Ultra ,因为拍照足够好看而且便携。


这里不是要推销手机啊,是想让你们了解 13 Ultra 是个什么东西。


然后给大家看看它的手柄(一个配角,可以拆卸)。


是不是有些熟悉?
和相机像不像?


这个手柄就是沿用了相机的心智模式。

小结一下:


心智模型有3种用法:


新建:创建新的心智模型


改变:改变旧的心智模型


延续:匹配现有的心智模型

下面聊聊,咱们怎么做才能更加匹配用户的心智模型?


同样的,我不会拿具体页面来举例,还是希望把思考方式分享给大家,而不是某一个页面的设计。

要想匹配用户的心智模型其实就三步:

了解业务、了解用户、竞品调研。


或者可以这么说, 在懂业务、懂用户的基础上,还要了解行业内的通用做法。



1)了解业务


一定要了解业务,为什么?


因为好的设计方案千千万,但是匹配你的业务的方案才是好方案,如果不了解业务,可能设计出来的方案就是自嗨,例如网上很多的dribble风设计。



又比如说手机浏览器一般都把搜索框放到屏幕顶部,而夸克浏览器却把搜索框放到了下面。


为什么?


因为夸克想推翻传统的浏览器,想打造一款更年轻更好用的浏览器,把搜索框放到下面也是满足他们的业务诉求,现在手机屏幕越来越大,搜索框放在下面手指操作更加方便。
所以,一定要先去了解业务。


拼多多和淘宝同样都是电商平台,可它们的用户心智相差甚大,因为最后方案设计是服务于最初的业务目标的,业务不同,呈现的方案也不一样,最后让用户形成的心智也不同。




2)了解用户

为啥?给老人和小孩设计的界面能一样吗?


就拿颜色和文字来说。


小孩喜欢高饱和、丰富的颜色,而老人则需要考虑在各种场景下都能看得清楚信息的颜色。


小孩喜欢圆润的卡通字体,而老人需要识别度更高的字体,更大的字号。


不同的用户,采用的设计一定是不同的,只有了解了他们的喜好和痛点,才能做出符合他们心智模型的设计。

3)竞品调研
为啥要竞品调研呢?


因为竞品和我们的产品类似,那么意味着用户大概率重合度也高,甚至业务上都有一定相似度,那么意味着,竞品的方案,大概率是经过市场验证的符合用户心智模型的方案。


你看,既然竞品已经给咱们打了个样,为何还要自己闷头造轮子呢?

咱们目的是解决问题,又不是为了证明自己很厉害。


但是,不要误解,我不是说照着竞品抄,而是取长补短,所以不仅要调研,还要分析,分析就是把竞品的优劣势找出来,好的地方咱们可以酌情借鉴,不好的地方,咱们也要避个雷嘛。


好了,小结一下,要想匹配用户的心智模型,一定要了解业务、了解用户,还要做竞品调研了解市场的通识性做法。


以上。


作者:馊面包
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

喜茶小程序产品设计体验分析

博博

进入喜茶小程序的时候给我的感受是简洁、时尚、极致的设计风格,截了两张小程序内的两个界面。 确实做的还挺不错的,为什么给人感受不一样?接下来我们分析分析




1.版式

1.首先从下面的页面我们能发现,界面的排版只有卡片左边距留了20的安全距离,而卡片右边安全距离为0,这样特别的版式设计给人不对称的感觉,这样的设计能让用户记住,同时又有一点时尚范的感觉,很符合喜茶目标用户年轻人的审美。
2.同时产品的banner是3:2的比例,较为靠近黄金比例的尺寸。 



1.点单页面,喜茶新增了新品推广位,一些新上的产品都会在推广位呈现,尺寸比例4:3,给人的感受像是线下海报一样,同时第三个广告位露出部分,让用户知道后面还可以左滑查看。同时推广页的右下角有个箭头指引,告知用户可点击。 

2.看完这几个页面会发现,喜茶的基本上都是纯直角的设计语言,推广页是直角、标签是直角、按钮微圆角,直角的设计语言给人的感受是时尚、极致、极简的设计感受,个人非常喜欢。 

3.但是点单页面的有点乱,标签的颜色过多,不够统一,图标的也非常的多,这样给人的感受就会比较凌乱,尽可能少的去表现,这样更加能提高用户的效率。



1.在点单页面用户上滑,推广位渐渐的往上消失,这样产品的展示会更多,利于用户挑选和寻找。 

2.用户在选口味界面,发现每一个标签的内的文字左右的安全距离一致,依次排列,具有节奏感,页面给人感受简洁、易操作,同时用户可以选自己的口味,可进行保存,下次点直接就可以选择自己的口味。





在喜茶的百货界面能清晰发现每一个模块的都是不一样的,很多产品的商场页面都是一致的,而喜茶在产品的展示会以不一样的形式出现,每一个模块都有尺寸和排版的差异,这样给用户有种落错感,更加有设计。



2.会员页

1.喜茶的会员页给我眼前一亮的感觉,会员的背景用色都是明度高、纯度低的渐变给人的感受清新、淡雅的感觉。 

2.会员页用户在切换的同时图标的颜色会跟着会员的颜色变化,特权的内容也会有不一样的变化,让用户有明显的等级感知。 

3.切换到“黑卡”的时候,会发现会员页的“喜”字加上了质感。 

4.会员卡上“喜”字提取了“喜茶”中的“喜”,跟其他产品的会员做了区分的同时又加深了品牌印象







3.图标 

喜茶有两种不同风格的图标,一种是比较极简,线性,差异性没有那么强,而另一种则是插画风格的图标,给人感受比较有趣,更有差异,极简则符合喜茶整体小程序的调性,而插画又丰富了页面的单调性。



4.动画 

1.喜茶顶部的banner做非常不错,例如跟FENDI合作的会在首屏加入视频,用户一进入小程序就能看到能很好的吸引用户的注意。 



2.用户在左右切换banner时,文字会先出现然后底部的图片渐渐出现,给用户感受自然、流畅的感受,好的动画效果能给产品加分,给用户留下好的感受。



5.字体

1.喜茶的数字字体是NeutraText-DemiAlt,每次进去喜茶看到他们的数字字体非常有独特性,给人的感受时尚、极致、有设计。 

2.部分界面和海报喜茶会用上方正悠宋,有点中国风、古风的韵味在里面,而且也非常有独特的设计美感,喜茶会应用在国风的海报以及会员页的“喜”字上,突出风格化。

3.好的字体能很好的提高产品的品牌感和设计美感,更能传达该品牌想传达的东西。




6.更多界面欣赏





作者:黄小伟
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

看视频能赚钱!激励视频广告的框架设计与提转思考

博博

本文讲述百度激励视频广告,从0到1的容器框架设计,以及如何通过设计举措进一步提升转化效果的设计思考。

近年来,行业内不断探索广告的新玩法,激励视频广告成为一种愈加流行的广告形式,当前已经是媒体主流变现模式之一,以满足广告主营销效果、媒体变现效率最大化。对用户而言,观看激励视频广告能够获得相应奖励;对于客户,激励视频广告通过奖励机制,得到更长时间的曝光来提升转化率;对于平台,有更高的变现效率能带来更高的收益。

百度激励视频广告承载着百度APP任务系统、权益场景、活动场景等的重要变现任务,本文将从激励视频广告的框架、提升转化效果两个方面,来阐述容器结构设计与提升转化效果的设计思考。

框架:建立场景核心转化流程

激励视频广告是独立的视频场景,场景内的元素布局、容器结构不依赖于所在的宿主场景,在整个交互链路中能够采用更有创新的设计形式。

1、布局跨场景横向一致

基于激励视频广告的元素来明确内容分区,考虑元素作用与通用性可分为顶部框架区、附加挂载区、内容信息区、转化决策区,在结构设计上,将核心奖励计时组件置于顶部框架区并保持稳定展现,保证百度APP内的视频广告在布局上横向一致性,同时也有利于场景之间创意交叉验证与复用。

2、容器、元素组件选型

从激励视频的链路流程出发,结合主动交互行为的各类组件状态:奖励计时与完成、视频播放与完播、浏览落地页、退出挽留四种核心状态。

1)奖励计时与完成:考虑奖励计时器会存在于多种不同场景情况,需要具备横向统一的计时形式来稳定用户预期,以及通过视觉反馈给予用户明确的状态变化感知,来降低不同场景下的理解成本,通过ABtest的方式,最终选用场景元素图标与文本计时形式,图标能够根据奖励的不同支持灵活配置,满足多元化场景的适配诉求,同时选用视觉感知较弱的样式与动画形式,尽可能避免与点击、转化无关的元素动画稀释用户对内容的注意力,从而影响广告效果。

2)视频播放与完播:播放状态下,为尽量降低对视频内容的遮挡,在转化组件的呈现上,采用“延迟展现吸引观看,渐进式增强吸引点击”的手段,视频完播状态下呈现视频尾帧,尾帧增加再看一个视频功能,为想要获得金币的用户缩短操作步长,提升激励视频广告的分发。

3)浏览落地页:浏览落地页过程中也需明示奖励计时,为了保证视频场景和落地页场景的计时延续与组件统一性,采用避让计时组件的面板化落地页容器。

4)退出挽留:当用户在不同奖励状态下会在退出的主动行为,挽留弹窗承载挽留与再看功能的重要作用,弹窗作为前后链路场景的共性组件,在弹窗设计上顶部承载所在场景主视觉IP,以满足多元化场景的下活动主视觉的延续,使激励视频广告更契合所在活动场景。

3、转化链路降步长

在原有的基础路径上,奖励计时与倒计时结束的两个环节仅有计时器形态的变化,元素变化是容易起到聚焦视觉的作用的,以倒计时结束为节点,将用户从"视频场景"带入到"决策场景",通过容器结构形态的变化来解放停留在计时器上的视觉焦点,面板结构能承载更多的增益内容,延展信息载量,视频完播是判断用户对内容感兴趣的重要契机,在视频完播状态自动调起落地页,通过缩短转化步长提升转化效率。

激励视频广告容器每一步迭代都伴随大量的前置思考、归因分析、严谨实验,经历多轮迭代最终完成流程框架搭建,后面我们仍要思考如何通过设计方法,在现有的框架上进一步提升转化效果。

提转:内容化与奖励玩法助决策

在广告创意视角下,通过内容信息命中用户诉求、满足心理期望能够提升转化效果;在用户目标视角下,我们希望充分发挥激励机制,给予用户更多丰富的奖励交互与玩法,持续获取收益与满足感。

1、增益信息前置,助力转化决策

轮播推荐词:推荐词轮播的形式来营造场景内互动氛围,在一些节日期间通过契合节日的情感化文案,让内容更贴合节日营销氛围,同时将落地页中的优质广告卖点、数据生成的热度等多元的营销信息前置,助力用户决策。

行动号召词:不同广告内容之间的转化文案存在差异化的表达,通过符合广告内容的决策性文案披露,将固定文案升级为营销目标及类型特征文案,辅助转化决策,在容器内每一个元素都应该作为广告创意的一部分。

2、分段奖励计时,引导视频完播

点击率、转化率随视频播放时长的数据变化,发现呈现正相关的趋势,我们希望用户能够选择看完视频,核心思路是将用户从低变现效率场景,引导至高变现效率的场景,由此我们通过两段计时奖励的设计形式,激励用户可以拿到更多奖励并将视频看完,考虑多种不同场景以及理解成本的问题,最终选用两段奖励计时组件的方式。

3、彩蛋营造惊喜,提升转化

为了更好的匹配各大电商平台调起类广告的预算,大促期间的突然出现的礼物彩蛋为用户营造节日惊喜感,在点击行为后,红包元素的弹窗与彩带动画形式来承载金币奖励与氛围,奖励感知的触达能够提升用户的获得感,同时在奖励弹窗上进一步承载调起任务,从而更好的满足客户营销诉求。

4、强化转化组件,增强奖励触达

延续以上惊喜感奖励满足促转化的思路,针对下载类广告,我们在转化组件上进行与奖励内容的结合,在任务计时完成但并没有形成转化的时机下,通过变色与光效视觉吸引来传递奖励信息,通过强化奖励感知和转化组件来助力转化决策。

写在最后

激励视频广告至今经历了多个不同的阶段,如何在商业效果与用户感知之间选取一个平衡点,一直都是激励视频广告的长久的设计课题,目前也只是一个开始,还有很多的设计提转机会点等待我们去深挖,相信在不久的将来能够探索更加多元的激励玩法,发现更多契合用户诉求的场景,为更好的价值生产不断迭代功能与体验,我们希望能够给予用户、客户、平台更多的价值增益,做用户喜欢、客户满意、平台有利的商业设计。


作者:百度MEUX
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

帕累托原则 | 设计师需要知道的设计原则!

博博

一、认识帕累托法则

1.帕累托法则的背景

19世纪末,意大利经济学家和工程师维尔弗雷多·帕累托(Vilfredo Pareto)发现,自家花园中80%的豌豆产自于20%的豌豆荚,在随后研究土地所有权和财富不平等的问题中,再次发现意大利 80%的土地属于 20%的人。
20世纪初,由管理学家约瑟夫·朱兰(Joseph Juran)将其命名为帕累托法则,即80%的结果是20%的原因造成的,并且号召关注「重要的少数」而不是在「琐碎的多数」当中投注精力。后续在经济学中得出结论(80%的财富掌握在20%的人手里)更加证实了帕累托法则的观点。

2.正确理解80与20

帕累托法则有很多不同的叫法,如帕列托法则、关键少数法则、二八法则、巴莱特定律、最省力的法则、不平衡原则等,后续笔者将其称为「80/20法则」。
其实,80/20法则是一个较为抽象的概念,可以理解为:大部分的效果由少数几项关键的因素来决定。在实际的场景中,“大部分”不是精确的80%,“几项关键因素”也不是固定的20%,数据会有所浮动,可能是70%+30%或者90%+10%,但不管这些数字如何波动,其背后蕴含的规律(集中的投入将产出大于预期的结果)是不变的,并且生活中存在的许多不平衡现象,都与这个规律相当接近。

3.可适用范围

80/20法则并不受人为直接控制,更多时候是自然而然的形成,其适用领域非常广泛。早期大多数用于社会、经济、管理以及工程等领域,而在80年代末就已经有设计师将其设计领域,在各行各业中,已经有大量的案例证明了 80/20原则:

  • 人类80%的科学发明,来自于20%的人口
  • 社会上20%的人占有80%的财富
  • 城市80%的交通,集中在20%的道路上
  • 20%的客户为公司贡献了80%的收入
  • 公司80%的收益来源于20%的产品
  • 20%的网站获取了 80%的网络流量
  • 20%的常见软件错误导致了80%的系统崩溃
  • ......


4.设计领域中的运用

70年代中期出现图形化界面,而到80年代末,80/20法则就已经被设计师引用在设计规范当中,后续经过不断的发展及优化,现已深入设计中的方方面面,PM用来处理KPI、UX用来划分权重、UI用来决策版面布局等。
界面设计中该如何应用80/20法则,这就需要设计师时刻注意如何让用户更快找到目标、如何更顺畅的完成任务以及如何拥有更愉悦的心理感受。例如80%的用户只会用到20%的功能,那么设计师就应该将80%的时间、精力集中在这20%的功能上,不断迎合用户需求以及使用体验。


二、产品如何应对80与20

1.关键性的20%

80/20法则能够帮助我们提供决策思路、梳理设计方向,通过前面的了解,我们应该清楚了产品80%的用户只会用到20%的功能,而80%的收益也恰恰来自于20%的付费用户,甚至低于20%。
虽然一直呼吁尽量满足所有用户,但产品团队的重心始终要围绕着20%来进行,从产品到设计、再到开发测试,都能以此为方向制定问题的解决方案。

2.非关键性的80%

任何一款产品都不能忽略主次,每隔一段时间就要重新评估功能价值,以备后续的更新迭代,针对非关键性的80%切勿耗费过多的精力,以免喧宾夺主,不仅得到不好的反馈、还会带来不必要的损失,吃力不讨好。
对于已经过期的核心(曾经20%)功能,需要及时降低权重以及精力的消耗,不然即便是掌声一片、也可能无法变现。

3.仅关注 20%有风险

用20%的部分创造80%的价值,并不意味着只关注20%的关键性指标、其它的就可以被忽略,这样做表面上看是挺诱人,但会让其他很多指标停滞,呈现出产品过度优化的情况,造成短时间内隐藏的负面影响。
团队应该要有众览全局的眼光,考虑到各指标间的相互影响,可视情况而定将时间和精力合理分配,如90%+10%、80%+20%、70%+30%等,只要是将大部分用在关键性指标上即可。


三、在UI设计中的运用

在UI设计中,我们会将主要精力花费在20%的页面设计上,例如APP底部标签栏的几大主页或其它重要的一/二级页面,会花费更多的心思去构思不一样的布局、表现手法,将设计功底凸显出来。而剩下80%的页面就相对机械化,会使用一些常规样式以及复用的方式像搭积木一样快速完成,成本之低、效率之高毋庸置疑。
同一个页面的设计方式也是如此,设计师将大量心思放在首屏及位置靠上的功能上,待超过一屏后下滑时,设计也会逐渐轻量、组件化,这有助于节省产品、设计、开发更多的时间。

1.排版布局(F型)

用户浏览屏幕时,眼球移动的顺序通常都是从左到右、从上到下(基于网页浏览眼动测试),这种移动轨迹很像字母「F」,这也让F型布局成为网页设计中效率最高的方式之一,所以设计师通常会将重要的信息放在左上角或左侧,不重要的信息放在右侧。
如下面这张眼动测试图,F型布局也正好诠释了80/20法则合理性与可行性,在页面中20%的关键区域,吸引了用户80%的注意力。


2.功能入口设计

很多产品因为业务功能的庞大,一股脑的将信息全部展示出来,看起来十分臃肿,用户不能快速找到自己想要的信内容,就会失去信心。
优酷APP首页将热门频道和点击频率较高的频道显示在顶部导航中,如精选、电视剧、电影、最新院线等,而其他更多的分类则隐藏在频道选项卡中,将少量(≈20%)重要的内容放在明显的位置,目的就是为了让大部分用户更快触达,提高了产品的易用性。


3.选项列表设计

在一些选项列表中,由于选项数量的庞大,会给用户增加使用难度。
例如,使用美团购买火车票在选择地址时,面对超长的地址列表,逐个查看或通过字母筛选,都要花费一定的时间和操作成本,即便可以通过码字搜索来完成,但因为自行输入有很多的不可控性,能让用户选择的就不要让其输入。对于地址列表,除开自动定位和搜索历史,运用80/20法则就能很好的解决这一问题,系统将约20%高频选择的热门城市作为单独的模块放在全部列表之前,提高了大部分用户的搜索效率。

4.极简风格设计

极简风格的界面设计跟80/20法则在精神上保持着高度的一致,剔除多余、无用的元素,而保留的每一个元素都是有目的、有针对性的,也是绝对必要的存在。在极简主义设计中,视觉上简单干净,大部分都是通过通过留白来衬托关键性元素的存在,让用户更加聚焦于主要功能/信息。


四、与其他法则的纠葛

1.与奥卡姆剃刀的结合

奥卡姆剃刀指出「如无必要,勿增实体」,需知页面中每多一个元素都会增加视觉“噪声”,意味着用户需要花费额外的时间和理解成本,对用户体验的影响是很大的。那么问题来了,当产品需要增加一项需求量小但确实存在的功能,该怎么处理?
这时我们可以将奥卡姆剃刀原则作为最终的评判标准,是否需要增加上述所说的功能,就要看看能否很好的控制团队开发成本和用户体验成本。其实在80/20法则中,很多小众但确实存在的功能需求基本很难抵消所造成的用户体验损失,所以即便实现了这个需求,也很难分配出20%的精力去维护与迭代,甚至“俺耳盗铃”般的将其遗忘,但这个视觉“噪声”一直存在,如果事先能分析出这种结果,这个需求根本不需要增加。


2.与长尾模型的对抗

在2004年长尾模型才被提出来的时候,很多人认为这是在颠覆80/20法则,它们的曲线长得很像,但结论完全相反,那条长长的“尾巴”(非关键的80%)所占据的长度几乎与头部的(关键的20%)高度相当,这说明收益虽低,但这么多数量的累积,依然值得重点关注。所以有很多企业在采集差异化战略时运用了长尾理论,例如小米搭建的全品类商城用的是长尾理论。
乍一听好像很有道理,难道80/20法则被推翻了吗?事实并非如此,长尾理论的成立必须要满足两个条件,第一是尾巴真的足够长(小众需求确实非常多),第二长尾巴能被用户发现(庞大的用户量),这两个条件缺一不可。例如京东、淘宝、微信、支付宝等,其前提都是建立在大规模、且海量的用户资源之上,不管多么隐蔽、多小的动能,总能拥有一些不错的曝光度,所以才能发挥长尾模型的作用。
说道这里,大家应该就明白了,那些中小型的产品对长尾模型大多是望尘莫及,所以在你的产品规模、用户量没有达到一定的级别之前,就不要妄捧长尾模型,用好80/20法则就好。



五、结语

80/20法则在实际工作中是一个相对普遍的定律,它能让我们灵活思考设计问题,更好的为用户服务,虽然80/20法则也存在一定的争议,但还是适用于觉绝大多数的场景,在关键时候使用,能帮助我们准确的找到问题点,在有限的时间和精力下快速作出优化决策并、关注核心功能,最终达成目标。



作者:大漠飞鹰CYSJ
来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档