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

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

参考:预测网页设计趋势

什么是幽灵按钮?

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

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

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

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

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

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

设计元素

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

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

幽灵按钮的优势

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

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

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

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

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

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

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

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

幽灵按钮的劣势

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

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

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

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

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

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

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

幽灵按钮的案例集

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

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

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

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

时间: 2024-12-26 12:00:56

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

文字设计是网页设计的根本

恩,网页设计的秘密是什么? 这是一个艰难的问题,一个可能没有答案的问题.在 2006 年,Oliver Reichenstein 写下了 Web Design is 95% Typography. 一些人狂爱它,一些人却不以为然. 若网页设计过多的依赖于文字设计,那么学习其他事物的意义何在?你所需要做的只是理解文字设计的各个元素,然后就能做的很好. 当然文字设计并不只意味着字体的选择,随着@font-face技术和一些如 Typekit, Webtype, Fontdeck, 以及 Google

2015年10大网页设计趋势和预测

技术的不断革新带动了设计行业的迅猛发展,这也使得设计师和开发者有了更加广阔的探索空间.网页设计也越来越不那么循规蹈矩了,很多的团队和公司做了不断的思考和创新.2014年已悄悄走过了一大半,今天我们一同看看2015年将有哪些让人耳目一新的网页设计~ 1.响应式布局,一个样式适配多尺寸屏幕 现在越来越多的用户拥有台式机.笔记本.平板电脑.手机等终端,所以能够适应不同尺寸的显示屏的网页也变成了一种趋势潮流,而响应式网页设计就是为了解决这个问题的,它可以保证网页适应不同的分辨率,让网页要素重组,使其无论

互联网网页设计与ui设计在未来发展的趋势

对于互联网来说,网页设计师这个职位还是挺热门的,毕竟,互联网已经越来越人性化啦,用的人越来越多,目前数据显示中国已经超过了6亿的用户数量UI设计公司,这表明:互联网是现实生活不可缺少的一部分.但是互联网的构成还得依靠网页才能体现在人们的眼前界面设计公司,大家说是吗?笔者相信只要懂互联网的都会毫不犹豫的说,是的!界面设计公司 网页是组成网站的基本,互联网又是由网站构成,但是网页必须由网页设计师来设计才行的,所以网页设计师职位的重要性相信大家都知道了吧,特别做了很多年以上的资历高深设计师,待遇和福利

爱不释手!2014年最佳的20个优秀网页设计

就要同2014年说再见了,是时候回顾一下这一年里的伟大设计了!著名的设计博客Designmodo评选出了年度最佳的20个优秀网站,这些优秀的网页不仅设计精心,而且紧跟时下流行的设计趋势. 网页设计师们总会热衷于追随最新的设计趋势,所以你能在这些优秀的网页中看到这些趋势——扁平化设计.极简风.视差滚动.视屏背景,等等.这些设计优秀的网站的另一个共同的特性,就是对移动端的良好支持——响应式设计.真正优秀的网站,总会支持尽可能多的设备.那么接下来我们就一起来看看2014年最佳的20个优秀网站,了解一下

整套网页设计的完成

这周终于在磕磕绊绊中完成了整套网页的设计,网页设计得比较简单,后面几个甚至套用了相同的模板,不过这是我在时间不够的前提下能想出的最好的提高效率的办法了.这样前端的工作量会降低很多,也比较适合我们组的现状. 很欣慰的是,开始不愿意学不愿意听的人在做出自己的网页后也开始积极了起来,这是一个好现象,感觉就像家里不吃东西的仓鼠终于开始吃饭了(啊喂,什么破比喻……最近家里仓鼠绝食感觉太苦恼了QwQ 这周的目标是:加快进度,先保量地完成前端工作,再保质地修改~ PS:上周说的PHP与数据库的书名是图灵教育出

另类设计:12个基于桌面视图的网页设计作品

创意的空间是无穷无尽的,下面这组基于桌面视图的网页设计作品带给你独特的视觉冲击.通过使用摄影或完整的布局模仿书桌或桌子来实现这种风格. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 超赞!基于 Bootstrap 的响应式的后台管理模板 太赞了!超炫的页面切换动画效果[附源码下载] Design Shopp Forgetful Chef Inc G'nosh Frank Di

网页设计中的彩色滤镜效果

网页设计中的彩色滤镜效果 在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画.精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调.气氛焕然一新,网站开始变得光彩夺目.的确,它有助于解决某些问题. 首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 .其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计.第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化

未来的网页网页设计趋势

在之前很火的扁平设计一直延续到现在,还将会继续一段时间,至于多久,不知道! 在未来一年里.网页设计将会有以下些趋势. 幽灵按钮 按钮更多使用的是幽灵按钮.关于幽灵按钮的解释有 就是在设计网页中的按钮之时,不再设计复杂色彩.样式和纹理,而是外仅以线框示意轮廓,内只用文字示意功能,背景透出,与整个页面/背景合而为一的设计方式. 高度模糊化叠于底层,衬托出左侧的文字和幽灵按钮,使得图片和文字特别突出!达到表现重点的效果 一张色调较暗的图片,明亮的字体冲击视觉,加上三个霓虹灯效果的幽灵按钮.使得页面略显

不会配色?来看看网页设计中怎样使用柔和色调

网页中的柔和色调的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果. 当你听到“柔和”一词,想到的可能是淡粉色.淡蓝色.淡黄色,不过这种配色远不止这些颜色.柔和并不一定要感觉像新生儿一样.通过某些适当的方式,配合其他元素,这些色调也可以相当鲜明. 下面我们从优秀的案例网站出发,了解10种在网页设计中运用柔和色调的方法. 柔和的照片 照片上的柔和遮罩层,或是在恰当的光照环境中拍摄的照片,可以成为精妙绝伦的网站背景.照片的色调越淡雅,设计师就有越多的区域可以放置其他元