您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

网页设计中的启示性,你看懂了吗?

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   启示性(affordance)指的是某物体或者对象具有某种操作或功能上的暗示性。举例来说,一张高于你膝盖高度的椅子,它可以暗示你坐。牙刷的手柄略长于人类的手掌,它暗示可以用来握紧。

  所有我们周围的客体都具有启示性:有些是外显的(如门手柄上写着的“推”字信息),有些是内隐的(如椅子可以用来打破玻璃或者用来当做武器)。这个概念最初由心理学家詹姆斯·吉布森提出,随后被唐纳德·诺曼在《设计心理学》一书中引进到人机交互领域。

  交互设计师经常运用启示性。他们必须这么做。物理客体基于他们的形状、大小、重量等属性而提供启示性。不像物理客体,网页或者手机交互必须通过设计来获得所有的启示。对于大部分设计师而言,这是出于我们每天能看见的成千上万的设计模式而得到的直觉。但是你是否有考虑到了一个对象能够被点击、滑动、推动、拉伸时的质感?

  通过深度理解启示的工作方式,你就能更好得掌握交互和产品设计。你能够把启示性作为一个工具使你的设计更容易被使用,鼓励用户执行你想要他们进行的操作,比如注册一个产品,生成内容或者和其他用户联系。更好的启示性对转化率、注册率以及那些对你设计的网站、应用、产品重要的用户操作具有显著的影响。这也就是为什么说启示性在网页设计中最被低估了。

  你能数出一个用户能在 Tumblr主页能上执行多少操作吗?

网页设计中的启示性,你看懂了吗? 三联

  尽管看起来是一个很简单的界面,你会惊奇地发现在Tumblr主页可能执行11个操作。

  1 输入邮箱地址

  2 输入密码

  3 点击问号图标(指向密码恢复界面)

  4 点击登陆按钮

  5 点击注册链接

  6 点击条款链接

  7 点击隐私链接

  8 点击“Posted by blvcktrip”链接

  9 点击blvcktrip的头像图片

  10 点击“搜索Tumblr”输入搜素词条

  11 按下回车键来搜索输入的词条

  如果你能猜到所有以上的操作,那么你就已经认识到了启示性。它就是交互提供给用户特定功能的方式。所有你要做得都在一个Tumblr页面的扁平化截屏上。通过再认模式和外显启示,就能考查交互功能。

  不是所有的启示都是同等的,其中一些启示会强于另一些启示。理解在交互设计中能用到的启示类型是很重要的。启示一般被分为以下几个类型:外显的,模式化的,隐喻的,内隐的,假的,以及否定的。下面我们详细介绍每种类型的启示。

  外显的启示

  外显启示通过文字或者客体的物理表征等信号来表现。写着“点击此处”的文字明显得提示你去点击。从周围表面中凸出的按钮看起来可触摸,它提示你可以向下压。上面写着“推”的门柄提示你推门。写着“请输入评论”的输入框明显提示你去执行评论这种操作。这些启示是外显的,因为任何人都能猜测如何和这些元素进行交互,尽管他们之前从未接触过这类交互。这些启示不依赖认知模式。

20946 0a16e0abed827a6e 深层次理论!网页设计中的启示性,你看懂了吗?

  PayPal的界面元素是外显启示的一个很好的例子。外观凸出的按钮提示向下按动,而文本信息则明显提示操作的结果。

20946 5189c1f2de262460 深层次理论!网页设计中的启示性,你看懂了吗?

  Copyblogger’s网站中的视频采用的外显启示方式:文本提示点击播放视频。

  外显启示在以下情况中特别重要:

  - 1 . 当交互使用者过去不太可能接触到很多启示模式。

  这种情况经常发生在那些没有技术悟性或者平时不经常使用网页或手机交互的用户身上。这些用户很少能通过设计模式认识到启示。这同样适用于那些独特的、创新的交互。第一款手机应用在诸如敲击、滑动等操作上大量使用了外显启示。

  - 2 . 还未明确树立特定的模式来传达特定操作的启示

  比如手机上的一个交互对象:向内挤压关闭,向外挤压展开。当我们还不清楚如何形象的传达这种交互启示时,设计师就会采用外显启示的方式。

  是否采用外显启示要根据设计背景而定。太明显的启示会带来设计冗余。如果每个链接都写着“点击此处”,页面就会变得很单调。如何让受众在没有明确的指示下理解一个对象的启示性是需要考虑的问题。例如,一款app的用户是科技创业者,他们之前就已经了解输入框,当app交互界面还用文字指示“点击输入邮箱地址”就会显得很二。

  模式化的启示

  这是现代交互设计中最常用的启示类型。例如,我们隐约知道一个不被包含在一个句子之内或者位于页面主要内容之外的词条一般可供点击。我们知道位于屏幕上方,包含脱节词条的长条通常是导航栏,上面的词条提供了导航。我们知道在看起来像按钮背景上的单个字或者词语通常是可用来执行某个操作的按钮。我们会猜测下方带有下拉箭头的某个字或词可以展开下拉菜单。

  模式化隐喻是可以传达某些特定启示的一种既定的隐喻。举例来说,电子邮箱通常以信封图标来表现(尽管发送电子邮箱从未涉及到物理信箱。)这种隐喻很有效,因为它已经是一个既定的模式。我们将在隐喻启示中再进行详细的讨论。

  模式隐喻是优雅的,因为它可以在一个复杂的界面向用户快速传达很多启示。当我们和大量的网站和应用进行交互时,我们会变得更擅长快速分析在屏幕上的这些五花八门的启示。

  以下是我在Envato Studio’s主页上的模式化启示清单:

元素 启示类型 提供的功能 导航栏 模式 浏览网页 链接 模式 点击 Logo 模式 返回主页 右上角的链接 模式 管理账户 “分类”下拉 模式 访问更多选项 放大镜 模式隐喻 搜索 内容模块 模式 点击模块
20946 1f5dd38aa68ec95a 深层次理论!网页设计中的启示性,你看懂了吗?

  Envato Studio’s的主页,一个自由职业者的市场,充满了模式启示,你能把它们都罗列出来吗?

  为了理解设计师对模式启示的依赖,你可以问问你自己,如果你从未和网站或者智能手机产生过交互行为,但是你知道怎么执行一些基本的操作,比如点击和敲击,你能理解界面启示你去做的一些操作吗?

  模式提供了很多美妙的快捷方式去方便地传达一些操作启示。需要牢记它的前提是:用户已经花费了大量时间