服务热线:400-0033-166
万商云集 - 企业数字化选用平台

企业首选的

数字选用平台

「X」按钮的设计,也可以是门学问。

2020-11-27 11:43:22 阅读(194 评论(0)

读完这篇文章,你会知道:关闭按钮「x」的设计历史「x」关闭按钮设计的最佳案例「x」图标是应用中非常常见的互动暗示,可以从内容上关闭烦人的弹出窗口。无论是模式、对话框还是弹出窗口,都是内容交互中必不可少的操作元素,我们只需要建立合理的退出方式。ux通用设计模式中的视觉设计「退出」(e-x-iting)很简单,你可以看到我在exiting这个词中刻意突出「x」。「x」这个符号的历史可以追溯到20世纪70年代的计算机设计语言。它可能首次出现在Ataritos菜单中(译者注:Ataritos是雅达利的计算机操作系统,1993年停产),「x」是退出的命令。它后来被「NeXT」所用,它给Windows的设计带来了灵感,并于1995年成为Windows全球大规模使用的标准符号。谈论这段历史的目的是解释没有必要重建轮子,使用世界上每个人都能理解的符号更合适。 1.我们应该始终在一些需要关闭的界面中提供无障碍设计「x」,即使用户可以单击背景,滑动或使用手机返回按钮关闭界面。△与使用字体相比,图标和字体应该被清楚地理解为一个图标,而不是使用字体。「x」,而不是模棱两可。就我个人而言,我更喜欢关闭图标设计,夹角为90度,四个角长度相等。△ 高对比度和低对比度的颜色应保持中立,符合A11y项目推荐的4个项目(译者注:您可以自己谷歌了解项目的具体细节) :1对比度。当然,当「x」当它几乎变成灰白色时,可能对弹出框的视觉表现影响最小。通过使得「x」几乎看不见,伪装强迫和诱导用户执行主要操作,这就是我们常说的设计阴暗面,这可能会让想要关闭弹出窗口的用户感到沮丧,这对体验是不可取的。△ 外框和无外框图标应包含外框,以暗示可点击的目标的相对大小,以区分可交互图标和不可交互图标,特别是当两个图标形状非常相似时。如果图标和容器的尺寸小于最小点击区(48x48dp/pt),在不与其他交互元素重叠的情况下,需要将点击范围设置为大于按钮的视觉效果。如果该图标在一个交互式导航栏中,如标题导航,则该位置为图标创建了一个点击空间,无需单独设计。位置弹出内容不应成为阻碍用户流程的障碍,关闭操作应足够突出。尽管大多数windows软件一直在右上角关闭,但今天苹果 以及Google的一些规范,将关闭图标放在左上角。当涉及到模态时,这两个系统都没有明确的方向。接下来,我将尝试逐一分析模态弹出窗口的最佳设计。△ 模态界面图标位置 1.除了警告弹出窗口外,模态位置的大部分内容都是不必要的,可以适当弱化。虽然一般的做法是直接在屏幕中间出现模态弹出窗口,但现在有一种新的趋势,通过将模态弹出窗口放在屏幕底部,使它们看起来不那么强烈。△ 底部vs中间 2.「x」的摆放位置△ 内部vs交叠vs外部内部:出现在模态弹出窗口内部。这种布局可以清晰地与模式内容联系在一起,在布局上也很漂亮;缺点是可能会增加模式中标题布局的复杂性。重叠:出现在模态弹出窗的边缘。连续边缘中间的间歇最能引起人们对「x」注意图标,但其独特的视觉风格,增加了视觉复杂性,感觉不那么精致。外部:出现在模态弹出窗外。这使得模式窗口非常干净,但关闭图标可能会与下面的UI混淆。△ 右边vs左边。来自MegRobichaud结束(右)的图片「x」把它放在右边比把它放在左边好,因为它对人的右手拇指有更好的适应性,而且不会与左边的示意图标发生冲突。将开始(左边)「x」当放置在左侧时,应遵循当前的导航模式,但它增加了弹出窗口的垂直高度,因为它不能太接近示意图标。注:这是基于LTR语序(译者注:LTR可以说是从左到右阅读语序),「开始」是用户开始阅读内容的地方,「结束」是用户停止阅读的地方。现在最好的配置是把所有的东西都整合在一起,一个对齐在底部的弹出窗口,包括右上角的一个「x」图标。只有三种情况:文本、图片和图标。总而言之,我必须承认,你也可以尝试使用两个文本按钮,其中一个是「关闭」。这也是谷歌标准推荐的一个不错的选择,但如果你不想关闭它,担心意外点击或多语言问题,「x」按钮将是一个很好的通用解决方案。

内容来源:网络,以上内容来源于网络,不代表本站观点,如有侵权,请联系删除。

推荐阅读

非专利技术摊销年限多长? 非专利技术摊销年限详情

  摊销这个词我们在会计学上经常听说,对于很多无形资产就需要进行资产的摊销,与固定资产的折旧类似,那么对于非专利技术摊销年限有多少年?下面小编就给大家来详细介绍一下非专利技术摊销年限多长?非专利技术摊销年限详情这一块的相关内容,希望能帮助到…查看详情

万商云集2019品牌服务大使候选人专访之——成都团队徐超群

在与客户打交道的过程中,客户代表除了全心全意的服务,也收获了来自客户的感动。万商云集成都分公司客户代表——徐超群,在遭遇家人生病时,其客户主动慰问,并毫不犹豫的转账2000元给予帮助。一方面,是客户的温暖与热忱,让我们感动感恩;另一方面,也…查看详情

windows10没声音怎么办

  Windows10系统是目前广泛使用的操作系统之一。然而,在使用Windows10时,可能会遇到许多问题。其中之一就是没有声音。当你尝试播放音频或视频文件时,你可能听不到任何声音。如果你遇到了这个问题,不用担心,以下是可能的原因和解决方…查看详情

专利权到期后可以续期吗?

 任何单位或者个人,认为该专利权的授予不符合本法有关规定的,可以请求专利复审委员会宣告该专利无效。下面万商云集小编给大家带来专利权续期这块内容。、  一、专利权到期后可以续期吗?  专利权是有期限的,有效期不可以延长。  根据《专利法》第4…查看详情

现代志愿者管理系统浅析

国外志愿者服务源远流长它的形成和发展大致经历了萌芽、扩展、规范三个阶段。当前国外志愿者服务活动展开得十分活跃志愿者服务活动几乎家喻户晓。志愿者服务意识为大多数公民所接受参加志愿者服务活动已成为广大公民的自觉行动,本文将对现代志愿者管理系统进…查看详情

免费不要钱的变声器软件有哪些?四款免费变声器软件介绍

在说话的时候很多人都喜欢变声,可以变成比较搞怪的也可以啊把声音变得更加好听一些,所以说这个时候就可以选择一些比较好的变声软件。有些变声器软件可能需要收费,所以说有部分人都想要找一些免费不要钱的变声器软件。那么免费不要钱的变声器软…查看详情

做期货用什么软件比较好?实用的期货模拟软件推荐

什么是期货模拟软件?期货模拟软件就是向投资者提供期货信息,但是期货投资风险是很大的,而且门槛也高,一个不小心就会陷进去,但期货模拟软件就不一样了,所谓模拟就是用的都是虚拟的资金,不会有什么风险,门槛也会低很多,并且里面的东西都跟现实一模一样…查看详情

微服务的优缺点

微服务是什么?微服务是一种架构风格,它将一个单一的应用程序拆分成一组小而独立的服务,每个服务都能够通过独立的进程来运行并进行交互。这些服务可以通过API调用进行通信,并可以用不同的编程语言和技术来构建。由于微服务是分布式的,在进行部署、管理…查看详情

别太天真!你以为注册过的商标,别人就不能再注册使用了吗?

不少中小企业在企业成立初期就注册了自己的商标,以为自己注册过的商标,别人就不能再注册使用了,之后却发现有和自己的注册商标同名或相似的商标在使用。那么问题来了,注册过的商标是不是别人就不能再注册使用了呢?如何才能保护自己的注册商标呢?图片来源…查看详情

华为mate30防水吗

mate50防水吗?防水。华为mate50支持防尘防水,但是不是专业的防水手机,华为mate50防水等级是IP53,日常防水是没有问题的,但是游泳之类的不可以,华为Mate50是华为研发的智能手机。 擦拭手机表面时尽量用比较干的布擦拭屏幕,…查看详情

电商平台如何搭建?打通内部系统是关键

当下的电商平台搭建与前两年有一些区别,不再是简单的交易,涉及到更多企业电商业务的发展战略规划和电商网站本身的运营发展。中小企业在研究电商平台如何搭建的时候,最应该关心的不是基础功能是否完善,而是电商平台的运营维护、仓储系统和营销推广等。图片…查看详情

2023年男士皮鞋品牌排行

  男士皮鞋品牌是一种设计、制作男士专属的高品质皮鞋的品牌。在市场上,很多知名的男士皮鞋品牌如一二三城、斯凯奇、安踏、雅戈尔等等。本文将介绍一些在市场上排行前列的男士皮鞋品牌。  1.耐克  耐克是一个全球性的领先品牌,专门设计制造运动鞋和…查看详情

windows10如何更改账户信息

  Windows 10是微软的最新操作系统,其与社交账户的整合使您可以快速登录,并且默认情况下注册帐户时,电脑也会创建一个Windows本地账户来保证操作系统的安全稳定和维护。然而,出于各种原因,您可能需要更改Windows 10中的…查看详情

知识产权和版权的包含关系,决定各自特性的关系

知识产权和版权是包含关系,版权是知识产权的一类,与商标、专利、商业机密等一样,被包含在知识产权的范畴内。版权是对创作者的作品专有权的保护权利,是依法享有的一种民事权利。图片来源于网络知识产权是人们依法享有其知识劳动成果的独特权利,国家赋予创…查看详情

为什么要做版权登记?最重要的是企业可享受国家税收优惠政策

为什么要做版权登记?虽说一个作品自诞生之日起就自然拥有了著作权也就是版权,不管版权登记不登记,一个作品的版权都受到国家著作权法保护,可是登记和不登记的保护结果是不一样的。图片来源于网络 登记和不登记最大的区别在于,是否取得著作权证书。那么取…查看详情

最新文章