松果

pk10软件下载:如何合理的使用“置灰”

松果 APP设计 3897浏览

pk10技巧 冠亚和稳赚 www.581n8.cn 我最近在梳理产品报错场景的过程中,发现“置灰”状态的使用可以有效的提升报错场景中的用户体验。本篇文章就向大家简单分析一下如何合理的使用“置灰”。

 

置灰

“置灰”是相对于“常态”而言的,代表着当前不可用。这里的“不可用”在不同的场景下有着不同的意思:在用户等级体系中,置灰的勋章意味着这个等级你还没有解锁;在卡券中心,置灰的卡券代表着这张卡券已经过期或者已使用。

Image title

为了让大家更好的理解,我将“置灰”分为两种。一种是“视觉置灰”,这种置灰仅限于视觉层面,不影响用户正常操作,就像上面的卡券一样,虽然已经过期,但是依然可以点击查看详情;另一种是“功能置灰”,直接禁用该功能,用户不可点击。

 

视觉置灰

对于任何一个设计元素或者组件,我们想要系统的掌握它,首先要从功能入手,弄清楚它能够做什么。视觉置灰在界面设计中主要起到的是一个筛选的作用。以豆瓣和虎扑为例,如果这个帖子你已经浏览过了,那么就会置灰,这样可以筛选出用户未读的帖子,提高新帖的阅读量。

Image title

 

在电商类的产品购买页中,置灰意味着当前的颜色跟尺码没有。置灰的微信红包说明该红包你已经点击过了。

Image title

 

在网易云音乐中,置灰代表着当前歌曲没有版权,无法播放。这里筛选的维度是该歌曲是否有版权。同样是版权原因,b站中如果该视频没有取得下载权限,采用的就是我下面所说的功能置灰,直接禁用下载icon,用户无法点击。这种处理方法有待商榷,我觉得像网易云一样提供一个弹框安抚一下用户会更好点。

Image title

 

上面提到了歌曲版权的问题,这里可以根据歌曲下载的场景做一个延伸。目前来说,歌曲付费下载已经是常态了。在酷狗音乐中,用户点击下载icon,弹出一个对话框,告知下载该歌曲必须要开通音乐包或者选择单曲购买,用户点击进入相应的开通和购买页。

Image title

 

其余的竞品都是用户点击下载icon,直接进入开通会员/购买单曲的页面,在顶部以通告栏的形式告知用户下载该歌曲必须要开通音乐包或者选择单曲购买,跳过了对话框。这样的处理方式相较于酷狗音乐,缩短了用户的操作路径,减少了操作步骤。我们都知道每一个操作步骤都意味着又流失了一部分用户,这样的做法可以提升转化率。

Image title

 

功能置灰

功能置灰(或者说禁用)是这篇文章的重点。在继续阅读之前,大家可以先思考一个问题:如果一个功能无法使用,其入口我们假设是一个按钮,那么该按钮是应该置灰还是置以常态用户点击之后以弹框报错呢?

Image title

以支付宝的提现场景为例,如果一个用户打算把钱转出到自己的银行卡里。账户余额只有5万,但是他输入了55万,输入框立刻校验出错误,并且在下方给予文字提示??墒堑撞康淖霭磁ヒ廊皇强傻慊髯刺?,用户点击之后,弹出一个对话框提示用户“转出金额超限”(跟底部提示文字一样)。其实这里对话框的存在意义并不大,因为错误信息已经通过输入框底部的文字完成了传达。

 

Image title

同样的场景,京东金融采用的方法对按钮进行置灰,用户不可点击。在这里我个人比较推崇京东金融的方式,那么这样来说上面的问题看来有答案了,应该对按钮进行禁用。这样的说法明显欠妥,我们应该考虑更多的场景,上面提到的是单行输入框,如果用户需要在一个表单中输入多条信息,按钮还需要置灰吗?我的回答是:“不应该”。首先多行输入框意味校验难度的提高,因为每个输入项的格式是不一样的。而且移动端碍于屏幕尺寸,很难像pc端表单一样进行逐行报错。

 

Image title

此外报错的原因也可能是用户遗忘了某个栏目没有填,如果按钮置灰,就会给用户造成一个困境:我不知道自己哪个步骤做错了,为什么按钮还是置灰?如果按钮是可点击的,那么就会跳出提示告诉用户你当前还有某某项目未填写。在多行输入框表单样式中,我个人最偏爱京东金融的处理方式。一旦某个输入框出现报错,该行文字会变红,这样可以帮助用户快速的定位问题所在,然后再以toast形式告知用户错误原因。

 

Image title

功能置灰(禁用)意味着用户无法与该功能进行交互,也无法获得任何反馈。所以我们如果要禁用一个功能,必须保证用户可以明白禁用的原因。当然这并不意味着,只有用户明白禁用的原因,就可以禁用。功能置灰在产品设计中并不常见,因为直接禁用了该功能相当于封死了一条操作路径,会影响用户体验的流畅性。

 

总结

以上就是我对置灰状态的简单分析和总结,有不同的观点和想法欢迎留言或者加群讨论。

 

原文地址:王M争(公众号)

作者:王M争

 

转载请注明:pk10技巧 冠亚和稳赚 » 如何合理的使用“置灰”

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网pk10技巧 冠亚和稳赚 www.581n8.cn?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.www.581n8.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.www.581n8.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.www.581n8.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
让用户赞叹不止的信息录入技巧让用户赞叹不止的信息录入技巧
【干货贴】关于提示框的那些事儿【干货贴】关于提示框的那些事儿
需求拆解秘诀——兵分三路进攻法需求拆解秘诀——兵分三路进攻法
Dropbox设计师总结,如何让界面信息更加聚焦Dropbox设计师总结,如何让界面信息更加聚焦
分享功能,你可能了解的还不够多分享功能,你可能了解的还不够多
“功能性与使用性取舍”原则在界面中的应用“功能性与使用性取舍”原则在界面中的应用
移动端中的 “预期设计”有哪些?移动端中的 “预期设计”有哪些?
快速掌握列表导航的布局快速掌握列表导航的布局
完美像素入门指南,魔鬼都在细节里。完美像素入门指南,魔鬼都在细节里。
Atomic Design 原子设计理论精华总结Atomic Design 原子设计理论精华总结
?
  • 端午节湖北接待游客1558万多人次 实现旅游总收入61亿元 2018-11-21
  • 自家车给自家店拉货咋就成“非法营运”了? 2018-11-21
  • (两会受权发布)中华人民共和国副主席简历 2018-11-20
  • 远离闹市喧嚣 亲子携手感受特色小镇的生活美学 2018-11-20
  • 租购并举渐入佳境 构建楼市阶梯型消费 2018-11-19
  • 向德荣寓言:农夫、青蛙与苍蝇(原创首发) 2018-11-19
  • 2018首届“中新广州知识城杯”绘画摄影作文大賽·奥一网 2018-11-18
  • 任何时候,国家安全都是老百姓最"稳"的幸福 2018-11-17
  • 别扯没用的,土地事实上属于地方政府才是关键。粮食更重要,咋不炒粮食? 2018-11-16
  • 中考科目改革催热高价冲刺班 2018-11-16
  • 因滑门存隐患 现代汽车召回2339辆起亚嘉华汽车 2018-11-15
  • 异类非人思维。如一尼安德特人从2万年前发出的声音。 2018-11-15
  • 【专题】王学义教授做客长城网燕赵名医大讲堂 2018-11-14
  • 广州市从化区人民法院公告专栏 2018-11-14
  • 美媒:中国歼10改进型能力强悍,已成美空军强大威胁 2018-11-13
  • 755| 552| 588| 585| 255| 370| 285| 414| 312| 726|