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年7月26日

网页设计中使用透明元素,即美观又棘手。为什么这么说呢,当你某个模块的透明度没有把握恰当时,可能难免造成体验失调,字体信息不清晰,信息捕获不明确,主次不分明,色调失调。所以一个透明度却能造成这么多严重后果?当然,细节成就美,但是我们只要主题运用细节,相信能发挥透明元素的作用,让你的网页更加栩 栩如生。由于国外网站原创性比较高,下面我将采用国外的一些案例来做一些研究探讨。(当然不是说国内网页不好哦,但是国内和国外还是有一定差距的,我们是不断学习,不断借鉴,不断创新的,国外的设计师,可能时时都会比我们快一步,我们怎样比国外设计师快?这个,我将在以后进行对自己的一个分析,来进行一个探索。)

1.内容模块和网站框架的对比
运用透明图层,不透明度在80%左右,让字体清晰可见,避免挫伤用户体验。
下面的例子是创建对比度,区分内容模块的运用

m_1355389597094

大家常见的灯箱效果,就是一个透明度和背景造成对比的运用,让用户很容易区分。

m_1355389618111

2.半透明导航的跟踪运用
新浪微博,腾讯微博等等,都在顶部导航上做了半透明的处理,用于固定浮动来跟踪用户页面的浏览,方便用户操作主导航。这样的运用很常见

m_1355389905478

3.使用较小的透明模块来衬托网页背景,有层级关系
网站的封面有着至关重要的作用,因为用户在7秒(营销的用户停留捕获时间,有相应的知识)内会做出对需求的反应,因此让你的页面不再单调,使用合适的文字和透明模块,进一步突出重要信息,让页面层级分明
m_1355389930057m_1355389951020

4.采用透明为艺术方式进行页面设计
如何保证网站信息的可读性?透明区和不透明区的空间比例,是信息展现的重要规划。将透明作为一种艺术表现,是值得借鉴的方式
下面的例子是将透明区块做主导空间展示的规划。网站整体信息都在透明区域显示m_1355389976177m_1355389988758

5.网页元素(例如图标、背景图片、产品图片)千万要避免设置透明
透明的设计,应该在一个交互影响的范畴内设计,避免使用透明图标,透明产品图片等细节元素去做透明,这样将大幅度降低用户的信息可读性,您可以运用图片倒影,图标阴影等手段进行“美化设计”

m_1355390002741

m_1355390018376

6.将背景设计成透明场景,适当加上透明元素造成视差效果,学会创造网页场景
生活中有很多有透明感的东西,玻璃,水,窗户,电脑屏幕等等,都可以利用它们的透明感,来进行场景化的设计。这里设计者故意营造视差效果,造成一种3D错觉,可以让网站更加富有质感和活泼气息

m_1355390044748m_1355390045026

7.页面中静止或者有运动嫌疑的图片,可以适当采用透明度设计,可以以此增加网站的交互性
比如活动的炫丽图标,活动的可以旋转,缓动的图片导航菜单等等,让整个网站跳出传统布局,产生新颖感

m_1355390072437m_1355390072856m_1355390073538

8.鼠标hover的友好交互透明体验
照片展示,导航等,都可以由设计者创造鼠标hover的悬停体验效果,这样利于信息主次的区分和捕捉

m_1355390092511

总 结:透明网页的运用,不仅仅只是在设计方式,表现方式上运用,还可以用于交互性,3D,视差等效果的创意,可以运用于现实生活,设计“抄现实”的页面,透 明可以运用于静止,运用于运动,甚至运用于给人感官造成的不存在的地方,更多的,是我们多研究,多借鉴,欣赏更多的优秀网页,来寻找更适合自己的方式方法。

多一个方法,就多可以一个创意,嘿嘿~谢谢大家的支持!多多交流嘿~每隔一段时间我都要在网页设计的各个方面做一个研究探讨,以提升网页设计水平。互相学习交流!

微海报分享

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咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模