幽灵按钮html,什么是幽灵按钮?网站设计用户体验
2014年最大的趋势来临之前似乎没有任何预兆。而这一切都源自于几乎所有网站都存在的一个最细微的设计要素——按钮。
幽灵按钮 – 这些透明、能点击的玩意随处可见,而且正在席卷网页设计界。谁曾想得到如此简单的按钮能够改变我们眼中的网页设计?
什么是幽灵按钮?
幽灵按钮通常采用基本的平面形状——正方形、矩形、圆形、菱形等——并且没有填充,只有简单的边框。除了边框和文字之外,其完全或几乎完全透明(所以叫“幽灵按钮”)。
幽灵按钮一般比传统的网站按钮要大一些,并且放置在显眼的位置,例如屏幕正中央。
很多不同类型的网站(和移动应用)上都会有幽灵按钮,而且其设计风格多样,但一般应用于单页式网站或采用极简抽象派主义或纯扁平化设计方案风格的网站。这种按钮风格在使用全屏图片的网页上也很流行,因为相比传统按钮,其简单的风格保证不会影响图像。
你是否曾仔细看过iPhone上的圆形按钮(iOS7上)?其中所有UI要素都是幽灵按钮。
对于这一新兴的趋势,一位Designmodo的设计师表示:
幽灵按钮的出现在一定程度上源自于打造百分之50不透明度全屏背景并在背景上覆盖界面和形状的热情。通过幽灵按钮,我们将有机会把人的注意力在背景图片、产品反应风格以及采用了幽灵要素的形状之间进行分配,这样按钮一方面能够让人看得到,却又不会太过抢眼。
设计要素
幽灵按钮通常包含一系列常见的要素。尽管这方面没有一套既定的使用规则,但在在设计幽灵按钮时这些要素会被考虑。
1. 按钮应为空心
2. 使用边线环绕,边线厚度为一到两点
3. 包含简单的文字
4. 颜色一般为黑或白
5. 一般比传统按钮大
6. 幽灵按钮一般放到页面的显眼位置
7. 幽灵按钮可以单独放置也可以以一小组按钮的形式放置
8. 元素采用扁平化或几乎扁平化的设计方案
9. 幽灵按钮内部可以保守使用较小的几何形状图标
幽灵按钮的好处
幽灵按钮的关键是什么?你是否应当把这一设计趋势加入你的下一个项目?
幽灵按钮的外观和感觉极为简洁。其简约性能够让页面的主要设计要素得以突出(对于较大的图像尤其有效)。
幽灵按钮几乎可以适用于所有设计方案,其透明特性让按钮能够呈现出周围设计的特性。
幽灵按钮延续了“2013趋势-扁平化设计”的演进。让这一类型的设计趋势保持流行的唯一办法就是不断改变、不断加入新理念。这是这一流程的绝佳演进路线。
幽灵按钮与用户的预期完全不同,因此能带来视觉惊喜的成分。
幽灵按钮设计简单。你只需记住尽量简洁即可,其需要保持隐隐约约、不抢眼。
幽灵按钮能够在不扎眼的同时给行动呼吁形成焦点。在很多网站的设计中,幽灵按钮是屏幕中的唯一大型元素(这通常是促成概念成功的原因)。因此,其能够吸引用户的眼球并促使他们点击按钮。而这正是优秀的用户互动要素的目标。
幽灵按钮能够带来看似高端的设计风格。在设计领域,简单常常就意味着档次。
幽灵按钮的缺点
0
虽然幽灵按钮在设计方面有很多优点,但也需考虑其缺点。在采用新趋势之前,你需要权衡利弊,确定这一理念是否适用于你的项目。
幽灵按钮会过分地融入背景,让用户感到烦乱。并非所有用户都具有设计方面的悟性;有些人甚至可能无法区别传统的按钮和非传统的按钮,更别说如何使用了。
对于对比强烈或颜色差异较大的图片,通常情况下幽灵按钮是黑白的。如果你的图片交替采用了黑白空间,就会造成看不到幽灵按钮的情况。
幽灵按钮的使用简便性取决于其尺寸和位置。在放置按钮时要注意让其容易找到,而且不会遮挡到图像的某个部分。
幽灵按钮有时会压过与其配套的图像。
幽灵按钮上的文字不仅仅是“点击此处”。按钮中使用的文字需要经过仔细考虑、编辑并结合设计的其他部分妥善放置。
幽灵按钮现在无所不在。如果你不想只是赶时髦,就一定要保证设计风格适合自己的项目。
幽灵按钮潮流作品集
记住,所有潮流的关键就是如何运用得当。正如Designmodo对这一潮流所述:
“我相信设计界的所有趋势潮流都可以得到妥善运用。但关键的是不要上瘾,要选择乐观积极的含义。”
这就是使用幽灵按钮和其他潮流趋势的核心。
下面我将为你展示一系列幽灵按钮图集,希望能够给你带来灵感。这一图集来自于多个已发布的网站和项目,以及Dribbble和Behance等网站上的作品集。(点击每个图片查看来源。)
幽灵按钮html,什么是幽灵按钮?网站设计用户体验相关推荐
- 中山网络推广浅谈网站提高用户体验要做好的5点!
中山网络推广表示,企业做网站优化的很大一部分目的是为了能更好地营销.销售自己的产品,而实现销售的工作就需要有客户,所以网站在优化时做好用户体验也非常重要,那么该怎样才能提高用户体验呢?下面中山网络推广 ...
- 网站优化用户体验须面面俱到!
随着互联网技术的普及,网站的基本建设速度越来越快,根据网站的建设经营就可以赚钱.但是别看网站建设很容易,但是想要拥有大量的点击量和有效流量却是不容易,其中最重要的因素就是用户.只有网站基本建设高品质且 ...
- 【干货】从国外知名网站看用户体验4个基本标准
送给真正的互联网人一顿干货早餐 [小咖导读]文自百度ued,很多人把用户体验和易用性这两个术语混为一谈,然而,易用性被越来越多的用于用户完成某项预定任务的难易程度,它往往与可用性测试联系在一起.因此, ...
- WEB网站设计用户登录的安全机制
1 服务器端不要保存密码明文,因为攻击者甚至不需要很高深的技术,利用SQL注入就可以获取所有的明文密码,后果严重. 如 sql注入问题 : select * from user_table ...
- 文案写作软件_11种可改善网站用户体验的文案写作技术
文案写作软件 Written by John Stevens 约翰·史蒂文斯 ( John Stevens)撰写 When we talk about user experience and your ...
- 网站哪些功能可以提高用户体验度?
点击下方"青年码农"关注 回复"源码"可获取软件,源码等资料 网站用户体验是指用户在使用网站时所感受到的感觉和情感.它包括用户与网站的互动.使用过程中的舒适 ...
- 如何快速提高网站用户体验之3大绝招:快、准、狠
流量的重要性,相信大家都明白!网上也有成千上万的教程,引导大家如何做好网站的引流工作,可是我们最终的目的不只是将用户引导进来而已,更重要的是怎么留住用户,才是我们引流的目的.因此,大家在引流时千万不要 ...
- 网络推广专员浅析如何提升企业网站在网络推广期间的用户体验?
众所周知,企业网站建设运营的出发点就是网站用户体验,只有网站用户体验上去了才能证明网站运营优化是有效果的,并且通过网络推广已经将企业品牌推广至用户眼前,树立了良好的企业形象以及知名度,无形之中为企业增 ...
- 因为此网站使用了 hsts_长春定制小程序服务,网站设计市场价格
成都御天程为您详细解读KUywim长春定制小程序服务的相关知识与详情,因为互联网的开展趋势,很多企业都从线下中心转移到.很多服务商都搭建了用来推广服务商业务和展现服务商实力,但是很多企业搭建好后却没有 ...
最新文章
- React组件设计之边界划分原则
- 使用MOSS2007内置的更多FieldType
- ME2N标准报表中加EKKO/EKPO中没显示的字段
- python argparse type_python argparse(参数解析模块)
- java 拦截所有路径_Java或Web中解决所有路径问题
- Net学习日记_ASP.Net_MVC_新语法笔记
- VS2012配置FreeImage
- JavaEE Tutorials (10) - Java持久化查询语言
- 谈谈数字货币交易系统的发展
- mysql开启url重写_开启URL伪静态的方法
- 51单片机C语言延时函数怎么定义和使用
- MultiDesk 是一个选项卡(TAB标签)方式的远程桌面连接 (Terminal Services Client)。
- 消息队列实现原理(以kafka为例)
- ansys计算机热仿真,[计算机软件及应用]ansys热分析教程.ppt
- 信号与系统(20)-拉普拉斯变换的性质
- ansible之when条件语法、处理任务失败、jinja2模板和项目管理
- 育儿知识小分享—— 如何引导孩子学会分享
- 前端:LayUi监听表格单元格,编辑后恢复原数据
- WebGL 绘制Line的bug(一)
- 来自春天的仪式感:英伦花艺佳作,用鲜花点缀生活丨好书优选
热门文章
- Linux如何创建文件在指定的目录?
- 转载自一个很佩服的大牛博客:孤傲苍狼
- L2-028 秀恩爱分得快(测试点3说明)
- 174_技巧_Power BI 动态格式(万|亿)
- 深入了解3D模型相关知识(建模、材质贴图、UV、法线),置换贴图、凹凸贴图与法线贴图的区别
- 频繁跳槽涨工资?No,居然会影响征信!
- 一位项目管理专家总结的项目职场技巧
- linux中对文件中列编辑,在LINUX中,要编辑某个文件的内容,可使用______命令。
- logrotate 的原理及使用
- Linux就该这么学(使用 ssh 服务管理远程主机)第9章