《前沿视点》——2013年最值得关注的网页设计流行趋势

时间 2021-01-02

标签 css html 前端 html5 android git github web 浏览器服务器栏目 CSS 繁體版

原文原文链接

　　在过去的几年里，咱们看到建设网站的方式发生了巨大的变化。随着浏览器对 HTML5/CSS3 Web 标准的支持的不断加强，愈来愈多的用户已经转移到移动平台。在设计界，有不少独特的想法，每隔一段时间就发生变化！css

　　在这篇文章中，我想介绍一些咱们已经看到正不断变化的趋势。其中，许多设计理念已经存在了很长一段时间。可是，我认为在2013年里，这些独特的想法将会更加的蓬勃发展。网上提供了不少能够免费下载的开源项目和用户界面，这样设计人员能够专一于本身的领域。html

　　响应设计的理念并不只仅只网站可以缩放到更小的尺寸，设计师的意识形态也应该发生改变。这里向你们推荐 DesignShack 上的一篇文章，其中谈到了这个想法。前端

　　每每更容易规划最重要的界面元素，让他们排布成为一个移动的布局。若是这些元素不合适这样，你将不得不删除一些。同时，你能够规划布局将如何应对的窗口变大。您将有空间包含一个侧边栏，也多是2个，以及许多其它的页面元素。html5

　　A List Apart 上面有一本书叫《Mobile First》，它是由 Luke Wroblewski 编写的，他带来了不少和这里一样的想法。一次性制做移动优先的设计每每很困难，能够从小的尝试开始，慢慢改进。android

　　移动网站设计和响应式网站设计的优秀案例：git

　　许多社交媒体网站已经开始应用无限滚动效果到信息面板、时间线和用户订阅的内容里。这种效果是因为 Twitter 和 Tumblr 独特的布局风格而流行起来的，最近 Pinterest的也在其主页上采用了这种无限的页面滚动。github

　　设计人员可能会问，为何无限滚动很是有用？首先，它提供了一个无缝的界面，无需从新加载页面。可是，用户要为不一样的页面生成永久连接就困难了，而这一切是真实存在的问题的，因此说并非每个网站都适合使用无限滚动。我以为无限滚动最好的地方是，你能够不断加载信息而又不须要一个特定的分页样式。web

　　例如，博客归档文件就不合适使用无限滚动，由于读者可能会想直接进入到第15或25页，而不是向下滚动屡次。可是 Tumblr 以及 Pinterest 却很是适合使用，由于这些信息是动态的，不断变化的，使用 Ajax 方式加载数据进来会让用户以为更加舒服。浏览器

　　极简主义已是讨论了不少年的话题了，早已是网页设计的一部分，可是也在不断进化，以适应这个新的发展趋势。极简主义的设计可以让用户关注主要内容。可是，即便内容很是密集的网站，能够利用较小的区域中的空白以释放空间。服务器

　　另外一个大的误解是，认为空白设计应该是白色的。但事实上黑色风格的布局也是有空白的，所以这个“空白”的意思其实应理解为“空的区域”。在页面中留下一些空间，让用户的视觉可以很好的分离内容，可以更容易消化内容，给用户留下美好的第一印象。

　　下面向你们推荐一批很是优秀的简约风格网站做品案例，相信你能从中得到不少的设计灵感：

　　CSS3 给网页设计领域带来了如此多的变化：经过 @font-face 能够载入更多自定义字体以及关键帧动画都展现出 CSS 更先进的功能。即便是最基本的 CSS3 属性已影响了天然的设计布局的使用。

　　这些元素包括具备圆角，盒阴影以及背景渐变等等，在之前这些效果都是须要图片来实现的，如今你彻底能够只使用 CSS3 代码生成这些效果。2013年，将有更多使用图片的网页布局被 CSS 属性取代。

　　我一直很喜欢 Dabblet 这个网站，它为每一个新页面都使用了背景渐变效果。这个 WEB 应用程序能够和 GitHub Gist 框架结合使用，容许开发人员实现构建 HTML/CSS 原型。整个界面是基于 CSS3 实现，你可能会注意到在短短几年的时间，Web 领域已经发生了很大的变化。

　　我之前向你们分享过不少大照片背景在网页设计中应用的案例，这种应用趋势并无放缓。事实上，我看到更多的网站使用这种设计风格。这种网站的布局能够切合一个很是具体的感受或情感上的颜色和背景样式。大照片是带给用户特殊情感的另一种方式来。

　　然而，我认为这种趋势不是适合每一个人。正确的状况是，你的网页上有足够的空间，大的背景下能带给访客外形美观的视觉感觉。最大的问题是要让布局适合内容，内容要清晰可读。这就是为何大背景图片的最佳应用场景一般是在目标页（着陆页）或一些公司和机构的网站。

　　这种独特的风格也很是适合用于设计做品集网站和我的网站，能够与你的访客提供一个更深层次的联系。在您的网站上的访客会好奇你是谁，你作了什么。提供一张照片，展现了一个简短的自我介绍，让访客知道你是谁，那将是很是不错的。大照片也可用于显示您的创造性工做，好比插画，矢量图片，甚至是你本身的照片。

　　在网页中应用大图片做为背景的优秀案例：

　　众多优秀的 CSS 框架让 Web 开发人员的编码时间大大缩短，这意味着在短短的几分钟内，使用合适的工具，你能够创建一个完整的两列或三列的网站布局。这也意味着使用更少的 HTML 标签就能够实现相同的效果。

　　构建代码简洁的网站意味着一切都更精简，要少得多。这是好事，由于更小的文件尺寸意味着能更快的从服务器加载。另外，简洁的代码使得编辑布局的时候也能迅速而简洁，没有任何困难。多学习其余优秀的开发人员的经验，可以帮助你编写更优美的 HTML & CSS 代码。

　　我向你们推荐的两个最好的资源——Github 以及 Stack Overflow。前者有不少开源的源代码，你能够下载并应用到实际的网站项目中。后者是一个很是有用的问答社区，开发者在上面互相寻求帮助。这些网站提供许多的好材料，帮助你编写干净，可读的代码。

　　每一年的年初，咱们必定都会发掘出一些网页设计领域的新模式和设计理念。网络让设计师们可以相互进行信息共享和技术讨论，不分技术水平的高低，进入网页设计领域不分迟早，如今就是最好的时代。

　　我上面列举的这些趋势是对2013年网页设计领域的一些推测，并不必定每一个都能在今年获得很好的传播和发展，让本身不落后的最好的办法积极关注新趋势，阅读最新的博客文章和教程，掌握最新的 Web 标准。此外，若是您有任何意见或建议，欢迎留言和你们一块儿交流。

hide