设计趋势:网页设计中的幽灵按钮

我不确定我们是否意识到">2014年最重大的趋势正在来临。它完全基于所有网站中微小的设计元素——按钮。

幽灵按钮——那些透明的、可点击的物体——忽然间就变得无处不在。以狂风暴雨之势席卷正网页设计领域。谁能想到,像按钮这么简单的事物,能够改变我们看待网页设计的方式?

参考:预测网页设计趋势

什么是幽灵按钮?

幽灵按钮有着最简单的扁平外形——正方形、矩形、圆形、菱形——没有填充色,只有一条淡淡的轮廓。除了外框和文字,它完完全全(或者说几乎完全)透明。(因此得名“幽灵”)

这些按钮通常比网页上传统的可点击按钮大,也被置于显要位置,例如屏幕的正中央。

各种类型的网站(包括移动APP)中都能发现幽灵按钮的身影,它有着多种设计风格,却几乎都与单页网站有关联,还有那些极简风格或近扁平风格的设计方案。这种风格的按钮在全屏照片背景的网站中也大受欢迎,不像传统按钮那样,这种简洁的样式,是出于不干扰图片的考虑。

你有仔细观察过你的iPhone(运行iOS7)上的圆角按钮吗?每个设计元素都是幽灵按钮。

一位Designmodo设计师这样描绘这项新兴趋势:

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

设计元素

幽灵按钮有一系列典型的组成元素。尽管这并非完整的使用准则,但使用幽灵按钮时,其中多数都在发挥作用。

按钮是中空的它外围有一圈轮廓,通常只有一点点厚度它包含了简短的文字颜色通常只有黑白按钮往往比传统按钮更大幽灵按钮一般占据页面显要位置幽灵按钮可以单独或成小组出现通常使用扁平或近扁平的设计方案幽灵按钮内部可以使用小的几何形图标,
不过很少这么做

幽灵按钮的优势

那么,是什么使得幽灵按钮如此管用?有必要把这项趋势用在你下个项目中吗?

幽灵按钮给人特别干净的外观和感受。简单自然的按钮,能使得页面的主体设计更加突出。(尤其在大幅图片上表现更好)

幽灵按钮几乎可以搭配任何设计方案,因为他们是透明的。这使得按钮可以从根本上承接周遭的设计特征。

幽灵按钮延续了“2013年度趋势——扁平设计”的演化。这样的设计趋势要成为当下主流,唯一的方法就是继续演变,接纳新的概念。

幽灵按钮提供了一种带有视觉惊喜的元素,因为这个按钮和用户预想的可不一样。

设计和创建幽灵按钮很简单。切记保持简约。幽灵按钮应该精细微妙,而非浮华炫目。

幽灵按钮无需过分扎眼,就足以创造出有感召力的视觉焦点。在众多网页设计中,幽灵按钮是屏幕上唯一的大型元素(这就是它如此有效的原因)。正因为如此,它抓住眼球,诱使用户点击按钮。而且这也是优秀用户界面的特征。

幽灵按钮有助于打造高端的设计风格。在设计中,简单往往就是高雅。

幽灵按钮的劣势

虽说幽灵按钮在设计上体现出诸多优势,同时有些劣势也需要考虑。采用任何新趋势之前,都要掂量它的优势与劣势,然后决定是否在项目中使用。

幽灵按钮可能太溶于背景中,使用户产生困惑。并非所有用户都了解设计;有些人对难以识别非传统样式的按钮,也不会知道它是做什么的。

幽灵按钮在高对比度或者颜色丰富的图片上很难处理。这些按钮往往不是黑色就是白色。假如你用的背景图是黑白交替的,幽灵按钮几乎看不到,也无法阅读。

为了便于使用,幽灵按钮依赖特定尺寸与位置。放置按钮时要格外小心,让人容易发现它,并且不能遮盖图片的关键部分。

幽灵按钮有时会明显影响与它搭配的图片

幽灵按钮的文案比“点击此处”要复杂。其中的文字,需要足够清晰的构思与文案,并置于其余部分的上下文语境中。

幽灵按钮如今已无处不在。想要使自己看起来跟得上潮流趋势?选择时兴的事物前,请确保它确实对你的项目有帮助。

幽灵按钮的案例集

切记,把握任何趋势,关键是要用好它。正如一位Designmodo用户所说:

“我相信设计界诞生的每种趋势,都有它意义深远的用途。最重要的是不要沉迷其中,选择中庸之道。”

就此而言,它正是使用幽灵按钮和其他潮流趋势的关键所在。

接下来给你带来一组幽灵按钮的案例集,希望对你的创造力有所启发。这个案例集是从各种线上网站、进行中的项目、和Dribbble和Behance这类网站的作品集元素中收集而来。(点击每张图片,可以查看来源深入了解)

译者: 十萬個為什麼 原作者:Carrie Cousins

时间: 2024-12-21 21:38:27

设计趋势:网页设计中的幽灵按钮的相关文章

网页设计新趋势!你听说过“幽灵按钮”吗?

  @陈子木 透明按钮,顾名思义,也就是在设计网页中的按钮之时,不再设计复杂色彩.样式和纹理,而是外仅以线框示意轮廓,内只用文字示意功能,背景透出,与整个页面/背景合而为一的设计方式.国外的设计师称之为"幽灵按钮"(Ghost Buttons),盛赞这种按钮通透简约,贴合整体风格又不失神韵,别具魅力.这种按钮的设计早已有之,但是在iOS和安卓双双风格转向之后,它携了扁平之风雷,成了网页设计的新趋势,拥有类似设计的网页设计作品入雨后春笋一般,映入眼帘. 网页按钮设计中的"幽灵&

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的

网页设计技巧:网页设计中最好不出现8种情况

文章描述:时代一直在变,一个又一个的创新让我们感到惊讶万分.网页设计的趋势如同流星,光芒耀眼,但来得快.去得也快.虽然跟风很不好,显得毫无设计主见,但很多设计潮流确实值得追随.就像当下响应式设计.扁平化设计.以及滚动视差等. 时代一直在变,一个又一个的创新让我们感到惊讶万分.网页设计的趋势如同流星,光芒耀眼,但来得快.去得也快.虽然跟风很不好,显得毫无设计主见,但很多设计潮流确实值得追随.就像当下响应式设计.扁平化设计.以及滚动视差等. 可是呢,还有很多极为"糟粕"的设计趋势,本文一一

网页设计心得:网页设计中的包容原则

让我们来探索 包含原则 奥妙.它允许我们忘记在我们的社交行为中根深蒂固的那种"他们"和"我们"之间的对立.聚焦包含原则将无障碍/通用设计的争论从上述利益冲突中解放出来,让我们拥抱一种更宽阔.更接近自然的设计哲学.最重要的一点,聚焦包含原则也帮助我们了解到,我们不仅是为了别人才重视可访问性,也是为我们自己好. 设计师的工作一直与"可视性(affordance)"有着密切的利害关系.这个词自唐纳德·诺曼(Donald Norman)的名著<设计

网页设计译文:网页设计中数学的运用

"数学是美妙的."对于在数字和公式面前畏缩的人来说,这听起来也许是荒谬的.但是,从最小的贝壳到最大的漩涡星系,自然界和我们这个宇宙中大部分美丽的东西都呈现出数学特性. 其实,古代最伟大的哲学家之一亚里斯多德曾说过:"数学格外地展现了秩序.对称和极限,而这些是美的极致形式". 由于其美丽的天性, 数学一直以来都是艺术和建筑设计的一部分.但它至今还没有在网站设计中发挥作用.其原因可能是因为我们大多认为数学是创造性的对立面.相反,其实数学可以成为创作创意设计的工具.也就是

设计参考:网页设计中的渐变文字应用实例

使用色彩渐变作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术.它们用于多种情况:网站logo.介绍性文字.视觉元素等等.但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反. 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子.希望能为你的设计提供些参考. 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CS

网页设计心得:网页设计中的细节表达

     天下难事,必做于易;天下大事,必做于细.--老子    设计中的细节表达,能够体现一个人的创新意识和能力.注重细节,能够让你去挖掘出更深层次的内涵.从而在侧面大幅度提升作品的影响力.让设计更具说服力. 细致入微    在写作中,使用细节来渲染.突出人物的形象.性格,是一种很常见同时很有效的方法.细节贵在传神,传神而突出.可以用来烘托气氛.衬托环境.突出人物性格:在产品中可以提升用户舒适度,提升用户的安全感:在生活中,细节可以让人感动.    这里并不是把细节给神化了.无论你是大开大合,

邮件设计与网页设计的巨大差别

   本文主要表达的意思是:邮件的设计与网页的设计有着巨大的差别.如果能用文字千万不要用图片:如果要用图片也千万记得把内容加入图片的Alt属性中:如果有可能给一个明确的退订链接.         写这篇文章的直接诱因是今天下午那个巨崩溃的淘宝注册体验(注意,我说的是给我的体验巨差,没有说用户体验!).电子商务产品的设计中,我们会最频繁的面对的一个模块就是EDM,在这个过程中积累了一些想法,一并记录下来.        系统邮件可以简单分为2类:提醒类(注册提醒.订阅提醒.生日或节日提醒).EDM

色彩个性化网页设计:优秀网页设计案例

文章描述:在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了. 在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了.如果做得好,那么效果会极具冲击力.推荐您看下我们之前推荐的人气文章<配色三部曲>. 本文收集了一些