欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

「用户体验设计」按钮使用实例、类型和状态

发布时间:2017:10:06 15:02:09 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1423个文字,预计阅读时间4分钟
导语
海淘科技帮您总结了按钮使用实例、类型和状态:按钮是一个一般的、平时交互中都也许碰到的根本元素。但对创立一个流通的交互体会进程来讲,按钮则是一个至关首要的元素,因此

智唯网络帮您总结了按钮使用实例、类型和状态:

「用户体验设计」按钮使用实例、类型和状态

按钮是一个一般的、平时交互中都也许碰到的根本元素。但对创立一个流通的交互体会进程来讲,按钮则是一个至关首要的元素,因此,投入必定精力到该元素的规划上是十分有含义的。别的,咱们也为咱们梳理出元素的根本类别跟状况——都是为了创立出高效的按钮进而提高用户体会你所必须了解到的根本信息。

一、运用按钮的最佳实例

1、使按钮看起来确实像按钮

细心想想一个按钮终究是怎么经过良好的规划向用户传达其功用可见性的。用户又是怎么将一个元素了解成按钮的?最简略的办法就是运用形状和色彩让元素看起来像一个按钮。


「用户体验设计」按钮使用实例、类型和状态

Groupon 登录页面杰出首要按钮

别的,你需求仔细思考下规划中涉及到的元素的可接触尺度。就协助用户从一堆元素中识别出按钮一事,按钮自身的尺度巨细也表现着首要的效果。其实各种平台中的规划指南中也都指出了其请求的最小规划尺度。而来自 MIT Touch Lab 的一项研讨表明,手指的均匀接触巨细在10-14mm之间,指尖的规模则在8-10mm,这就使得最适宜的尺度下限应当在10mm x 10mm摆布。


「用户体验设计」按钮使用实例、类型和状态

2、留意按钮的方位和次序

应当把按钮放在用户简单发现或预期看到的方位。例如,iOS UI guidelines 中的实例:


「用户体验设计」按钮使用实例、类型和状态

按钮的摆放次序也十分首要,格外对一双成对的(比方“前一个”和“下一个”)选项按钮。必定要保证最首要的按钮在视觉规划上更为杰出。

在下面的示例中,咱们运用赤色标示出也许代表毁灭性操作的按钮。请留意首要按钮不光在色彩和比照度上愈加杰出,其方位也放在了对话框的右侧。


「用户体验设计」按钮使用实例、类型和状态

3、要不要运用标签

标签用来通知用户操作按钮后会发作什么。

相同是上面的示例,假如没有运用适宜的文本标签,状况如下,瞧瞧,你感觉到这其间的不相同了吗?


「用户体验设计」按钮使用实例、类型和状态

4、做法呼唤按钮(CTA)

应当使最首要的按钮(格外是做法呼唤类按钮)看起来确实是最首要的。


「用户体验设计」按钮使用实例、类型和状态

二、按钮形状

一般状况下,你会依据网站/运用程序的类型将按钮规划成直角或圆角型。一些研讨指出,圆角按钮可以提高信息的表现力并招引用户的留意力到元素的基地处(文本有些)。


「用户体验设计」按钮使用实例、类型和状态

圆角矩形按钮

你当然也可以更具立异,运用别的比方圆形、三角形或许自定义形状的按钮,可是请紧记挑选后者也许会更有风险。


「用户体验设计」按钮使用实例、类型和状态

悬浮按钮是运用自定义形状按钮的一个极好的比方

请保证贯穿整个运用程序的控件保持良好的一致性,好让用户可以轻易的识别出你的界面元素并可以分辨出终究哪些是按钮。

三、按钮类型和做法

1、起浮按钮

起浮按钮一般成直角型,经过必定的暗影表明其可点击性。对比与扁平的规划,其增加了全体尺度,在对比拥堵的界面上更明晰可见。


「用户体验设计」按钮使用实例、类型和状态

(1)运用。作为内联元素运用,在一个包括多样性内容的规划里边着重动作。

(2)做法。按下后起浮按钮稍微弹起并填充色彩。


「用户体验设计」按钮使用实例、类型和状态

(3)实例。起浮按钮要比扁平按钮更为杰出,实例如下:


「用户体验设计」按钮使用实例、类型和状态

2、扁平按钮

按下时,扁平按钮并不会弹起,但相同会填充必定色彩。扁平按钮的首要优点简略明晰——它们最小化用户从内容中分神的也许性。


「用户体验设计」按钮使用实例、类型和状态

扁平按钮

(1)运用。

① 在对话框中,一致按钮自身跟对话框内容的款式:


「用户体验设计」按钮使用实例、类型和状态

Android 对话框中的扁平按钮

② 在工具栏中:


「用户体验设计」按钮使用实例、类型和状态

工具栏中的扁平按钮

作为有必定内边距的内联元素,用户可以轻易地留意到它们。


「用户体验设计」按钮使用实例、类型和状态

(2)做法。


「用户体验设计」按钮使用实例、类型和状态

(3)实例。


「用户体验设计」按钮使用实例、类型和状态

3、开关按钮

一个开关按钮答运用户在两个(或多个)状况之间切换。


「用户体验设计」按钮使用实例、类型和状态

开关按钮

(1)运用。开关按钮最常用来标示On/Off状况。

开关按钮相同可以用在一组有关的选项上,但此刻你的规划应当向用户传达当时的开关按钮是这一组中的一有些。别的,开关按钮请求:

① 一个开关按钮组最少由三个开关按钮构成;

② 运用纯文本、图标或许两者联系作为按钮;


「用户体验设计」按钮使用实例、类型和状态

有一个选项被选中的开关按钮组

佛山网站建设优化公司 智唯网络

专业建站,免费排名「快速上首页」5年建站优化经验

免费上首页>>马上咨询
专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:「用户体验设计」重点考虑的9个核心原则

下一篇:「用户体验设计」色彩营销背后的科学

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信