设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈。观念上这些趋势代表了在网页设计社区最受喜爱的点子。可是当提到设计团队时,就会想到设计师拥有他们独立的观点,所以要有保留的接受这些想法.
1.响应式布局
响应式设计已经变成了一个最终来使设计的布局适配各种数字媒体视窗的入口。此想法是用来支持所有的来自笔记本电脑,台式机,智能手机,平板和任何将来将要发布的设备。
你应该想象这个趋势更像是一份单一的代码,完美地运行在所有环境下统一网页的设计中。响应式站点被经常想象为是向手机浏览器迎合,但那不是唯一的目的。你也可以拥有一个让浏览器窗口更大,可以让你的页面布局添加鲜艳的插图和图案的响应式站点。
这里的重点是思考站点设计作为一个动态和自然流体的单一画板,css3媒体查询允许开发者在有限的或者扩展的屏幕之上自定义布局,用这个来增加你的优势同时也看看其他设计师是如何实用它的。
2.视网膜支持
随着响应式支持网站布局,同时我也发现在为视网膜设备建站的人有明显的增加。苹果第一次实践这个想法是在iphone4上,从那以后苹果在他们的其它设备包括ipad和一些macbooks上也应用了视网膜屏。
视网膜屏像素基本上是其他任何普通LCD的两倍,虽然它们有相同的物理尺寸,但是视网膜屏可以使用两倍的数字像素来适应相同的物理尺寸。
这意味着“像素完美”的网页设计师将要制作两套图片格式.以此来支持视网膜设备。首先你需要使你的样本图片两倍于普通图片的分辨率,接着保存标准版本的图片。大分辨率的图片将会在标准分辨率的屏幕上缩小并且在视网膜屏上看上去更鲜明。
尽管它不检测CSS背景图片,但它依旧是用来避免在媒体查询里写下所有情况代码的最方面资源.
3.固定的头部条目
因为他们几乎可以工作在任何网站,所以看上去很有趣。它们包括社交网络、博客甚至有设计工作室又或者是私人公司。这种设计非常的流行并且看上去和许多布局很搭配。但是从美学角度看,这个固定的条目提供了一个减小操作网站距离感的特别用户体验。
4.大图片背景
摄影师或者摄影爱好者肯定很享受这种设计趋势。我已看过无数的案例来讨论使用超大图片来作为背景的这种想法。这是获取用户注意力极佳的方法并且当恰如其分的完成时会看上去很棒。
5.CSS透明
CSS3的新属性已经允许编辑网页上任何元素的不透明,这意味着你可以在不使用photoshop的情况下,在现代浏览器中实现透明。这种透明性的网页设计趋势最近在codrops上讨论带有一些非常生动的话题。
另一个来操作透明度的设计技巧是通过rgba()颜色语法,在css书写时你可以指定具体的红,绿,蓝以及透明度,所以使用rgba(255,255,255,0.6)会生成60%的不透明白色,这确定是一个设计趋势,所以在2013以及以后我们仍可以抱有期待!
6.极简的着陆页面
在网上创建一个简洁的着陆页面就是为了获取指引到你的产品或服务的引导线。这个新趋势奉行极简主义的信条:保持所有东西简单同时专注你的核心产品。
7.数字快速响应编码
8.社交媒体标记
下面我列出了一小部分社交媒体标记,你可以在自己的网站布局上尝试一下。
9.详细的插图
新的设计趋势都是为了抓住和控制某人的注意力,我个人感觉插图能出色的完成此任务。但问题是找一位能做出如此完美无瑕艺术品工作的设计师,并且还可以教自己。
插图可以应用在多种各式各样的方法中,以此给你的网站带来不同的感受。看看互联网,你就会发现许多画廊和插图网站都集中在电子插图上。你能看到这么有美感的工作最终完美的融入网站的品牌中,MailChimp或许是拥有黑猩猩邮递员商标最具代表性的例子了。
10.无限滚动
无限滚动加载至少存在许多年了,但是此技术直到今年才成为主流,我想在2013年还会继续。
但是另一个非常棒的或许是我最喜爱的例子是在Tumblr。你可以发博客同时可以摘录所有出现在你面板上你跟随人的照片。所以当你登陆之后所有最近的帖子会出现且无线的往下滚动页面。
这是一个极好的技术,可是并不能应用在每一个布局上。但是对于能适应此方法的网站从视觉和表现上都相当惊人。
11.主页特点巡回
在网上新产品通过滚动图片展示和示例视频都很常见。着陆页和新建页面经常尝试使用一些甜头来诱惑潜在的客户。如果你知道如何在网站上将东西构造的很好,它的作用将会很明显。
12.滑动的网页面板
过去当flash和Actionscript很盛行的时候,滚动的网站很火。而现在,动的效果已经可以通过Javascript和JQuery实现,并且依次影响了设计师建设网站的方法。我是偶然喜欢上滚动面板技术并且希望在2013年看到更多。
若你可以通过响应式布局来处理它们,又或者有可供选择的手机站点,滚动效果在手机上就会很酷,值得一试!
13.移动导航切换
当谈到响应式设计时,最难的问题之一是如何创建一个靠谱的导航。你希望能给用户对你所有重要的链接以直接的访问,而不要淹没在页面中而使其难以辨读。先保持导航隐藏当需要时再出现也是一个很好的点子。
14.全屏排版
前面我提到过使用超大图片作为网站布局的背景,这种趋势依旧可以延伸到文字排版上,设计的你网站文本完全适应浏览器。一些用户可能感觉到很恼火,但是如果布局对于超大文本很合适这也不是常有的事。
15.编程接口和开源
开源软件已经存在数十年了同时自从它存在就改变了网络。但是在2012年里我注意到有更多的关于开源软件涉及到网页组件、布局、动态效果。典型的是我们可以谈论免费网站模板,布局或者像WordPress的CMS软件。
说真的我不希望开源项目在任何时期发展缓慢,现在就是该开始并且促进在创建网站领域知识的时候。
16.深度盒子阴影
我相信在前些年设计师遇到的问题源于盒子阴影太难而不容易实现。往前推几年,这种效果需要Javascript或者在photoshop中制作阴影背景,而现在阴影盒子可以在CSS中使用几行代码来生成。
17.CSS3动画
我对新的设计师推动不通过脚本来实现的动画充满信心。
18.垂直导航
当我第一次注意到不同的网站使用此趋势的时候,并不是很感兴趣。可是在过去的一年里,我看到越来越多的设计师创造了完美的垂直解决方案。当此布局被正确的完成,垂直网站布局可以容纳充足的内容同时具有好的设计体验。
19.单页面网页设计
单页面设计是一个很大的话题,覆盖了许多不同网站分类。显而易见自从万维网创建单页面网站就出现了。但是最近几年这种趋势变成了一种更加自然的用户体验。
随着你往下滚动页面,导航条一直固定在你的浏览器顶部。合并其他的网页设计趋势到单页面布局里面是吸引用户注意力和创建一个迷人的网站的解决方法。
20.圆圈元素设计
你可以在SiteOptimizer主页上发现一个简单的例子,它使用了圆形页面设计作为他们服务的信息卖点。