一个没有用的按钮,为什么还要放在页面上呢?

转载自公众号:1鸣说。作者:一鸣十二赞产品经理。

我们知道,在做页面设计的时候,最重要的就是确定「页面元素」。哪些元素需要放在页面上,哪些元素不需要放在页面上,这些都是需要深思熟虑的。这一节我们来讲讲页面元素中比较特殊的一类元素——无效元素。

那么什么是「无效元素」呢?一般来说,对于推进页面流程没有任何帮助的元素,均属于无效元素。比如说有一个按钮,点击之后发现其实是无效的,或者说该展示内容的地方实际上是空的等,都属于本文定义的「无效」情况。「无效」指的是不产生作用,对推进页面流程没有任何帮助,即将这个元素完全地去除,也并不会影响页面的正常使用。

「无效」并不是「无用」,很多新人在刚开始做页面设计的时候,很容易想当然地把一些页面中的无效元素删除,简单的思考就是「既然没用,干嘛还把它放上面?」或者是为了页面看起来简洁,而直接把无效元素给去除了。

我们先来看看「无效按钮」。

什么是「无效按钮」呢?例如在点保存的时候,提示不能保存,并告知不能保存的原因。这里的保存按钮就是上述定义中的无效按钮,因为点击保存并没有起到「保存」的作用,并没有使流程往前推进。再例如在点击「选择」的时候,正常的操作是弹窗列表页,从中进行选择,如果如果这个列表页是空的,那么显然无法选择,这个时候这里的「选择」按钮便是无效按钮。简单来讲,所有不能达到「预期效果」的按钮均为无效按钮。

一般情况下,我们应对「无效按钮」有以下4种策略:

(1)策略一:直接隐藏按钮。

(2)策略二:显示按钮但禁用。鼠标悬停提示禁用的原因。

(3)策略三:显示按钮并可操作,点击后弹窗提示不可用的原因。

(4)策略四:显示按钮并可操作,进入新页面(包含弹窗页)提示不可用。

这4种策略的适用场景分别是什么?我们针对电商系统常见的前后台页面逐一说明各自的应对策略。

列表页内容

当列表页的内容为空时,该页面就是「无效页面」,通常来讲,列表页为空属于特殊情形,一般不隐藏,而是在列表页展示内容的区域告知暂无内容。后台部分列表页很常见,采取这种策略的原因是列表页内容为空仅为临时性的特殊情况,非大概率事件,无须对该种情况增加额外判断,同时也可以让用户知晓存在这么一个页面。另外主动性列表页(由用户自行主动产生内容的列表页)一旦隐藏入口将无法进行内容新增。

更准确的讲,实际上列表页内容为空情形属于以上的策略四。一般都是通过点击事件后进入列表页,承载点击事件的按钮便属于以上的策略四,采取策略四的原因一般是:通过点击按钮的下一步操作通常是可用的,便不在这一个环节进行拦截了,用户的预期是这个按钮是可操作的,即便禁用还是会习惯性的去进行点击。

列表页操作按钮

列表页除了展示内容的「业务区」,一般会在行尾放置「操作区」,对每一行的内容进行操作。列表页的操作按钮的主要特点是,按钮都基本一致,因此对于一个不可用按钮直接隐藏会导致按钮区的错位,因此对于每一行的按钮都一样的操作区,采取策略二是不错的选择。实际上策略二和策略三并无区别,除非是需要提醒的内容过多,无法在按钮区承载,则使用消息框提示,否则一般都建议使用策略二。

上面这种是普遍情况,还有一种特殊情况是,对于同一行的元素存在多种状态,每种状态的操作有明显不一样的地方,很难做到统一,如果将所有按钮都进行摆放,都会造成操作区大大冗余,得不偿失。在这种情况下,就采取策略一。将其他状态的按钮进行隐藏。常见的例如订单列表页就采取了这种策略。

编辑页

在编辑页中,我们知道,如果用户填写的内容未达到要求的话,我们是不允许用户进行保存的。这个时候如果用户点击保存,很显然是无效的,这种情况怎么处理呢?一般来说,有两个策略:一是用户没完成一个输入,就对输入区进行检测和判断,如果填写错误,则标红提示错误信息,在用户未完成所有的必填项之前,保存按钮均保持禁用,仅当所有内容均正确输入后才将保存按钮变更为可用。二是在用户输入时不检测,保存按钮始终保持可用,但是点击保存时,提示无法保存的原因。以上两种策略均可用,不过策略一的用户体验会高于策略二。

总归一点,所有的策略都是围绕着「用户预期」来的,都是为了让用户能够少思考,更好地使用,少出错。而不是为了使页面看起来「简洁」而强行「简洁」,否则就是本末倒置了。上面的二三四策略区别并不明显,主要区别在于是否需要隐藏一个不可用的按钮,一个简单的方法就是,如果这个按钮是这个页面是主要元素,那就绝对不要隐藏,否则会造成用户操作中断。一个按钮虽然不能点,但是却给用户提供的明确且有效的信息,而如果直接隐藏了,则这个时候很容易产生困惑,会一直去寻找这个按钮,找不到只会认为是遗漏了而不会认为产品贴心地帮他过滤了无效信息。

【原文链接】

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 我盲目的埋怨着我现在的工作繁忙,是我的平台太小,人员太少,一个人当三个人用,一个行政也能天天加班,走的比业务人员还...
    松果云阅读 128评论 0 0
  • protocol 的本质类似一个抽象类,这个声明了一些纯虚方法.并且没有属性,在java中,这个叫接口类,在c++...
    whitekite阅读 857评论 1 2
  • 一、回顾5月下半月 1工作: *1.加速测量核算账单速度,从一小时2本试着提到两小时5本的速度 (#回顾#:下半月...
    头戴香气的瓷娃娃阅读 245评论 0 0