2013年最值得关注的网页设计趋势

类别:移动互联网 | 发布时间:2013-2-10 0:51:36 | 网迅科技  |  阅读次数: 


 

11.主页特点巡回

在网上新产品通过滚动图片展示和示例视频都很常见。着陆页和新建页面经常尝试使用一些甜头来诱惑潜在的客户。如果你知道如何在网站上将东西构造的很好,它的作用将会很明显。

推荐20款2013年最值得关注最热门的网页设计

回顾2012年我会说此趋势最好的例子是MediaFire’s homepage.这个页面的整个头部是在一系列幻灯片之间滚动。每一个幻灯片都表述了你可以在MediaFire做什么同时阐述了和其他网站的对比他们的特点。帮助此例子表现突出的依旧是他们使用的大插图和图标。这是一个不适合全站使用的趋势,你仅仅可为某些产品以此来吸引更多的关注。

12.滑动的网页面板

过去当flash和Actionscript很盛行的时候,滚动的网站很火。而现在,动的效果已经可以通过Javascript和JQuery实现,并且依次影响了设计师建设网站的方法。我是偶然喜欢上滚动面板技术并且希望在2013年看到更多。

推荐20款2013年最值得关注最热门的网页设计

立马点击,你或许会想CaptainDash是一个普通的网站,可是当你通过导航点击的时候,你会发现每一个页面都是通过左右连续推动加载的。这些动的效果并不总是对手机用户是个好的兆头。

若你可以通过响应式布局来处理它们,又或者有可供选择的手机站点,滚动效果在手机上就会很酷,值得一试!

13.移动导航切换

当谈到响应式设计时,最难的问题之一是如何创建一个靠谱的导航。你希望能给用户对你所有重要的链接以直接的访问,而不要淹没在页面中而使其难以辨读。先保持导航隐藏当需要时再出现也是一个很好的点子。

推荐20款2013年最值得关注最热门的网页设计

进入移动导航切换菜单漂亮的设计趋势,Treehouse Blog是极少数将此技术在智能手机和pc端浏览器表现都很耀眼的例子之一。但是有许多网站和工作室在他们的个人响应式布局中使用了此趋势。

我所喜欢的导航切换是你可以以多种方式设计导航,你可以有从头部到底部的导航或者往下滑动,又或者左右推动内容。设计师有许多玩的选择但是对于UI实验需要更多的时间。

14.全屏排版

前面我提到过使用超大图片作为网站布局的背景,这种趋势依旧可以延伸到文字排版上,设计的你网站文本完全适应浏览器。一些用户可能感觉到很恼火,但是如果布局对于超大文本很合适这也不是常有的事。

推荐20款2013年最值得关注最热门的网页设计

Alex Pierce有一个很棒的专注于排版布局的网站,你可以通过CSS3的属性看到富文本效果。另外这个网站很容易被导航以及许多其他页面的元素显示的也是超大的。

独一无二的大字体样式可以像超大图片一样突出,同时我确定在新的一年我们会看到这种设计会得到更多的评论。
 

15.编程接口和开源

开源软件已经存在数十年了同时自从它存在就改变了网络。但是在2012年里我注意到有更多的关于开源软件涉及到网页组件、布局、动态效果。典型的是我们可以谈论免费网站模板,布局或者像WordPress的CMS软件。

推荐20款2013年最值得关注最热门的网页设计

Github这样开放的编程接口和资源不仅允许设计者进行原型布局,还可以在页面上制作动画和效果。在网络上jQuery事实上有无数的插件供免费下载使用。

说真的我不希望开源项目在任何时期发展缓慢,现在就是该开始并且促进在创建网站领域知识的时候。

16.深度盒子阴影

我在2012年的文章中已经讨论过CSS3的盒子阴影,这种趋势已被证明是非常准确的。事实上,我经常希望看到在现代网页设计中加入盒子阴影效果。这种效果看上去很神奇,它们从来不会偏离美学除非过度使用。

推荐20款2013年最值得关注最热门的网页设计

我相信在前些年设计师遇到的问题源于盒子阴影太难而不容易实现。往前推几年,这种效果需要Javascript或者在photoshop中制作阴影背景,而现在阴影盒子可以在CSS中使用几行代码来生成。

我将会在整个2013年留意盒子阴影效果。我想此效果已经在设计社区根深蒂固,现在更该关注的是谁最有创造力的实现盒子阴影效果。

17.CSS3动画

CSS3 带有相关浏览器前缀的transition属性允许CSS实现像Javascript一样的动画效果。设计师现在能以不同的CSS属性实现动画效果。我有许多恰当使用过渡效果的hover effects and form input fields例子。

推荐20款2013年最值得关注最热门的网页设计

另外一个优秀且激动人心的例子来自CSS alerts tutorial on Codrops。提示你如何为各种不同的动画设置时间。

我对新的设计师推动不通过脚本来实现的动画充满信心。
 

18.垂直导航

当我第一次注意到不同的网站使用此趋势的时候,并不是很感兴趣。可是在过去的一年里,我看到越来越多的设计师创造了完美的垂直解决方案。当此布局被正确的完成,垂直网站布局可以容纳充足的内容同时具有好的设计体验。

推荐20款2013年最值得关注最热门的网页设计

Riot Industries的组合对于新设计师是个很好的例子。查看一下导航链接是如何工作的,在移动上去是整个组合动的效果是如何实现的。边框纹理确实展现了一个左右两列分开的线。

纹理效果同样在另一个垂直布局上出现,例如CSS画廊Design Bombs.

推荐20款2013年最值得关注最热门的网页设计

19.单页面网页设计

单页面设计是一个很大的话题,覆盖了许多不同网站分类。显而易见自从万维网创建单页面网站就出现了。但是最近几年这种趋势变成了一种更加自然的用户体验。

推荐20款2013年最值得关注最热门的网页设计

我想为Cage App设计的网站或许是这篇文章中列出的例子中最棒的一个。他们利用单页布局通过水平布局鲜明的展现出内容。但是你还会注意到页面的顶端有一个模糊的背景图片效果。

随着你往下滚动页面,导航条一直固定在你的浏览器顶部。合并其他的网页设计趋势到单页面布局里面是吸引用户注意力和创建一个迷人的网站的解决方法。

20.圆圈元素设计

这一圆圈设计趋势在网站布局是比较新的且已经被赋予了很多的关注。设计师喜欢圆圈设计,因为它们干净、整洁,一般适合任何块状布局。你可以构建你的原形或者把你的页面元素更改为圆形设计(例如用户头像、分享按钮、发表日期等等)。

推荐20款2013年最值得关注最热门的网页设计

Lucia Soto组合基本上是圆形网页设计中很棒的一个例子。这个网站是动态创建的所以你得在页面上水平移动不同的片段。您也将注意到一些可爱的向量艺术品以及星罗棋布的间隙。Web设计师渴望这些额外的花絮在页面布局上,因为他们透露出唯一性。

你可以在Site Optimizer主页上发现一个简单的例子,它使用了圆形页面设计作为他们服务的信息卖点。

结束语

当创建数字产品时,用户界面是最复杂的话题。尝试着使导航和内容样式获得成功的用户体验。这些设计趋势目的是给设计师指明正确的方向。

我希望你可以接纳其中的一些想法并且思考他们如何影响如今的网站。你可以在较小的环球公司和其他所有网站上找到这些新兴的趋势。如果你正在提醒思考这一曲线并且希望分享2013年设计趋势观点。就在文章下面的讨论区留下您的评论。

此文关键字:2013年,网页设计趋势

在线项目合作

网迅科技结合创新的设计理念与专业技术,为客户制定从策划到创意再到技术的系列支持,帮助企业通过全新的媒体展示平台实现更多价值。如果您喜欢我们的项目,有兴趣合作?请您联系我们,以便我们能够为您提供可行的价值服务。