让酷炫的文字交互效果点亮你的网页

   在网页设计中,如果网站主页色彩处理得好,能让整个网站锦上添花。而一些交互效果的巧妙使用,不仅让网页瞬间亮起来,甚至在提升用户感知度和感官体验上可以起到无可替代的作用。

  我们这里所说的交互主要是指,用户通过鼠标的悬停、滑动、单击、拖动等交互方式来触发事件,与目标对象产生互动。


  本系列文章关于网页文字设计,我们就先分享文字的交互效果。

  文字交互过程的场景应该是这样的:

  一个用户在浏览一个网页时,注意到某些文字,当他用鼠标悬停、滑过、单击、拖动(交互行为)与文字(交互对象)互动时,看到文字发生了变化(交互反馈)。

  这些变化可以是字体大小变化、颜色发生改变,也可能是一些动态效果。好的交互效果能引起用户的好奇心,增加他们浏览网页时长,让他们对你的网页印象深刻。

  说到文字颜色的变化,这里分享三个关于网页文字颜色的小规范:

  > 同一个网站需要定出主文字颜色,特殊情况可以有2种左右的辅助文字颜色。

  > 正文的文字颜色为深灰色,建议选用#333333到#666666之间的颜色,若选用其他文字颜色作为正文主色调时,安全起见可采用明度不大于30%的颜色。

  > 蓝色的文字一般会在绝大多数超链接位置使用,其他地方应谨慎使用。

  最最重要的一点是,规范可以灵活应用,但一定要考虑网页的整体配色。

  下图是常用文字颜色推荐,可做参考:


  接着正式介绍几个文字交互效果的案例。

  1. 文字颜色变化和下划线

  鼠标悬停时,文字颜色发生变化和出现下划线很多时候用于网页中的超链接,虽然大部分网站会将超链接文字颜色设置成蓝色带下划线的样式(常规、传统、用户习惯、易读性高),但这并不是唯一的样式。

  超链接除了需要在大段文字中脱颖而出,还应该考虑用户的阅读体验。很多网站的超链接设计在提升用户体验上在不断优化创新。

  在M&M’s的活动网站中,按钮中的小图标本身就有动态效果,很容易吸引人的注意力。


  当鼠标悬停在按钮文字上时,文字颜色和图标发生变化,用户能明确这是一个链接。这类效果让用户体验到和网站的互动,同时它还有一种号召力,暗示并鼓励用户去点击尝试。

  而在苹果官网中,超链接的效果是鼠标悬停时文字出现下划线。


  虽然没有特别设置文字颜色,但文字右侧的小箭头有一个引导作用,让用户明白这里可以点击。当我们把鼠标放到文字上时,文字底部则出现一条和文字同颜色的下划线,强化了链接的特征。

  以上两个案例分别采用了超链接的典型特征,即鼠标悬停时文字颜色变化、文字出现下划线,这样的形式可以实现与用户的良好互动。

  2. 出现新信息

  在十年后网站中,这一部分设计展示了各个分类的名称,当我们将鼠标悬停在某个分类下,交互中会出现新的文字信息,然后文字整体向上移动,向用户展示了各个分类的热门程度。

  如下图:


  当用户第一眼看到这部分时,版块内容干净清晰,他可以直接点击进入自己感兴趣的分类,而当他不知道选择哪个分类时,可以通过鼠标悬停获取新信息,以此了解每个分类的热门程度。

  网站显得动感,还为用户提供了一种选择方式。

  3. 按钮效果

  AnyForWeb网站头部“关于我们”的设计为按钮样式,原本是红色线框红色文字,鼠标悬停时则变为白色文字和红色按钮的样式。


  这样悬停效果展现了网站上独特的小细节,用户不经意发现后,感受到一种趣味交互的体验。

  4.文字悬停动态效果

  下面是网上几个典型的文字Hover悬停效果,希望能给设计师一些灵感。


  在实际网站设计中,很多酷炫的交互效果都出自国外网站,他们注重交互设计和用户体验,并在这些领域比国内发展得更早。不过目前国内有些公司也开始关注这一块,一些新的中文网站开始出现很好的文字交互,成功吸引了很多用户关注。

  具备好交互的网站一定会越来越受到用户青睐,也将会成为网页设计的发展趋势。

  所以咱们设计师也要赶快行动,通过不断的学习和尝试积累经验,再用一些些适用的小创意, 让我们设计的网页Bling~Bling~

时间: 2024-12-21 01:51:09

让酷炫的文字交互效果点亮你的网页的相关文章

ps绘制酷炫的文字人像效果

  编者按:这类超酷的效果常用在选举海报上,今天我们也带同学们来撸一发.教程不难,关键是置换滤镜和最后的技巧,效果绝对让你惊喜~ 教程效果不同的,尝试下换个字体,缩小上下间距.   在这个教程中,我们用的图来自电影<美国总统>,文字是随便找的一篇演讲稿.   图找到后裁剪一下,符合你要的海报尺寸.   添加一个黑白调整图层,参数如上图或自定义.   添加高斯模糊滤镜,大小为20px,让画面变得柔和.(这一步记得应用在原图上,不是调整图层)     分类: PS图片处理

PS教你绘制酷炫的文字人像效果

  这类超酷的效果常用在选举海报上,今天我们也带同学们来撸一发.教程不难,关键是置换滤镜和最后的技巧,效果绝对让你惊喜~ 教程效果不同的,尝试下换个字体,缩小上下间距. 在这个教程中,我们用的图来自电影<美国总统>,文字是随便找的一篇演讲稿. 图找到后裁剪一下,符合你要的海报尺寸. 添加一个黑白调整图层,参数如上图或自定义. 添加高斯模糊滤镜,大小为20px,让画面变得柔和.(这一步记得应用在原图上,不是调整图层) 保存成PSD文件,然后Ctrl + Alt + Z 恢复到高斯模糊前的效果.(

通过JQuery实现win8一样酷炫的动态磁贴效果

相信大家喜欢这个界面无非也是喜欢它的动态磁贴.刚好今天研究了一下如何通过JQuery在网页上模仿这种效果,就贴出来给大家喷一下.虽然是一些很低级的技术,但是也希望有需要的朋友可以参考下   我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品.所谓全新,是指在用户体验上,苹果这些年的成功使得所有 产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价, 事实上从整体上来说,微软

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)_jquery

我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品.所谓全新,是指在用户体验上,苹果这些年的成功使得所有产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟. 写的不好,欢迎各位看官指正批评,不欢迎无故猛喷.大神请绕道. 废话少说,

设计参考:25个酷炫的泼溅效果网站设计实例

泼溅可以用于网站和图形设计以制作有趣的可以吸引用户的注意力的效果.本文中我们将展示很多来自于各种不同类型的设计的实例.在你的项目中使用这种效果的最简单的方法是发挥Photoshop笔刷的优势,这可以大大的减轻你的工作量并快速创建酷炫的泼溅效果. 1.Nike 2.Technix 3.Design Was Here 4.Chaotic Typo 5.Colours 6.The New Classics 7.USMP: Carrera con Futuro 8.Free Your Mind

Photoshop制作酷炫火焰光斑人像效果

  Photoshop制作酷炫火焰光斑人像效果           效果图非常酷,制作的时候先用滤镜得到人物轮廓,再调出轮廓选区,并转为路径;然后用设置好的画笔描边路径得到一组光斑;分别提取轮廓及光斑选区,并复制背景图片中的图像;处理好明暗后,上色,润色,得到想要的效果. 原图 最终效果 1.打开原图素材,按Ctrl + J把背景图层复制一层,得到图层1.对图层1执行:滤镜 > 风格化 > 照亮边缘,设置:5/6/12.确定后按Ctrl + Shift + U 去色. 2.进入通道面板,按Ct

photoshop如何设计超酷炫的喷溅海报效果

  photoshop如何设计超酷炫的喷溅海报效果.教程简单实用,首先将要加喷溅的实物物体局部删除或涂上背景色,然后添加蒙版,用喷溅画笔等涂出喷溅效果,后期再对局部细化即可.下面就让小编为大家讲解: 分类: PS入门教程

Illustrator绘制多彩酷炫的圣诞节火鸡效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下绘制多彩酷炫的圣诞节火鸡效果的教程. 教程分享:   一.准备好手型轮廓 第1步 下载教程附带的001.JPG 微盘下载 文件并在Illustrator中打开.你也可以自己把手按在纸上画一个,然后把它扫描进电脑里. 将这个手型轮廓拷贝进一个新文件,然后选择"对象--图像轨迹--创建"来将轮廓线转换为矢量图形.   第2步 将新转换为矢量对象的手型轮廓线扩展.   第3步 我将轮廓线的颜色改为了深紫红色(颜色代码#330033

Illustrator路径混合工具绘制超酷炫的标志字体效果制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下路径混合工具绘制超酷炫的标志字体效果制作教程. 教程分享:                   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的路径混合工具绘制超酷炫的标志字体效果制作教程解析分享的全部内容了,各位使用者们看到这里小编相信大家现在是非常的清楚了制作方法了吧,那么各位就快去按照小编上面的教程去绘制自己喜欢的标志字体吧.