主流网页设计风潮

发布时间：2024-08-29

<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">一.滑动优先于点击<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">现在已经是移动互联的年代，移动设备占据了用户大量的网上浏览时间，而移动设备的特点是屏幕相对比较小，而控件一般设计的比较大以方便点击。所以用户更希望的是能随心所欲的通过指尖快速的浏览到指定的信息，而非通过鼠标慢慢的往下拉，然后找到一行小的可怜的链接点进去进行查看。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">所以这个时候的设计更多应该是手势操作优先，让用户可以通过手势快速的定位到自己想要的内容。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">况且现在移动互联网的用户越来越懒，很少人有耐心去一个个条目仔细去查看去找到想要的内容信息。所以他们更希望的是能快速的在简洁的屏幕上定位到自己想要的目标，如果能不让自己动手就能自己出现就更好了。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">二.折叠显示将成明日黄花<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">正因为现在对页面进行滑动是如此的简便和随心所欲，且当今的智能设备的大小型号琳琅满目，所以因为一些内容过长而进行折叠显示的方式已经过时了，仅仅将一些关键信息显示给用户，当需要的时候再去点击个“＋”号什么的进行展开。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">同时也再没有必要在一篇文章的前面堆积大量的文字内容来让用户知道你下面将要描述的是什么内容，因为用户很容易就能通过手势操作滑动到它想要看的内容上面去。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">所以取消折叠内容的显示，也肯定是将要风靡<a href="http://www.mcykj.com/" target="_blank" style="box-sizing: border-box; padding: 0px; margin: 0px; background: transparent; color: rgb(51, 51, 51); border: none; resize: none; font-family: 微软雅黑, "Microsoft YaHei"; font-size: 16px; text-decoration: none;">网页设计</a>界的风潮之一。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">三.快速的呈现和简约的设计<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">在当今这个生活节奏这么快速的年代，什么最贵？时间最贵。每个人都在争分夺秒的不甘落后的往前狂奔，而因为通过应用或者网页找到一个想要的内容却要耗掉好几十秒的宝贵时间。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">所以我们的设计要迎合这些暴躁的用户的需求，在能快速显示之余，还要能足够简洁的将内容显示出来让用户能快速的弄懂这是怎么一回事。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">简洁快速的设计应该是让人能够快速的打开并能愉悦的开始欣赏里面的内容的，而不是等半天只显示了一半内容，或者内容显示出来了却耗掉用户半天时间才发现这里面根本没有客户想要的东西。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">现在炙手可热的扁平化设计其实只是一个开始，其最终的目标瞄准的就是简洁和实时性。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">四.矢量图将迎来春天<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">相信大家在欣赏一个朋友通过微信发过来的声称有亮点的图的时候，应该都会尝试将其进行放大再开始亮点查找。而随着现在Retina屏的流行和现代浏览器地矢量图的支持越来越好，所以一度因实现和支持难度而少人问津的矢量图相信将会再次回到风口浪尖上，因为如果是矢量图的话，无论你做多大比例的缩放，它都不会失真。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">而其实现在这种风潮已经初露端倪，你看下当今流行的字体图标和谷歌在大力推的Material Design就可见一斑了。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255);"> <p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">五.动图将上演王者归来<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">曾几何时，动图曾经到处泛滥，泛滥到在你的网站需要更新的时候都要在上面贴个“网站正在更新”的Flash上去。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">但是现在情况有所转变了，不少的流行因素正在试图让动画上演一出王者归来的好戏。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">扁平化设计的流行：正因为太扁太平太飞机场般的过于单调，动图的作用就显示出来了。只要你不像以前一样在你的网站上铺天盖地的使用动图，那么它就能将很多东西融合在一张动图中来给你扁平略显单调的页面带来不少的活力和视觉冲击。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">移动应用的风靡：移动应用对人们的预期重新进行了定义，它更多是通过动画来传递不同的意义，而我们的网页设计也很应该开始效仿。<p style="box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: rgb(102, 102, 102); font-family: "microsoft yahei"; font-size: 13px; text-wrap: wrap; background-color: rgb(255, 255, 255); line-height: 3em;">HTML5等新技术的支持: 这些技术让我们不需要安装任何插件的情况下就能使用动画。

上一篇：定制网站与深度网站策划的区别

下一篇：增强官网用户黏性的方法