幽灵按钮html,什么是幽灵按钮？网站设计用户体验

2014年最大的趋势来临之前似乎没有任何预兆。而这一切都源自于几乎所有网站都存在的一个最细微的设计要素——按钮。

幽灵按钮 – 这些透明、能点击的玩意随处可见，而且正在席卷网页设计界。谁曾想得到如此简单的按钮能够改变我们眼中的网页设计？

什么是幽灵按钮？

幽灵按钮通常采用基本的平面形状——正方形、矩形、圆形、菱形等——并且没有填充，只有简单的边框。除了边框和文字之外，其完全或几乎完全透明(所以叫“幽灵按钮”)。

幽灵按钮一般比传统的网站按钮要大一些，并且放置在显眼的位置，例如屏幕正中央。

很多不同类型的网站(和移动应用)上都会有幽灵按钮，而且其设计风格多样，但一般应用于单页式网站或采用极简抽象派主义或纯扁平化设计方案风格的网站。这种按钮风格在使用全屏图片的网页上也很流行，因为相比传统按钮，其简单的风格保证不会影响图像。

你是否曾仔细看过iPhone上的圆形按钮(iOS7上)？其中所有UI要素都是幽灵按钮。

对于这一新兴的趋势，一位Designmodo的设计师表示：

幽灵按钮的出现在一定程度上源自于打造百分之50不透明度全屏背景并在背景上覆盖界面和形状的热情。通过幽灵按钮，我们将有机会把人的注意力在背景图片、产品反应风格以及采用了幽灵要素的形状之间进行分配，这样按钮一方面能够让人看得到，却又不会太过抢眼。

设计要素

幽灵按钮通常包含一系列常见的要素。尽管这方面没有一套既定的使用规则，但在在设计幽灵按钮时这些要素会被考虑。

1. 按钮应为空心

2. 使用边线环绕，边线厚度为一到两点

3. 包含简单的文字

4. 颜色一般为黑或白

5. 一般比传统按钮大

6. 幽灵按钮一般放到页面的显眼位置

7. 幽灵按钮可以单独放置也可以以一小组按钮的形式放置

8. 元素采用扁平化或几乎扁平化的设计方案

9.  幽灵按钮内部可以保守使用较小的几何形状图标

幽灵按钮的好处

幽灵按钮的关键是什么？你是否应当把这一设计趋势加入你的下一个项目？

幽灵按钮的外观和感觉极为简洁。其简约性能够让页面的主要设计要素得以突出(对于较大的图像尤其有效)。

幽灵按钮几乎可以适用于所有设计方案，其透明特性让按钮能够呈现出周围设计的特性。

幽灵按钮延续了“2013趋势-扁平化设计”的演进。让这一类型的设计趋势保持流行的唯一办法就是不断改变、不断加入新理念。这是这一流程的绝佳演进路线。

幽灵按钮与用户的预期完全不同，因此能带来视觉惊喜的成分。

幽灵按钮设计简单。你只需记住尽量简洁即可，其需要保持隐隐约约、不抢眼。

幽灵按钮能够在不扎眼的同时给行动呼吁形成焦点。在很多网站的设计中，幽灵按钮是屏幕中的唯一大型元素(这通常是促成概念成功的原因)。因此，其能够吸引用户的眼球并促使他们点击按钮。而这正是优秀的用户互动要素的目标。

幽灵按钮能够带来看似高端的设计风格。在设计领域，简单常常就意味着档次。

幽灵按钮的缺点

0

虽然幽灵按钮在设计方面有很多优点，但也需考虑其缺点。在采用新趋势之前，你需要权衡利弊，确定这一理念是否适用于你的项目。

幽灵按钮会过分地融入背景，让用户感到烦乱。并非所有用户都具有设计方面的悟性；有些人甚至可能无法区别传统的按钮和非传统的按钮，更别说如何使用了。

对于对比强烈或颜色差异较大的图片，通常情况下幽灵按钮是黑白的。如果你的图片交替采用了黑白空间，就会造成看不到幽灵按钮的情况。

幽灵按钮的使用简便性取决于其尺寸和位置。在放置按钮时要注意让其容易找到，而且不会遮挡到图像的某个部分。

幽灵按钮有时会压过与其配套的图像。

幽灵按钮上的文字不仅仅是“点击此处”。按钮中使用的文字需要经过仔细考虑、编辑并结合设计的其他部分妥善放置。

幽灵按钮现在无所不在。如果你不想只是赶时髦，就一定要保证设计风格适合自己的项目。

幽灵按钮潮流作品集

记住，所有潮流的关键就是如何运用得当。正如Designmodo对这一潮流所述：

“我相信设计界的所有趋势潮流都可以得到妥善运用。但关键的是不要上瘾，要选择乐观积极的含义。”

这就是使用幽灵按钮和其他潮流趋势的核心。

下面我将为你展示一系列幽灵按钮图集，希望能够给你带来灵感。这一图集来自于多个已发布的网站和项目，以及Dribbble和Behance等网站上的作品集。(点击每个图片查看来源。)