快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门24小时官网:UI设计师如何设计最常见的关闭按钮



读完这篇文章你将会懂得到:

关闭按钮「x」的设计历史

「x」设计的留意事变

关闭按钮设计的最佳案例

「x」图标在利用中是一个非经常见的交互暗示,可以将烦人的弹窗从内容长进行关闭。

无论是模态,对话框照样弹出窗口,都是内容交互中需要的操作元素,我们只必要建立合理的退出要领就好。

视觉设计

在ux通用设计模式中「退出」(e-x-iting)是异常简单的,你们看到我在 exiting 这个单词中克意凸起了「x」。

「x」这个符号的历史可以追溯到20世纪70年代的谋略机设计说话,它第一次呈现可能是在 Atari TOS(译者注:Atari TOS是雅达利电脑操作系统,在1993年就停产了)菜单中,「x」是退出的敕令。

它后来被「NeXT」所应用,它为 Windows 的设计带来了灵感,并在1995年跟着 Windows 举世大年夜规模的应用而成为关闭的标准符号。讲这段历史,目的是为了阐明,没有需要从新造轮子,应用全天下每小我都能懂的符号更为相宜。

  1. 无障碍设计

我们应该在一些必要关闭的界面中始终供给「x」,即应用户可以经由过程单击背景,滑动,或者应用手机返回按钮来关闭界面。

△ 图标和字体

设计一个图标,而不是应用一个字体,它应该被清晰的理解为是一个「x」,而不是迷糊其词。我小我更爱好夹角是90度,并且四个角长度都相等的关闭图标设计。

△ 高比较度和低比较度

它的颜色应该维持中立,相符a11y项目(译者注:关于这个项目的详细细节可以自行google)保举的4 : 1比较度。当然,当「x」险些做成灰白澳门24小时官网色时,对弹出框的视觉体现影响可能最小。

经由过程使得「x」险些弗成见,变相强制和引诱用户履行主要操作,这便是我们常说的设计阴暗面,这可能导致想关闭弹窗的用户认为受挫,对体验来说是弗成取的。

△ 带外框和不带外框

图标应该最好包孕外框以暗示可以点击的目标相对大年夜小,这样也能将可交互图标与弗成交互的图标区分开,尤其是在两种图标造型异常相似的环境下。

假如图标和容器的尺寸小于最小点击区域的大澳门24小时官网年夜小(48x48dp/pt),则必要将点击范围设置为大年夜于按钮的视觉效果,并且不与其他交互元素重叠。

假如这个图标是在一个可交互的导航栏中,比如标题导航,那么这个位置就已经为图标创建了一个可点击的空间,就无需别的再设计了。

位置

弹窗内容不应该成为阻碍用户流程的拦路虎,关闭的操作应该足够显眼。虽然大年夜多半 windows 软件不停在右上角放置关闭操作,但本日 Apple 和 Google 的一些规范都把关闭图标放在了左上角。

当涉及到模态时,这两个系统都没有太明确的偏向。接下来,我会考试测验一一阐发模态弹窗的最佳设计。

△ 模澳门24小时官网态界面图标位置

  1. 模态位置

除了警告弹窗之外,大年夜多半模态内容都长短必须的,是以它们可以适当弱化。虽然一样平常做法都是将模态弹窗直接呈现在屏幕中心,但现在有一种新趋势,经由过程将模态弹窗放在屏幕的底部,使他们看起来没有那么强烈。

△ 底部vs中心

  2. 「x」的摆放位置

△ 内部vs交叠vs外部

内部:呈现在模态弹窗的内部。这样的摆放可以很清晰的与模态内容联系在一路,从版式上来说也很美不雅;毛病是它可能会增添模态中标题结构的繁杂性。

交叠:呈现在模态弹窗的边缘。在继续的边缘中心呈现间断最能引起人们对「x」图标的留意,但它所具有的独特视觉风格,增添了澳门24小时官网视觉繁杂性,感到也没有那么风雅。

外部:呈现在模态弹窗之外。这样使得模态窗口很整齐,然则关闭图标可能会与下面的 UI 肴杂在一路。

△ 右边vs左边。图片来自于 Meg Robichaud

停止(右边)将「x」放在右侧会比放在左侧更好,来由是对付人的右手拇指适应性更好,并且不会与左侧的示意图标互相冲突。

开始(左边)将「x」放在左侧时应该遵照当前的导航模式,但它增添了弹窗的垂直高度,由于不能太接近示意图标。

注:这是基于LTR语序来说的(译者注:LTR在这里可以说是从左往右的涉猎语序),「开始」是用户开始涉猎内容的地方,「停止」是用户竣事涉猎的地方。

最佳设置设置设备摆设摆设

现在把所有的器械都综合在一路,一个对齐在底部的弹窗,包括一个在右上角的「x」图标。

只有翰墨,图片和图标的三种环境。

总结

我必须承认,你着实也可以考试测验应用两个翰墨按钮,此中一个是「关闭」。这也是一个不错的选择,并且也被谷歌规范所保举,但澳门24小时官网假如你不盼望关闭那么凸起,担心会发生意外点击或者碰到多说话问题,「x」按钮就会是一个很好的通用办理规划。

迎接关注译者的微信"民众,"号:「彩云译设计」

您可能还会对下面的文章感兴趣: