网页设计：2013年值得关注的20个最热门趋势
在本文中，我想深入探讨2013年新的20种设计趋势 。
现在，我们可以看到许多这样的想法已经实现，甚至采用了不断提高的新颖性。
你们中的有些人可能还记得我之前关于2012年Web设计趋势的文章。
在整个2012年中，新的网页设计趋势急剧增加。
但是，在设计术语时，设计师总是会有自己的见解，因此请一筹莫展。
理想情况下，这些趋势代表着Web设计社区中的有利想法 。
设计的影响仅反映了我们的文化和对用户界面的期望 。
如果您有兴趣，请睁大眼睛，看看这些趋势和技术的例子。
1.响应式布局
想法是支持笔记本电脑，台式机，智能手机，平板电脑以及将来发布的所有产品中的所有设备。
这个话题是我在2012年趋势文章中提到的第一点，但是我感到响应式Web设计已经发生了变化，最终达到了一种设计与所有形式的数字媒体相匹配的布局的阈值。
图片来源： 克里斯·詹宁斯 （ Chris Jennings ）
响应型网站通常被认为是针对移动浏览器的，但这并不是唯一的目的。
您可以将这种趋势更像是一个统一的Web设计 ，其目标是拥有一组可以在所有环境中完美运行的代码。
您可以拥有一个响应式网站，当浏览器窗口较大时，该网站还可以在布局中添加精美的插图和图形。
利用这个优势，看看其他设计师也正在使用它！
CSS3媒体查询使开发人员可以基于有限或扩展的屏幕空间自定义布局。
这里的主要想法是将网站设计视为一个单一的画布，该画布本质上是动态的和灵活的 。
2.视网膜支持
苹果公司首先用iPhone 4设计了这个想法，此后便将此屏幕显示应用于其他设备，包括iPad和某些MacBooks。
除了对网站布局的响应性支持之外，我还发现为视网膜设备建造的人们急剧增加。
因此，它们是相同数量的物理像素，但是在相同的物理空间中，数字上可以容纳两倍的像素。
视网膜屏幕的密度基本上是任何普通LCD的两倍。
较大的图像将按比例缩小到标准分辨率，并且在视网膜屏幕上看起来非常清晰。
首先，您需要以两倍的分辨率对图像进行采样，然后以一半的尺寸保存“标准”版本。
这意味着支持视网膜设备的像素完美的Web设计人员将需要创建两组图像 。
这是一个JavaScript库，用于在用户在视网膜设备上浏览时自动显示@ 2x视网膜图像副本。
尽管这不会检测CSS背景图像，但是与对媒体查询中的所有代码进行编码相比，它仍然是最方便的资源。
3.固定标题栏
这种趋势已经存在了一段时间，但现在我们正全力以赴。
当访问者向下滚动您的页面时，这将为导航和返回首页的过程提供持续的支持。
属性是将标题栏装订到您网站上的好方法。
使用CSS position: fixed;
但是，除了美观之外，该栏还提供了出色的用户体验，而无需花太多时间浏览网站。
该设计非常时尚，与大多数布局搭配都很不错。
这包括社交网络，博客，甚至是设计工作室或私人公司。
固定标头是如此有趣，因为它们几乎可以在任何网站上使用。
4.大图片背景
这是一种吸引访问者注意力的极好方法，如果操作正确，它看起来也会很棒。
我看到无数的展示柜在后台讨论大型超大型摄影的想法。
摄影师甚至摄影迷一定会喜欢这种设计趋势。
（图片来源：davidia-int.hr）
这张独特的背景图片就像是登陆其网站的每个人的自定义品牌 。
在这个主题上，我始终考虑Kerem Suer一直流行的设计产品组合。
当融入您的布局时，这种设计技术可以使您的网站在营销方面占据主要优势。
我经常喜欢大型照片，因为它们可以使眼睛愉悦。
5. CSS透明度
最近， 在Codrops上讨论了Web设计透明性的趋势， 并提出了一些非常生动的话题 。
这意味着您可以控制在任何现代Web浏览器中生成透明度–无需Photoshop！
新CSS3属性允许在任何网页元素上进行不透明度编辑。
通常，它可用于通过重复https://assets.hongkiat.com/uploads/web-design-trend-2013/来生成其他背景，或使用内部元素设置背景 。
Squarespace博客上的一个很好的例子是*包装器有一个background: transparent属性。
当然，这是我们可以预期到2013年及以后的设计趋势。
因此，使用语法rgba(255,255,255,0.6)只会在不透明度为60％的情况下生成白色。
在CSS中进行设计时，可以选择使用红色，绿色，蓝色和Alpha透明度值指定颜色。
操纵透明度的另一种有趣的设计技术是通过rgba() color语法 。
6.极简的登陆页面
此外，您还可以出售非实体产品，例如视频或创意资源。
您可以从世界任何地方访问庞大的消费者群 。
任何花了一些时间研究市场的人都会明白， 在互联网上卖东西只是明智之举。
极简主义的理念正在出现新趋势：保持一切简单并专注于您的核心产品。
在线创建登录页面仅涉及捕获产品或服务的新潜在客户。
您再简单不过了。
但是所有文本都易于阅读，基本上是一键式结帐过程。
使用矢量图标作为背景效果，页面相当巧妙。
PictoPro网页上对此进行了举例说明，该网页 为廉价图标提供了漂亮的资源 。
7.数字QR码
从餐厅到活动场所以及汽车销售很多地方，您都可以找到这些带有标签的产品。
它代表快速响应代码 ，并且是从较早的UPC条形码开发而来的。
移动智能手机的丰富性导致QR Code应用程序激增。
您可以在Keith Cakes的联系页面上看到此技术的出色示例。
但是随着时间的流逝数据传输变得越来越快，QR码可能会变得流行 。
由于通常会在印刷品中找到它们，因此您通常不会考虑这些。
但是最近，我发现有两个网站将这些代码内置在设计中 。
8.社交媒体徽章
但是，这些并不是在线共享故事的仅有的两种流行资源。
Digg曾经在这个领域占据主导地位，但此后就屈服于Reddit等竞争对手。
社交媒体和病毒式营销正在许多不同的网站中爆发。
（图片来源： WebTreatsETC ）
想要在Facebook，Twitter甚至LinkedIn上快速共享内容的读者和粉丝仍然积极使用这些内容。
您可以将这些徽章固定在布局中任何位置的博客文章和文章上。
您几乎可以检查任何社交社区的共享徽章，并且可能会找到很好的解决方案。
在下面，我整理了一些社交媒体徽章的清单，您可以在自己的网站布局中尝试。
- StumbleUpon徽章
- Google +1按钮
- Pinterest按钮
- LinkedIn分享徽章
- 黑客新闻投票徽章
- Dzone投票按钮
- 免费的社交媒体图标集–最佳
- 100多个非常漂亮的Twitter图标和按钮
9.详细插图
问题是找到一个可以做出如此无懈可击的艺术品甚至自学的设计师。
我觉得插图出色地完成了这项任务。
新的设计趋势全都在引起人们的注意 。
（图片来源： twogiraffes.com ）
MailChimp可能是其商标黑猩猩邮件载体的最权威的例子。
您可以看到这些艺术作品最终几乎完美地融入了其网站品牌。
环顾互联网，您会发现许多专门针对数字插图的网站画廊和展示柜。
插图可以多种方式用于在您的网站中带来不同的心情。
10.无限滚动
但是直到今年才真正成为主流技术，我相信它将持续到2013年。
无限滚动加载已经存在了至少几年。
谈论为简单而设计！
分页基本上不是问题 ，甚至不会损害用户体验。
您可以搜索任何内容，并且向下滚动时，结果页面将不断加载。
Pinterest已将这种加载技术用于其布局，并且效果很好 。
因此，登录到您的帐户后，所有最新帖子都会在页面中无限滚动。
您可以通过博客和重新发布您关注的其他人的照片，这些照片都将显示在仪表板上。
但是另一个很好的例子，也许是我最喜欢的例子是在Tumblr上 。
这是一项出色的技术，它不适用于所有布局，但对于正确的网站，它可以看起来和表现出惊人的效果。
11.主页功能浏览
如果您知道如何构建网页上看起来不错的东西，它们通常可以很好地工作。
登陆页面和初创公司经常尝试通过这些信息性物品来吸引潜在用户。
滑动图像演示和演示视频对于网络上的新产品都很常见。
他们每个人都解释了您在MediaFire上可以做什么以及它们的功能与其他网站的比较。
页面的整个顶部在一系列幻灯片之间旋转 。
回顾2012年，我会说我最喜欢这种趋势的例子是MediaFire的主页 。
这是另一种趋势，不适用于所有网站，只有某些产品可以引起您的注意。
演示的脱颖而出的原因还在于他们对大图形和图标的使用 。
12.滑动网页面板
滑动面板只是我碰巧真正喜欢的一种技术，并且有望在2013年看到更多。
现在，动态效果已经进入JavaScript / jQuery领域，这反过来又影响了设计师构建网站的方式。
当Flash和ActionScript盛行的时候，动态网站曾经非常流行。
诸如此类的动态效果对于移动用户而言并不总是好兆头。
但是，当您单击导航时，您将了解到从左到右依次推入每个页面 。
马上，您可能不会认为CaptainDash是任何特殊的网站。
但是，如果您可以使用响应式设计技术或其他移动网站来处理它们，那么这确实是很酷的效果，值得一试。
13.移动导航切换
将隐藏式响应导航隐藏起来直到需要时也是一个好主意。
您想让您的读者直接访问您所有的重要链接，而又不会淹没该页面，从而使其无法阅读。
当谈到响应式设计时，最困难的问题之一是如何构建可靠的导航。
但是，有数十家网站和设计工作室已将这种趋势用于自己的响应式布局。
甚至在您的Web浏览器中！
Treehouse Blog只是此技术的一个示例，该技术在您的智能手机上看起来非常漂亮。
输入移动导航切换菜单的这种美丽设计趋势。
设计师可以选择很多选项，并且有大量的时间可以进行UI实验。
您可以使链接从顶部下拉，也可以向下滑动，或者从左侧或右侧推送内容。
对于切换式导航，我最喜欢的是可以设计多种形式的菜单 。
14.全屏排版
但是，如果布局非常适合于超大文本， 则通常不是这种情况 。
一些用户可能会发现这很烦人。
这种趋势也可以扩展到侧重于排版：设计网页文本，使其填充整个浏览器。
之前我提到过在网站布局的背景中使用大型的超大照片。
此外，该网站非常易于浏览，许多其他页面元素也显得过大。
您可以看到其中包括使用CSS3属性的富文本效果 。
亚历克斯·皮尔斯（Alex Pierce）拥有出色的网站布局，确实专注于排版。
而且我相信这将在新的一年中出现更多的设计评论。
具有独特字体样式的大文本可以与超大尺寸摄影一样突出。
15. API和开源
通常，我们也可以谈论免费的网站模板，布局或CMS软件（例如WordPress）。
但是在2012年中，我注意到有更多与网页小部件，布局和动态效果有关的开源软件。
开源软件已经存在了数十年，并且自成立以来就一直在改变着网络。
jQuery几乎免费提供免费下载的插件，数量可在网上找到。
像Github这样的开放式API和资源使设计人员不仅可以原型布局，还可以在页面上制作动画和效果 。
这确实是一个最伟大的时代，它是开始起步并增进您在创建网站方面的知识的时代。
老实说，我不希望开源项目的数量会很快放缓。
16.深盒阴影
这些效果看起来令人惊叹，除非过度使用，否则它们几乎不会损害美观。
实际上，我现在几乎总是希望看到框形阴影中注入了现代Web设计中的元素。
我在之前为2012年撰写的文章中讨论了CSS3盒子阴影，事实证明这种趋势非常准确。
（图片来源： rareview.com ）
现在， 可以在CSS中用几行生成框阴影。
几年前，这种效果需要使用某种JavaScript或直接在Photoshop中创建的https://assets.hongkiat.com/uploads/web-design-trend-2013/背景。
我相信设计师几年前不得不面对的问题是由于阴影难以实现 。
我会在整个2013年寻找新的盒子阴影技术。我认为趋势已经深深扎根于设计界，现在更多的是关于谁可以最有创意！
17. CSS3动画
我已经看到了许多不错的悬停效果，并以正确的方式使用这些转换来形成输入字段 。
现在，设计人员可以根据不同CSS属性在页面上制作效果。
CSS3 transition属性和所有相关的浏览器前缀都像JavaScript一样提供CSS动态效果。
注意如何设置动画的各种时间和设置。
另一个出色且令人振奋的示例来自Codrops上的CSS警报教程 。
我相信，新的Web设计师将带来蓬勃发展的动画， 而这些动画全部无需使用脚本即可创建。
无疑，这是一个趋势，在未来数月和数年中都有一定的发展空间。
18.垂直导航
正确完成后， 垂直网站布局可以充实内容和设计品味 。
但是，在过去的一年中，我看到更多的设计师创作了优雅的解决方案，并且垂直节奏仍然完好无损。
当我刚开始注意到其他采用这种趋势的网站时，我并不喜欢这种布局样式。
边框纹理也确实在左右列之间显示了一条分界线。
查看导航链接的工作方式以及投资组合条目在悬停效果上的动态变化。
Riot Industries的产品组合对于新的Web设计师是一个很好的例子。
这种纹理效果在其他垂直布局中也很明显，例如CSS画廊Design Bombs 。
19.单页网页设计
但是，近年来，我们已经看到这种趋势演变为具有更自然的用户体验。
自创建万维网以来，显然存在单页网站。
单页设计是一个很大的主题，涉及许多不同的类别。
但是您也会注意到页面的顶部具有模糊的背景照片效果。
他们巧妙地利用了单页布局，其内容由水平容器拆分。
我认为Cage App的网站设计可能是本文列出的许多趋势的一个很好的例子。
将其他流行的设计趋势整合到单页布局中的一种解决方案可以吸引访问者的注意力，并使网站设计更具吸引力 。
另外，当您向下滚动页面时，导航栏实际上保持固定在窗口顶部。
20.圆形设计元素
您可以构建模式，甚至可以将页面元素固定为圆形设计 （例如，用户头像，共享按钮，发布日期等）。
设计师喜欢圆形，因为它们干净，整洁且通常适合任何布局块 。
网站布局中的圈子趋势是一种较新的事物，最近受到了很多关注。
Web设计师渴望这些额外的花絮在页面布局中，因为它们散发出独特性 。
您还会注意到一些可爱的矢量艺术品，它们沿着边线点缀着。
该网站是动态构建的，因此您可以水平浏览页面中的不同部分。
Lucia Soto的投资组合基本上是圆形网页设计的一个很好的例子。
您可以在Site Optimizer主页上找到类似的示例，该示例使用圆形页面元素作为其服务的信息性卖点 。
最后的想法
这些设计趋势旨在为设计师指明正确的方向。
这对于网站布局尤其如此，它试图匹配导航和内容样式以获得成功的用户体验。
用户界面设计是构建数字产品时最复杂的主题之一。
如果您想在曲线上走前路，并想分享一些2013年设计趋势的见解，请在我们的帖子讨论区中发表评论。
您可以找到这些新兴趋势的示例，包括小型企业，跨国公司以及它们之间的所有其他网站。
我希望您可以考虑其中的一些想法，并思考它们如何影响现代网站。