首页 | 建站资讯 | 建站问答 | 建站帮助 | 服务电话:021-61984272
Godzilla. 2019-04-17 网站建设

UI设计中,用户界面按钮的几种基本类型(二)

       折叠按钮(汉堡包按钮)

  它是隐藏菜单的按钮。当你单击或轻击它时,菜单会展开。这种菜单(以及按钮)之所以得名,是因为它由三条水平线组成,看起来像典型的面包-肉-面包式的汉堡组合形状。如今,它是Web和移动布局中广泛使用的交互元素;尽管如此,关于其利弊的争论仍然很激烈。
 
  经常访问不同网站的活跃互联网浏览者,确切知道这个按钮隐藏了不同类别的网站内容,所以这个技巧不需要额外的解释和提示。好处是,这种菜单预留更多页面空间,使界面更简约和透气;从功能上看,它为其他重要的布局元素节省了大量空间。还可以更好地适配响应式和自适应式设计,隐藏导航元素,使界面在不同设备上看起来更加和谐。
 
  反对折叠菜单的论据是基于这样一个事实:对于不经常使用网站的人来说,这个设计元素可能会让他们感到困惑,并且可能被具有高度抽象特征的图标误导。它可能会对导航产生负面影响,并可能成为用户体验差的原因。因此,应用汉堡包按钮的决策应在用户研究和确定目标受众的特征和需求之后做出。
 
  虽然汉堡包菜单的使用仍然属于现代网站设计和App设计中有争议的话题,但它们也经常被设计者使用。
 
  添加按钮
 
  通过单击或轻击该按钮,用户可以向系统添加一些新内容。根据App的类型,它可以是列表中的新帖子、联系方式、位置、备注、条目,也可以是数字产品的新产品。有时,点击这个按钮,用户会直接转到创建内容的弹出窗口,在其他情况下,也会有一个中间阶段,在这个阶段,用户可以选择其他选项,并使添加内容更加准确。
 
  滑动选项卡按钮
 
  单击或轻击后,此按钮将打开各种选项。这是在不重载屏幕的情况下设置适当的交互流的另一种方法,对于屏幕空间有限的移动界面尤其适用。
 
  旅行计划App:标签栏的核心交互元素是一个加号按钮,允许用户向特定的旅行添加新旅行或新项目。为了简化体验,将按钮扩展为一组滑动选项卡按钮,这些按钮标记特定类型的内容,以便用户可以在进行选择后,并到达必要的内容页面。
 
  分享按钮
 
  随着社交网络、聊天和电子邮件的普及,这些按钮简化了将App或网站设计内容与用户的社交档案连接的过程。这种类型的按钮可以将内容或成就直接分享到社交网络帐户。为了让这种联系更清晰,它的图标带有特定社交网络的品牌标志,很容易识别。现在,如果分享不是用户在页面上所期望的关键操作,它们通常不会被标记为按钮(没有额外的形状、颜色标记、下划线等),你只会看到社交应用图标,但是它们是交互式的。这种展示方法支持极简主义,并有效利用留白空间。它还让用户专注于主要功能,但总是能看到快速分享到社交网络的途径。
 
  这是一个优雅简约的建筑公司企业网站。在主页的左下角,你可以看到社交应用图标。它们很容易被注意到,但平衡得很好,不会分散用户对核心导航和行动按钮的注意力。那更多关于设计按钮的内容,也可以结合上一文《UI设计中,用户界面按钮的几种基本类型(一)》,详细了解。
 
  半透明按钮
 
  该按钮是一个看起来是空的透明按钮。按钮外形看起来是空的,中空的,甚至接近透明的。其作为按钮的视觉可识别性通常具有一个形状,该形状由围绕按钮文字的相当细的线包围。这种按钮有助于设置可视层次结构,以防有几个行动按钮元素:核心的行动按钮在一个填充的按钮中显示,而次要的(仍然可激活的)在一个半透明按钮中展示。
 
  这是一个餐厅App的注册界面。它有三种不同类型的按钮:核心的行动按钮是一个填满的按钮,提供了最流行、最简单的快速注册方式;半透明按钮提供访问频率低的选项;文字按钮排列到下一行并将提出的问题作为行动提示,并使用颜色标记。这样的方法有助于建立屏幕上几个按钮的可视化层次结构。
 

文章标签: 网站设计 UI设计 
文章评论:
客服图标
咨询电话
021-61984272

欢迎您给我们来电,已有13835人通过电话进行免费业务咨询,您也可以