一年将又过去了,让我们来看看跟着下来的一年网页设计将会有什么新趋势。网页设计如万物般变化万千,但总有其规律,我们是可以预见它即将要变化的地
方。随着时间的迁移,人们的视觉的改变,网页设计趋势的改变是必然的,作为网页开发者,网页设计师,需要做的是紧跟时代的脚步,时刻关注网页设计趋势的变
化而变。

澳门葡萄京官方网站 1

  《Web
前端开发精华文章推荐》2013年第四期(总第十六期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的
Web 开发工具,希望这些精心推荐的文章能够帮助到您。

澳门葡萄京官方网站 2

在过去的2012年里我们看到了互联网的快速发展,各种技术的更新换代。对于网页设计师来说2012年也是很特别的一年。在这一年里你会发现很多东西就不一样了,几年前谈论的概念性的东西似乎在这一年都看到了原型。网页设计也不再循规蹈矩。各个公司和企业都学着跳出固有的圈去思考和创意。把用户体验提到了最关注的位置是一个重大改变。那么在新的2013年,网页设计还会有什么热点需要我们去注意呢。随着移动端智能设备用户数量的激增,我们要如何去思考和准备呢。今天,我们就归纳了2013年关于网页设计的20个趋势热点。认真阅读和思考,你会得到更多的想法思路。1、布局响应推荐阅读:响应性的Web设计的系列文章。2、视网膜支持视网膜屏幕基本上都是两倍致密于任何普通液晶。这意味着网页设计师需要做出两套设计来满足不同的屏幕。首先,你需要两倍分辨率的图片,然后保存一个“标准”版本的一半大小。我最喜欢的Web设计工具之一是retina.js。这是一个JavaScript库,用于在你的用户视网膜设备的浏览器上自动显示2倍像素的图片。3、固定标题栏使用CSS的position:
fixed;属性是一个伟大的方式来控制到您的网站的标题栏。当参观者向下滚动您的网页,这将会一直提供导航和返回主页链接。这种趋势已经存在了一段时间,但现在我们相信还会持续下去。固定头非常有意思,提供了出色的用户体验,无需上下滚动页面即可进行导航。4、大图背景摄影师或摄影迷一定会喜欢这样的设计趋势。我看到了无数的展示,讨论过大的摄影背景的想法。这是一个很好的方法来捕捉访问者的注意力,并且完成以后非常好看。我常常喜欢大照片,因为它们很养眼。当混合到你的布局,这样的设计可以让您的网站具有更好的粘性。5、CSS透明度6、简约的登陆页面澳门葡萄京官方网站,极简主义:让一切简单,专注于自己的核心产品。推荐阅读:
美丽的登陆页面:提示和例子7、数字QR码随着丰富的移动智能手机的QR码应用程序的激增。你会发现这些标签随处可见,从餐厅到活动场地到交换的名片等等很多。推荐阅读:
产品营销快速反应码8、社会化媒体徽章热门资源在线分享的例子有很多。如何让浏览者去积极的响应社交分享的图标,让网站资源得到更多的分享是需要考虑的问题。下面,我列出了一些社会化媒体的徽章,你可以尝试在自己的网站布局。StumbleUpon的徽章谷歌+1按钮Pinterest的按钮LinkedIn分享徽章黑客新闻投票徽章Dzone投票按钮免费社交媒体图标集
– 最好的100
+非常美丽的Twitter的图标和按钮9、详细的插图插图一直是一些网站的主要风格,也一直都非常受到欢迎。但是寻找插图网页设计师并不是很容易。插图可以给您网站带来不同的艺术表现形式。推荐阅读:
50美丽的手工绘制的网页设计10、无限滚动这个技术去年相信很多站长都接触过。相信在2013年还将持续。11、主页功能浏览滑动的影像展示和演示视频都是非常普遍的。12、滑动页面Flash和ActionScript曾风靡一时。现在风靡的是JavaScript
/
jQuery的动态效果,这对于网页设计师来说影响非常大。我们总是能看到不错的好的酷的创意。13、手机导航切换阅读:
移动应用程序的设计/开发:构建jQuery导航14、全屏幕排版我在前面提到过,使用大的照片背景,网站的布局。这种趋势可以扩展到专注于排版以及设计您的网页上的文字,使其充满整个浏览器。有些用户可能会发现这很讨厌。大文本具有独特的字体样式。推荐阅读:
使用了漂亮的印刷字体的网页设计展示15、API和开源开放源代码软件已经存在了几十年,自成立以来,已经改变了网络。但在2012年的过程中,我注意到更多的开源软件相关的网页小工具、布局和动态效果。通常情况下,我们也可以谈论免费的网站模板,布局。如WordPress。16、深盒阴影17、CSS3动画18、垂直导航19、单页网页设计单页的设计是一个很大的话题,覆盖了许多不同的类别。20、圆形设计元素一些设计师喜欢圆形,因为它们干净、整洁,适合于任何布局块。您可以将您的页面元素设计成圆形。Via
hongkiat

JavaScript

  • zoom.js:一款效果很独特的页面内容缩放插件
  • 构建大型 JavaScript 应用程序的最佳资源分享
  • Chardin.js – 很别致的 HTML 元素遮罩介绍效果
  • 创新插件推荐:在网站中集成 HTML5 绘画功能
  • Responsive Nav:用于小屏幕设备的响应式导航
  • 如何在 Sublime Text 中调试 JavaScript 代码
  • 使用 Sails.js 构建和定制企业级的 Node.js 应用

 当你阅读此文时,你可能会发现有些变化跟“2011年网页设计发展趋势”中提到的相差不大,也可能有些变化你已经意识到。一切都不奇怪,趋势不是瞬间的,趋势的变化是一个过程。

jQuery

  • 精心挑选:8款用于布局和用户界面增强的 jQuery 插件
  • 实用插件:精心挑选6款优秀的 jQuery Tooltip 插件
  • 19个非常优秀的 jQuery 图片滑动插件和教程
  • 8款效果精美的 jQuery 加载动画和进度条插件
  • 为你的网站增加亮点的几款 jQuery 插件推荐
  • Sidr – 创建侧栏和响应式菜单的最佳 jQuery 插件
  • ScrollUp – 超轻量的可定制的回到顶部 jQuery 插件

1、响应式网页设计

我相信将来我们不再会在趋势中讨论响应式网页设计,不是因为它将会消失,而是网页设计必需的原则。不过,我认为2012年暂时不会出现这样的局面。因为它还属于比较新的概念,目前还有很多设计师对该概念还不是很熟悉。

澳门葡萄京官方网站 3

2012年将会有更多的移动设备继续引进和采用响应式网页设计。网页设计师和开发者将会使用将使用流体布局,而不是固定宽度,更多的样式表被查询设备选择
– 这样让网站在不同屏幕尺寸的设备都能够拥有完美的显示。

HTML5

  • 10个让你忘记 Flash 的 HTML5 应用演示
  • 分享8个惊艳的 HTML5 和 JavaScript 特效
  • 在线预览所有原生 HTML5 表单元素效果的网站
  • IVORY – 轻量、灵活、功能强大的前端开发框架
  • 10个让人眼花缭乱的 HTML5 和 JavaScript 效果
  • 那些让人惊叹的 Chrome 浏览器实验项目
  • 20个十分绚丽的 HTML5 Canvas 应用试验

2.固定位置的导航

我们看到很多个人网站和博客已经开始采用这种设计。但我发现这种风潮在2010-2011年期间曾有所回落,但在最近几个月开始回潮。

如果你的网站的导航并不需要放置太多的链接,寥寥几个主要链接为何不保持用户始终可见?这可以大大提供网站的性能甚至更易于融入整个页面布局。这种设计锁定导航和链接/logo在固定的位置,即使用户固定页面也能快速通过导航访问其他页面。

澳门葡萄京官方网站 4

现在使用一些jQuery原型即可快速达到这种效果。即使没有JavaScript,也可以使用一些炫酷的CSS
Code以达到效果。在2011年已经有很多网站的使用固定的导航栏,即导航不随页面滚动或页面切换而改变位置和重新载入,始终悬放页屏幕的一个位置。Simon
Wuyts就是用了这一效果,你可以通过实例体验这种技术。

澳门葡萄京官方网站 5

以前的你可能从不会考虑将页面设计成易于显示的幻灯片风格。不过,这不单能消除分辨率不兼容的顾虑,而且导航系统更易于使用和对移动浏览器完美兼容。在即将来临的2012年里我建议你重新考虑这种设计,重新对页面进行布局。

CSS3

  • -prefix-free:帮你从 CSS 前缀的地狱中解脱出来
  • CSS Matic:网页设计师的终极 CSS 工具箱
  • CSS Beautify – 方便的在线 CSS 代码美化工具
  • 使用 CSS3 实现动感迷人的输入框 – Fancy Input
  • 前端笔记:帮助你美化网站的10+实用 CSS3 技巧
  • 年度盛宴:2012年排名前20位的 CSS 网站作品
  • bluePen – 使用在线 CSS 编辑器美化你的网站

3. 圆形设计

这一趋势其实已在网页设计有点明显,但近几年有点偃旗息鼓。在Web2.0热潮,设计师更注重基于台式机的趋势,如阴影和圆角。但使用CSS3,就可以轻松实现花俏的方块效果。

此外,你可以设计圆形式和阴影不需要使用任何图片。由于这些功能,设计师开始从另一个角度看图像。一直以来我都留意设计师们的各种设计,发现圆形元素的使用频率越来越大。这些圆形设计可以作为导航链接,页脚图标,甚至可用于个人作品等展示。

澳门葡萄京官方网站 6

But the most extreme examples aren’t always the best.
圆形让图像看起来更加光滑舒服,更容易吸引访客的目光和关注。使用这些元素特别标注设计中的特别区域,如有用的资源和主要的页面等。但切勿为了形状本身而
忽略效果,否则适得其反。

澳门葡萄京官方网站 7

精美素材

  • 10大流行 Metro UI 风格的 Bootstrap 主题和模板
  • 『精品素材』20套免费的网页小图标素材下载
  • 『免费素材』15套提升设计的高质量纹理素材下载
  • 35套用于扁平化设计的图标和网页元素《上集》
  • 35套用于扁平化网页设计的图标和页面元素《下集》
  • 一组免费的简约风格表情图标 – Simple Smileys
  • 分享15个精美 Metro UI 风格 WordPress 主题

4. 大幅矢量图

你可以在你的网站使用超大的吉祥物打造你的品牌。几年前你很难在网络品牌中找到使用大量矢量图的案例。但现在设计师的专业水平越来越高,这样我想不到比使用可爱的动画矢量图来营销品牌的点子。

澳门葡萄京官方网站 8

Mozilla和Firefox的动物形象矢量图就是一个不错的例子。MailChimp则又是一个优秀的案例,品牌形象的个子就更大了。无论是网站还是 iOS、Android应用都能清晰看到那只有趣的猴子邮递员。

澳门葡萄京官方网站 9

此外Freelance
Switch网站的吉祥物小帅哥,也是我久不能忘的设计。你可以在他们的网站布局发现各种各样的吉祥物矢量图。这种做法已经成为网站美学的新境界,我有理由相信2012年你将会到处都看到这些可爱的矢量标志设计。

网页设计

  • 流行趋势:25个最佳的扁平化网页设计案例
  • 『优秀作品』20个激发灵感的橙色风格网站设计
  • 优秀案例:40个创意的单页滚动网站作品《上篇》
  • 酷毙了!滚动导航在单页网站中的应用《第二季》
  • 帅呆了!滚动导航在单页网站中的应用《第三季》
  • 经典网页设计:20个美丽的 iPhone App 网站设计
  • 经典网页设计:25个应用视差滚动的单页网站
  • 经典网页设计:16个新鲜出炉的 HTML5 酷站欣赏

5. 多列菜单

不同于前面的例子,有时候有的网站的链接较多需要处理。若按照标准型的导航排列会显得过于凌乱和拥挤,除非你将链接放置到边栏。但经验告诉我们,链接放置在页面顶部,有利于用户体验。

澳门葡萄京官方网站 10

跟着下来的一年或者新的趋势会改变这个局面,设计师可以对页面导航重建。跟着下来的一年或者新的趋势会改变这个局面,设计师可以对页面导航重建。思
维是一张黑白画,但却意境无限,等待你的挖掘。多列布局的导航更美让人看起来更舒服,通过这种方式你可以在Logo周围显示更多的链接给网站的访客。

澳门葡萄京官方网站 11

创造舒适的设计风格的最佳方式是实践,阅读最近的关于网页设计的一些文章来学习Web导航设计的最新趋势。作为设计师,应该拥有跳跃的思维,尝试最新的东西。对标准的导航设计进行改革是每个设计师都要坚持的实践活动。

英文字体

  • 字体大宝库:25款好看又实用的英文字体下载
  • 字体大宝库:15款漂亮的艺术字体免费下载
  • 字体大宝库:16款漂亮的免费英文手写字体推荐
  • 字体大宝库:25款精美的常用英文字体下载
  • 12款吸引眼球的免费英文涂鸦艺术字体下载
  • 字体大宝库:最新25款免费的英文 3D 字体下载

6. jQuery/CSS3/HTML5动画

我经常推荐的jQuery插件。网页设计必须包括用户体验、美学和动画等多方面的内容。随着JQuery和CSS3的不断进步,现在可以用很少的代码就能达到非常酷的效果。

过去的一年我不断地学习网络上相关的教程。了解到jQuery是目前前端效果最优秀的但并不是所有浏览器都支持。因此,通过CSS来实现浏览器兼容也不失是个好办法。2012年越来越近,相信开发者们又有了新的动态,让我们拭目以待,期待jQuery/CSS3/HTML5时代的到来。

实用工具

  • 《今日推荐》值得一试的8个 Web 开发工具和资源
  • Feedly:替代 Google Reader 的最佳 RSS 阅读器
  • Drawscript – 把 Adobe Illustrator 图形转换为代码
  • iCheck:超级精美的自定义复选框 & 单选按钮
  • modern.IE – 微软发布的 IE 兼容性测试工具和资源
  • Giphy – 分享一个很棒的 GIF 动画图片搜索引擎

7.丝带及横幅图形

在2011年我就开始密切注意到这样的设计元素。设计师们开始编写关于设计丝带风格页面、横幅、书签或其他类型的徽章的教程。大量免费教程的出现使得越来越多设计师开始跟随这样的趋势。

澳门葡萄京官方网站 12

你很可能为过去短短的6个月里出现这种风格设计的网站的数量感到惊讶。勇于尝新的设计师们频繁在新的软件和移动应用程序中使用丝带设计风格。此外你
会发现博客免费下载或者热门文章栏目使用这类的横幅设计。我还特别地收集了这类的设计的PSD素材,有兴趣的可以尝试下载来参看下:

  • Corner Ribbon
  • Dark Slider with Featured Ribbon
  • Colorful Ribbons
  • Green Corner Ribbon Templates
  • Simple Product Box

创意欣赏

  • 设计前沿:30款超级精美的 iOS 图标欣赏
  • 最新30幅动人心脾的优秀摄影作品欣赏
  • 优秀案例:25个伟大的企业 LOGO 设计
  • 60款惊艳的 iOS App 图标设计《第一季》
  • 60款惊艳的 iOS App 图标设计《第二季》
  • 60款惊艳的 iOS App 图标设计《第三季》

8. 自定义字体

免费字体库Typekit为任何感兴趣的网页设计师提供免费试用。有了这个工具你在网站嵌入JavaScript即可在CSS中实现自定义字体。在2011年这个趋势已经很明显,已经有部分WordPress设计师尝试使用这方法让自己的博客变得与众不同。

几年前,Typekit还是一个不起眼的系统,直到现在Google Web
Fonts提供资金支持,现在它开始变得非常受欢迎。你只要找到字体库拥有的字体,Goole就提供相应的代码。你只需要在HTML添加相应的代码和CSS修改字体名称。

澳门葡萄京官方网站 13

越来越多的人开始使用这样服务。甚至有开发人员专门开发了免费的插件,这样安装自定义字体就变得更加简单了。不需要上传字体,没有服务器压力和鲜有出现错误。博主们应该关注这个趋势,使用一些适合自己的博客的字体。

同系列文章

  • Web前端开发人员和设计师必读文章推荐【系列一】
  • Web前端开发人员和设计师必读文章推荐【系列二】
  • Web前端开发人员和设计师必读文章推荐【系列三】
  • Web前端开发人员和设计师必读文章推荐【系列四】
  • Web前端开发人员和设计师必读文章推荐【系列五】
  • Web前端开发人员和设计师必读文章推荐【系列六】
  • Web前端开发人员和设计师必读文章推荐【系列七】
  • Web前端开发人员和设计师必读文章推荐【系列八】
  • Web前端开发人员和设计师必读文章推荐【系列九】
  • Web前端开发人员和设计师必读文章推荐【系列十】
  • Web前端开发人员和设计师必读文章推荐【系列十一】
  • Web前端开发人员和设计师必读文章推荐【系列十二】
  • Web前端开发人员和设计师必读文章推荐【系列十三】
  • Web前端开发人员和设计师必读文章推荐【系列十四】
  • Web前端开发人员和设计师必读文章推荐【系列十五】

 

  如果您觉得这些文章对您有用,记得轻轻点击一下右下角的【推荐】哦:)

 

本文链接:Web 前端开发人员和设计师必读文章【系列十六】

文章来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


9.信息图表

这个趋势或者对网页设计的大局影响不大,但有利于用户体验和信息图表符合新媒体的发展。以前鲜有网站使用这样的方式,即使你勉强了解当中所展示的数据、图表或图像。

澳门葡萄京官方网站 14

信息图表并不是对所有网站都适用。而且制作这样的图表需要花费大量的时间在Photoshop上。但如果你是这方面的人才,自己的网站有需要这样的
图标,不妨尝试下,会给你的网站访客全新的感受。相比以前,现在的网络包含更多的信息,我们可以从中收取或共享信息,而信息图表正是这样的体验,能够加快
互联网的发展和体验互联网精神。

10. 简洁

任何网站都有一个目的就是使访客从A点访问到B点。简单,直观的界面是最直接的方法。在过去的5年,我发现现在越来越流行简单的设计。道理很简单,页面元素也少,游客自然将目光集中在内容和链接上。

我们可以找到很多这样的例子。在今年五月,我们就列举一批非常优秀的案例。

澳门葡萄京官方网站 15

但重新布局一个简单的界面并不是一件易事。你需要起草导航架构,页面层次结构,头部,内容区域等。不过花时间做好规划可以大大简化你的工作。

小结

以上趋势仅仅是我们根据现阶段和以前网页设计的发展历史所预测,但未来是不可以预知的,因此未来的网页设计会不断地变化。现在的网页设计师也一直地学习和尝试新的东西,只要我们时刻留意网页设计的发展,学习新的技术和设计,相信所设计的网页也会相当不错的。

早前知名博客flashuser也发布了关于2012年网页设计趋势,其中有相同的地方也有不同地方,有兴趣的可以参考对比一下。

via
webdesignledger.com 
MK 编译

译文原址: