2015十大年度网页设计趋势欣赏

Web前端83.3K阅读模式

长滚动、卡片式布局、扁平化设计

怎么样才能让网站看起来最潮最新?在适者生存的规则下,每一年都会筛选出哪些设计风格是趋势指向,哪些又是过时的。随着2015年即将结束,我们现 在可以看到什么才是2015年最成功网页设计趋势,这些被定义为年度设计风格的趋势将会强势地延伸到新的一年。本期国外精品翻译教程就同大家分享2015 年十大网页设计趋势,一起来看看:

一、长滚动页面

例子:Shadow

2015十大年度网页设计趋势欣赏-图片1

随着智能手机的兴起,移动端浏览网页的数量已超过传统桌面端,2015年所看到的网页都在向小屏幕靠拢(相对桌面显示屏)。就如其他悉数在列的设计趋势一样,长滚动网页在响应设计使用方面正变得越来越常见,因为小屏幕就意味着长滚动。

在过去的设计观念中,设计师都是不想让内容缩在一起,需要拉几下才能看到全部内容,但新的研究表明用户的习惯在改变,不再讨厌拉滚动条。现在,设计师和 用户都意识到长滚动的价值所在:更高的创作自由度、更强的内容故事性、更有效的交互应用以及简易化的导航(如果网站足够小的话)。

但是,长滚动也会带来一些代价,比如SEO效果弱化、加载时间变长等。由此看来,长滚动对于移动端流量大或者频繁更新内容的网站的应用效果最好,而对于注重如视频等媒体的网站的效果就不是那么有效。

  应用技巧:

1.使用粘性导航菜单或者弹出选项菜单来提升导航效果。

2.长滚动和单页面网站容易让用户不知所措,设置好导航可以避免这种情况的出现。

3.利用视差效果和滚动触发动画等突出长滚动的优势所在。

二、卡片式布局

例子:Behance

2015十大年度网页设计趋势欣赏-图片2

随着移动设备的兴起而带来的实用性趋势之一是卡片式布局。卡片式布局的优点是以干净和有组织的形式展现丰富的内容。这样的布局让网站很好地适应不同的浏览方式和不同类型的内容,特别是有链接到外部网站的,用户能直观地知道点击卡片内容带来的相关帖子。

卡片式布局可以将内容很好地划分为各个小部分,而每一个小部分都是浏览者想要知道的:题目、主要插图、描述或者标签、带有收藏评论等选项的控制面板。

卡片式布局有良好的响应设计体验,因为它们的行和列都可以自动重新排列,适应不同的屏幕尺寸。

应用技巧:

1.令整个卡片都可以点击,而不只是图像或者文字带有链接。根据费茨法则,这会让用户更加容易和愿意点击进去。

2.采用卡片式布局时,添加动画效果,特别是悬停触发效果。小按钮颜色的变化或者整个卡片的改变,甚至旋转或者转动效果,都可以让人对高度机构化的布局感到有活力,这样新颖设计可以让你的网站在其他卡片式布局网站脱颖而出。

3.卡片式布局的缺点在于卡片之间的空间,对于卡片间的间隙要清晰表示好,不要让用户去猜这些是干啥用的。

三、新版扁平化设计

例子:Toyota

2015十大年度网页设计趋势欣赏-图片3

在多年前,拟真设计曾经是现代设计趋势之一,而扁平化设计则是它的对立面。

然而,今天的扁平化设计已经远远超出原来设计起源。经过全新和微妙蜕变后的扁平化设计,提供了更多的机会来展示设计细节以及流行,Ryan Allen称之为“扁平化设计2.0版本”:鲜亮色彩和高光效果、色彩渐变与下落式阴影、更加有深度的细节设计。

并且最重要的是,扁平化设计仍然保留其核心设计风格。常见的简单细小的装饰没有丢掉。卡通化图案、易读性排版、鲜艳的颜色等设计风格都一一保存,让人一眼就能明白是扁平化设计。

应用技巧:

1.幽灵按钮只需简单的线条和透明背景,却成为扁平化设计中的趋势之一。更加兴庆的是,幽灵按钮同样可以用于扁平化设计以为的创作中:简单明了的样式不会转移用户对漂亮背景的关注度,让用户的注意力都集中在最突出的图片中去。

2.扁平化设计采用非常简单的图案,可以让网页让加载速度加快,这样的设计特点可以让响应设计做得非常到位。

3.扁平化设计与极简设计趋势的对比见本文第10条。两者都同样通过简化式设计,达到“少即多”的设计效果。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  8  访客  8
    • 西风
      西风 1

      图片挂了

      • 小众网站
        小众网站 1

        图片显示不了啦

        • 网赚博客
          网赚博客 0

          我这里可以显示啊

          • 我要网赚
            我要网赚 2

            以后多向你学习

            • 黑马王子
              黑马王子 0

              谢谢!

              • 维也纳
                维也纳 0

                请查收QQ消息,谢谢。

                • 米特宠物
                  米特宠物 1

                  当今世界,自己想不出,还不会抄么? :cool:

                  • 133
                    133 1

                    不错不错!

                  匿名

                  发表评论

                  匿名网友
                  :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                  拖动滑块以完成验证