前沿摘录

2016年的11大网页设计趋势【京玉译】

阅读

2016来了,你准备好了吗?让我们献上2016年最新网页设计趋势。

新的一年会带来很多新的网页设计技术和设计趋势,但是主体设计趋势还是很像我们在2015年底看到的那样。更多视频,垂直模式,扁平化设计模式和滑动式网页会日渐普及。

理解这些概念并不难。在这里我们将围绕设计师会在2016年经常见到(有很多漂亮的案例)的这11 种设计趋势进行讲解。  (记得打开下面的链接的同时运行一下网站,很多交互的特效在网站界面和网站运行中同样多的进行显示。)


2014年网页设计趋势

2015年网页设计趋势



2016年网页设计趋势


垂直模式和滚动

这是一个比较大的倾向于手机版的设计--很多人认为在今年里手机通信就等同于电脑通信。这意味着更多的网站将会使用垂直用户流。

几年前我们曾经讨论过的滚动网页设计风格将会终结,但现在它们作为一个重要的交互工具又卷土重来了。小屏幕的使用使得用户越来越多的使用滚动,而设计师也自然而然的在界面设计中使用垂直风格。

beoplay.jpg

uno.jpg


更多的卡片式交互

      从谷歌的Material Design中吸取的最重要的一点就是卡片式设计的出现。它涉及之广泛从APP到网页设计再到印刷设计。卡片式设计是一个有趣的创造,它能将信息组织到一个用户体验更好的框中,还能很好的吸引用户的注意。另外一个好处就是它可以无缝跨设备使用,因为它可以横跨屏幕或者放于屏幕的底部(或者同时放在这两个位置)

block16.jpg

oyya.jpg


头图视频(像电影风格的网站)

网页设计越来越像电影了。更高速的互联网连接以及更好的视频插件的整合使得越来越多的网站有了身临其境的电影风格的体验。视频剪辑已经从原来的小片段变成了几乎是全长预览剪辑。视频图片锐利、清晰、清晰度很高,创建在线视频体验对用户来说还比较新奇,但它也很像看电视的感觉。

intuition.jpg

christmasexp.jpg

younusabdalla.jpg


小动画

小动画是一个2015年就有的设计趋势。从头图风格开始小动画开始引导一个网站设计这些常常忽视的小东西,将网页中各个位置的元素做成动画。虽然小动画在网页设计中的型号在缩小,但它的流行程度还是越来越高。在用户等待某些内容下载或者提供一个令人惊喜的元素的时候,用户交互的动画元素是一个很有趣的吸引用户的行为。

在使用小动画时非常重要的一点就是你要确定好了为什么你要制作这个动画特效以及制作这个小动画的目的是为了实现什么。

camper.jpg

true.jpg


专注于互动

伴随着动画的是交互。作为APP和手机界面的主要功能,交互为用户和设备之间创造了链接途径。好的交互通常非常小-甚至是微观的向用户提供价值。从最简单的提示到文本消息再到玩游戏时轮到你的提示,这些小的交互显示出人们如何与设备进行交流(以及它们在连接网站与APP时的忠诚度。)

wove.jpg

myunitedway.jpg


更漂亮的字体

流线型交互界面的设计为漂亮字体的出现铺平了道路。(另外现在有很多非常好的在线字体工具比如谷歌字体 或者Adobe公司字体作为主流字库选择都可以在线使用)

大的,加粗的字体样式因其与其它的设计趋势配合得更完美将会继续在网页设计中占据统治地位。

与聊天窗口配合时, 这些简洁的字体将会给其它元素更多的展示空间,更有可读性。

一个可读性非常好的字体与一个有趣的环境进行配合是我们必需要尝试的小窍门。

viens.jpg

hawk.jpg


插图和草图

插图和草图会给网页设计带来更加有趣的体验。它们现在可以在所有类型的网站中使用而不仅限于儿童网站中。插图可以制作小图标和其它用户交互的小元素,因此插图风格在网页设计中变得越来越流行。这个流行趋势的另外一个优势是插图的使用使得这个网站更具有个性化。因为插图和草图都是手绘,对用户来说看起来更加个性化一点。 插图和草图的使用会使网站在与客户创建沟通方面走得更远。

orange.jpg

climate.jpg


大胆,明亮的颜色(80年代的风格)

大胆明亮的颜色 与扁平化设计同时而生,并且有继续增大的势头。谷歌的Material Design文档对此有进一步的说明。大家看看Dribbble网站,大胆明亮的作品比比皆是。这些都指出了2016年颜色的使用在网页设计中仍是重中之重。对于颜色趋势又有一些新的改变,那就是颜色类型的改变。2015年的时候我们更多的应用的是单色调的颜色,而现在转变为更大更明亮的类似有80年代风格的色块。

circles.jpg

inlay.jpg

rightcolors.jpg


更多的汉堡图标和图标库

图标,图标,图标!很多设计师开始设计出来了很容易使用的有趣的UI和图标的成套图,使得图标更加容易的使用(并且购买价格也负担得起)。另外一个重要的事情是通过SVG格式设计师开始使用超大的图标。

primeit.jpg

iqor.jpg


实景化模糊

这个网站的取景是真实的还是一个动画?这条路是预先设计好的还是我可以自己选择怎么走?下一阶段的动画和网页的设计会出现一条介于现实和创造性的图像之间的模糊的分界线,这样设计出来的效果非常惊喜。

从虚拟现实到网页设计让你做出选择来寻找新内容,这种个性化定制用户非常喜欢。这种网页设计趋势还有一种表现方式就是创造一个非常真实的图像,但你知道它并不是真的。

bluestag.jpg

coleman.jpg


网页里滑动幻灯片的使用

一开始的网页设计中先有的幻灯片展示,这种幻灯片是在一个框架中里展示内容。再往后就是全屏的幻灯片展示。每一次幻灯片的切换都会重新刷新当前屏幕当中的内容,这种幻灯片的触发方式可以是单击,滚动,或者定时实现。用户可以手动的向前翻或向后翻看内容。期待在接下来的几个月看到更多的网站使用这个幻灯片特效。

presidential.jpg

apple-e1451894595130.jpg

crisis.jpg


结论

通过以上的案例很清楚的看到在接下来的一年里网页设计师们并不是只集中于一种设计趋势,而是将过去几年里的设计趋势进行了组合(和升华)。更仔细的观察的话你会发现很多网站是用了上面的设计趋势名单中的几种趋势组合在一起来制造更有交互性和更有吸引力的网站。

哪个设计趋势是你在2016年里最兴奋的呢?是否我们还有没有提及的设计趋势?一起讨论吧。


原文地址:http://designmodo.com/web-design-trends-2016/




推荐阅读

2016年扁平化的几个设计
2016年扁平化的几个设计...
2015-2016中国移动应用设计
2015-2016中国移动应用设...
2016年的电商网站设计都
2016年的电商网站设计都...
2016年UI设计趋势
2016年UI设计趋势