1. 首页
  2. 设计网站
  3. 正文

怎样让网站更出彩?一文了解网页交互设计

  在浏览一些网页的时候,感觉空有一副美观的皮囊,却少了些什么。为什么不交互创新一下呢?比如从这个网页进去时,内容会有入场动效,用户就会很惊喜。那么,先让我们了解一下什么是网页交互吧。

  一、网页交互的概念

  网页(Web端页面)交互的概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量,页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态(鼠标短暂的点击时属于“选择时”,若长按有内容影响则属于“运行时”)。


  二、网页交互支持

  网页交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互,个别网站的产品可能会涉及麦克风声音采集或摄像头应用。


  三、交互影响的元素

  简单来讲,包括看得见的元素、听得见的元素。听得见的元素是声音,涉及一些音效的交互控制。而看得见的元素则会相对丰富很多,可以归为颜色、文字、图形、动画、按钮、控件、模型等。



  四、Web端内容呈现结构


  因为电脑显示器更大的缘故,Web端结构上比移动端更加灵活,同时根据产品的性质也有需要考虑移动端响应式的需求,一般来讲这些页面结构可以分为这六类:上下长屏滚动,全屏上下滚动,全屏左右切换,全屏页面覆盖,自适应平铺,三维场景呈现。

  五、网页的组成区块


  网页的组成区块通常分为五大类型,即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类,也有个别是通过点击弹出的导航。内容布局则更是五花八门了,是版式与技巧的呈现了。

  了解网页交互常见的形式和呈现结构,结合页面设计,让网页“动”起来,使用户获得优质的浏览体验,让网站更加出彩。

    延伸阅读

  • 怎样让网站更出彩?一文了解网页交互设计

    在浏览一些网页的时候,感觉空有一副美观的皮囊,却少了些什么。为什么不交互创新一下呢?比如从这个网页进去时,内容会有入场动效,用户就会很惊喜。那么,先让我们了解一下什么是网页交互...

  • 网页交互设计的优缺点

    什么是交互式网页设计交互式网页:交互式网站主体设计使用程序语言(ASP、PHP、Java等),多数基于数据库,页面制作中使用辅以JavaScript脚本语言、精美的页面、生动的...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/7956.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();