020-85548809,29883069

网站设计、网站优化、微信开发

资讯

分享你我感悟

您当前位置>主页 > 资讯 > 2013年网页设计趋势回顾

2013年网页设计趋势回顾

今年带来了强大的新的UI概念,开源项目,以及新的黑客/技巧的网页设计师和开发人员。那些对网页设计感兴趣的人们应该都已经觉察到网页设计正在稳步改善。回首十年之前的2003年,你会发现互联网已经走过了很长的道路而且还有很长的路要走。
在本文中,我想跟大家一起回顾一下2013年一些比较流行的网页设计趋势。有些网页设计模式已经持续多年,但在今年到达了一个高峰,不但
被更多的设计师所熟知,而且在技术上也得到了相应的改善。

动态网页设计

这一直是我最喜欢的话题之一,因为其令人难以置信的进步与jQuery插件值得讨论。我喜欢演示许多JS库,但jQuery仍然是我做任何新项目的选择。

jQuery的插件unheap画廊 - 动态输入表单

最近我发现一个资源,它收集了很多非常方便的jQuery插件来帮助提高用户体验。这个资源上面还有其他的一些插件,但其不断增多的插件目录每次都让我感到头晕。并且你会发现很多如浮动标签,输入验证,自定义单选按钮,复选框,甚至可以选择的下拉菜单等的东西,那些令人眼花缭乱的选择会让你更容易放弃通用的输入方式甚至放弃去自定义设计你的漂亮的交互式网页设计。


单页面布局

没有大量的上下文信息的网站通常会构建成一个单一的页面。这种趋势已经持续了多年,但它也已经发展成为一种较新的整体设计趋势。

将网站导航设计成随着用户鼠标滚动而切换的模式已经是一种习以为常的网页设计模式。这种设计模式使网站内容全部集中于一个页面上,而导航就像一个滚动条,用来解决页面的跳转问题。这种视差单页网站使用动态背景元素同样的功能。

设计师或创意艺术家以及网络营销团队有时会倾向于对这样的设计布局。你可以将你的设计工作聚焦与这样的网站设计以及细节布局上,单页面网页设计能够大大减少HTTP请求的时间。你仅仅需要去考虑一个单页网站设计如何来规划,你会发现这一场头脑风暴能够给你清晰的指引。

动画页面元素

这是在一些好奇的开发人员的带领下成为潮流的新兴网页设计模式。值得注意的是我发现网页动画在ThemeForest WordPress主题中层多次出现。或者你可以看看这个themeforest wordpress主题bluap CSS3动画关键帧的例子。

themeforest wordpress主题bluap CSS3动画关键帧的例子

这些网页的动画可以用CSS3关键帧设计,能够在浏览器窗口检测到&#106avascript元素。这种趋势是完全的审美效果设计,因为它不会产生任何新的内容,或添加到UI,除了整齐的视觉效果之外。并且,不是每一个这样的设计都支持在较旧的计算机或移动设备上访问。

在Android / iOS移动设备应用软件库中这样的网页动画设计经常出现。由于这些通常是单一的分页布局应用,目的是吸引大量游客前来下载。因而,在将来,我们将看到更多的这些动画效果网站出现。

无限滚动

当我第一次使用这种设计模式的时候,我发现其Cookies跟踪是一个非常难以破解的存在。但是在WordPress中的CMS系统,你还是可以找到一些免费的开源插件来使用。但定制版式,动画,需要加载的项目等,对于一个没有&#106avascript基础的设计师来说还是存在一定的难度的。

不过,我觉得网民们已经慢慢习惯了这种无限滚动的技术。Reddit Enhancement Suite有一个插件可以使网站在用户浏览到网页底部的时候自动切换到下一个也没。目前Tumblr与一些电子商务网站已经开始使用这样的网页设计模式。源自阿贾克斯的分页设计让无线滚动网页比跳转到新的页面要节省更多的时间。

cocosa无限滚动的电子商务网站布局截图
cocosa无限滚动的电子商务网站布局截图

应该注意的是,在任何情况下,这种设计模式的倒式设计并不存在。而一旦该div开始触发一个Ajax调用(在可能的情况下),它将有助于建立一个链接到每一个新页面的分页格。无限分页可以扩展成为正式的博客,甚至其他社交网络/社交媒体项目。

更精细的字体设计

尽管这一趋势已经流行多年,但我还是很少见到有使用出色的自定义字体网站。CSS3的@ font-face声明可以访问您存储在服务器上的任何网页安全字体。

谷歌还通过谷歌网页字体来提供一个特殊的字体服务。该团队经常更新一些新的东西但同时保留所有旧的字体。谷歌最好的地方在于使用他们的主机不需要花费你一毛钱,不管你使用了多少流量。其高级字体服务,如Typekit有一个更大的数据库以供选择-但这是是有偿服务。

CSS字体栈家庭产生的webapp 2013

CSS字体栈家庭产生的webapp 2013

撇开这些自定义字体不谈,现代笔记本电脑和PC都提供了大量的字体压缩包。随着越来越多的电脑用户升级到更好的系统,我们可以预期这种趋势将有所改善。试着用一个在线Web应用,如播放CSS字体库来根据各地的操作系统预设值为您的网站编辑不同的风格。

矢量图标

我首先想到的图标总是估计CSS3网页字体,它真是盛极一时的很棒的字体库,其中包括数百种独特的图标。这些可以显示为特征的图标,或者甚至字形上的用户接口按钮。您还可以享受多样化选择。

平包图标UI的免费赠品开源字体

平包图标UI的免费赠品开源字体
但矢量图标正在扩大远远超出了普通字体为基础的解决方案。一起来看看这些图片图标和货币图标,它们都是iOS应用程序中的样式。这些都是使用纯CSS代码生成的并可随意调整大小。除此之外还有类似的案例----我只能想象这一趋势发展的速度有多快。

另一点,有关的矢量图标是利用SVG文件类型。这些自然向量不包含像素,但坐标轴可以解释如何绘制图像。你可以阅读更多文章以便深入了解可扩展的SVG图像。这些想法大部分都还很新,但绝对具有发展的潜力。

进入2014

每年我都会浏览一些使用这些设计手法所设计的具有代表性的网站。我不认为这是趋势的预测,而更像是一种发展模式。网页设计师是非常有创意和最有才华的艺术家,它们将将打破设计极限,将更多猜想变成现实。以下是值得关注的一些可能会贯穿整个2014年的网页设计发展趋势。

定制数字媒体

我第一次开始网站建设是使用Adobe Flash创建的MP3播放器。实际上这个播放器不太支持&#106avascript,因为许多浏览器都没有安装&#106avascript脚本,并没有强大的开源库(例如:MediaElement.js)。

视频播放器也一样,你会发现在YouTube上也是在Adobe Flash + ActionScript中创建的。值得庆幸的是多年的技术进步提供了一个更好的解决方案,集成HTML5视频使用&#106avascript / Flash,该MediaElement.js脚本可以称呼镜像经典的YouTube视频播放器,还有许多其他的皮肤可以进行切换。

MediaElement的脚本Windows媒体播放器的皮肤

MediaElement的脚本Windows媒体播放器的皮肤

该播放器将与HTML5/CSS3/JS在支持的浏览器来构建。由于HTML5并不能支持所有的脚本,旧的浏览器无法支持Flash / Silverlight程序,只能用其他同类的程序来代替。随着时间的推移,我希望这些新媒体解决方案将成为音频/视频播放的标准解决方案。

互动式webapps

Web 2.0这种趋势从用户数据集开始。数据库和服务器性能的提高事我们的网站变得更加突出。我能想象在不久的未来某一个阶段,HTML5/CSS3/JS Web应用程序将服务于不同的行业。

网络爱好者往往首先尝试这些小的网页APP。我觉得像项目InstantName或GenerateWP。但是想象一下,这些应用程序将应用到房地产,股票和债券,烹饪,制造等领域,如果有一天这些想法被实现,我们可以看到设计师构建的HTML5网站会看起来像原生态的Android或iOS应用。

活泼的页面背景

如果在网页背景设计中使用CSS3将会有多酷?那么视差风格的元素使用动态向量或PNG图片?我们已经可找到以大量使用全屏图像或视频的网站---而这可能仅仅是一个更伟大的设计的开始。

如果设计师对独特的背景情有独钟,我们可能会迈进一个更广阔的新世界。让一个网站在全世界范围内访问都畅通无阻依然是一个丞待解决的问题,但更集中的W3C标准将让着想法变得更加容易实现。

写在最后:

2013年是令人震惊和欢乐的一年,很多优秀的设计让我们大开眼界的同时也给我们节省了不少的设计时间并给我们带来了更多的设计灵感,2014年我们希望更多的令人惊奇的设计会出现在我们的眼前。

,