配置可见性如何运行在用户界面中 (什么叫可配置)

本文目录导航：

• 配置可见性如何运行在用户界面中？
• jquery 选用器是否查找display：none的元素
• CSS中可承袭的属性

配置可见性如何运行在用户界面中？

在失掉专业常识和技艺的路线上，设计师们会遇到各式各样的专业术语。

之前咱们曾经引见过一些外围术语的贴子，如可用性和网页设计、商务术语和缩略语、导航元素和色调词汇等。

这篇文章将继续和大家引见心思学在用户体验设计中的运行，并会在用户体验设计词汇表中参与一个新词。

当天咱们探讨的是配置可见性（Affordances，又译作可供性），它用巧妙的线索协助用户与界面交互。

什么是配置可见性？

配置可见性是物体的一个属性或特色，它提示着咱们可以对这个物体做什么。

简而言之，配置可见性提示用户如何与某物互动，无论是它是实在物体或是数字界面。

例如，当你看见一个门把手时，它就是一个你可以用它开业的提示。

当你看到一个听筒图标，它就提示着你可以用它来打电话。

配置可见性使咱们的环球愈加便捷，在它的协助下，咱们可以成功的与物质环球和虚构物体启动交互。

请看上方的洒水追踪器的界面。

你瞬间就能明白所需执行的执行曾经成功——由于有符号“√”的提示。

标签栏中的图标给了你可以用这个app做些什么的线索：审核你的一套植物（这个标签是生动的，由于它是有色的，而其余的不是）、参与一个新的植物或许检查你的账户消息。

这些都是举措的配置可见性。

洒水追踪器

该术语的历史

“配置可见性”这个术语是由心思学家James Gibson首先提出的，他对视觉感知有着深化的钻研。1966年，他初次在他的书《知觉系统之觉得》中经常使用这个词。1979年，他在《视觉感知的生态学方法》一书中说明了配置可见性的定义：“ 环境的配置可见性是指环境所给予生物的东西；环境提供或安顿的、无论好坏的东西。

我在词典中找到了动词afford，但名词affordance还没有。

我发明了这个新词。

它同时触及环境和生物两者，这是一种此前已有的词汇所没有表白进去的相关，即生物和环境的互补性。

” 依据吉普森的说法，人类偏差于去扭转环境，宿愿它的配置可见性更适宜他们，并使他们的生存更轻松。学习环境的配置可见性成为社会化的一个关键局部。

当被运行于设计时，配置可见性这个术语指的仅仅是用户得以发觉到的一切操作或许性。从这个角度来看，Donald Norman在《日常事物设计》1988册中探求了这一术语的进一步开展。依据专家的说法， 术语“配置可见性”指的是事物被感知到的和实践的属性，关键是那些选择事物该如何被经常使用的基本属性。

配置可见性对事物运作提供了强有力的线索。

平板是用来推的。

旋钮是用来转动的。

插槽是用来拔出东西的。

球是用来投掷或弹跳的。

当配置可见性被应用切过后，用户只需看一眼就知道该做什么：不再须要额外的图片、标签或指令。

随着各种用户界面的发生，配置可见性失掉了一种新的开展方向。

咱们曾经用不同的举措、工具和东西做了数百种操作。

如今咱们仅仅点击鼠标或许点击屏幕就可以启动少量的操作。

这使得设计师们须要思索新的出现配置可见性的形式，来让人们把以往已无理想生存里司空见惯的形式和常识转移并积攒到与数字界面的互动中。

这种与之前大不相反，所以设计方法也扭转了。

用户界面中配置可见性的类型

UI中的配置可见性可以依据他们的表现和展现分类。

不论怎样，关键指标就是应用人们曾经有的常识和，来成功简化交互流程。

显性的和隐形的配置可见性

咱们可以在用户界面中依据表现找到显著的和暗藏的提示。

明白的配置可见性是基于广为人知的和典型的提示，来疏导用户启动特定的执行。

例如，当你看到一个按钮被设计成一个显著的可点击的元素，在视觉上相似于物理环球中的按钮，你知道你可以点击它来启动交互。

假设按钮中还有文本或图标，启发就变得愈加明晰：它通知你系统会如何启动反应。

美食网站的网页：CTA（call to action）按钮作为一个可点击的元素是明晰的，并且文案也说明了这个按钮经常使用户能够做什么

隐性的启发并不那么显著。

它们是暗藏的，只要在用户行为的特定流程中才干被提醒进去。

当咱们鼠标悬停在页面元素上时，失掉的工具提示或解释就是这样的。

另外一个例子是各种多层导航元素，比如下拉菜单或可裁减按钮，这些下级元素一开局没有被看到，但是在特定的操作之后显示进去。

兴许，汉堡包导航兴许是最有争议的隐形导航之一了，它把可用的配置暗藏在了一个不凡的图标面前。

Slopes网站顶部的汉堡包按钮暗藏了裁减的网站菜单

图形的配置可见性

图形的配置可见性经过视觉运行展如今界面中，协助用户阅读界面配置。

相比文案，用户对各种各样的图形感知速度更快，记忆成果更好，故而图形的关键性不能被漠视，其中，咱们提到以下几点。

照片

主题照片，东西照片，头像或题目图片都是一种视觉辅佐，从协助用户感知在App或网页可以启动社么操作（如购置、沟通、展现、观看、学习、写作等）到表现某项详细的配置。

举个例子，假设一个App能够让用户保管或共享菜谱，那么像上方图中那样配以和菜谱相关的食材照片就会很棒。

素食配方运行

品牌标志

Logo、公司标志和运行在网站或app的颜色，立刻展现出了用户界面与特定品牌的衔接，这对虔诚客户来说或许是个强有力的配置可见性。

珠宝电商app中，开屏及题目栏上的logo建设了品牌的衔接

插图

主题插图和如意物笼统很有或许成为一个相当明白的用户提示。

在上方的图尼闹钟中，你可以看到一个弹窗，用万圣节南瓜，一个妇孺皆知的视觉提示，来通知用户关于万圣节贴纸的事件。

图尼闹钟

图标

界面图标，兴许是视觉的配置可见性中最多样化的。

这些象形符号是高度意味性的，并且大多经常使用来自理想环球的提示，以便用户能够极速地理解它们。

即使有些图标笼统曾经和它曾经代表的实践物体失去了关联性，但只需有少量用户曾经记住了这个物体的配置，它的图标就照旧可以有效地展现其所指代的配置可见性。

有个最好的例子：软盘不再代表软盘这个物体，而是代表了“保管”这个操作。

一颗心或一颗星星会立刻让你把它和夹咨询起来，加大镜会提示它是一个搜查，而一个相机图标是用来拍照的，不会破费你太久的期间来了解。

学习汉语app

图标也被用作分类内容的有效提示：在适当的图形允许下，可以更快的辨别类别和章节。

博客app

按钮

作为外围交互元素，按钮曾经成为界面上最易识别的元素。

在GUI时代之前，按钮被用在各种物理事物中，从便捷的计算器到复杂的仪表板。

咱们都知道怎样用按钮。

重点是让它可见，并且显著地被视为用户界面中的按钮。

状态、对比度、颜色和文案都对此有很大协助。

输入框

基本上，输入框是一个空白区域用来暗示用户可以在这里输入所需的数据消息。

为了使它们有效，设计师也激活了配置可见性的才干：输入框应该看起来是交互式的，这样人们就可以立刻了解他们可以在外面键入文本。

上方的完美菜谱APP界面显示了搜查输入框：由于它的状态和对比度，很显著该输入框是一个交互式元素，并且还有搜查图标和提示文本的协助。

完美菜谱app

通知

有许多方法来提示用户，有一些错过的或值得留意的东西。

看看上方界面中的购物车图标：上方一个黄色的点，就极速的提示了购物车不是空的。

美味汉堡app

文案的配置可见性

只管用户感知图像比单词快得多，但是文案在交互流程中的影响也有着不能漠视的位置。

关键是图像有时须要借助文本启动解释，以防止曲解。

另一方面，不是一切都可以用图片来显示。

最后，文案在传递消息、标志指令和调用举措、解释配置和允许智能规划的排版档次方面具备难以置信的多样性后劲。

但是，咱们应该正当平衡的经常使用文字，而不要让页面中文字过多。

与文案的交互关于日常生存中的人们来说是十分人造的，比图形用户界面存在的期间要长得多。

文案线索和提示有助于协助用户了解该做什么或等候什么，记住什么消息：咱们从符号，广告，还有报纸，手册和书籍中读了很多文本。

在数字用户界面中，文案的上班原理是一样的。

这是一种含糊其辞的交换形式。

例如，上方医疗保健app的日程界面的文案，显示了多样的配置可见性：除了关于患者的关键消息外，咱们可以看到搜查框内的提示字段、按钮上的调用指令文字，还有日历的空旷字段中给出了文字线索，用户只须要点击一下这个区域，就可以参与一个日程。

肥壮保证app

形式的配置可见性

形式的配置可见性是基于习气的力气，是提出有效的交互设计的渺小起因。

它最大的长处是让用户不须要多想，而是在脑中回想惯性操作。

正如咱们在一篇文章中提到的人类记忆机制对UX设计师的启发，短期记忆的才干是有限的。

因此，用户习得的形式越多，导航关于他们来说就越明晰，对页面的新消息也更易了解。

这种类型有很多典型的配置可见性：例如，咱们都习气于点击网站顶部的logo可以关上网站的首页。

咱们知道下划线文案理论是可点击的链接，可以从一个页面到另一个页面。

网站的咨询人和隐衷战略等消息理论可以在网站底部找到，还有在app中的三个点意味着显示更多的附加配置。

保管这些形式可以让用户觉得他们是了解界面的。

因此，假设有必要冲破配置可见的形式，请三思而先行：创意应该是正当的并且是对用户明白的。

厨艺网站

动效的配置可见性

运行于用户界面的动画在物理和虚构环球之间建设了弱小的衔接。

在大少数状况下，它模拟与实在事物的交互：拉、推、擦、拖等。

因此，界面动画既基本又复杂，出现出一种弱小的配置可见性。

上方的例子显示了Toonie报警app中的开关。

当开关关上时，它会同时扭转几个参数：标签的颜色、切换按钮的颜色还有太阳激活的动画。

用这种形式立刻通知用户，并为操作参与了情感吸引力。

Toonie Alarm的开关设计

另一个示例是家庭估算app，在交互流程中发生的通知，提示用户特定的限度。

它的动画特点是跳动，这种形式吸引了用户对关键正告的留意。

家庭估算app

这里还有一个案例—刷新动画。

它出如今屏幕上时，提示用户界面正在降级，并在等候的环节中参与了一些乐趣。

拉动刷新动效

消极的配置可见性

无论听起来如许奇异，消极的配置可见性在踊跃的用户体验中也起着很大的作用：它们根植于负面结果也是结果的理想。

负面提示的目的是给用户一个提示，在当下一些元素或操作是无法用的。

例如，上方给出的家居运行程序界面显示了“卧室”按钮是生动的，而其余房间的按钮是无法用的，故而它们出现负面的配置可见性。

“安保级别”也示意第5级是齐全无法用的。

家居app

这里还有一个例子：以后所在tab的图标是黑白的，而其余tab则用没有颜色的消极配置可见性来展现。

标签栏动画

失误的的配置可见性

从用户体验配置可见性的角度来看，失误和消极不应该被看作是同义词。

没方法，失误的配置可见性是设计师应该防止的：这是指不失当的失误暗示造成用户并没有做出应该做的操作，反而启动了误操作，或许让操作发生了和预期不符的结果。

有时是故意而为之，但大少数状况下是失误的。

例如，假设网页中的一段文本被划线了，用户会人造而然以为它是可点击的。

因此，他们或许会很恼火地理解它不起作用了-这意味着他们被误导了。

介绍阅读6 Types of Digital Affordance that Impact Your UXAffordances and DesignHow to Perfect UX with Design AffordancesUX Design Glossary: Navigation ElementsUX Design Glossary: Interface Navigation Elements. Set 2UI/UX Glossary. Web Design IssuesUI/UX Design Glossary. Steps to UsabilityHow Human Memory Works: Tips for UX Designers

原文地址：DDC

作者：圆梓

jquery 选用器是否查找display：none的元素

jQuery可以用可见性“:hidden”查找“display:none”的元素。

1、新家html文档，在head标签中引入本地jQuery文件，也可以引入cdn文件：

2、在body标签中参与一些列表，其中局部列表的样式设置为“display:none”：

3、参与js代码“$(li:hidden)”，这时网页将会把一切蕴含“display:none”属性的列表都启动输入：

CSS中可承袭的属性

一切元素可承袭 ：visibility（可见性）和 cursor （光标属性） 内联元素可承袭 ：font、font-size、font-family、font-style、font-variant、font-weight、text-decoration、text-align、letter-spacing、word-spacing、white-space、line-height、color、 块级元素可以承袭的属性 ：text-indent、text-align、 列表元素可承袭 ：list-style、list-style-type、list-style-position、list-style-image、