1、从单复选组件反思功能设计问题

节前有一位读者问了一个关于单选与复选框样式选择的问题,大概是:

看到很多单选与多选的设计形式,多种多样,以前看到「圆点+圆圈」就知道是单选,但是为什么现在单选与多选的设计样式五花八门,都没有遵守前面这种规范呢?这些组件的样式到底该如何确定呢?为什么会有一种模糊不清,不知道如何使用的情况?

我发现许多人都有一个习惯,就是喜欢把某个具象的内容抽象化,把某个具体的问题概念化。

比如认为单选就应该是「圆圈+圆点」的形式,但似乎从来也没有任何明文规定单选就必须是这样的形式,只不过大家看得多了,就习惯认为是这样,觉得就是这样规定的,但其实并没有过这样的规则。

要知道,样式常常根据功能在变化。比如功能优化了,样式也需要进行修饰,并不是说这里有一个单选操作,就必须是「圆圈+圆点」的形式给用户选择。无论是在电脑还是手机上,都是一样的道理。

这样去处理问题,常常会把实际的业务问题给处理没了,最后变成控件选择的问题,而不是功能本身的问题。

比如普通的弹框,也是一种单选状态,为什么不也改成下图右边这样的呢?不就是操作路径长,点击起来麻烦,多此一举,而且也不好看么?

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

即便真的在某个场景下,非得使用上图右边的单选形式,那么把样式改成下图这样,又有何不可呢?

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

只不过常规的「圆圈+圆点」被使用得多了,大家形成了共识而已,但并不代表它就是一种标准。

如果有一个规则规定说,单选必须是「圆点+圆圈」,那么各位目前所设计的绝大部分组件都将不能使用,包括各类菜单或开关。比如下图这样的 action sheet 就不应该存在,而它的出现也是因为功能属性、设备迁移、操作形式等内容的演化所呈现的结果。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

这就是大家在处理设计问题时,习惯做一种概括,希望能复用于绝大多数场景而导致的错误情况,没有落实具体问题具体分析的原则。

包括这位读者的问题,也是希望能够明确单选与复选样式的选择问题,以便往后能够更有条理的使用。但可惜并不是这样,从上述我举的控件例子可以看出,单选形式早就已经变了模样,而多数人并没有注意到,还在认为单选与多选就应该是圆圈与方框的形式。

设计工具/方法论,确实是有部分指导作用,但不能作为绝对性或权威性的内容来吸收,应该辩证地去看。

而之所以在移动端延伸出许多自定义组件(形式并没有遵循所谓的市场常见规范),正是因为业务与功能的多样性导致的结果。

样式的选择不单单是看到的那部分,它还可以任意变化地处理,无论是单选或者是多选,不该被样式套牢了。而它的决定因素应该是内容。

比如,iOS 闹钟的铃声选择,有许多可选项。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

但是因为内容的明确性,大家都知道,闹铃只能选择一种,不会同时有 2 个铃声响起来(当然也可以这么做),所以即便闹铃的单选形式再如何变化,大家也都知道它是单选的,这就是功能决定了操作形式的例子。

类似于,再如何变化选择样式,无论是圆圈、方框,或只有勾,甚至是其他情况,大家也都知道它就是单选。

而之所以用勾或圆点表示被选中状态,只不过是人的一种正常认知意识,即使改成三角形,只要能说清楚是被选中状态,那也不是不行,只不过三角形没有勾来得清晰罢了,而并不是因为有什么特殊含义。

所以只要梳理出符合自己产品的「单多选」样式,形成规范即可。一些人会感到模糊不清的原因是它本来就没有所谓的标准,又何来的清晰呢?

写到这,想到之前有读者问:什么时候该遵循设计规范,什么时候不该?

要知道,设计规范本身就是基于某个具体产品内容所构建的一个整合标准,为了规范化存在共性的功能形式。而对于共性的判断也应该是从功能来定义的,比如返回都在左上角类似的,但是一定么?

单拎出来说什么时候该遵循,什么时候不该遵循,是很概念化的一个问题,不可能存在一个具体话术标准,说什么时候应该,什么时候不应该的。

如果我回答,符合规范中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的废话了。但除此之外,我也就不知道如何解答了,除非你把规范和具体问题发给我,我可以跟你一起讨论讨论。

写这篇文章的时候,看到一位朋友发的信息:

为什么手机刷新都喜欢下拉?因为神经科学研究表明,这个动作,更容易让人产生对不确定性和惊喜的期待,原理和赌场的老虎机类似。

很多人都会习惯性给一些操作或交互形式做类似这样的定义。

但这么定义是不对的,因为这相当于前面说的,把业务给解释没了,成了形式上的讨论。而为什么会使用下拉、以及下拉会有什么情况,包括它所解决的问题,都没有任何的分析。

比如,下拉之所以让人上瘾,并不是因为「刷新」本身。下拉只是一种交互行为,它的出现也只是为了解决早期刷新按钮占据屏幕空间的问题,希望通过下拉进行刷新,以隐藏掉屏幕上的刷新按钮,给屏幕留出更多可用空间。

而采用下拉是因为它更符合人的直觉 —— 往下拉能看到更多新的内容。

但是人之所以会对下拉上瘾,并不是因为下拉这个行为,而是因为下拉能看到更多信息。下拉本身只是解决了屏幕空间的问题,而人其实是对内容上瘾。

比如我在腾讯新闻里看 NBA 的资讯,通常只会直接上滑,看下面的内容,看完了就关了,不会进行下拉刷新。

因为在腾讯新闻里,下拉刷新的新闻并不是最新的内容,更多是今天或今天之前的信息,不刷新反而是刚刚更新的资讯,那么下拉刷新虽然也是刷新,但是刷新出来的内容是旧的,也并不吸引我,反而成了我要避免的操作,因为只要一下拉,最新的资讯就会被旧的资讯挤掉,要刷掉进程重新打开 App 才会重新再显示最新的。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

所以就不能简单的定义说「下拉刷新是一个容易让人上瘾的操作」,而是要关注内容,如果刷新的信息都是旧的,或者是用户没兴趣的,那即便刷新了,也不会引起用户的注意,也更不可能让用户上瘾了。

2、标题文案溢出使用「…」合理吗?

读者:

呆呆,这个图的卡片列表里,标题用省略号合适吗?

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

(因为原图涉及读者项目隐私,所以重画了个草图。)

又是一个没有业务背景的问题。不过这个问题比较简单,可以展开来说一下。

通常,我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计,譬如上面这图。

于是,许多人在自家产品的设计过程中,遇到此类情况,被开发问到时,也会搪塞一句:文案要是超出就「…」显示吧。

大多数遇到这种情况的,都是因为之前没考虑好,才临时想了这个解决办法。

而很多时候,一些产品之所以用「…」显示,并不是因为单纯地文案溢出,可能是专门设计过的。

所以,如果简单地认为「…」就是解决溢出而使用的方法,那就有问题了。

下面举几个例子。

有些产品,我们几乎看不到列表视图里的标题是有省略号的。

因为这类产品的目的就是让用户读到完整的标题信息,对眼前的内容好做判断,从而考虑是否点进去看详情。

所以在设定的时候,界面中标题字数的规定,与界面样式就已经提前规划好了,可能在后台设置就限定死字数,要求运营人员上新时要统一界面的展示形式。

这种情况下,一般就不会再有省略号的问题,譬如一些知识付费类产品。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

比较典型的还有 TED 演讲视频的标题,在《设计体系》这本书里专门提到了这个案例。

对于 TED 来说,演讲标题的信息优先级是最高的,所以他们宁可保留所有标题文案,也不对文案做截断用「…」显示。

因为对标题做截断是很容易的,而难的是把一个演讲主题提炼成一句简短句子,所以他们为了展示更清晰的标题,宁可在界面上保留长标题,甚至为长标题的显示而专门设计相符合的展示形式。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

反过来,他们也因为这一点而确定了界面上标题字数的上限,确保文案不会超过界面显示的最大临界值。

包括一些资讯类产品,在标题上也会做限制,以满足最大化呈现且不使用省略号。意思是:假设界面上文案范围定了 30 个字符,那么配置的时候就必须 30 个字符以内把内容表达清楚,且必须完全显示在界面上。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

所以经常看到一些 UGC 产品之所以会限制标题字数,原因除了常见的标题不能过长之外,还有一点是为了在列表页就能显示完整。

各位在设计这类产品功能时,也要注意到这一点,而不是随意说一个「字符不能超过 50 吧」。

而有些产品的内容列表,之所以频繁使用省略号,它的目的是为了引导用户点击用的。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

这类形式一般出现在营销号发的文章里,多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的,除非是一些内容产品,运营方是企业自己,为了让产品上的内容有更多人点击而这样去设计,当中可能涵盖了广告,以此赚取广告费。

不过这类内容的设计已经让用户开始反感,所以如果不是特殊情况,最好少这样去做。

当然,还有同类型的,一般出现在页面面积小且需要展示更多信息的集合类视图,比如:

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

这种形式的设计,就是因为页面上想展示的信息太多,以至于通过这类合集来展示某个模块里的内容,营造出一种很丰富的感觉。

也就是利用「…」引导用户点击,表示信息没有展示全,如果要看,就点开详情,进二级页面。

还有一些产品的省略号,纯粹就是大家理解的,溢出就省略号显示。

比如同样是资讯或内容类,以文字为主的产品,虽然标题超出范围用了省略号,但用户基本也已经知道是什么内容(上面那个集合类视图也是一种),且还有摘要引读。

比如下图:

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

这种标题字符限制在了两行以内,多余字符用「…」展示,基本上已经是一句完整的话,能让人大致了解这条信息的意思。并且还有部分摘要,已经足够用户判断是否对它有兴趣,如果没兴趣,直接刷走也无所谓。

包括一些电商类产品,用户多以商品图片为主要决策因素,商品标题作为辅助信息,优先级不高,所以标题溢出是否省略号显示也无所谓。

这其中有一个特殊情况,就是有些产品的标题即不展示全,同时又没有省略号,比如淘宝的商品搜索结果页面。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

因为这类列表实质是一个产品卖点集合的浓缩词,不是完整的一句话,多余字符展示或者不展示,都不会有太大影响,所以也不重要。

当中我比较反感的还要数农药了。

好友邀请的列表视图里,常常看不全昵称,因为好友会有游戏昵称,微信备注会展示在游戏昵称后面,以至于要点到游戏关系里先看全昵称,再到匹配界面邀请好友。

既然已经区分了微信好友与游戏好友,为什么昵称上面不也加以区分呢?

当然,经常玩的好友可能没这个必要,毕竟头像或昵称都可以很快识别出来,但是偶尔一起玩的好友通过这样的识别方式就比较难了。

这里就是简单提一句。

通过上面提到的一些例子,以及不同场景下标题省略号的处理方式,相信大家对这块的理解会比之前更深。

同样,对于开篇读者提到的问题,更符合的情况可能类似于知乎这种,有完整句子,所以标题是否省略号处理也就没太大影响。

但具体的还是要结合业务详情仔细考量。

而标题内容的展示是否要用省略号处理,优先要看这条信息的业务权重,以及是否会影响用户决策。

所以各位在设计这类内容标题是否要用「…」显示时,也要注意判断自己的产品特性符合哪种类型,而不是随意一句话,说「超出就省略号显示好了」。

3、怎么判断输入框里放不放清空按钮?

最近收到两个问题,正好都与输入框有关:一个是怎么判断输入框要不要放置清空按钮;另一个是输入框超过限制后,是禁止用户继续输入,还是允许超出但会警告提示。

交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

在一定程度上,这两个问题的分析逻辑是类似的,所以放到一起聊正合适。

先看第一个问题:怎么判断输入框里要不要放置清空按钮?

原问题是这样的:

呆呆,我最近在优化公司的产品,遇到一个问题,就是 PM 想在聊天输入框里加一个「清除按钮」,可我觉得不太合适,但是说不出原因,只能说没见过在聊天框里加清空按钮的。这个问题要怎么判断呢?

我们一般会在搜索、手机号输入框里看到类似的清空按钮,比如输错了就点一下,清空后再重新输入。但是很少会在聊天框里看到清空按钮,为什么呢?

主要是「时效性」…算了,这种概念词用多了,发现现在人都不会讲话了。说白话就是「要快」。

无论在登录注册还是搜索的场景下,除了内容本身之外,最注重的就是效率。

譬如有个数据大概是说,用户登录注册花的时间超过某个范围,转化率就会对应逐步降低。而高效率,就是让用户能快速登录注册账号,使用产品功能。所以设计师们会在登录注册的操作流程里抓住可提高效率的每个细节,输入框使用效率就是其中之一。

搜索也是一样,当用户有明确目的使用搜索框时,关键词就是用户当下最关注的信息,如果输错,再一个个删除,显得麻烦,所以清空按钮能在这里提高用户的操作效率,甚至 iOS 的搜索组件也会自带一个清空按钮。如果是电商产品,高效率是能间接提高成交率的。

这里的输错,也有两层意思,一个是用户在输入过程中发现错字,比如登录注册时,发现手机号输错了,一个个删除反而没清空重新输入来得快,因为删了之后,号码要重新背一遍,具体到某个数字,然后接着输,特麻烦。

或者搜索内容时,发现有错别字,删除某个字再重新输入,反而没有清空重新输入来得快,毕竟输入法有串联关键词组的功能。

另一个是反馈的结果不符合用户的心理预期。比如输入手机号已被注册,或者搜索结果不满意要重新输入关键词,使用一键清空都是比较高效的。

而且输入之后,系统需要给用户呈现结果,如果结果不满足用户预期,还会存在短时间内多次输入与清空的情况。那么,无论是错字还是对结果不满意,清空按钮都可以非常便捷地帮助用户一键清除上次输入的字段,让用户更快速地重新输入新字段,从而提高用户的操作效率。

于是,我们会把这类场景下的「清空」说成是「一键清空」,主要是因为方便。而它的作用就是,在出错的场景下,更快捷地给用户重置的操作。

反过来,各位可能要说:那聊天框不满足这个条件么?

我们接着看聊天输入框。

我们知道,聊天输入框的内容不是固定的,它是根据对话内容而变化的,用户甚至需要花时间持续输入并纠正自己的用词,以及话术的准确度。过程中,如果输入的内容多,而且又是即兴的,耗费的时间与精力也是很大的,清空后也难以再恢复。

它不像登录或搜索,固定的输个数字串或关键词,它是一段完整内容。虽然也会有某一句话或者某个词输错的情况,但是一键清空的操作成本太低,对应着聊天框的高输入成本,一键清空的存在与之并不相符。

于是,这里就引出了一个概念,叫做「输入成本」与「修改成本」。

清空按钮对应的,就是低修改成本,因为简单点击一下,就清空了。它所适用的场景就是低输入成本的情况,也就是前面提到的登录注册或搜索 —— 输入的内容相对固定,且可能反复。

对于登录、搜索等指向性比较明确的输入框来说,用户在乎的是输入和反馈的效率高不高。一键清空操作能带来效率上的提升,而且操作后带来的损失成本是很低的。因此,一键清空操作在这个场景下,对用户来说是安全且高效的。

但是在聊天场景下,一键清空作为低修改成本的作用是不适合的,因为这时候输入成本比较高。

用户在聊天输入框内表达清楚自己的想法是为了让对方理解,达到交流的目的,这样的内容是不确定的。而且在聊天输入出错情况下,我们有多种操作方式让用户重输,比如键盘快滑定位,触摸定位错字等,都比一键清空重新输入的成本低很多,而它所谓的「便捷性」在这里意义也就不大了。

于是乎,在衡量输入框是否需要清空按钮时,我们首先要知道,清空按钮是低修改成本,那么如果输入框的输入成本比较低时,我们就会使用清空按钮,来提高操作效率。而当输入成本比较高时,一键清空的操作就显得配不上这个输入框了。所以,它在聊天框里就没有存在的必要了。

包括其他非固定内容的输入框,也是一样的道理。

接着,延伸出第二个同学的问题:输入框超过限制是禁止用户继续输入,还是允许超出但会警告提示?

相信各位读完上面的,再看这个问题,应该也能分析出原因了吧?逻辑跟上面的也差不多。

也看输入成本,比如是固定内容的手机号,我们正常会禁止多余输入,因为这样用户更容易判断手机号是否正确。

如果是短长文,说明用户可能是手打字超出限制,这时候如果禁止输入,用户不好在输入框里做内容删减或修改,也会打断用户的输入流,毕竟还没写完就限制了,那得先删掉前面的,再来思考后面怎么写,会乱。而且如果是复制的,禁止输入的话,超出部分就被截断了,也要先删减,再继续复制剩余部分,非常麻烦。除非先在别处删减到限制字数内,再复制过来,但这样又增加了用户的操作成本。

如果允许输入但警告提醒,那么用户就可以根据自己已经输入完的内容做删减修改。

所以对于这个问题,我们从这个视角出发,也能了解一二,就是通过适用场景与输入成本来分析。

当然,以上所有内容更偏向于通用性说明,针对具体业务还需要具体分析。

本篇文章就是这样了,希望对各位有所帮助。

:-)

做人要厚道,转载请注明文章来源: https://www.boxui.com/ued/design-idea/45680.html