课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
关闭按钮无论是在网页设计还是在软件开发项目中都是必不可少的重要组件之一。今天我们就一起来了解一下,关于关闭按钮的设计方法都有哪些。
视觉设计
在ux通用设计模式中「退出」(e-x-iting)是非常简单的,你们看到我在exiting这个单词中刻意突出了「x」。
「x」这个符号的历史可以追溯到20世纪70年代的计算机设计语言,它一次出现可能是在AtariTOS(译者注:AtariTOS是雅达利电脑操作系统,在1993年就停产了)菜单中,「x」是退出的命令。
它后来被「NeXT」所使用,它为Windows的设计带来了灵感,并在1995年随着Windows全球大规模的使用而成为关闭的标准符号。讲这段历史,目的是为了说明,没有必要重新造轮子,使用全世界每个人都能懂的符号更为合适。
1.无障碍设计
我们应该在一些需要关闭的界面中始终提供「x」,即使用户可以通过单击背景,滑动,或者使用手机返回按钮来关闭界面。
位置
弹窗内容不应该成为阻碍用户流程的拦路虎,关闭的操作应该足够显眼。虽然大多数windows软件一直在右上角放置关闭操作,但今天Apple和Google的一些规范都把关闭图标放在了左上角。
1.模态位置
除了警告弹窗之外,大多数模态内容都是非必须的,因此它们可以适当弱化。虽然一般做法都是将模态弹窗直接出现在屏幕中间,但现在有一种新趋势,通过将模态弹窗放在屏幕的底部,使他们看起来没有那么强烈。
2.「x」的摆放位置
内部:出现在模态弹窗的内部。这样的摆放可以很清晰的与模态内容联系在一起,从版式上来说也很美观;缺点是它可能会增加模态中标题布局的复杂性。
交叠:出现在模态弹窗的边缘。在连续的边缘中间出现间断能引起人们对「x」图标的注意,但它所具有的独特视觉风格,增加了视觉复杂性,感觉也没有那么精致。
外部:出现在模态弹窗之外。这样使得模态窗口很整洁,但是关闭图标可能会与下面的UI混淆在一起。
节选:公众号:彩云译设计
【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!