首页 体育世界 正文

分解“开关”后面的设计细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆

作者从日子中的实践情况动身,探讨了开关背面的规划思维并拆解了详细的规划细节。

作者从日子中的实践情况动身,探讨了开关背面的规划思维并拆解了详细的规划细节。

01 日子中的不和事例

故事要半年前开端讲起:那个时候我搬到了新的出租屋,房间里装备的洗衣机比之前的大了一倍,并且操作区上散布着的鳞次栉比的文字和按钮让洗衣机看起来很高档,我对此很有好感。

可是这种好感并没有持续多久,在我第一次运用它时:将衣物放进洗衣机——挑选好时刻和洗刷办法——按下发动按钮(如下图右侧白色按钮)。

按下后洗衣机宣布了“滴”的一声,在我的认知里它应该是开端作业了,可是10秒往后没有任何抽水声和洗衣服的声响……

我疑问地想:“是不是方才并没有成功发动?”所以再次按下了发动按钮,又是“滴”的一声,可是这次我等了 1 分钟没有任何反响。之后的十分钟里,我与这台匪夷所思歌谣的机器“交涉”屡次才了解了它的运转办法。

这台洗衣机发动后需求等候大约十几秒才开端运转,分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆可是在我按下发动按钮后我得不到任何反响或许提示来告诉我洗衣机现已开端作业了,所以疑问的我又按下了一次发动按钮,可是令人溃散的是这台洗衣机的发动和暂停按钮是一体的,我第2次按下实践是进行了暂停操作,然后导致我第2次的困惑。

假如你是这台洗衣机的规划师,你会怎样处理上述的问题呢?

或许你的心中现已有了答案,可是在答复之前咱们先试着探求问题的实质。

人们不管是运用日常物品仍是与机器进行交互,都会面临两个阶段的问题。一个是「履行」,一个是「评价」。

履行时用户需求了解怎么操作,操作后或许会有什么成果。评价时用户需求知道详细发作了什么,作为规划师咱们要经过合理的手法协助用户处理这些问题,确保交互的可用性和流畅性。

一般咱们会运用「意符」在用户履行前奉告用户怎么了解、怎么操作、操作后会有什么成果;在评价前经过「反响」奉告用户成果是什么。

关于意符的界说,在《规划心思学 1-日常的规划》一书中,作者唐纳德诺曼做出了这样的解说:

人们需求某种办法了解他们即将运用的产品或服务,某些标识标明的用处,会发作什么,有什么样的代替计划。人们寻觅蛛丝马迹,寻觅任何能够协助他们应对和了解的分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆符号,任何或许标识出有含义的信息的符号非常重要。

规划师需求供给这些头绪,人们所需求的和规划师有必要供给的,便是意符。除此之外,优异的规划要求对产品的意图、结构和设备的操作与运用者进行杰出的奉告。那便是意符的作用。

人们需求某种办法了解他们即将运用的产品或服务,某些标识标明的用处,会发作什么,有什么样的代替计划。人们寻觅蛛丝马迹深海寻宝公司,寻觅任何能够协助他们应对和了解的符号,任何或许标识出有含义的信息的符号非常重要。

规划师需求供给这些头绪,人们所需求的和规划师有必要供给的,便是意符。除此之外,优异的规划要求对产品的意图、结构和设备的操作与运用者进行杰出的奉告。那便是意符的作用。

简而言之,意符便是在用户运用前,机器为了让用户更好地了解和运用它而做出的提示。而反响就更好了解了,机器在咱们操作后做出的反响便是反响,没有反响相同也是一种反响。

下图展现了机器与用户怎么进行交互:一个合澧县气候理的规划能够让用户快速顺利地进行 1234 四个过程然后完成任务,而糟糕的规划会让用户不断重复这个流程。

之所以会呈现糟糕的规划,便是因为在过程 1 和 3 没有进行合理的意符提示和反响提示让用户摸不着头脑,然后导致用户依据自己的猜想和过往经历来进行操作,终究得到非预期的成果。

回到文章开端时的洗衣机开关问题,因为开端和暂停按钮是一体的,在没有任何意符和反响的情况下我按下这个按钮时我并不知道我发动的是开端操作仍是暂停操作。

咱们能够就这个问题列出以下处理计划:

当然处理计划有许多,每个人都能够依据场景想出不同的处理计划。

与实际机器的开关相似,在 UI 规划中咱们假如进行开关规划也需求遵从相应的规划准则。一个合理的开关规划主体包括的意符别离有两种:

主体之外咱们还能够添加辅佐提示愈加明晰地传达意符和反响。

接下来将介绍一些常见的开关类型和辅佐提示类型,终究总结出体会优质的开关规划办法。

02 开关类型 1. icon

在 UI 规划中最常见的开关或许便是 icon 了,即由单一的 icon 经过色彩或图形的改动来表明开或关的状况。

因为交互规划古往今来并没有共同的严厉规范,所以到底是将开关 icon 的款式规划为「当时状况款式」仍是规划为「按下之后的状况款式」并没有一个约定俗成的规矩。

可是,比照而言现在各类 App 规划中常见的且体会比较好的计划仍是将开关款式规划为当时状况款式。如下图iPhone自带相机的实况相片开关icon便是显现当时状况。

可是,并不是说将开关款式规划为当时状况款式做法遍及且体会更好就能够这样做了,有些开关的规划因为运用广泛,现已在用户的心智中扎根,咱们假如强行改动反而拔苗助长导致体会变差。

最典型的便是视频和音乐的播映暂停开关,他们表明的便是操作后的状况而不是当时状况,如下图。

因而,大部分运用的开关类 icon 都是混用当时状况和操作后状况的,如下图哔哩哔哩的视频播映界面,播映暂停开关 icon 表明的是操作后状况,弹幕开关表明的是当时状况,而视频锁开关 icon 又变成了表明操作后状况了。

是否共同倒不是要害,要害是咱们是否能够让用户了解相应的意符和反响,方针是让用户在操作开关前能够知道当时状况是什么,操作开关后当时状况是什么。

举一个反例,下图中的美颜相机的夜拍方式开关就没有直观表现出当时是开仍是关,这种有歧义的规划或许让新手用户不知所措,或许原本未敞开的功能让用户误以为已敞开,导分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆致拍出来的相片不符合用户预期。

由此咱们能够看出,单一的 icon 开关假如没有其他的辅佐提示会构成意符和反响的缺失,然后构成较大的歧义性,用户会在疑问中依照自己固有的心思模型和过往经历进行判别,体会因而下降。

2. 主体与开关别离(别离式)

上strawberry一部分举了美颜相机的反例,其意符和反响不明导致的歧义问题导致了用户的困惑,但运用「主体与开关别离」(后文共同简称为“别离式”)的开关规划能够处理这个问题,它介意符和反响层面都给予了用户提示,可视性很强,彻底处理了开关状况无法被用户感知的问题。

别离式开关指的是,主体不再充任开关,只作为开关的称号读后感300字或icon,别的制造一个开关传达意符和反响,处理了当时状况与操作后状况混杂的问题,其一般的款式如下图。

如下图,Faceu激萌不同于美颜相机规划办法便是将主体与开关别离,很明晰地传达了当时开关状况。

大部分App的设置页面运用的开关都是主体与开关别离的办法,如下图。

清楚明了,别离式开关直观展安丘气候示了当时状况,在消除歧义方面优于 icon 开关,但一同缺陷也很显着,它占用了过多页面空间并美感欠佳。

3. 称号改动

称号改动指的是开关依赖于其称号的改动奉告用户开关的当时状况和操作,常见的类型如下:

部分 App 会将开缝纫机关的称号改动的办法共同,但也有部分 App 会将这两淫棍类进行混用,即一个是表明当时状况,一个是表明操作。

下图为部分 App 的称号开关,咱们能够将上图的开关称号类型的序号对号入座。

表明操作的按钮文字具有必定引导性,用户简单感知和触发,反之,表明状况的按钮文字因为不具有引导性,假如用户没有对这类按钮构成运用习气乃至难以意识到它是可点击的,因而咱们能够运用其特性进行逆向运用引导用户的行为。

比方在直播App中,咱们期望引导用户重视主播,又企图防止用户重视后又取关主播。咱们就能够将“重视”制造为表明操作,案牍写为“重视主播”(归于1.敞开……)。将“撤销重视”制造为表明当时状况,案牍写为“已重视”(归于7.已敞开……)。

前后的色彩进行区别,“重视主播”的按钮制造得比照度强,吸引力大,“已重视”做得弱一些,让用户误以为不行点击,如下图的斗鱼直播。

可是,称号改动的开关因为言语的含糊性,依然构成了部分歧义。咱们能够发现许多App的称号改动开关规划中,都会在操作后参加其它提示来消除歧义(如:toast 提示),有些App则并未参加,因而在后文中会侧重介绍辅佐提示的长处和运用办法。

4. 小结

icon、别离式、称号改动,假如依照消除歧义的好坏摆放的话,大约是 别离式&公共营养师gt;称号改动>icon。

那这样的话是不是应该把开关都换成别离式呢?当然不是,别离式尽管介意符和反响的层面很充沛地消除了歧义,可是其也有显着的缺陷,别离出的开关会占用部分空间,或许会影响漂亮,因而咱们需求依据需求和页面结构挑选最适合的开关类型。

那称号改动和icon类的开关怎么消除歧义呢,咱们能够经过添加下面介绍的辅佐提示来消除歧义。

03 辅佐提示 1. 环境暗示

环境暗示指的是用户在操作开关前,开关以外的区域给予用户的提示,这些提示自身存在于交互流程中并不是咱们故意参加的,用户依据这些提示能够判别当时状况以及按下开关后的状况。

例如在观看视频时,当用户去按下视频播映按钮前孟买猫,用户会经过当时图画停止与无声响这个环境暗示了解当时状况是或许是视频未播映,所以应该按下播映按钮让视频播映。

再比方得到 App 的夜间方式,用户能够经过当时界面的款式判别当时是否现已敞开了夜间方式,如下图。

看下图,假如没有环境暗示,你能辨明得到的夜间方式的开关哪个当时状况是夜间哪个当时状况是日间吗?

因而,环境暗示的优势是咱们不需求进行别的规划其他的意符和反响奉告用户当时状况,环境给予的暗示现已满足直观。

2. 模态/非模态提示

当用户按下开关后模态和非模态提示能够在反响层面奉告用户,让用户知道自己是触发了敞开仍是封闭。

常见的模态提示控件是「正告框(Alerts)」,非模态提示控件是「提示框(toast)」,前者提示强度大,运用在一些危险分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆、重要的反响中,后者则运用在一些轻量的提示中。

介绍 icon 开关的部分咱们说到了美颜相机的夜拍方式的 icon 开关状况难以区别,但美图秀秀在这儿运用了顶部的非模态提示在反响层面奉告用户当时状况,很好地处理了这个问题,如下图。

拉勾网的设置中,躲藏简历为危险操作分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆,用户极有或许因为开关称号的歧义或因为忽略触发开关导致简历被躲藏然后错失作业时机,因而此处规划了一个方式为正告框的模态提示来奉告用户当时状况以及潜在危险。

3. 辅佐案牍

辅佐案牍指的是在主体(主体或许是开关称号、icon 或二者皆有之)之外别的放置一些案牍信息来充任意符和反响。下图事例便是高德地图的下车提示的开关,开关的主体是称号,可是下面的一行辅佐案牍很明晰地传达了当时的开关是什么状况。

4. 其他辅佐提示

并不是全部提示都需求让用户看见,咱们能够给予用户其他感官的信号奉告用户当时开关的状况。

在实际日子中,我达达们会经过钥匙在锁中扭动宣布的声响判别锁是否被翻开,经过接触感触摩托车是否持续轰动判别其是否现已熄火。

相同,在 UI 规划中,咱们也依然能够运用听觉和触觉来消除开关的歧义。一个比较优异的事例是高德地图,当用户翻开下车提示之后,会呈现语音提示“已敞开下车提示庞洪雨”,它充沛考虑到身处野外的用户或许并不能很方便地获取屏幕上的视觉信息,因而运用语音的方式提示用户。

5. 小结

辅佐提示很好地弥补了开关在消除歧义上的缺乏,但咱们需求合理运用不然就会发生不必要的视觉噪声。

如下图,试想音乐的暂停播映开关假如参加的 toast 提示会怎样样呢?因为咱们现已能够经过“手机是否宣布声响”这个环境暗示获悉当时的开关状况,假如再参加 toast 提示必然会呈现不必要的视觉噪声。

04 总结

介绍完开关类型和辅佐提示后,咱们怎么将其运用到咱们的产品中,规划出无歧义或低歧义的开关呢?

假如咱们挑选的开关类型现已满足的消除歧义,如别离式,咱们就不太需求额外地添加辅佐提示了。可是假如运用简单构成歧义的开关,咱们能够依照(开关类型+辅佐提示 1+辅佐提示 2+…………)的公式进行规划,即一种辅佐提示不满足消除歧义,能够运用多种一同。

举个上文的比如,高德地图的下车提示开关的规划便是「称号改动开关+辅佐案牍+语音提示」 的组合。

可是,任何规划都不是完美的,许多当地都需求咱们做出退让,尽管咱们能够挑选卉卉女王适宜的开关类型和辅佐提示处理歧义问题,但随之而来就或许呈现其他问题。

如别离式开关消除歧义作用很好,可是占用空间且不漂亮,模态和非模态提示给予用户的反响比较强,可是或许打扰到用户。

归纳上文说到的三款相机软件作为事例,如下图,咱们能够发现在消除歧义的过程中防止不了对用户构成的搅扰或页面漂亮度的下降,咱们很难去评判Faceu激萌、美颜相机和美图秀秀哪个规划得更好,它们只是在易王丽鹤用性和美分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆观性之间找到了它们所以为的平衡点。详细怎么规划,仍是要详细问题详细剖析。

那么咱们应该怎么进行取舍呢奇葩,在屏幕这儿咱们要考虑别的的要素。咱们能够从以下视点剖析,运用频率、用户人群、潜在危险等。

运用频率:运用频率越高,用户对操作的了解度越高,歧义对用户构成的了解与回忆本钱就下降了联合的反义词,规划能够倾向低搅扰和漂亮度,反之运用频率越低,歧义对用户构成的了解与回忆本钱升高,规划就应该倾向于易了解。

用户人群:不同的用户人群的风格偏好、认知才能是不一样的。例如,咱们要规划一款方针用户为年轻人的相机产品,规划风格精约,此刻咱们比较倾向的规划计划或许就相似美颜相机。反之,假如咱们的方针用户是中老年人,就要倾向于易用而献身漂亮度,计划转而倾向美图秀秀或Faceu激萌。

潜在危险:开关的切换假如会导致潜在危险,规划就应该倾向于易了解,且需求运用模态提示奉告用户危险,例如用户假如封闭了推送告诉开关,会导致毒龙接纳不到实时重要的信息告诉,此刻不只要运用易辨认的开关类型,还需求添加模态提示奉告用户危险。

咱们能够将这些考虑视点放到雷达图,如下图所示,终究构成的面积越大咱们越应该将按钮制造得易了解、易运用,反之咱们能够倾向于将开关制造得更漂亮献身一些易用性。考虑到一些特别产品的特别用户特点,咱们能够鄙人图中添加其他考虑视点,其并不是原封不动的。

以上是本次对开关规划的考虑,看似小小的一个开关,包括的学识却不乏其人。作为一个互联网产品规划从业者,必定要长于感触日子,用规划师细腻的心里去审察、洞悉身边的全部事物,发现美与缺乏,考虑改善办法,并在这个过程中逐步提高自我的价值。

作者:贝林;大众号:贝林的规划站(ID:123456)

本文分化“开关”后边的规划细节。-万博manbetx_manbetx官方网站登录_万博体育官网登陆由 @贝林 原创发布于人人都是产品司理,未经作者答应,制止转载。

题图来自Unsplash,根据CC0捐精护理协议。

相关推荐

  • 暂无相关文章