`
lovnet
  • 浏览: 6880980 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

设计中默认样式的强大威力

 
阅读更多

  默认样式,就是最原生态的样式。就像大家经常用的按钮或者蓝色有下划线的超链接。本文,潜行者m将从两个元素来讨论默认样式在设计中的应用。

  超链接的默认样式

  超链接的默认样式 超链接是网页中最常用最基础的元素,可以说是必不可少的。我们设置超链接,也是希望人们去点击,去使用它。那么我们拿什么让人们知道,这是一个超链接呢?你可以在旁边说,这里有个超链接,快来点击我。但是,当人们看到这几个字的时候,是需要思考的,实际情况下,人们是不想思考的。所以,我们设计的目的,就是让人们一看上去,就觉得这是一个可以点击的超链接。这里几个超链接,我分别为他们加上了样式,请看下图:

  请你告诉我,这里面究竟哪一个才是可以点击的超链接?很显然,第一个超链接是默认样式,这种蓝色下划线的样式,已经深入人心,任何一个经常上网的朋友,看到这个就知道它是一个可以点击的超链接。但是有个非常明显的问题,这种蓝色下划线的样式实在是太丑了。而且和我的设计风格不相似。那么,我们就可能会考虑后面三种。

  现在,我们的任务就变成了,如何让后面的这三个超链接,变得让人以为这是一个可以点击的超链接。这时,我们需要结合具体的文境来说。请看下面这张图,我已经把上面这三个超链接加入了文章中:

  这是比较常见的文章环境,当超链接在文章中时,我们就会发现一些东西。现在请你告诉我,这四个链接的位置以及究竟哪一个链接可以点击?很显然,第一个下划线的可以点击。然后红色、蓝色链接也可以轻易找到,但是黑色的却不见了。因为它的样式和文章的一样。

  当我们抛开第一个,请你再告诉我,究竟哪个是可以点击的超链接?很显然,是红色后面的蓝色超链接,因为蓝色是超链接的默认颜色,是标志性的颜色,所以我们会认为蓝色是可以点击超链接。如果排除蓝色链接,你还会点击什么?这时候,你会发现文中突然黑字里面出现了一个红色超链接。这是你的大脑会进行短暂的思考,这个红色超链接是什么,为什么别的都是黑色的,它是红色的?它是不是有特殊的功能,是不是可以点击?要不我把鼠标移动上去,看看吧。

  当我们把鼠标移动上去之后,发现鼠标变成了小手状,红色还变了色,而且还加了下划线。OK,这个就是可以点击的超链接了。

  至于黑色超链接,潜行者m就直接找不到了,碰巧鼠标移动到什么,可能会变成小手。但是一般人是无法注意到了。

  通过这个案例,我们可以分析出,超链接应当如何定义:

  尽可能的使用默认的蓝色,甚至加上下划线。如果与风格不符,请使用与其他文字差别较大的色彩来表示,这是一段与众不同的文字,它有特殊的含义。

  当鼠标移动上去的时候,请定义:hover,让其进行变色,并且加上下划线,因为这是一个超链接默认的样式,经过这样处理之后,能够让人深信不疑的认为这是一个超链接。

  如果你无法合理的配色或者你的作品无法使用多种色彩,请尝试让字体变大或者变小或者倾斜,让超链接变得与众不同,这样就会让人产生疑问。

  如果你无法比较合理的完成上面三条,请不要使用默认样式。

  按钮的默认样式

  按钮也是使用比较广泛的网页元素,通常用于表单提交,或者其他需要点击的地方。通常有以下三种形式的定义

  第一种就是默认情况下的,而第二种只是简单的个边框,使其去掉默认样式平面化,第三中则可以代表使用图片背景的自定义按钮。

  当你第一眼看到这三个按钮的时候,很显然,第一个是最想按钮,并且可以让人产生点击欲望的按钮。除了第一个之外的后面两个呢?这里需要注意一下,第三个是有一个变色处理的,当鼠标移动到上面,会变成这样:

  默认的按钮样式以及满足不了我们网站的风格,所以我们目前的任务,就是让后面两个按钮,变得像可以点击的按钮。我们主要来分析一下,为什么后面两个按钮不像前面那个可以点击的按钮,有什么特点和区别。

  1,外观要像一个按钮,其中第三个要比第二个更像按钮,因为它是圆角、椭圆形的,它要比直来直去的方框更容易给人以按钮的感觉。

  2,要有3d突出感,按钮是一个突出的东西,给人一种3d突出的感觉更让人容易相信这是一个可以点击的按钮,例如淘宝购买按钮

  可以通过添加阴影或者渐变等,制造这种突出的效果。

  3,要有变换特效,及时的和浏览者沟通,告诉他们,这是一个可以点击的按钮。

  4,如果你的设计,无法很好的完成上面说的三点,请使用默认样式。

分享到:
评论

相关推荐

    jquery.rar

    总的来说,这个“jquery.rar”压缩包为Web开发者提供了一整套完善的前端解决方案,无论是在小型项目还是大型应用中,都能发挥出jQuery的强大威力。它简化了JavaScript编程,增强了用户体验,大大提高了开发效率。...

    jQuery京东手机端商品分类滑动切换.zip

    我们可以将这些li元素放入一个ul容器中,通过CSS控制初始状态,比如默认显示第一个分类,其余隐藏。 2. **CSS样式**:为了实现滑动效果,我们需要设置合适的CSS属性,如position、width、overflow等。通过相对定位...

    jQuery移动端年月日期选择代码.zip

    总的来说,这个“jQuery移动端年月日期选择代码”为移动应用提供了高效、易用的日期选择解决方案,体现了jQuery在前端开发中的强大威力和灵活性。开发者不仅可以直接使用这个插件,也可以从中学习到关于触摸事件处理...

    jQuery自定义拉下拉菜单

    在网页设计中,交互性和用户体验是至关重要的因素。jQuery作为一个强大的JavaScript库,为开发者提供了丰富的功能,使得网页的动态效果和交互变得更加简单。本篇文章将深入探讨如何利用jQuery和dropkick.js插件来...

    EDA-app:这是一个使用Python,Streamlit和一些出色的数据可视化工具制作的探索性数据分析应用程序

    例如,Matplotlib提供了基础绘图功能,Seaborn则在Matplotlib基础上增加了更高级的统计图形和更好的默认样式。 **四、EDA-app的工作流程** 1. **数据加载与清洗**:使用Pandas读取数据文件,进行数据清洗,处理缺失...

    透明的 CMD 命令

    例如,"Glass CMD for Vista"这个程序就是专为Windows Vista设计的一个例子,它能够使CMD窗口具有与Vista Aero主题相匹配的玻璃透明效果。以下是如何使用或创建透明CMD的一些关键知识点: 1. **修改CMD窗口属性**:...

    jQuery Mobile 南开黄页

    它基于HTML5,利用数据属性(data-attributes)和CSS3样式,提供了一套直观的UI组件和交互设计,如页面、导航栏、表单、按钮等。这使得开发者无需深入了解复杂的移动设备适配和触控事件,就能快速构建出跨平台的移动...

    jquery mobile手册

    2. 增强更新:jQuery Mobile默认会自动增强页面中的元素,如将无序列表转换为触控友好的列表视图。可以通过配置选项或数据属性来控制这种增强行为。 三、动作与方法 1. 事件绑定:jQuery Mobile提供了许多与触摸...

    Jquery实现带动画效果的经典二级导航菜单

    在网页设计中,导航菜单是不可或缺的元素,它帮助用户快速定位并访问网站的不同部分。本文将探讨如何使用jQuery...这种技术适用于各种类型的网站,能够提高用户的导航体验,同时也展示了jQuery在网页开发中的强大威力。

    slidery-gradle:Slidery 的 Gradle 插件 - 支持创建用 Markdown 编写的演示幻灯片的 Java 库

    在这个例子中,`source`指定了Markdown文件的路径,`output`设置了生成的幻灯片存储位置,`theme`则选择了默认的主题。 **总结** Slidery-gradle插件结合了Markdown的易用性和Gradle的强大功能,为Java开发者提供...

    xonsh-docs:xonsh 的文档

    xonsh是一个开源的、跨平台的shell,它的设计目标是成为一个强大的交互式命令环境。与传统的Bash不同,xonsh的默认解释器是Python,这意味着你可以直接在命令行中使用Python语法和库。这种结合使得xonsh具有极高的可...

    nilsontacito.github.io:这是一个大学项目,由正在学习使用PHP开发的学生维护

    它的设计目标是使网站开发变得简单,而其强大的功能和灵活性使其成为许多大型网站背后的驱动力。PHP支持多种数据库,如MySQL、PostgreSQL、SQLite等,具有丰富的函数库,可以处理各种任务,如表单处理、会话管理、...

Global site tag (gtag.js) - Google Analytics