按钮设计的终极-幽灵按钮

meng发表于 2014/08/20
你是否发现,你浏览的网页中出现的幽灵按钮正如雨后出笋一样,刹那遍地生花。极致轻薄,极致通透,无底色纹理,一层薄薄的线框标明边界是唯一存在的标志来确保它作为按钮的功能性。
幽灵按钮之后的背景相对素雅,或加以纯色,或高斯模糊,或色调沉郁,这使得即使有按钮也不影响观看全图,背景得以呈现又不影响按钮的视觉表达,双方相互映衬而达成微妙的平衡。有意思的是,设计师在使用这种搭配之时,比起以往有了更多的自由。一则方式简单,二者处理起来并不复杂,得心应手。二则易于调整,想突出背景,只需强化图片清晰度和色彩明暗饱和,将按钮挪到视觉焦点之外,按钮内用以更加纤细的字体即可;若想突出功能,引导用户,只需加强背景模糊程度,降低明度,将标题、文案、按钮置于焦点,按钮中的字体可以适当加粗,色彩可以用得更加跳脱,稍加调整就可臻于高大上。
幽灵按钮有着最简单的扁平外形——正方形、矩形、圆形、菱形——没有填充色,只有一条淡淡的轮廓。除了外框和文字,它完完全全(或者说几乎完全)透明。
各种类型的网站(包括移动APP)中都能发现幽灵按钮的身影,它有着多种设计风格,却几乎都与单页网站有关联,还有那些极简风格或近扁平风格的设计方案。这种风格的按钮在全屏照片背景的网站中也大受欢迎,不像传统按钮那样,这种简洁的样式,是出于不干扰图片的考虑。
一位Designmodo设计师这样描绘这项新兴趋势:

“幽灵按钮的出现,从某种程度上来说,与人们热衷于在半透明全屏背景上放置界面与表单有关。于是,时机到来了,它在背景图片、产品形象和幽灵表单元素之间分配了用户的注意力,使得幽灵按钮不靠遮挡背景来体现自己的存在,却依然可见。”

幽灵按钮有一系列典型的组成元素。尽管这并非完整的使用准则,但使用幽灵按钮时,其中多数都在发挥作用。
按钮是中空的
它外围有一圈轮廓,通常只有一点点厚度
它包含了简短的文字
颜色通常只有黑白
按钮往往比传统按钮更大
幽灵按钮一般占据页面显要位置
幽灵按钮可以单独或成小组出现
通常使用扁平或近扁平的设计方案
幽灵按钮内部可以使用小的几何形图标,不过很少这么做
幽灵按钮给人特别干净的外观和感受。简单自然的按钮,能使得页面的主体设计更加突出。(尤其在大幅图片上表现更好)
幽灵按钮几乎可以搭配任何设计方案,因为他们是透明的。这使得按钮可以从根本上承接周遭的设计特征。
幽灵按钮延续了“2013年度趋势——扁平设计”的演化。这样的设计趋势要成为当下主流,唯一的方法就是继续演变,接纳新的概念。
幽灵按钮无需过分扎眼,就足以创造出有感召力的视觉焦点。在众多网页设计中,幽灵按钮是屏幕上唯一的大型元素(这就是它如此有效的原因)。正因为如此,它抓住眼球,诱使用户点击按钮。而且这也是优秀用户界面的特征。
幽灵按钮有助于打造高端的设计风格。在设计中,简单往往就是高雅。
为了便于使用,幽灵按钮依赖特定尺寸与位置。放置按钮时要格外小心,让人容易发现它,并且不能遮盖图片的关键部分。
©2010-2014 秦皇岛易博网络科技有限公司 我们专注于微信开发 | 网站建设 冀ICP备12004938号-3