首页

交互设计七大原则之——费茨定律

博博

通过改变目标的大小和到目标的距离来改变操作时间,帮助设计按钮等的交互.证明了获取目标的时间和目标的大小、距离的相关性。

什么是菲兹定律?

菲兹定律由心理学家Paul Fitt于1954年提出,它是物理世界中人体运动的数学模型。这一定律提出之后,在很多领域都得到了应用,但是在人机交互领域的影响尤为深远,可以说是人机交互领域的第一条定律,它通常被用来解释鼠标(PC端)和手势(移动端)在界面中的移动规律。这项定律尤其适合按钮等可点击、可选择、可交互的元素,目的:易于查找和选择。作为一个数学模型,菲兹定律是有表达式的,表达式如下:

T 是完成动作的时间a代表装置开始结束的时间,b表示该装置的速度,这些常数可从实测数据进行直线近似取得。D是起始位置到目标中心的距离。w是目标区域在运动维上的宽度。


结论: 离目标距离越近,所需的时间越短;目标尺寸越大,完成速度越快,时间就越短。也就是说,预测点击一个目标的时间,取决于目标和当前位置的距离+目标的大小。



如何将菲兹定律应用在交互设计上?

1 、放大可点击元素的尺寸

大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离,并且再进行精细的调整才能选中,这样不仅难以点击、且需要花费更多的时间。

这里的大指按钮的实际大小、也就是点击热区的大小,包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮,四周大量留白; 而移动端设计里通常会扩展宽度,使用各种通栏按钮,使用户操作更加容易和快捷,可点击图标也会放大可点击区域。


注意: 并不能无限的放大。大小给可用性带来的加成是有限制的,如果把一个很小的按钮放大,它会变得更易于点击;但是如果按钮尺寸已经足够大,那么再放大尺寸,也并不会提高可用性和用户操作效率。


2、 减少移动的距离

依据菲茨定律所言,距离目标越近,用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离,来提高用户的使用效率和交互体验。

1>减少绝对距离

因为移动端用户通常为单手操作,也就是大拇指为主要操作工具,在现在大屏手机泛滥的情况下,屏幕很多地方是单手无法触及的,所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。

2>减少相对距离

在两个或多个操作中,通过缩短可交互元素之间的距离来提高用户的使用效率。比如确认删除操作,因为它是重要的负向操作,所以对于双重确认,相比于在当前列表区域确认删除(如下图微信),如果使用弹框,那么用户手势的移动距离相对会更长(如下图淘宝)


p:对于微信来说,删除对话是用户比较常执行的操作,因此便利性应该更高;而淘宝更想阻止用户进行此操作。 也就是说并不是所有操作都需要缩短距离。


3 、相关元素靠近

相关的内容或者交互元素要彼此靠近,可以在视觉上增强他们之间的相关性认知


4 、屏幕的边缘和角落无限大

因为屏幕的边角有一个隐形的“结界”,可以阻止用户鼠标因为大幅移动而超出目标区域范围,因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落,而不用进一步微调。 所以屏幕的边角适合放置菜单栏、按钮这样的元素,不管箭头移动多远,最终会停在屏幕的边缘并定位到菜单上。 比如chrome浏览器它把TAB栏放在了屏幕最顶部边界,用户使用效率比较高。




其他补充:


1、饼状菜单会比线型菜单更易选择,而且错误率更低,这里面有两个原因:

  • 饼状菜单的每个菜单项和菜单中心的距离都一致

  • 饼状菜单的每个菜单项的楔形目标区域都非常大,一般都会扩展到屏幕的边缘


2、 目标点的位置实际上是边缘的一些像素加上边缘之外的全部面积。所以,这样看来目标点就足够大了。原因是基于fitts定律,它的一个分母的增大了而使得界面的效率提高了




总结:

1、我们想要更容易点击到控件,就应该放在屏幕的边缘或角落里。让常用的控件更大,更容易辨别;

2、使用屏幕的边缘和角落让控件有效扩大,永远不要把控件放在离屏幕边缘或角落一个像素远的地方;

3、边缘之外的地方,也可以算作目标点的面积,这样一来,目标的面积就被无限的放大了,也更方便用户操作。


补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画,先初步了解下:


作者:GIGI小王子

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

设计总是凭感觉?那是你不了解这些交互设计原则

博博

设计总是凭感觉?你有这样的困惑么


本文主要聊一下产品中使用的几个交互设计原则,一致性,费茨定律,容错性,希克定律。



一致性


我们在做设计时,经常会讲到要保持一致。一致性的好处从外部来说,可以极大的提升产品的易用性,降低用户的学习成本,同时也有利于品牌形象的传达。从内部来说,将一些相同或类似的功能进行复用,提高团队的协作效率,让资源得到更充分的利用。


那么设计师该如何做到一致性呢?

一致性体现在产品中可以体现在很多方面,比如是视觉风格统一,交互操作统一。视觉上可以是配色、字体、图标、页面布局、插画,以及在不同终端上的统一。交互操作可以是相同相似功能在不同页面的呼出方式,一些地方动画的表现形式。

另外,产品与本身所处的行业内的竞品的一致性,比如音乐播放页面,用户已经习惯了上面是歌曲宣传图,下面是播放切换的控件,各个产品的排版布局都是相似的,这样的统一可以让用户没有陌生感,在接触一个新的音乐类产品时很快的上手。

 

滴答清单的网页端、桌面版、网页插件,将页面的主要功能信息都放在了左边,中间部分是清单列表,最右侧是清单详情,配色都是用了灰色、白色、浅蓝色,图标风格上使用的面型风格,这三个终端的视觉风格是保持了高度的一致,传递给用户的也是很强的品牌理念。

 

 

阿里云盘,App启动页和网页功能介绍,都是使用了C4D插画,来保证两个终端品牌风格的一致性。

 

 


微博App的详情页及他人主页,这两个页面的评论功能都使用了相同的底部弹出框的控件样式,用户可以在不用思考的情况下直接操作,这是利用了相同功能在不同页面复用了相同的交互控件。

 

 

 

费茨定律


简单点来说,有两个关键因素,两个操作目标的距离、操作目标大小。第一个因素意思就是在当前产品中两步操作,手指移动的距离越短,操作就越容易。第二个因素是当前操作目标越大,操作越容易。

 

石墨文档App。在页面右下角有一个悬浮的新建按钮,点击后从底部弹出活动视图,用户可以进行新建文档、表格等操作。这里使用从底部弹出活动视图,而不是在新页面或者页面中间,正是利用了费茨定律,缩短了两步操作之间手指移动的距离,降低操作难度。

 

 

 

滴滴出行、如祺出行

滴滴出行打车页面,App首先会自动定位你当前所在位置为出发位置,目的地一栏显示文案「输入目的地」。设计师将输入框设计的很大,文案字体也很大,在当前页面中非常醒目,极大的方便了用户的操作。这就是应用了费茨定律的第二个因素,当前操作目标越大,操作也就越容易。

反观如祺出行的打车页面,出发地一栏和目的地一栏的尺寸是一样大的,都是使用图标+文字样式,出发地一栏使用深灰色的图标、深灰色的字体,而目的地一栏图标虽然使用了橙色主题色,但是文字的颜色是浅灰色,字号也没有放大,非常不显眼。要知道用户当前的迫切需求是输入目的地,这样设计无疑是增加了用户操作的难度。

 

 

 

 

容错性


平时在操作产品界面时,经常会因为一些原因造成操作错误,而有些错误造成的损失是无法挽回的。那么设计师应该怎么避免用户操作中犯错呢?容错性原则可以很好的解决这个问题。容错性定义是:


“容错性是产品对错误操作的承载性能,即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。容错性最初应用于计算机领域,它的存在能保证系统在故障存在的情况下不失效,仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。”

拆解一下,影响「操作时出现错误的概率」的因素有,操作前的引导提醒以及操作时的提示。影响「错误出现后得到解决的概率和效率」的因素有,操作后的解决方案

 

微信的修改微信号功能,不同于修改昵称直接进入编辑页面,微信在中间增加了一个页面,页面内容显示当前的微信号及提示文字,目的是提醒用户要慎重,避免有些用户修改了微信号之后后悔。这里是用到了容错性的操作前的引导提醒,降低了出现错误的概率。

 

 

QQ注册页面,用户输入昵称后,系统会检测昵称是否可用,及时给出给出提示。输入密码时会自动出现密码设置的提示,及时提醒密码都有哪些规则,避免用户输入不符合要求的密码。操作中给出这些相应的提示,可以使用户更加流畅的完成注册流程。

 

 

 

印象笔记网页版。将一篇笔记删除后,页面顶部会出现一个提示框,文案是「已将XX文章移至废纸篓」,提示框2、3秒之后自动消失。如果刚好这篇笔记是不小心误删的,这里的提示框给予了用户反悔的机会,帮助用户及时的找回笔记,弥补错误。

 

 

 

 

希克定律


希克定律,又叫是希克一海曼定律(Hick Hymalrs 1aw),是一种心理物理学定律。应用在产品设计当中,就是当页面中需要有不同选项时,要尽可能的少而简单,降低用户的决策成本。

 

美团外卖页面的金刚区,共有三行应用。核心推荐的5个应用是放在第一排,其他10个应用排成两排,核心推荐应用与其他应用在图标风格上使用了区别化设计,用户在进行选择时变成了5选1,而不是15选1。这是设计师在功能设计时针对应用做出了重要程度的区分,以帮助用户更快做出选择。


作者:不吃橙子D

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在交互设计中,作为设计师应遵循的7大定律-上

博博

在设计中寻找真理,探索每一个设计背后的意义。



除非有更好的选择,否则就遵从标准  —— 阿兰库珀



费茨定律:

距离:起始位置离目标位置越远,我们到达目标位置所花费的时间就越长,反之亦然。

目标大小:目标面积越大,我们定位到目标位置所花费的时间就越短,反之,目标越小,定位时间越长。


·生活中的费茨定律

刹车和油门踏板相距很近,刹车时的物理面积比油门的物理面积大,会最快接触到踏板,减少事故的发生。




·界面中的费茨定律

(1)距离目标位置尽量缩短,相关操作保持亲密性

例如:抖音的视频播放界面,系统会判断用户进行触发时手指与屏幕的接触位置,并将操作按钮显示在离用户手指最近的位置。


                                        


(2)目标尺寸大小要合适

目标点击热区在合适的范围内,越大越容易精准点击,越小越容易误操作。iOS交互指南中规定最小点击热区为44*44。

(3)拇指原则

人们在使用手机时,75%的交互操作都是由拇指驱动的,考虑到费茨定律,如果目标位置超出拇指的移动范围,操作成本增加。



米勒定律:

是交互设计中常用的一个定律,美国心理学家对人的记忆能力进行定量研究,他发现人的短时记忆能力广度为7±2个信息块,超过这个范围就容易出错,在7+2与7-2之间浮动。


·生活中的米勒定律

电话号码,银行卡号,身份证号码进行数字分隔,降低记忆成本,提高信息的易读性,视觉防错。




·界面中的米勒定律

(1)分段记忆,信息分层

文章、文本中的字号、字间距,目的就是便于读者记忆和提高易读性

(2)导航和选项卡不超过9个

网页设计的一级导航不要超过9个,如果导航和选项卡内容过多,可通过聚合按钮来包容其他次要入口。(用户使用导航就是要快速找到自己想要的内容,如不能快速查找,用户可能会就此流失掉)

(3)系列位置效应

首因效应:相对中间位置,我们对最前面的物体记忆清晰。

新近效应:相对中间位置,对序列末尾物体记忆更清晰。




席克定律:

是一种心理物理学定律,用户所面临的选择数量越多,花费时间越长,人机交互界面选项越多,用户决策时间越长。


·生活中的席克定律

遥控器按钮越少,越快做出操作;如交互设计四策略:删除、组合、隐藏、转移。功能层级也需要细分核心功能、辅助功能、边缘功能。而核心功能是进入产品第一个发现的功能,操作频率高,所以它的视觉应是最突出的,可以帮助用户增强感知和节约选择时间。


      


·界面中的席克定律

(1)减少选项并提供默认值

选项越多,用户决策的时间越长,减少用户思考的时间就是减少操作时间和学习成本,让用户不思考就做出正确的选择,对于小模块来说,一般选项不超过9个,9个以上可以用交互约束用户的行为,如展开收缩。


(2)选项分类分层,信息区分主次

在菜单栏的设计过程中,我们会进行同类分组和多级分层的设计,效率会更高。重点信息、推荐信息和普通信息要在时间上做区分,这样才能抢占视觉并在第一时间感知到。

(3)分步完成,分布显示

分解复杂流程,让用户一步步操作,而不是全部堆到用户面前,通过分步完成一个任务流,降低其他信息给用户带来的干扰。例如:用户填写表单时,可展示选项,当填完最后一项选“其他”时,再展开剩余的表单,目的上是为了减轻大量表单,给用户感知上带来的压力,达到场景细分的目的。


接近法则:

接近法则也是格式塔理论中我们最熟悉的,最常用的一种法则。观察者看到彼此临近的物体时,会将它们视为一体。


·生活中的接近法则

小区规划图中,会通过较宽的过道,绿植围栏来划分他们之间的关系,从而增强人们的感知。



·界面中的接近法则

界面中的接近原则是对相似的信息及功能类别进行分组、布局。作用是直接影响到用户与产品的视觉交流,引导用户的浏览及操作行为。

常见的在列表页面,通过色块区分大组与大组,分割线区分小组与小组,目的都是在视觉上通过组与组的区分来划分功能与功能之间的关联性。



以上这四条是我们在平常工作时都会用到的,我们再进行一个界面的设计时应该对照下以上几条定律,在与产品或开发battle时也能有理有据,告诉他我们「为什么这样设计」。写的手有些痛,剩下的4条定律下期我再继续补充,下期见~


作者:瞧见猫

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

八大交互设计原则帮你避免出现基础错误

博博

八大交互设计原则帮你避免出现基础错误


八个交互设计原则帮你避免出现基础错误


一致性:一致性能给用户节约成本、元素风格统一和延续性、产品内部结构的一致性


d02058fd5d48a8012160f70f1ec9.jpg





反馈:操作成功或失败都有明确的反馈、告诉用户此刻的状态是什么会有什么结果


25a158fd5d6da8012160f7f8444b.jpg




方便使用: 减法设计(扁平的框架设计—减少不必要的操作步骤,每个流程清晰没有太多分支)

881358fd5da8a8012160f755522b.jpg




重点功能随手可用 多选择少输入






预防出错/防错原则: 操作给予提示


b8ab58fd5ebfa8012160f77f33f6.jpg




帮助用户认识改正错误:如果出错要帮助用户从错误中恢复过来


085f58fd5ed5a8012160f7506532.jpg




高识别性:(复杂的交互要给与引导和帮助)


903558fd5ef0a8012160f79cf40e.jpg




用户自由控制权:用户可以取消正在执行的操作 每个层级都能找到上一级的方法


465e58fd5f04a8012160f7a13a98.jpg



符合用户的操作习惯


作者:why夏天的风

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

界面与交互设计的基本原则

博博

界面与交互设计的基本原则




作者:TUTU兔

转载请注明:站酷

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

交互设计:如何做到善意?

纯纯

我们来探讨下交互设计的善意。


善良常常被用来形容人,偶尔被用来形容产品,很少被用来形容交互设计。


就像人们会说,iPhone 有人文关怀,而很少会说,iPhone 的交互设计有人文关怀。在笔者看来,原因之一,是交互设计很难将人文关怀囊括完,而产品本身则基本可以。


类似的道理,本文探讨的善意,始于交互设计,但不局限于交互设计,还包括产品和企业的善意。


一家之言,欢迎交流探讨。



01 为什么选择善意?


一个 3 岁小孩流落街头,无家可归,会让无数人起恻隐之心。我们普通人的微小善意,有时可能是一种本能反应,或者说是一种感性反应。


“他内心是有时邪恶,还是对人们始终良善”,这是李宇春《年轻气盛》里的一句歌词。


恶是否为本能,笔者不知道。科学家的解释是,有些基因中会带有恶。可以肯定的是,善恶皆为人性,共存于人类当中。


感性和理性是会此消彼长的,林黛玉和薛宝钗就是两个极致的例子。同理,人类体内的善恶,也会此消彼长。


一款产品,在做决策时,很大程度上是基于理性。


这种理性决策,很多时候是无意为善,也无意为恶。但遗憾的是,那个非善非恶的中间地带不会一直存在,有些无意为善和无意为恶,最终会成为非善即恶,比如开屏页是否放广告这件小事(下文有详述)。


既然善恶会此消彼长,而且产品的有些理性决策会导致非善即恶,那么不可避免的,有时候,善恶会变成一道二选一的选择题。


接下来,我们就从理性的角度探讨下,为什么选择善意。



1 长期主义


最近几年,互联网从业者有个共识:创业是件九死一生的事儿。因为据数据统计,90% 的创业公司活不过三年。


这是一个值得深思的社会现象,背后的原因究竟是什么?直接原因,往往是资金断裂。深层原因,会有很多,比如产品不够好、方向不够准,等等。


那么,核心原因呢?笔者认为,和创始人的执念有关。


有两类执念可以避免此类悲剧。第一类是做出优秀产品;第二类是长期主义。



做出优秀产品这块,有很多例子,最典型之一是特斯拉。特斯拉曾面临多次危机(资金、产能等),但都挺过来了,这肯定和产品深受车主喜爱有关。


笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心,都很重视 UI、交互、用户体验这些基础的东西,而且把 UI 做的比较优秀,交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展,另一家连产品带团队被大厂收购了。


长期主义这块,典型例子之一是巴菲特。巴菲特信仰并践行价值投资,价值投资依赖长期主义。最近几年,长期主义在国内也被越来越多的提及。


个人的理解,长期主义至少包含两个要点,分别是:积累、多赢。因为,没有积累就不会有成就,没有多赢成就就不会长久。



中国女排,世界冠军。排球界有个说法,叫三年成型,五年成才,八年成器。互联网行业,也大致如此。这是积累。


用户,员工,投资人,三方利益都兼顾好,才是多赢。


俗话说,顾客是上帝,大家都知道对用户好;投资人作为强势一方,利益也往往有保障;员工的利益是否有保障,往往取决于创始人,所以存在很大变数。


回到主题,长期主义和善意,有什么关系?


通常而言,多赢能否实现,关键在于员工的利益能否得到保障。


笔者在网上看过一个有意思的评论,说当下的年轻人,如果收入、成就感、高兴这三点有两点达不到,就会辞职。


所以,员工利益得到保障的标准,可以简单定义为“三中二“,即收入、成就感和愉悦这三点满足两点。



再来分析一下现状:相比员工,公司是强势一方;人们仍受最大程度剥削剩余价值、官僚思想等观念影响;恶性加班等风气存在;僧多粥少的就业行情。


在这样的大环境下,如果公司对员工没有爱和善意,员工的利益是很难得到保障的。


最后,总结一下:公司有善意,员工利益就有保障,就能实现多赢,从而有望实现长期主义。


2 美好生活


前段时间,因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售,一些网友被胖东来这个商超刷屏了。


胖东来来自河南许昌,一个三四线城市,也是笔者的家乡。目前仅在许昌和新乡有店。


在一些关于胖东来文章的评论区,很多网友在喊胖东来去自己的城市开店。


为什么有这么多呼声?简单分享几个例子。


顾客方面,胖东来有 6 类购物车,包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子,可供休息,同时还配有放大镜。


员工方面,有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有:每周二闭店,春节闭店 5 天,工龄满 1 年即有 30 天带薪年假,一天最多工作 7 个小时。


从网上的报道、评论以及公布于网上的企业文化来看,胖东来一方面主张工作和生活(爱情、家庭、休假等)的平衡,一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。



看新闻的时候,笔者注意到,老板于东来经常会提到“美好”这个词儿。实际上,在笔者看来,胖东来本身就代表了一种美好生活,一种物质和精神双丰盛的美好生活。


对于这样的美好生活,用户和员工自然喜欢。可这对企业有什么好处?


胖东来曾经意欲退出新乡市场,新乡合作商家和市民纷纷请愿,政府也多次出面挽留,最终胖东来留下来了。可见,胖东来在新乡已经深入人心,顾客自然会大力支持它的发展。


胖东来有一句 slogon,能够很好的解释这一切,那就是:爱在胖东来。


同样,既提供体面的收入,又关注员工和用户的精神需求,给他们带去美好生活,当然需要更大更多的善意。


在当下中国,能提供高薪的互联网公司已经很多了,但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。


对于所有企业而言,这又何尝不是一种机会?



02 交互设计里,有哪些善意?


现实中,像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲,还是有很多产品对用户展现了很多微小善意,值得我们学习。


这种微小善意主要有三类,分别是:不打扰,护尊严,人为先



1 不打扰


我们生活在一个信息爆炸的时代,不被手机上的信息过度打扰,是一个刚需。有三类信息,如果把握不好度,就会对用户形成打扰。它们分别是:广告、推送、推荐



广告这块,主要有两类会形成打扰,分别是:时机不佳的广告,过长的广告。


这方面,微信是个榜样,值得学习。比如开屏页广告,就是时机不佳的广告,因为大家不想在这里看到广告,微信就没有放。朋友圈里也有较长的视频广告,微信的常见做法有两类,要么先展示一张图片,要么先是无声播放。是否看完整的视频广告,选择权在用户手里。


推送这块,常见的有手机系统的通知和 App 内的红点消息。


系统通知,目前也有被滥用的趋势。根据使用情况和感受,个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能,比如微信推送新消息,搜狐新闻推送新闻;第 2 类可保留一定的弹性,核心原则是对用户有价值,比如偶尔的活动通知。


目前有两种情况会对用户形成打扰和困扰,第一种是过于频繁的活动通知;第二种是推送和核心功能相差甚远的信息,比如金融类产品推送新闻。


红点消息,有一类会对用户形成打扰,那就是来自官方的过于频繁的各类活动、促销等信息。


推荐这块,主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。


一种是过多,比如网易云音乐的首页,就有 9 个专题;一种是位置不佳,比如 Keep 的“探索”频道就包含了课程的推荐,但是在“运动”频道还有两个专题来推荐课程。


2 护尊严


护尊严,就是尽最大可能,维护用户的形象和尊严。


最近几年,常有产品花巨资撒红包给用户抢。产品的初衷自然是好的,而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度,也就无法增加用户对它的喜爱和忠诚程度。


为什么会这样?


让用户抢自己撒的红包,这件事能维护用户的形象和尊严吗?非但不能,可能还会对此造成伤害。因为可能会显得用户爱占小便宜,也可能会使用户处于被施舍的一方。总之这种事对用户来说,并不酷。


一款产品,要想赢得用户更多的喜欢、尊敬乃至忠诚,就最好不做哪怕仅是微弱伤害用户形象和尊严的事情,同时多做一些相反的事情。


3 人为先


人为先,是当用户利益和企业利益发生尖锐矛盾时,去追求一种用户利益在先的双赢局面。


大家都知道,吸烟是有害健康的,但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装,就尽他们最大的可能诠释了“吸烟有害健康”,是真正的用户为本,让人心生敬意。



泰国香烟的这种做法,值得一些极易让人上瘾的游戏厂商借鉴和学习。



03 交互设计:如何做到善意?


上一大段,是善意的三类表现。这一大段,再探讨下做到善意的一个原则。


以社区型内容型产品为例,这个原则就是:先服务后管理


这里的服务,是指以服务者的心态做好用户体验,并不局限于交互设计。这里的管理,指的是一些必要的管理,一般是用户的行为规范和用户违规时的处理,比如评论里骂脏话、发布侵权文章等。


所有用户都是需要被服务的,只有少数行为不当的用户才是需要被管理的,所以我们要先服务后管理,以免误伤了不需要被管理的用户。


服务本身就是一种善意,笔者把它分成了两个阶段,分别是:体验的初始阶段,体验的完整过程


初始阶段对应的是:初始服务;完整过程对应两类服务,分别是:家常服务,极致服务



1 初始服务


初始服务,是当用户刚开始用这款产品时,能给他们留下良好印象的服务。


如何做到?不出现任何轻微恶意和管理倾向即可,再提供一些便利和帮助则更好。


下面分享一个反面例子。


在个别城镇的卫生死角,有时会看到这样的标语,“此处禁止倒垃圾!违者罚款 200!“。结果那个地方往往有很多垃圾。


为什么会这样?


这个标语,有两层意思:第一,你很可能会在这里倒垃圾;第二,禁止你这么做,做了要罚钱。


也就是说,某种程度上,这个标语在用恶意揣度别人,同时也在很严的管理别人。


看到这个标语的人很可能会这样想:既然认为我会在这倒垃圾,那我索性就倒了;禁止我?凭什么?还罚我钱,吓唬谁呢,况且你有证据吗?


下面再分享一个很好的正面例子。


笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家,宜家没有检查里面的零配件(很多螺丝之类的),直接退了。这样宽松的退货条件,宜家可能会蒙受一定损失,比如小概率的零件丢失,但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的,对宜家就多了几分好感。


2 家常服务


家常服务,是指一种稀松平常,但又让用户感到舒服自在的服务。


举个例子,你去好朋友家里玩,朋友给你倒了一杯水,并端出一盘削好切好的苹果,你们一边吃一边聊。你和朋友是平等的关系,他这种简单的招待并不会使你感动,但却使你有一种接近在自己家的那种舒服自在。


笔者在用微信公众号(后台)时会有这种感受。在星巴克和肯德基时也会有类似感受。


家常服务,如何实现?第一,要有良好的初始服务,这是基础;第二,要有周到且较高品质的交互设计,这是关键。


以微信公众号为例,和微信一样,它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。


面向大众的资讯平台大多都有一个发文规范,多是关于禁止的行为,通常都会用一个单独网页来展示,有 1-2 页纸那么多。


通常情况下,多数作者是不会违反发文规范的。对于这部分作者,当他们首次看到 1-2 页密密麻麻的发文规范时,可能会产生抵触心理,即便自己不会违规。就好像高中开学第一天,班主任二话没说,直接就立了 20 条班规,同学们会是什么心情。


微信公众号的做法就很巧妙,它把这些规范分割成了三部分。


第一部分是严禁的红线行为,以高度概括的一行文字呈现,所有人都能看到,但是得仔细留意才能注意到。这是规范性质。



第二部分和竞品一样,也是链接出来的一个单独网页。链接入口也和竞品一样,在关联性最强的发文页面右上角。不同的是,这一页展示的是规则,主要以问答的形式呈现,给人感觉是有帮助的信息。这是服务性质。



而竞品的这个页面,通常都是禁三禁四的规范,给人的感觉可能是紧张、压抑甚至抵触。


第三部分是次于红线的禁止行为,比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样,还有很多一般的通知,所以这个公告列表也不会像竞品的那一页规范一样,给人紧张、压抑的感觉。性质上是中性。


另外,这部分的入口在后台首页右上角,和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容,也就看不到。




微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”,同时还让他们看到了“班主任”的“常见问题回答”。


这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节,就是检测疑似错别字的功能,很贴心,虽然目前还不是很准。


3 极致服务


极致服务,是指让用户感动的服务,比如海底捞和胖东来的服务。


这种服务,一般是由许多细节积累而来,是一种做加法的服务,而且背后往往依赖人力。


好的交互设计,一般都是在做减法,而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。


不过,一款互联网产品,除了交互设计,还有其它方面的内容。


B 站就是一个例子,它以不走寻常路的方式,在两个方面做到了较为极致的服务。那就是:视频无广告,比较积极、欢乐的弹幕氛围。



结语


以用户利益为先,不打扰用户,维护用户的尊严,这是交互设计里的三种善意,值得我们学习。


先服务后管理。服务作为一种善意,也能够引来用户的善意,最终形成良性循环。


杜绝任何轻微恶意和管理倾向,再提供一些便利和帮助,便能做到良好的初始服务;


在初始服务的基础上,提供周到、高品质的交互设计,就能做到良好的家常服务;


交互设计难以做到极致服务,但是其它方面有机会。


最后,用刘备的一句话来结束本文。


勿以善小而不为。


原文地址:站酷    作者:SnowDesign


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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



《简约至上:交互设计四策略》札记

ui设计分享达人

《简约至上:交互设计四策略》

著:[英] 贾尔斯·科尔伯恩

译:李松峰

人民邮电出版社

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .


写札记有什么好处?费时费心又费力的

1. 梳理知识框架,记录阅读收获、心得,本身就是一个加深理解、温故内化的过程。

2. 摘录重要知识,存储在数字媒体上,方便随时按需查阅。

3. 锻炼思维和表达。

百利无一害,来吧,走起。

这本书是讲什么的?

本书讲述了一个产品价值观和四个策略。

一个产品价值观:作者崇尚简单体验的产品设计。简单的产品更容易制造 (成本也更低),也更容易使用 (市场也更广)

① 这里的产品指数字产品或实体产品。

② 本书主要考虑大多数用户 (主流用户) 的体验。

四个策略:删除、组织、隐藏、转移。本书的核心内容就是讲述如何通过这四个策略(我理解就是方法论)设计大多数用户喜爱的简单体验。这几个策略适用于简化功能和内容。

体会与心得

1. 知识原理很多都是相通的

① 本书的删除策略与奥卡姆剃刀

奥卡姆剃刀:“如无必要,勿增实体”。讲的也是简单性原则。

他说:“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。” 讲得真好,不能赞同更多。

② 组织策略与亲密性原则

亲密性原则:彼此相关的项应当靠近,归组在一起,成为一个视觉单元。——《写给大家看的设计书》Robin Williams,非常棒 推荐

组织策略与亲密性原则讲的都是正确组织信息的方法论。

③ 简单与别让我思考

别让我思考 (可用性最重要的原则):你的目标应该是让每一个页面或屏幕都不言而喻,这样的话,普通用户只要看它一眼就知道是什么内容,知道怎么使用它。即他们不需要思考就能明白。可用性是关于人,关于人们如何理解和使用产品的,它和技术没有关系。技术日新月异,人本身的变化却非常缓慢。——《点石成金》史蒂夫·克鲁格,很棒 推荐+1

2. 凡事过犹不及。

书中有一个案例惊叹不已,讲的是东京苹果专卖店,没有按钮的电梯 (电梯内和外都没有操控按钮),自动在每一楼层停靠、自动开和关门 (乘客干预不了)。置用户于完全失控的环境中(要是深夜一个人乘坐,估计得吓不活了)。难以置信,谁能想到以优质体验设计征服世界的鼎鼎大名的苹果,居然还有这种反人类的逆天设计!

3. 这本书的阅读体验跟《写给大家看的设计书》极相似

① 简单、轻松、通俗易懂两者都为读者创造了简单、轻松的阅读体验。把知识融入情境、故事,以图示意,短小的一篇一篇像在和你讲故事,娓娓道来、言之有物、简明扼要、通俗易懂。

② 知识框架扁平、浓缩为极简,过目难忘《简约至上》把全书核心凝炼为:删除、组织、隐藏、转移。《写给大家看的设计书》将复杂的设计原理凝炼为:亲密性、对齐、对比、重复。合上书,就能回忆起来,太简单又太深刻,真的想忘记都难。

4. 好书亦师亦友

“虽然这世界上不能改变的东西很多,但眼前的设计还是有很多简化的途径可循。”、“你能做到”... 像不像一个智慧温暖又真诚善良的朋友在不断的给你信心和鼓舞?

思考:为什么大多数用户喜欢简单?

(小声说,我也喜欢)

以我浅薄有限的认知来看,人们喜欢简单不仅因为简单顺应人性,还因为简单带来高效:

① 简单顺应人性简单意味着不用思考,以现有的认知水平一看就明白,在人的舒适区,启用的是人低耗能自动模式,是本能来的。而复杂的事物,如思考、学习、锻炼、做一件难的事,都是更多的消耗人的脑力、体力、意志力、自控力、耐心、时间,都是调用人的高耗能模式,所以复杂这个东西本质上是反人性的。

② 简单带来高效不管是工具任务型产品还是内容型产品,用户使用产品的逻辑路线是一样的,都是经由认知 -> 决策 -> 行动 -> 达成目标;如果简单就会:认知快 -> 决策快 -> 行动快 -> 高效达成目标;所以,简单是大多数用户的刚需了。

精选摘录与总结

1. 越复杂或少用的知识,忘记就越快。

2. 简单源自专注。明确自己的目标,更容易迷途知返。

3. 解决问题前,先搞清楚状况。纠结于某个设计时,退一步想想:“用户在这里真正想干的是什么?” 聚焦用户。

4. 共识:把所有利益相关方的目标都统一到最终用户身上,通过共识构建愿景。然后,阻力和争斗就会减少。

怎么让利益相关方听自己的?答案是必须理解他们的想法。

先从倾听他们和理解什么对他们最重要开始。把汇总的意见恰当地反馈给他们,他们会知道你已经明白了。在感觉被人倾听后,他们才会乐意敞开心扉。

“我也希望看到最适合用户的设计,我们一块看几个,看看是否可行。”

不要尝试说服别人,听他们说,让他们自己判断,让他们自己承认而不是回避问题,然后再去寻找解决他们问题的方案。

5. 产品使用环境是观察用户的最佳地点,必须使软件设计符合环境需求。你的用户体验应该简单到不受这些干扰的影响,能够在人们被打断的间隙生存。

6. 为主流用户 (大多数用户) 而设计,忽略专家型用户。

7. 体现品牌特征① 实用性——这个品牌能做什么对我有帮助的事情?(如让飞行更简单)② 这个品牌给了我什么感觉?(如充满活力,好玩)③ 这个品牌崇尚什么?

8. 简单就是让用户感到自己在掌控一切。你的设计不能跟这种掌控的感觉有什么抵触,而是应该放大这种感觉。

9. 设计之所以会变复杂,通常是因为某些不重要的步骤挤占了核心特性。关注用户行为 (而不是你的设计),并且从用户的视角把它描述出来。

10. 在研究某个问题的时候,你需要把它转换成一种认识。故事是描述认识的一种好方式。与一大堆需求描述相比,故事更容易让读者明白什么重要和为什么重要。故事应该用三言两语把核心体验表达出来。

11. 极端的可用性

① 任何人都可以使用

② 毫不费力的使用

③ 瞬间响应

④ 一目了然

⑤ 始终工作

⑥ 不出错

⑦ 恰好够用的信息

⑧ 在混乱无序的环境中工作

争取你不可能达成的目标有一个重要的好处:保持正确的方向。

12. 坚持不懈是达成简单最重要的一步。

“乍一看到某个问题,你会觉得很简单,其实你并没有理解其复杂性。当你把问题搞清楚之后,又会发现真的很复杂,于是你就拿出一套复杂的方案来。实际上,你的工作只做了一半,大多数人也都会到此为止……但是,真正伟大的人还会继续向前,直至找到问题的关键和深层次原因,然后再拿出一个优雅的、堪称完美的有效方案。” ——史蒂夫·乔布斯

13. 简化意味着改变,而改变始终意味着痛苦。多数人会不惜代价避免痛苦。收集需要改变的证据很重要。

14. 挑出正确的点子,确保能够得到很好的执行。

删除:通过删除来简化设计,删除所有不必要的,直到减无可减。

15. 删除杂乱的特性可以让设计师专注于把有限的重要问题解决好,而且也有助于用户心无旁骛地完成自己的目标。

16. 不要等着别人不分青红皂白地、无情地删除最有意思的功能。要总揽全局,保证只交付那些对用户体验而言真正有价值的功能和内容。

17. 体验的核心是最能打动用户的东西。找到它,删什么留什么就一目了然了。能够消除用户挫折感的功能同样也会受到欢迎。

18. 删除残缺的功能、导致出错的功能、不必要的功能

19. 如果一个小变化导致了复杂的流程,就应该退一步去寻找更好的解决方案。

20. 错误:即使非常小的错误也会让用户烦恼。消除错误是简化用户体验的重要途径。无论显示什么错误信息,好像都没有那么友好、亲切和简单。

21. 不要以功能的多寡来认定产品的价值,而应该看产品能否满足用户最高优先级的目标。

22. 删除视觉干扰因素,让用户注意力保持集中。界面中的各种小细节会增加用户的负担、打断用户的思维,会像公路上的减速带或坑坑洼洼一样降低用户的效率。

23. 太多选择容易让人反感。

24. 清除减速带:选择聪明的默认值可以减少用户的选择。

25. 删除视觉混乱和噪音,意味着人们必须处理的信息变少了,能够把注意力集中到真正重要的内容上。

26. 删减文字、精简句子:重要的内容“水落石出”,消除了分析满屏内容的麻烦,用户更有掌控感,把文字变得简洁、清晰、有说服力。

27. 简化对话,长话短说。一次交互就是用户与设备之间的一次对话。

28. 砍掉时间。砍掉功能和内容可以节省时间,因为决定少了、按钮少了、思考少了、阅读少了。要在对用户真正重要的事情上节省他们的脑力。

组织:通过组织来简化设计

29. 通过组织的方式简化设计,要点在于只强调一两个最重要的主题。

信息布局、分类、排序、搜索、使用颜色分层 (地铁线路图),找到组织信息的正确方式,可以极大的简化用户体验。要想知道设计是否成功,可以眯起眼睛来观察屏幕,看是否能区分出不同的层。

隐藏:隐藏不重要的,避免分散用户注意力

 

30. 无论隐藏什么功能,都意味着你在用户和功能之间设置了一道障碍。这个障碍可能是遥控器上的塑料仓门,也可能是网站上一连串的点击。为了避免给用户造成不必要的麻烦,必须仔细权衡要隐藏哪些功能。

31. 不常用但不能少,如个性化设置不会经常改变,因此非常适合隐藏。

32. 隐藏所有需要隐藏的功能,在你需要时出现在合适的位置上。

33. 细微的线索足以提示隐藏的功能。

转移

34. 转移合适的功能到其他设备上、系统组件中,向用户转移。

来源:站酷
作者:蜗牛西米

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

截屏2021-05-13 上午11.41.03.png

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

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

筛选篇 | 提升用户决策效率的筛选控件

ui设计分享达人

前言

“少即是多”是经常挂在嘴边的话题,在设计过程中,设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性,让用户使用起来更简单。当产品简化到一定程度,就必须要面对其不可简化的复杂性。
诺曼曾说过 “复杂是世界的一部分,但它不应该令人困惑 ”,如果复杂性是合理的,我们应该学会如何去管理复杂,考虑好复杂的问题在流向用户后以何种方式处理,筛选控件就是用户自行处理复杂信息的方式之一,只要是符合用户行为做出的设计,将应有的复杂以筛选的形式呈现给用户,让其自行决定,用户反而会乐意接受。
筛选控件的使用频率非常高,本文根据笔者对各类筛选控件的拆解及自身经验进行分总结,整理了在移动端中常用筛选控件的类型、使用场景以及设计思路,帮助大家在设计中更好的选择适合自己产品的筛选控件。

分享目录

一、现实生活中的筛选
二、筛选功能的重要性
三、常见的筛选类样式
四、筛选的几个维度
五、筛选功能设计准则
六、总结


一、现实生活中的筛选

在日常生活中,我们天天都在跟筛选打交道。设想一下,当你走进超市,在没有任何分类指示的情况下,看到琳琅满目的商品是否会不知所措,答案是肯定的,且不论超市规模大小、商品的多少,相信没有任何一个人愿意在不清楚的情况下花时间去找一个很可能不存在的商品,即便这点时间会很短。
道理还没说完,大家都感觉自己很懂,可依然逃脱不了如今在各种形形色色的应用中找不到自己需要的功能而苦恼,那么这些应用又是谁设计的呢?答案就是「大多数人」。


换言之,如果我们能通过标识牌、平面图指引(模糊查找),询问服务员、记忆指引(精准查找),就容易很多,这些指引路径就完全充当了筛选功能,至于通过什么方式,只能根据人们自身或现场条件自行选择,能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。


二、筛选功能的重要性

1.筛选的定义

在我们设计筛选控件之前,需要清楚了解什么是筛选,东施效颦不是什么明智之举。筛选,即用户根据自身需求、通过一个或多个特定条件,在已有的内容中快速找到满足自己当前条件的信息,单独呈现的同时、并将未满足条件的信息暂时作隐藏处理,以便用户完成自己的目标需求。
筛选也可以称之为过滤器,是搜索框架的一部分。这里需要说明一点,筛选不同于搜索,它是系统结合用户提出的条件,对内容进行规则性的查找,准确的说,用户属于被动,筛选出的结果在产品侧「精准」、用户侧「模糊」;而搜索则是用户通过明确的目标主动进行精准查找,要么直接找到自己想要的结果、要么对结果不满意,搜索出的结果在产品侧「模糊」、用户侧需要「精准」。说直接点就是,搜索直接查找出结果、筛选只是缩小查找范围(并非绝对,也可以对搜索结果缩小范围)。


2.为什么要使用筛选

在电商应用中,如果有目标的用户更多使用的是搜索,那么没有目标的用户更多使用的则是系统推荐或商品分类,不管是哪种类型的用户,前面虽然已经进行过一次范围缩减,但下一步还是逃不掉要面对的海量商品,这时,不给用户提供选择上的便利,用户很可能因浏览商品耗时过长、选择性困难等原因扭头就走,即便离转化仅一步之遥,也无法避免用户流失的问题。
增加筛选功能就能很好解决这个困局,用户通过筛选、设置接近于目标需求的条件,缩短查找路径,就能从海量的商品信息中快速找到符合条件的内容,大大降低了用户的查找成本,节省了很多查找时间,用户体验得到很大程度的提升,由此可见,为什么要使用筛选,不言而喻。



3.什么时候使用筛选

1)系统定义筛选需求
方向性的筛选:用户通过系统提供的多种类型进行频道切换,还会存在多少子级,可定义为一级筛选。例如订单列表(待支付/待发货/待收货/待评价),优惠券(未使用/已使用/已过期)等,用户从已有的类型列表中选择自己所需。


2)用户自定义筛选需求
精细化筛选:当系统已提供方向性的筛选,用户依然可从分类筛选出的结果中进一步细化。例如针对单个类型的商品列表自定义价格区间、发货地、品牌...等,也可称之为二级次筛选,相比一级筛选,其筛选的结果会更精细化,也更接近于用户的真实需求。


(PS:系统定义筛选条件后,配合用户自定义二次筛选条件以及排序功能,则更容易满足用户需求)

三、常见的筛选样式

1.Tab筛选

Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示,有横向Tab和纵向Tab两种,如新闻、视频类型的应用大多使用横向Tab,通过将不同的内容以大的方向、区块进行分类,便于用户随时切换、筛选出不同的内容;纵向Tab更多则是在电商类应用中出现,且会存在多个子级,例如我们在京东购买「鼠标」,则需要在tab分类中依次找到「电脑办公>外设产品>鼠标」进行筛选。


Tab类型主要以大的维度进行筛选,所筛选出的结果可能模糊且信息量极大,如果想要结果更加精准,则需配备其他类型的控件进行二次筛选。

2.弹窗式筛选

操作中以蒙层的方式弹出,其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小,仅需一个入口,能在有限的弹出空间中从多个维度展示筛选条件,用户选中或自定义对应的筛选项,即可快速筛选出自己想要的信息。

3.折叠式筛选

介于Tab式与弹窗式之间,筛选条件初始为隐藏状态并提供一个入口。点击后展开,期间不影响当前页面的任何其他操作且一直处于展示状态,需经过再次点击才会将筛选条件隐藏。

4.高级筛选

基于自定义筛选条件过多,为满足用户个性化需求,点击后会跳转到新页面操作多个条件进行筛选。相比前面提到的Tab、弹窗更为复杂,对筛选的要求较高。
高级筛选适合用在颗粒度很细的场景,为的是避开其他视觉元素的干扰,让用户更专注于当前页面较为复杂的筛选条件,降低因受其他因素影响而出错的情况。例如:在选择汽车时,需要对服务、价格、级别、排量...等各种情况作出非常细致的选择,这时用高级筛选就再合适不过。


5.筛选、排序组合

筛选、排序组合方式算是商品列表中的标配了,尤其在空间资源有限的移动端设备中,能最大化的将多个控制条件一次性展示给用户,在筛选出结果后再使用排序功能,便于更快找到想要的商品。例如美团、饿了么将筛选与排序控件形成组合,极大的提高了用户筛选的效率。


四、筛选的几个维度

1.单维度

单维度的筛选不管是设计还是操作都相对简单,无需操作确定/下一步按钮,触发筛选条件后会就会更新信息列表,大家最熟悉的订单系统(待支付、待发货、待收货...)即是单维度筛选。
另外,单维度具备短、明、快的特点,为方便用户识别,单个标签一般不超过5个文字,且语义明确,用户不用任何思考就能快速理解。


2.多维度

当产品中的属性过多,使用单维度筛选不仅会降低筛选结果的精准度,还可能会导致用户因反复/重复无用的操作而产生挫败感,已无法满足用户的需求。这时,需采用多维度筛选帮助用户缩小查找范围,让其快速找到符合自己需求的内容。
多维度筛选条件一般以按钮(单选/多选)、输入框为主,有些还会以滑块来控制数据范围。设定好筛选条件需通过重置、确认操作按钮,用来清空筛选条件或进入下一步。在移动端,因屏幕空间有限,一级筛选数量最好不要超过9个,如果太多,建议进行整合或并入二级筛选。


3.多等级(单维度/多维度)

在多级筛选控件中,可以把当前筛选条件的上一级看成是筛选分类菜单,每个等级中可包含一个或多个单维度/多维度的筛选条件,移动端最多不超过3个等级。
从表面看,多级筛选与多维度筛选其本质是一样的,但多级筛选会存在下一级或再下一级,而多维度会将所有筛选条件平铺在空间中。当单维度、多维度筛选还是无法满足用户需求,多等级就能作为最好的延伸。


五、筛选功能设计准则

1.迎合用户需求

在设计筛选之前,需要思考用户为什么要使用筛选、在什么样的场景下使用筛选、以及如何满足用户的心理预期等,有了清晰的用户需求,设计出来的筛选才能更好的帮助用户满足其需求。
以「饿了么」用户点餐为例,使用点餐服务的用户类型虽然很多,不过主力还是来自于办公室白领、宅男/女这两大用户群体,有目标的用户会从搜索、收藏、订单记录等入口直接去购买,但绝大多数用户因长期点外卖的原因,“吃什么”就成了最大的问题,这时如果用户还要“吃”,就必须得使用筛选功能,从Tab分类(模糊)到弹窗式筛选(精准)再配合排序功能满足自己的点餐需求,得出结论:
1)一群不知道“吃什么”的白领、宅男/女用户;
2)需要使用筛选功能解决自己“吃什么”的问题;
3)问题很快得到解决后,对结果及使用体验非常满意。


上面的案例可以看出,用户想要在海量的信息中找到自身所需,从表面上看,最直接、真实的需求就是找到满意的商品去下单。站在产品的角度并非如此,最应该解决的应该是效率的问题,这才是筛选的终极目标,不管用户花多长时间,笔者相信都能找到想要的,但所花费的时间成本越少,满意度就会越高,其产品的可信度、使用粘性、用户体验也随之提升。

2.不同产品不同对待

筛选并非千篇一律,不要一上场就来一波大众化的筛选条件,很多APP首页设计就是最好的例子,什么都不考虑,直接导航栏+轮播图+金刚区+内容推荐...传统的一套流程走下来,结果可想而知。
设计筛选功能时,不同类型的产品需要根据其产品定位、用户目标以及使用场景来定义筛选条件,用户需求是用来设定筛选条件范围的决定因素。例如:购物类产品需要结合商品的销量、评价、价格及知名度等,而新闻类产品侧重于用户偏好、点赞量、热度值来提供筛选,方便用户快速找到感兴趣的内容。

3.根据需求排列优先级

在满足上述两个条件后也不能将筛选项一股脑的挨个排出来,即便是在同一个页面内,也需要结合当前内容的属性对筛选条件进行优先级排序,将用户高频使用的条件按先后顺序依次排列,不重要的也可将其隐藏于某个入口。
以淘宝为例,在「手机」商品列表,筛选条件中首先看到的是品牌,其次是内存、容量...,我相信很少人不在乎手机品牌吧;而在「钢钉」列表中,依次是价格排序、销量...,品牌条件隐藏在了高级筛选中,试问,如果是你购买钉子这种实用性的商品,是在乎价格、还是品牌呢?


六、总结

筛选功能旨在满足用户查找需求,通过缩短用户选择商品的范围,节约查找时间,快速将符合条件的信息呈现出来,并让用户在这一过程中产生愉悦的使用体验,以发挥产品的最大价值,从而增强用户的使用粘性。
至于在设计中该使用何种筛选控件则取决于用户需求和使用场景,设定符合需求的筛选维度及条件,且根据内容属性做灵活变动即可,切记筛选的核心需求是通过简单易用的方式来帮助用户提高操作效率。

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

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

截屏2021-05-13 上午11.41.03.png

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

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

用户体验设计定义&详细案例

ui设计分享达人

一、什么是用户体验?


用户体验(User Experience,简称UE/UX)这个词是在上世纪90年代中期,由用户体验设计师 唐纳德·诺曼(Donald Norman)所提出和推广。

定义:用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。




二、可用性原则


可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品用户体验的核心,不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。




01 易学性


指的是用户学习如何与产品进行交互,以实现目标所花费的时间和精力,即用户能否在初次使用产品时完成简单的任务或实现用户目标。




02 效率


用户在使用产品一段时间后,能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例,用户能否快速的下载想要的东西,在同一系列中,可以快速下载更多的相关内容。




03 可记忆性


我们常说互联网是有记忆的,好的产品体验是帮助用户去记忆。用户在体验中,要对一些有意识、无意识的行为进行记忆是一个比较大的负担,如果在一些环节通过系统能帮用户记录,会降低用户的负担。比如在搜索、历史记录、浏览记录等。




04 容错性


用户在使用产品时,发生错误后,能否快速帮助用户识别和纠正错误,帮助用户从错误中恢复的能力。如常见的注册登录,当用户属于邮箱格式不对的时候,给出提示,并且告知错在哪里。如果提示语只是:"请输入正确的邮箱" 用户可能会疑惑,错在哪里。




05 满意度


满意度指的是用户与设计互动产生的愉悦程度,可以是用户使用产品时流畅的交互和优秀的视觉设计,也可以是用户在产品中得到的满足感。比如sir语音交互,王者荣耀等级(满足感)





06 实用性


产品能否提供用户在完成任务时所需要用到的基本功能,例如P图类软件,用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。




07 个性化


在满足实用性的基础上 针对用户提供不同场景下的功能定制,如美图秀秀,在提供图片美化的同时,针对用户不同的使用场景还提供视频剪辑、视频美容等功能。




08 可预测性


用户能够预测到下一步操作或者整个流程的交互,将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。




三、可见性原则


可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。



01 物理功能可见性


物理功能可见性是基于对象的物理外观。在视觉上,这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件,最常使用的就是播放/暂停,上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中,这就是功能可见性。




02 状态可见性


当信息或者列表过多时区分状态的展示,将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来,会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息,这样的互动非常低效且乏味。




03 步骤可见性


当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤,后面还有多少步骤,完整清晰的流程展示。如果将这些信息隐藏起来,用户会困惑当前进行到哪一步,接下来还有多少步骤。




四、可供性原则


强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素(如滚动条、命令按钮和图标等)的设计必须能够为用户提供足够清楚的建议,让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么,以及如何与它们进行交互行为(点击、长按、滑动 等)




五、反馈


给用户及时、恰当的反馈,是体验设计中非常重要的一项原则;对每个用户的操作都应该有恰当的系统反馈(包含视觉、听觉、触觉)。



01 告知性


明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。




02 动作连接性


当用户产生某个动作时,给予相对应的连接反馈。如大概用户点击某个按钮时,按钮默认的外观与点击后的外观发生变化,结合现实世界的开关去思考(按下 开灯)动作与反馈是连接的,即时的。




六、希克定律


希克定律,是1951年由威廉·埃德蒙·希克首先提出的,认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。




如京东筛选,在搜索结果页会将筛选条件收起,因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单,并且做好归类,用户能够更迅速的作出决定。




七、费茨定律


费茨定律,是1954 年 由保罗.菲茨首次提出,在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。


T:代表完成移动所需的平均时间

A:代表光标开始/停止时间

B:代表光标移动速度

D:代表从起点到目标中心的距离

W:代表目标的尺寸


简单来说就是指:随着目标的距离增加,移动到目标的时间更长,并且随着目标的尺寸减小,选择目标的时间也会增加。


所以在界面设计当中会遵循越重要的功能,占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。




屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中,所以我们在进行产品设计的过程中,会将常用/重要的操作放置在屏幕边缘处,便于用户操作。



八、神奇数字 7 ± 2


神奇数字7±2法则是1956年由 乔治·米勒 所提出的,根据乔治·米勒的研究,人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。




由于人类的大脑处理信息的能力有限,大脑会将复杂信息划分成 块 和小的单元。如:京东和每日优鲜的分类处理。




人类短期的记忆一般一次只能记住5-9个,所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。




九、复杂守恒定律


复杂守恒定律是1984年由 拉里·泰斯勒 所提出的,也称作泰斯勒定律。认为每一个产品设计的过程中,都有其固有的复杂性,存在着一个临界点,超过了这个点产品设计的过程就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。


在产品设计中,会尽量的简化界面。当功能过多时进行一个整合的处理,跳转或者滑动操作。如查看更多或者常见的汉堡导航。




十、新乡重夫:防错原则


新乡重夫认为遗忘有两种:一种是疏漏,另一种是忘却。他建议采用一些措施来预防产品的缺陷。


防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;比如常见的信息输入状态,未输入置灰不可点,输入变为可点击状态。




微信拍一拍:微信在出了拍一拍功能之后,很多时候点击头像的时候会不小心拍到别人,现在的拍一拍是可以撤销的,在客户端鼠标悬浮上就可以进行撤回,移动端长按出现撤回弹窗,两分钟内有效。




微信朋友圈动态:点击返回图标会出现的弹窗,避免误操作。利用防错原则,可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。




十一、奥卡姆剃刀原理


奥卡姆剃刀 定律 :它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 (William of Occam,约1285年至1349年)提出。 这个 原理 称为“如无必要,勿增实体 ”,即“ 简单有效原理 ”




01、只放置必要的元素


不必要的元素会降低设计的效率,不管是实体、视觉或者认知上,多余的设计元素,有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息,可以用「更多信息」来实现。如夸克浏览器,首页只放置重要功能 搜索 和几个整合内容的图标入口。




02、减少点击次数


让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件,在播放音乐之后进入其他的tab,在上面都会悬浮播放/暂停的区域。都能够随时操作。




03、“老人”规则


就是产品的易用性,如果年纪大点的人,也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验,简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内,并且抖音会根据用户的停留时长等推送用户感兴趣的内容。




04、减少“段落”个数


页面的使用率,当你想要在一屏新增很多内容时,页面的布局就会变得拥挤和区域变小,容易过于干扰用户做出选择,重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口;uc浏览器首页内容过多,当用户想要使用搜索功能时很容易被其他内容干扰。




05、给予更少的选项


前面说到的希克定律说到,当选择的数量越多,用户做决定的时间就更长。做过多的决定也是一种压力,在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示,马蜂窝根据产品属性放置了6个重要的功能入口,便于用户更快的去选择所想要的功能。




十二、设计和艺术的区别是什么?


最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是:艺术抛出问题,而设计解决问题。


我们设想一个场景,当你在艺术展厅站在一副名画面前,你所思考的是什么?是惊叹画家的画技还是整个画面给你的感觉是一种故事,你会不会思考艺术家在作画时的心情,处境,为什么要这么去画?想表达怎么样的情感?



然后我们再设想一个场景,同样在艺术展厅,你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧?因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。


原文地址:站酷
作者:左言右设

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


浅析产品体验设计细节

ui设计分享达人

目录

一、马蜂窝 — 人性化设计识别文章地点

二、微博 — 社区游戏化设计提升互动率

三、QQ — 通过手势消除未读消息

四、最右 — 情感化设计保护用户隐私

五、抖音 — 深夜提醒贴心的功能

六、网易音乐 — 把分享游戏化

七、QQ音乐 — 歌词沉浸式体验

八、盯潮 — 趣味性banner轮播,增加用户点击

一、马蜂窝—人性化设计识别文章地点





产品体验

在马蜂窝任意文章中,如果出现地区则可以通过当前页面对地区进行提取

目标

减少用户操作路径,降低产品使用成本

设计思考

日常在各个平台浏览文章时大家都会遇到在文章内会出现一些如地名、人名、物品等相关名词,此时如果对名词感兴趣则需要切换场景去进行搜索,而马蜂窝在这方面深入洞察到用户痛点,基于旅游社交产品背景下在添加地点直达(包含多个地点)功能,解决了对景点感兴趣的用户使用体验。

延伸设计

根据马蜂窝这个人性化功能,是否可以在不同的产品内进行应用,如在一些游戏社区中所提到的虚拟装备、道具等物品添加弹窗简要说明,帮助新手玩家快速理解玩法、功用等

二、微博—社区游戏化设计提升互动率



产品体验

在微博动态详情中进行长按点赞触发动画

目标

通过游戏化点赞玩法激励用户进行互动,提升互动率

设计思考

打破传统点赞动画,微博设计动效采用大胆创新的全屏动画并搭配上散发的微表情,在长按与连点两种手势下动效规律不同,消除用户枯燥感,微博作为国内最大社交平台,页面展示上已经形成用户深刻认知,在不影响基本风格上进行彩蛋设计有效的提成用户互动率

三、QQ—通过手势消除未读消息



产品体验

在qq聊天页面中对底部消息气泡进行拖动,消除所有未读消息

目标

提升用户操作效率和使用体验

设计思考

qq作为社交工具,每位用户都会添加大量人、群以及关注各种推送,在这种场景下用户每条消息都去操作需要花费大量时间,QQ把传统的消息已读以一种简单的交互手势作为代替,相对全部已读在操作上更佳便捷

延伸设计

通过qq的这个交互细节,在其他产品场景中同样适用,如一些音乐、电台相关的产品在离开播放页面后播放状态会悬浮在页面之上,如果关闭的话则需要点击暂停或者进入详情后关闭,也可以考虑使用拖动手势进行关闭

四、最右—情感化设计保护用户隐私



产品体验

在最右登录页面输入密码时ip形象会出现捂眼睛动作

目标

强化用户隐私和心理信任感

设计思考

日常在使用一些敏感性操作时我们都会注重隐私,如一些表单的填写、密码输入等相关操作,最右在登录页面使用到了ip形象的动作去向用户传递心理上的暗示,这种手法很好的把品牌曝光与体验相结合

五、抖音—深夜提醒贴心的功能



产品体验

长时间刷抖音时会系统会提示,在深夜使用时会支持设置提醒时间

目标

防止用户疲劳使用产品,定时缓解注意力

设计思考

在使用抖音时大家可能会经常深陷其中无法自拔,往往忽略了时间影响身体健康,提醒机制则在深夜不同时间段进行间接提示,虽然在用户体验中不提倡打扰用户,但在短视频这个场景下如果过渡沉浸便会造成反向影响

六、网易音乐—把分享游戏化



产品体验

在网易音乐对某首音乐进行分享时可以对音乐进行个性化定制,对歌曲进行编辑添加文字、图片、语音等以视频方式呈现

目标

把分享以一种偏游戏化的形式呈现,提升用户分享率

设计思考

传统分享基本是直接让用户分享到第三方平台,而网易音乐这个设计把分享场景进行多元化处理,以定制音乐罐子为切入点,用户自由编辑个性化处理装进罐子进行分享,是一种视频剪辑融合音乐的一种新玩法,破圈传统枯燥的分享场景,提升用户分享率

七、QQ音乐—歌词沉浸式体验



产品体验

在音乐歌词页面中可以支持设置歌词主题

目标

新颖的呈现手段,强化用户沉浸式听歌

设计思考

传统的音乐产品在详情页面展示了一屏歌曲歌词,面对大量的文字用户在寻找某段歌词时效率不是很高,对大量的字段也极为枯燥,而qq音乐使用了创新的展现形式,把手机主题概念融入歌词中达到新的视觉体验,根据不同的主题对应的动画也不同,大大的提高了用户的视听体验

八、盯潮—趣味性banner轮播,增加用户点击



产品体验

在盯潮首页banner处对其进行拖动甩出

目标

通过交互玩法提升用户对banner的点击

设计思考

banner在页面通常点击率较低,用户会默认为广告,在盯潮内滑动banner时会发现banner可以进行拖动,并且松开时会自由掉多,把传统的banner切换做出了可玩性更高的效果,同时这个设计手段也能吸引用户注意力引导用户对banner进行点击

原文地址:站酷
作者:爱吃猫的鱼_

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

日历

链接

个人资料

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

存档