首页 > 建站资源 > 网站运营 > 分享:功能可见性在用户界面中的使用

分享:功能可见性在用户界面中的使用

时间:2018-06-20    来源:人人都是产品经理

注:在获取专业知识和技能的道路上,设计师们会遇到各式各样的专业术语。之前我们已经介绍过一些核心术语的贴子,如可用性和网页设计、商务术语和缩略语、导航元素和色彩词汇等。这篇文章将继续和大家介绍心理学在用户体验设计中的应用,并会在用户体验设计词汇表中加入一个新词。今天我们讨论的是功能可见性(Affordances,又译作可供性),它用微妙的线索帮助用户与界面交互。

什么是功能可见性?

功能可见性是物体的一个属性或特征,它提示着我们可以对这个物体做什么。简而言之,功能可见性提示用户如何与某物互动,无论是它是真实物体或是数字界面。例如,当你看见一个门把手时,它就是一个你可以用它开门的提示。当你看到一个听筒图标,它就提示着你可以用它来打电话。功能可见性使我们的世界更加简单,在它的帮助下,我们可以成功的与物质世界和虚拟物体进行交互。

请看下面的洒水追踪器的界面。你瞬间就能明白所需执行的行动已经完成——因为有符号“√”的提示。标签栏中的图标给了你可以用这个app做些什么的线索:检查你的一套植物(这个标签是活跃的,因为它是有色的,而其他的不是)、添加一个新的植物或者查看你的账户信息。这些都是动作的功能可见性。

洒水追踪器

该术语的历史

“功能可见性”这个术语是由心理学家James Gibson首先提出的,他对视觉感知有着深入的研究。 1966 年,他首次在他的书《知觉系统之感觉》中使用这个词。 1979 年,他在《视觉感知的生态学方法》一书中阐明了功能可见性的定义:

“环境的功能可见性是指环境所给予动物的东西;环境提供或布置的、无论好坏的东西。我在词典中找到了动词afford,但名词affordance还没有。我创造了这个新词。它同时涉及环境和动物两者,这是一种此前已有的词汇所没有表达出来的关系,即动物和环境的互补性。”

根据吉普森的说法,人类倾向于去改变环境,希望它的功能可见性更适合他们,并使他们的生活更轻松。学习环境的功能可见性成为社会化的一个重要部分。

当被应用于设计时,功能可见性这个术语指的仅仅是用户得以察觉到的所有操作可能性。从这个角度来看,Donald Norman在《日常事物设计》 1988 册中探索了这一术语的进一步发展。根据专家的说法,术语“功能可见性”指的是事物被感知到的和实际的属性,主要是那些决定事物该如何被使用的基本属性。功能可见性对事物运作提供了强有力的线索。平板是用来推的。旋钮是用来转动的。插槽是用来插入东西的。球是用来投掷或弹跳的。当功能可见性被利用得当时,用户只需看一眼就知道该做什么:不再需要额外的图片、标签或指令。

随着各种用户界面的出现,功能可见性得到了一种新的发展方向。我们曾经用不同的动作、工具和东西做了数百种操作。现在我们仅仅点击鼠标或者点击屏幕就可以进行大量的操作。这使得设计师们需要思考新的呈现功能可见性的方式,来让人们把以往已在现实生活里习以为常的模式和知识转移并积累到与数字界面的互动中。这种经验与之前大不相同,所以设计方法也改变了。

用户界面中功能可见性的类型

UI中的功能可见性可以根据他们的表现和展示分类。不管怎样,主要目标就是利用人们已经有的知识和经验,来实现简化交互流程。

显性的和隐形的功能可见性

我们可以在用户界面中根据表现找到明显的和隐藏的提示。

明确的功能可见性是基于广为人知的和典型的提示,来引导用户进行特定的行动。例如,当你看到一个按钮被设计成一个明显的可点击的元素,在视觉上类似于物理世界中的按钮,你知道你可以点击它来进行交互。如果按钮中还有文本或图标,启示就变得更加清晰:它告诉你系统会如何进行反馈。

美食网站的网页:CTA(call to action)按钮作为一个可点击的元素是清晰的,并且文案也说明了这个按钮使用户能够做什么

隐性的启示并不那么明显。它们是隐藏的,只有在用户行为的特定流程中才能被揭示出来。当我们鼠标悬停在页面元素上时,得到的工具提示或解释就是这样的。另外一个例子是各种多层导航元素,比如下拉菜单或可扩展按钮,这些下级元素一开始没有被看到,但是在特定的操作之后显示出来。也许,汉堡包导航也许是最有争议的隐形导航之一了,它把可用的功能隐藏在了一个特殊的图标背后。

Slopes网站顶部的汉堡包按钮隐藏了扩展的网站菜单

图形的功能可见性

图形的功能可见性通过视觉应用展现在界面中,帮助用户浏览界面功能。相比文案,用户对各种各样的图形感知速度更快,记忆效果更好,故而图形的重要性不能被忽视,其中,我们提到一下几点:

(1)照片

主题照片,物品照片,头像或标题图片都是一种视觉辅助,从帮助用户感知在App或网页可以进行社么操作(如购买、沟通、展示、观看、学习、写作等)到体现某项具体的功能。举个例子,如果一个App能够让用户保存或共享菜谱,那么像下面图中那样配以和菜谱相关的食材照片就会很棒。

素食配方应用

相关推荐
用户界面设计教程:UI设计六要素分享
20大UI设计原则 设计师必备宝典
APP应用设计教程:设计元素的应用条件
设计完美的界面排版10个要点分享
让UI设计显得更简约的小技巧分享
细说用户体验设计背后的“黑暗模式”
遵循用户需求的设计:最美APP的9条闪光定律
微软发布Windows 8.1更新 针对鼠标键盘用户
企鹅进化论 细数那些年我们一起用过的QQ
谷歌将推新设计语言 统一安卓用户界面设计
今日最佳设计:人像即按钮 社交应用新趋势
细节决定成败!提高用户登录体验的5个细节
百设网:专注于应用界面设计的作品交易网站
好看好用?UI设计师不可不学的易用性原则
如何给Android产品设计一款合适的图标?
分享设计:Froont打造网站设计界的Github
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
想让界面优雅易读?聊聊移动端字体7个准则
天天喊着学UI 你知道安卓和iOS的区别吗?
连按钮都设计不好 你还指望用户点击?
分享为SOUNDWAVE设计WATCH应用的五个技巧
这是个看脸的世界 即便你是APP也是如此
再见METRO!WINDOWS 10通用应用设计趋势分析
以微信网易为例:新闻型产品列表设计分析
超实用干货!视觉设计师的五项技能修炼方法
百度官方出品!2015-2016交互体验趋势
界面设计:从减少点击次数到降低使用负荷
简约至上:教你打造用户喜爱的产品设计风格
用户为王!关于征询授权、注册及加载等待的体验优化
APP产品设计:让用户看见 才是王道!
简约之道:极简风格界面设计的起源与发展
nice 启示录: 看移动 App 的产品设计和运营策略
超实用干货!深聊时下最热门应用的11种设计模式
网站策划:如何使简单的想法更简单?

精彩推荐

热门教程