LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
让酷炫的文字交互效果点亮你的网页
2016年8月8日

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

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

022359568e1acc32f8754c807bd08d

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

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

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

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

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

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

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

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

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

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

02d97e568e1ae26ac725bb5c2e3bd2

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

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

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

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

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

02fa07568e1af932f8754c80b97fd7

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

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

0224a8568e1b0a6ac725bb5cc5763f

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

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

2. 出现新信息

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

如下图:

02e352568e1b1c32f8754c802becea

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

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

3. 按钮效果

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

0259a1568e1b2c6ac725bb5ccea377

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

4.文字悬停动态效果

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

020a6f568e1b466ac725bb5c767011

02b64d568e1b4732f8754c80b7a58d

0258c0568e1b476ac725bb5cb9d079

026ecf568e1b486ac725bb5c4c5db7

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

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

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

微海报分享

Related posts

2020年9月14日

国家职业资格培训鉴定实验基地BIM证书


Read more
2020年9月14日

绿色建筑产业联盟BIM证书考证


Read more
2020年9月11日

2019全球建筑学院排名TOP 20


Read more
2020年8月6日

Illustrator快捷键


Read more

搜索本站

最新文章

  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日
  • 住宅小区BIM咨询 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模