网站首页 > 界面表现> 文章内容

界面设计 关闭按钮不可忽视的小元素

※发布时间:2019-8-5 23:07:52   ※发布作者:habao   ※出自何处: 

  关闭按钮是用户界面设计中的一个小元素,但就是这样一个看似微不足道的按钮,在设计上却有很多需要注意的地方。用户界面设计关系到用户对于产品的直观感受,是用户体验最直接的影响因素。所以,用户界面设计的每一个细节都是不可忽视的,关闭按钮就是其中之一。

  第一个问题来自知乎:“在Mac OS中,弹出窗口的关闭按钮是放在左上角的,Windows则是放在右上角,这两种不同的做法是基于什么样的考虑呢?”

  Mac OS是考虑到人的视觉浏览线是从左往右、从上而下的,而且大部分的文字内容、菜单也都是左对齐的,所以将关闭按钮放在窗口的左上在视觉上是理所当然的

  Windows 居右的理由是:虽然人的视觉中心偏左,但鼠标在屏幕上往往靠右,故点击关闭按钮时,指针移动距离更短,更便于操作。

  要根据具体页面的业务需求而定,如果不希望用户太快的关闭弹窗,最好放在相对边缘的角落;如果希望用户阅读完内容后关闭,则应放置在内容结尾处,方便关闭。

  所以,至于放在左上角或右上角对前者影响并不大,而后者的情况完全可以通过“确定取消”按钮实现弹窗的关闭,居左居右倒显得不那么重要了。

  在具体设计时,如果是web页面弹窗,最好遵守Windows平台规范,把关闭按钮[x]放在右上角;如果是桌面应用,最好遵守各自平台的规范。

  如下图是“有道云笔记”在删除回收站中笔记内容时的二次确认弹窗,从左至右依次是网页版、Mac版、Windows版,处理方法可见一斑。

  早期Windows系统中的关闭窗口的按钮并非[x],一直到windows 95的时候,[x]才真正出现在windows系统的界面上,见下图。

  再往前追溯,[x]极有可能来自于日本的两种标识符“Batsu”和“Maru”。Batsu也就是[x],表示不正确的,也可以表示错误、坏的和;而Maru也就是[o],意思是正确、真是、好的、完整的、珍贵的。

  需要登录才能使用的应用:对用户而言,退出是指程序退出运行且账号退出登录(需要经常性记住账号登录状态的应用除外,退出也只是代表关闭)。

  此外,退出还有强制退出的含义,在遇到卡顿等情况时,可以通过“强制退出”解决;而“退出登录”是单纯的退出登录状态,程序不会关闭。

  关闭:指关闭当前窗口,程序不一定退出运行,可能会在后台运行,一般会让用户进行选择是“只关闭窗口”还是“关闭且退出程序”。如果有登录账号,账号也不会退出。

  如下图,网易云音乐既能在设置中定义关闭面板是“仅关闭面板”还是“退出程序”,也会在关闭时给出确认弹窗供用户再次选择确认。

  注销:指只退出当前登录的账号,不退出软件,返回登录页面后还可以用别的用户名登录(web端更常见用“退出账号”字眼代替注销)。

  注销还有一层含义,就是销户(永久、删除账户),比如:QQ最近上线的注销帐号功能,所有资料都会被清空。

  关闭/、停用/启用一般指动作,表示状态则会使用“已/已关闭”、“on/off”等含义明确的词汇,比如:switch开关控件。

  树状结构中文件夹节点图标有打开/关闭的区别,不过它更像分组列表的展开/收起。所以、打开、展开还是有些差别的。

  ——即:网页中弹窗的关闭按钮放在右上角,以符合大多数用户习惯。桌面应用中,如果采用各自系统默认的弹窗样式,自然是“Mac版居左,Windows版居右”,如果是定制开发,最好遵守各自平台的习惯。除了大方位,以弹窗边缘为界,关闭按钮又可以放在弹窗内部、弹窗外部或与弹窗边缘交叠。

  当然,有些情况“不需要关闭按钮去关闭弹窗”,而是通过业务性操作“取消确定”关闭弹窗,如下图所示。

  移动端还可以通过点击返回键、或点击遮蔽层的方式关闭,这不仅符合极简设计原则,也能更明确的告知用户操作的具体含义。

  关闭按钮同样具有一般按钮的四种状态:normal普通状态、hover 鼠标悬停状态、active 点击状态、focus 取得焦点状态。

  除了纯文字的关闭按钮,更常见的是图标按钮,毕竟图标按钮所占空间更少、语义传达明确、又能避免页面单调。

  退出性关闭则围绕生活中常见的“电源关闭”图标进行变形;功能关闭则是功能图标加上“X \ / -”等图形,稍有不慎就很容易图标原有的美感。

  可借鉴以下做法:拼多多商家用户登录商家后台后有时会弹出重要通知弹窗,该弹窗不能直接关闭,必须等倒计时结束后才能关闭,以用户意识到通知的重要性,完成信息传递。

  当应用中同时打开多个tab时,所有页签的关闭按钮都常显必定占据一定的页面空间、且会页面美感。

  Chrome浏览器中,标签数量少的时候,每个标签都显示关闭按钮,达到一定数量时就只显示当前标签的关闭按钮,其他的隐藏。

  QQ浏览器无论标签多少,只显示当前标签的关闭按钮,不过当鼠标滑过其他标签时,关闭按钮就会显示出来。WPS的做是用常显小圆点代替隐藏[x]的做法。

  移动端可结合设备特性,采用不同的交互方式完成关闭动作,包括:点击(退出微信共享)、长按(keep结束跑步、骑行等活动)、侧滑(iPhone滑动关机)。

  此外,设计师们还纠结于使用多大的圆角,如何表现更多“≡”“…”“┇”。几种小程序的设计规范见下图。

  小程序的火爆给关闭按钮在移动端带来了复兴,设计师们纷纷尝试让[x]回归右上角,说是探索新交互形式也不算,毕竟合适的才是最好的,但确实了“返回”的地位,不足之处在于不方便点击。

  淘宝部分店铺的首页已经采用了类似做法让用户退出店铺,网易云音乐“我的-最新电音/私藏推荐”模块也类似,不过退出并不影响音乐的继续播放。

  掌握必要的设计技巧的同时,结合业务需求进行设计处理方能不忘初心、更好服务用户,实现从设计关闭按钮到设计关闭行为的跨越。痦子的位置与命运图

  财成国际

相关阅读
  • 没有资料
重庆学习网zslpsh,0755深圳房产人才招聘网,拾年网90后,anedc股票,最新电影下载淘娱淘乐,重庆中学生网高考,重庆中学生网高考,学习重庆方言网,重庆中学生学习方法,重庆俗语网,中学生网zslpsh,0755深圳交友网,重庆初中生,贵州重庆方言网,025新闻网,西南重庆方言歌曲,025南京交友网,重庆农家乐美女,观赏蟹种类zadull,云南重庆方言网,重庆中学学习网,028成都交友网,推广taoyutaol,西南四川方言网,观赏龟论坛zadull,四川重庆方言网,022天津交友网,重庆中学生网家长,鹦鹉鱼zadull,重庆俗语,电影淘娱淘乐,taoyutaole娱乐,华夏视讯网,0755深圳旅游招聘,昆明重庆方言网,淘娱淘乐影视,www.00game.net,观赏鱼zadul,重庆高考zslpsh,重庆中学生网高考,027房产招聘网,坝坝舞wagcw,西南重庆方言网,贵州重庆方言网,重庆言子儿网,热带鱼zadull,重庆高考zslpsh,0755深圳旅游招聘网,淘娱淘乐影视网,0571.361.cm,重庆方言学习网,028成都新闻,异形观赏鱼种类,影视网淘娱淘乐,最新电影下载淘娱淘乐,0773桂林论坛,拾年网80后动画片,观赏蟹论坛zadull,观赏龟繁殖教程,重庆一中zslpsh,重庆俗语网,广场舞wagcw,观赏虾的种类zadull,观赏鱼观赏虾观赏龟,西南方言网,观赏鱼之家论坛zadull,战争前线辅助00game,西南重庆方言小说,重庆中小学zslpsh,推广taoyutaol,战争前线论坛00game,0871交友网,025南京新闻网,重庆言子儿网站,娱乐taoyutaole,022天津交友网,025新闻网,重庆中学生网学习,022天津交友网,重庆方言歌网,www.120.cm健康网,anedc股票,重庆初中生