什么是最被低估的字在网页设计?

济南网站建设一个“启示”是一种感知信号或线索,一个对象可以被用来执行特定的动作。 坐在椅子上在膝盖左右的高度,似乎提供支持。 它可以提供坐。 牙刷有一个把手比人类手掌长一点。 它可以提供揪心。

所有我们身边有启示的对象:有些是明确的(“推”的牌子上面门把手),以及其他被隐藏(椅子可以用来打破窗户或用作武器)。 这个词最早是由心理学家詹姆斯·G·吉布森,然后在他的书中介绍了人机交互由唐纳德诺曼创造日常事物的心理学 ,必读新进工业及产品设计无处不在。

界面设计人员使用适宜性的所有时间,他们不得不这样做。 不像物理对象 – 这通常都基于它们的大小,形状和重量启示 – 网络和移动接口必须通过设计获得他们所有的启示的。 对于大多数设计师来说,这是直觉和本能的基础上,成千上万的设计模式,我们每天看到的。 但你有没有想过让一个对象负担点击,滑动,拉或推的素质?

通过深入了解如何启示的作品,你会更好的主界面或产品设计。 你就可以使用启示作为一种工具,使您的设计更容易使用 ,并鼓励用户进行想要的操作,如同签订了一个产品,生成内容或与其他用户进行连接。 更好的启示可以对转换率,登记率和,最重要的网站,应用程序或产品,你正在设计的用户操作产生重大影响。 这就是为什么“启示”是最被低估的单词在网页设计。

你可以指望的行动用户可以承担的数目QQ空间分享的主页?

虽然这似乎是一个很简单的屏幕,你可能会惊讶的是,11的行动是可能的QQ空间的主页

  1. 输入电子邮件地址,
  2. 输入一个密码,
  3. 点击问号图标(这会导致一个密码恢复屏幕),
  4. 点击“登录”按钮,
  5. 点击“注册”链接,
  6. 单击“条款”链接,
  7. 点击“隐私”链接,
  8. 点击“张贴者blvcktrip”链接,
  9. 点击blvcktrip的化身形象。
  10. 点击“搜索QQ空间分享’输入字段
  11. 按下回车键来搜索输入的任期

如果你能猜出这些动作,你承认启示,这是一个接口“能提供”其功能给用户的方式这样做。 所有你必须​​一起工作是QQ空间的页面的平面截图。 通过识别模式和明确的启示,你能调查该接口的功能。

并非所有的启示都是平等的,有些是比别人强了解人们可以在一个界面中使用的适宜性的类型是很重要的可供性大致可分为以下类型之一明确的,图案,隐喻性,隐蔽性,虚假的和消极的。 我们将深入研究每个类别对这篇文章的其余部分。

明确的预示

明确的启示是通过语言或对象的外貌信号。 文字,上面写着“点击这里”能提供明确的点击。 这似乎从周围的表面凸出的按钮,似乎触觉,并让推。 门把手用“推”它上面可以供人推。 一个输入字段,上面写着“写评论”能提供明确写入意见。

这些启示是明确的,因为任何人能够猜测如何与元素进行交互,即使他们从来没有接触到接口之前。 这些启示不依赖于模式。 看起来可推力推的邀请,无论是在屏幕上或关闭的对象。 一个链接,上面写着“点击这里”请点击即使用户以前从未见过的链接。 只要用户知道如何按或推,承受能力就会发现。

明确的启示是特别重要的在下列情况下:

  1. 当一个接口的用户不太可能已经接触到许多启示的模式,在过去
    发生这种情况最常见的与用户谁不精通技术或谁不经常与网络或移动界面交互。 这些用户不太可能通过设计模式来认识启示。 这也可能拥有真正独特或创新的接口。 第一个移动应用程序大量使用明确的预示性的敲打或刷卡操作。
  2. 如果没有模式已经确立的信号动作的启示
    它可能是不清楚如何在视觉上传达了一种在移动接口的对象可以供人捏向内收和向外扩展。 在这种情况下,设计者可能会使用明确的启示(即加入“捏扩大”文本对象)。

是否使用明确的启示取决于上下文。 过于明确的可以引入到冗余设计。 如果每一个环节上写着“点击此处”,页面将变得单调。 考虑你的观众会怎么可能理解对象的启示没有明确的指示。 例如,对于高科技创业者一个应用程序的用户可能已经见过一个输入字段。 他们可能会感到光顾,如果接口指示他们“点击输入一个电子邮件地址。”

图案预示

这是启示的现代界面设计中最常见的类型。 例如,我们含蓄地理解文字不属于一个句子,位于页面上的内容主要区域外,通常链接,点击得起。 我们认识到,整个含脱节的话在屏幕顶部的条形通常是导航栏,而买得起的话导航。 我们认识到,在一个类似按钮的背景单个词或短语通常是一个可点击的按钮执行一个动作。 我们猜测一个单词或短语与向下箭头的旁边通常扩展到一个下拉菜单。

一个模式的比喻是一个既定的比喻传达一组特定的预示性。 例如,电子邮件通常是由一个信封图标(即使发送电子邮件从未涉及物理信封)表示。 这个比喻是有效的,因为它是一个既定的模式。 我们将更加详细地对隐喻启示一节讨论。

模式启示是优雅的,因为它允许一个复杂的界面,快速的信号很多启示给用户。 当我们用更多种类的网站和应用程序进行交互,我们成为更好的快速解析启示可供无数给定的屏幕上。

这里是我的ENVATO Studio的主页上的图案启示列表:

元素 预示类型 能提供
导航栏 模式 浏览网站
链接 模式 点击
标志 模式 返回首页
链接在右上角 模式 管理帐户
“类别”下拉 模式 访问更多选项
放大镜图标 图案隐喻 搜索
内容模块 模式 点击模块

要了解一个设计的模式上依赖启示,问问自己,如果你从来没有互动与之前在网上或者智能手机,但你知道如何执行如单击和攻丝基本动作,你会明白这个界面给予你的行动?

模式为我们提供了精彩的 ​​快捷键很容易沟通启示。请记住,他们依靠已经一起度过的应用程序,网站和其他接口交互的丰富的时间。 当你设计一个精通技术的观众,图案启示将弥补你的大部分设计。 当设计,可能不会有这样的财富与接口(如儿童,老人及所在地区的Internet接入是最小的)经验的观众,那么你会想要依靠模式启示较少。

隐藏的预示

一种较隐晦的形式,隐藏的启示变得很明显只有一次一定条件已经满足 – 例如,能提供一下,只有当它已经将滑鼠移到(和响应,通过改变颜色)链接文本。 在iOS设备,为应用程序图标的每个画面可以供人暂时只刷卡当你挖掘和拖在主屏幕上。 对Pinterest的 ,一个固定的项目能提供最爱只有当它上空盘旋。 默认情况下,元素的启示是,没有透露,直到用户已经采取了一些行动来激活提示。

隐藏的启示是在复杂的界面,常被应用在制作的每一个启示立即显现出来将杂乱的接口或混淆可用操作的层次结构。 隐藏的启示,可以巧妙地用来淡化不那么重要的行动。 这是伟大的,当一个功能很少是必要的(例如,报告的图像作为是不恰当的)。

风险在于, 用户可能无法直观地知道如何揭示启示

最后,千万不要用隐藏的预示性的重要措施。 相反,以渐少必要的行动进入后台减少周围重要行动混乱。

在考虑是否使用隐藏启示,问问自己,可能一个用户顺利地使用这个接口而不用知道这个行动? 如果答案是肯定的,那么隐藏的启示将是适合这个动作。

例如,使用户“喜欢”的通过将鼠标悬停在它是可以接受的一个画廊项目。 用户可以每天愉快地参观画廊没有感觉喜欢它的冲动。 但是,只有通过将鼠标悬停在网页的某一部分授权访问画廊的影像会是很多人的一个障碍。

这在很大程度上依赖于隐藏的启示一个iPhone应用程序是透明 ,一个待办事项应用程序。 然而,已经称赞其设计 。

它是美丽的? 是。 然而,它主要是依靠隐藏的启示。 当你拉项目清单下来,屏幕上方向下折叠,指示您“拉来创建一个项目。”解锁这些指令需要试验。 向左轻扫删除某个项目,而刷卡右标记为已完成。 捏两个列表项除了创建它们之间的新项目。 向内捏关闭列表。

这些隐藏的启示并不意味着清除有一个不好的用户体验。 在第一次打开应用程序,你可以通过它的一些功能的教程滚动。 如果你忘记了从教程的指示,待办事项看起来像邀请物理实验板。 你会明白,一个待办事项应用程序可能允许被添加,删除或标记为已完成的项目。 面板看起来他们可以被操纵。 通过最初的学习曲线贴吧,用户奖励与使用舒适,并用干净的,最小的接口交互的能力。

的设计理念体现在清除是不恰当的所有接口,但是。 学习曲线的陡峭,为落客大用户之间的比率。 清除花钱买的,所以用户必须投入时间学习界面的理由。 考虑光谱的另一端:谁发现自己的登陆页面为您的产品的用户。 他们没有理由花费时间寻找隐藏的启示。 事实上,如果可用的动作是暂时还不清楚,他们将最有可能去别的地方。

隐藏的启示是合适的,只有当用户有一些买进的买入他们有较少的,更明确的启示必须以快速引导他们到你希望他们承接的动作。

隐喻预示

有时候,沟通启示最简单的方法是使用真实世界的对象作为比喻。 大多数界面图标,例如,依靠这样的隐喻沟通启示。 信封图标能提供发送电子邮件。 房子图标可以供人去“家”。一个手机图标能提供拨打电话。 一个打印机图标能提供打印文档。 A链图标能提供创建链接。

有些隐喻语境。 在文档查看应用程序的一个放大镜图标最有可能能提供缩放。 然而,旁边的一个输入字段一个放大镜图标在网站最有可能能提供搜索。

通过使用来自真实世界的对象绘制的隐喻,我们可以启示更快速地进行复杂的任务比我们可以使用明确的启示通信。 例如,如果你必须包括一个按钮,在您的界面,允许用户拨打一个电话,但你不能用一个电话图标,或者使用文本“打个电话,”你会怎么沟通这个启示?

因为现实世界的隐喻启示是如此强大,选择适合这个职位的最佳比喻是很重要的。 考虑到iPhone应用程序内斯 (最近被收购透过OpenTable):

你觉得上面的图标需要描述性的标签? 如果他们被带走,你会明白,这辆车的图标能提供共享的方向? 如果你没有驾驶的位置,或你想与某人在公共交通分担方向,你要想想这个一秒钟。 在这种情况下,更常见的模式比喻将是一个地图标记。

图案隐喻

一个模式的比喻是一个既定的比喻传达一组特定的预示性。 例如,大多数设计人员现在使用的老派手机信号拨打电话的启示。 大多数使用的信封图标,信号发送电子邮件的启示。 大多数使用心脏图标信号最爱的东西的启示。 设计者可以打破格局,如果他们相信一个更好的比喻存在,但请记住,你的用户也将所学到的既定模式。 考虑一套丰富的启示由一个单一的心脏图标传达的:

  • “点击按钮会”钟情“的一个项目。”
  • “这让我救我喜欢的项目。”
  • “我可能能够访问我最喜欢的一个地方收藏我的账户面积。”
  • “谁补充资料的用户可能会通知它已经被收藏了。”
  • “这是对项目的积极姿态。”

一个心脏通常理解为爱或喜爱的象征。 通过不断被用来传达相同的一组与最爱相关启示的,它已经开始在界面设计传达这些启示。

另外,仔细一想改变一个既定的模式隐喻的样式之前。 看QQ空间分享的所见即所得的编辑器。 您可以识别的图标来创建一个链接,并删除链接?

在既定的模式比喻为一个链接是在一个链的两个或三个环节,结合在一起 – 无处在此界面中找到。 最接近的匹配是从左边,看起来有点像一个倾斜的无穷大符号图标第四。 在它旁边坐了删除线倾斜无穷大符号。 这些图标风格上比一个链接链更漂亮? 也许吧。 是精神努力的一个额外盎司需要了解他们沟通的启示? 我想是这样。 是否值得呢? 我不太肯定。 新的图标看起来非常像一个无穷大符号。 虽然人们可以争辩说,一个网站链接将人们连接到无穷大就是上网,在一个链中的一个环节是一个更抽象的隐喻。

假的预示

一个错误的启示,似乎向某一能力,但实际上能提供不同的功能,或者根本没有。 例如:

  • 看起来像它可以被按下或点击,因为它是从周围凸起的,但不能是一个元素;
  • 一个标志形象,不返回用户的域的根目录;
  • 一个字,显示的链接(带有颜色和下划线)的模式启示,但不是一个链接;
  • 一个绿色按钮(一个模式来表示创造的东西的启示),实际删除数据;
  • 为灰色字,这似乎不起任何作用,实际上是一个链接;
  • 一个信封图标,这似乎不起发送电子邮件,实际发送了一条短信。
绿色的“删除”或“关闭”按钮图标搜索

接口设计模式是绿色的按钮不起保存或创建数据。 通过使用一个绿色按钮,触发一个破坏性操作,用户可能会意外删除数据时,他们的意思是保存它。

你在这个UI元素看到什么启示Dribbble ?

它可能会让你大吃一惊,在上述Dribbble的UI元素,每一个元素,除了视图数,可以点击要执行的操作。 这是因为元素没有信号的启示进行点击。 他们是灰色的背景为灰色,不带下划线,不用粗体。 他们错误地表示缺乏启示的,而事实上,他们有一组功能丰富(查看谁已经很喜欢这个项目,查看该项目是在水桶,下载的配色方案)。

虽然这些UI元素的精妙之处产生更多关注设计的其余部分,设计者必须考虑的权衡是否值得。 例如,如果“分享”链接被加粗,更清楚地得到点击,将Dribbble项目被更多的共享?

一个简单的规则:如果你真的希望人们做一些事情,加上启示更多的信号。

阴性预示

有时有必要的信号,一个UI元素不承担任何能力的时刻。 最常见的是,这是通过灰化显示元件来实现。 您可以在输入字段RDIO 的应用程序。

密码输入框是灰色的,因为它目前不负担点击或输入数据。 为了解开这些启示,你必须点击“更改”按钮。

在这种UI元素,“保存更改”按钮是灰色的,因为我们还没有作出任何更改还; 因此,我们不能拯救他们。 风格预示着该按钮目前不负担任何功能。

在(否则美丽的)设计下变灰的按钮明确可以供人及其说明一下,以“请访问我们的设计服务列表中,”不过,按钮的样式的方式如下负面启示模式(平坦,灰,褪到背景)。 因为灰色显示按钮,这样通常意味着缺乏启示的,用户可能没有意识到这一点可以点击。

灰色有时也用来表示一个词或短语,通常是一个链接,是不是。 在下面显示Google.com的用户界面,它看起来像我的电子邮件地址不能点击。 然而,点击它你会感到意外打开,帐户选项的下拉菜单。

聪明的使用负启示可以帮助用户更快速地回家在一个网络接口的承受能力,有用的部分。

一个预示评论:iOS的7的天气应用程序

的iOS 7的默认天气应用程序有多种启示的。 六种类型,哪些它有和这些都不见了?

  • 明确的
  • 模式
  • 隐喻

让我们来看看这些内容。

明确的预示

此应用程序的主界面有没有明确的启示,没有元素,看起来特别点击,就如何与之交互的界面没有口头指示。 除了在屏幕底部的导航元素,应用程序的界面看起来像数据的平面显示器。 即使在底部的导航元素依赖的模式。

图案预示

我能识别两种模式可供性天气的界面,无论是位于屏幕的底部。

底部一排的圆点是一个iOS的设计模式,以显示屏幕的数量刷卡通过。 突出显示的点代表在链中的当前位置。 这种模式也可以用来在当可用的应用程序图标多个屏幕上的iOS主屏幕的底部。

雅虎标识会是模式启示的另一个例子。 一个人谁使用Web界面经常会知道点击一个标志通常会带他们到一个页面有关的企业或组织(通常是首页)。 在这种情况下,它需要我们一些雅虎搜索结果。

隐喻预示

虽然一些隐喻在此应用程序时,只有一个是启示。 天气图标都是隐喻。 太阳从云层后面偷看的图标并不意味着会有一云与它的背后有阳光; 这意味着天气会晴天和阴天。 一个太阳图标并不代表太阳,但它是一个比喻阳光明媚,天气晴朗。 然而,攻上这些图标不承担任何能力。 它们是纯粹的信息。

在此界面中唯一的启示隐喻是在右下角。 图标看起来像它代表一个项目列表或菜单。 点击它打开的天气位置的菜单,允许您添加和删除项目。 图标采用了视觉隐喻来形容它的启示。

隐藏的预示

两个隐藏的启示是这个屏幕上。 温度报道每小时,但是仅限于六个小时的窗口。 小片数据的暗示,更多的可能是可用的。 如果我们刷卡每小时温度到左边,更多的时间滑入视线从右边,使我们能够审查所有可用的每小时气温在小屏幕空间。

该接口提供了不知道这一点,但点击屏幕上方取代了温度与湿度的几个详细的读数,风速,降雨机会和“感觉”的温度。 我经常使用天气应用程序,但我发现这只是拍打在整个屏幕上后,寻找任何隐藏的启示的这篇文章。

我怀疑是应用程序的用户的一个大比例从来没有发现这个功能。 在这种情况下, 这是值得怀疑这个隐藏的启示是否是好的设计 。 加入启示到屏幕的顶部会更好 – 例如,通过,或通过显示细节对温度的左侧和右侧使温度升高出现,得到点击,以下划线天气读数,通过增加一个图标和城市的名字。

假的预示

这个程序没有虚假启示的一个问题。 用户可能会试图攻上一周的其他日子,看看他们带来了一个详细的视图,但详细视图仅适用于当前日期。 用户也可以尝试敲打今日低点,以为它可以切换到所有低点的观点,而不是高点。 但接口没有,这就意味着这个功能非常误导的线索。

阴性预示

该应用程序不会使强用消极的启示的。 粗体“星期一​​”,伴随着更薄,更暗“今天”,表明周一在层次结构中较高,而“今天”是信息。 攻要么切换到详细视图在屏幕的顶部(如不攻的任何部分在屏幕的顶部)。

预示性总结

类型 优点 缺点 使用情况
明确的 明确的; 用户遗失的启示低风险 梅西耶接口; 似乎光顾一些用户 低技术含量的观众; 解释直观的启示
模式 快速,干净地传达启示 凭借以往的经验与类似的接口 当模式被确立; 当观众是精通技术
干净的界面 功能可能不被发现的 无关紧要的能力; 当用户有足够的买入实验
隐喻 最简单的沟通复杂的启示方式 隐喻意味着不同的事情不同的人 当百分之百是太复杂而不比喻来解释
通过建议启示都是不存在浪费用户的时间 避免错误的启示
有助于防止沮丧由信令一个元素没有启示 如果一个元素没有启示,它可能没有必要 当支持信息和元素是必要的,但不具备的能力

结论

你最有可能设计的界面与很多这些类型的预示性的,也许没有意识到这一点。 启示的识别,为用户和界面设计师,通常是本能。

通过使用启示故意,我们可以帮助用户更迅速地了解我们的接口和巧妙地鼓励他们采取一个动作在另一个。

通过了解启示,我们可以计算下面的界面和快速地看到,当务之急是要Dunked.com的用户“入门”刻不容缓的创始人。 您可以使用启示了类似的行动层次结构添加到您自己的设计。

Comments are closed.