Each year we learn something new about design and 2016 was no different. After last year’s article had such a success we decided to make some predictions for 2017, so let's get started!
每年我们都研究一些新的设计风格,2016年也是一样,在去年文章得到非常大成功后,我们决定再为2017年做一些预测,所以我们开始吧。
Design trends are influenced by media, technology, the fashion industry and, lately usability. A trend emerges slowly, gradually, making its way into all design branches, and then disappears in exactly the same way. Basically a design trend's life is no longer than one or two years. Design in 2017 will continue the trends that materialized in 2016 while adding some new influences, but the feeling is well known and familiar and you may have seen it in the past couple of years. The main influencer remains Google's Material Design, that suffers a few changes.
设计趋势被媒介、科技、工业时尚、和最新地可用性所影响着。一个趋势慢慢地、逐渐地出现,渗透到所有的设计门类,然后以相同的方式消失。基本上一个设计趋势的生命期不超过一两年。2017年会继续在2016年的已落地的设计趋势上新增一些效果,这些设计都已被知道熟悉,或者你在近年内看过了。主要的受Google的Material Design的影响, 然而些许有些改变。
01.
Semi Flat Design
半扁平化设计
In the past few years flat design ruled the web design market but now, influenced by Material Design, it is becoming more dimensional. This transition begins with some light shadows, making it a semi flat design. The evolution of flat design from a minimalist style suits the new developing technologies. Flat design is still in, but it has undergone some improvements.
在过去的几年内扁平化主导着设计市场,但是现在受Google Material Design的影响,变得更趋向于空间化。这个改变开始于一些轻微的光影关系,使之成为半扁平化设计。扁平化设计的进程是用最简洁少量的设计来适应当时的开发技术。扁平化设计仍然还算主流设计,但它已经经历了一些设计进化。
The smooth shading adds a depth and complexity without destroying the flat design feeling. This is a new feature added to the flat trend and will continue to evolve in 2017.
平滑的光影增加了深度和细节但并不打破扁平化设计的感觉。这是一个新的增加到扁平化趋势的特征,并且在2017年会继续演进。
02.
Cinemagraphs
电影动图
Cinemagraphs aren't the regular gifs we see all around the web. Cinemagraphs are still images with minor elements moving in them. This technique makes a simple photo more realistic by bringing it to life.
电影动图不是我们所见到网站里常规的GIF。电影动图是一种有细节元素运动的图片。这种技术通过让些许细节元素运动使得照片更加真实。
03.
More 3D
更多的3D
3D is definitely heading our way and we are going to see its influence in all design fields. With the VR/AR revolution rapidly building momentum, this domain is evolving pretty fast.
3D绝对是当仁不让的重头戏,我们将会看到它影响到所有的设计领域。伴随着VR/AR革命快速发展势头,这一领域正发展的相当快速。
04.
Animations
动画
Animations are more and more present in web design and they can be gifs, SVG, WebGL CSS or videos.Animations were definitely one of the biggest things in the last year’s web design trends, so don't hesitate to use them.
动画越来越多的出现在网站设计中,可以是gifs,SVG,WebGL CSS或是videos。动画绝对地是去年的网站设计最重要的趋势之一,所以不要犹豫使用吧。
05.
Landing Pages
登录页
In 2017 we will see a rise in landing pages due to their potential for marketing purposes and their ability to better target visitors.
在2017年,我们将会看到一个在登录页的提升,因为他们达到的市场潜力和它们能更好的瞄准访问者。
06.
Geometric Shapes, Patterns, Lines and Circles
几何图形、图案、线、圈
This trend started in 2016 and will definitely continue in 2017. You can personalize a website simply by adding some modern shapes, either flat or with a soft shadow.
这一趋势开始于2016且肯定地会在2017年延续。不管是在扁平化或是微光影的设计中,你可以通过增加一些现代化图形而轻易地让网站变得更加个性化。
07.
Courageous Colors
大胆的用色
Use bold colors to make a statement. Material design and flat design go perfectly with bold colors. You can use the color palette provided by Google to choose and pair the colors you want.
使用大胆的配色来进行设计。Material design和Flat design和大胆果敢的配色会完美地搭配。
你可以使用Google提供的调色板来选择和搭配你想要的颜色。
08.
Innovative Scrolling and Parallax
创新的滚动方式和视差设计
This visual idea is great to add a unique element to any website. From a multi layered parallax to a video parallax, anything is possible.
这个视觉创意非常适合作为一个独特的元素增加到任何网站上。从多层视差到视频视差,一切皆有可能。
Is a WordPress Plugin that allows you to create beautiful Parallax sections with more than one layer. Be creative and combine layers in any style you want. We create 12 different examples into guide your first steps to a beautiful multi-layer world. Play with layers.
是一个WordPress插件,允许你用很多层来创建漂亮的视差内容。创造性的组合图层到你想要的风格设计。我们创建了12中不同的范例以引导你走进一个漂亮的多层世界。来玩转图层吧。
09.
Color Transitions
颜色渐变
Color transitions are one of the biggest trends right now. Beginning in 2016 and growing quickly after, big names like Instagram decided to change their logos and images from a flat color to a multi-colored transitions. From logos to buttons or picture overlays, this trend is everywhere.
颜色渐变是当下最流行的趋势之一。从2016年开始后发展迅速,大品牌Instagram已把他们的logos和images从扁平化颜色替换成多色渐变。从logo、button还是叠加图形,这一趋势随处可见。
10.
Mobile Browsing (Responsive Design)
移动端浏览行为(响应式设计)
2015 and 2016 brought a considerable increase in mobile browsing. Tablets and smartphones are now the first choice when it comes to browsing websites surpassing desktops, laptops and tablets - and this trend will continue. Any websites not focused on responsive web design need to upgrade asap!
2015和2016年在移动端的浏览行为有相当大的增加。在平板和智能手机上浏览网页超越了在台式机和笔记本电脑上,成为目前的首要之选。而这一趋势将会继续。任何的未聚焦到响应式设计的网站都需要尽快迭代。
11.
Custom Graphics and Illustrations
定制化图形和插图
Stock photos are still pretty popular, but there has been a new trend growing significantly in 2016 that will increase in 2017: the use of custom made graphics and illustrations. If you want a unique looking website that any visitor will remember, contact a digital designer. So, less stock and more original, unique images.
堆积图片的方式仍然比较流行,但是2016年有一个重要的新趋势在2017年会继续增强:定制化图形和插图。如果你想拥有一个独特外观的网站足以让访问者留下深刻的印象,去联系一个像素设计师吧。所以,少一些堆积图片,多增加一些原创且独特的图形吧。
12.
Creative Use of Neutral Space and Grid
创造性的使用负空间和栅格
In previous years web design had been adapted to organized columns and grids, but in 2016 we saw a considerable shift towards irregular layers and ultra-modern design.
在过去几年里,网站设计已适应了有组织化的栅格设计,但在2016年我们看到相当大程度上已转变成为不规则图层和超现代化设计。
13.
Storytelling
故事线
Websites are now starting to tell stories to convince customers to remain on the page. People tend to retain more from stories than they do from reading plain information.
网站现在开始用讲故事的方式来说服用户留下来。相比于阅读苍白的信息人们更倾向于留在故事里。
14.
Lazy Loading
延迟加载设计
Lazy loading delays the loading of images in long web pages, basically it allowing information to appear at the point at which it is needed.
这种设计缓解了长页面的图形加载过程,基本上是,它允许了信息出现现在它需要出现的地方。
15.
Split Content
分割内容设计
Split content is becoming popular in responsive web design and it splits the screen in two or more parts. A split-screen website will show the viewer several equally important messages on a single page. This trend is rising since late 2015, but in 2017 it will grow further and is likely to be encountered on many websites.
分割设计在响应式网页设计中变得流行起来,这种设计把界面两分或者分割更多。分割后的网页能够在同一页面中一次展现给浏览者更多等量重要的信息。2015年底这种设计趋势开始出现,今年它会继续发展并在很多网站设计中会遇到。
16.
Full-Screen Forms
全屏表单
No need to go to another page to fill out a form as the new websites are equipped with full-screen forms adapted to responsive design.
当新的网页配备了全屏表单且是响应式设计,就再也不需要去到另外的页面填写表单了。
17.
Videos Everywhere
无所不在的视频
Video content has increased in the last year and people are demanding high quality videos that tell a story. The video showed on the website can be short and broadcast in a loop, showing a product or a large scale cinematographic project that will keep the viewer interested in the story.
视频内容在去年有所增长,人们也需要高质量的视频来讲述一个故事。网页中的视频可以是短暂且循环播放的,展现一个产品或者是一个大规模电影动图的项目,会保持浏览者对故事的兴趣度。
18.
SEO is Important
搜索引擎优化很重要
Search Engine Optimization is very important in a website, so a beautiful website without a good SEO will probably be left behind the pack.
搜索引擎的优化在网站设计中十分重要,所以,一个漂亮而没有好的SEO的网站很可能会被遗忘。
19.
Hidden Navigation
隐藏导航
The hamburger menu creates many pro and con arguments over how difficult it is for users to find the menu, but one thing is for sure - this trend is here to stay and people will eventually get used to them.
汉堡包列表因为很难被用户找到而引起了很多好&坏的争议。但是有一个是确定的,这一趋势已经保留下来,并且用户最终会适应它。
20.
Tiny Design Details
见微知著的设计
The focus on details is really important this year. From minor details like navigation dots to corner logos, focus on the small details to get the job done.
今年关注于打磨细节的设计会非常重要。细节设计从导航栏中的点点,到logos的边角。关注于细节往往使工作完成的更好。
21.
Logo Design Trends
Logo设计趋势
21.1.Minimalist 简约
As all the big brands switch to a simpler, minimal design, this trend is here to stay.
当所有的大品牌的设计变得轻量且简洁,这一趋势就保存下来。
21.2.Hand drawn 手绘
This is a trend that has been in the spotlight for a few years now and it is perfectly fitting for a “hipster” business. This style is used for the café-restaurant industry, barbers or art and crafts.
这种风格已经出现几年了,它完美地适合一些潮流商业,被应用于咖啡、餐厅、酒吧、和艺术手工等行业。
21.3.Negative space 负空间
This is an old trend, but in the past few years we have seen it emerge again and it will only grow in 2017, so it’s definitely something worth keeping an eye on.
负空间设计是一个经典潮流,但在过去几年里我们看到它又一次出现,在2017年会更继续,因此它绝对是一个值得你一直关注的事情。
21.4.Cropping 裁剪
This trend is as minimal as it gets, showing just enough to know what a logo is all about and nothing more.
裁剪,做取舍,只要展现出logo是什么就行,不需要更多。
21.5.Geometric 几何的
This trend is certainly old-school, but it’s just one of those styles that will never die.
这个趋势是十足的学院派,但它是那种不过时的风格之一。
21.6.Line art 线条艺术
This trend is popular among the new and modern business.
这一趋势流行于新兴和现代的商业中。
21.7.Pattern 图样
Patterns are a new trend and this repetition is a unique way to make a business stand out. This original trend can be also used in the logo's presentation.
图案是种新潮流,这是个独特的方式能让你的logo独树一帜。
21.8.Animated logos 动态图标
Motion design is a huge trend this year and we can find it in all design fields.
今年动态设计是巨大的潮流,我们可以在所有的设计领域看到它的身影。
21.9.Vintage 复古
Vintage style is still in. Even if this trend has been present for some time now, it still has something left to say.
复古风潮一直都在。即使它出现到现在已经有一段时间了,但它仍然留有某种表达方式。
21.10.Color Transitions 颜色渐变
Color transitions are everywhere this year - even in logos.
颜色渐变的趋势在今年随处可见,包括Logo
21.11.Illustrations in logos 图形标志
Illustrations are a good way to give a unique and personal touch to a business logo. They are becoming increasingly popular this year.
图形是一种让你的商业logo独特且个性的好方式。它会在今年变得流行起来。
21.12.Photography in logos 图片标志
The mix of images with typography is really hot right now. They work really well together and it creates a contrast between them.
现在十分流行把图片混进排版中,他们在一起搭配的很好,并能够形成一种冲突对比。
22.
Typography Trends
排版趋势
22.1.Big, bold & beautiful typography 夸大且美丽排版
Typography is maybe the most important part in creating an outstanding design. This year typography will be bold and big with statement titles.
排版可能是创造一个出彩的设计的最重要部分,今年的排版方式会配合标题语更大更夸张。
22.2.Color transitions in typography 颜色渐变的排版
Color transition is definitely the "it" trend right now and you will find it in typography as well.
颜色渐变绝对是现在流行的趋势,在排版中你也能看到它。
22.3.Visual hierarchy 视觉层次
Typography hierarchy is really important in all design fields. Size and weight of the font can easily indicate which words or letters are the most important, so keep in mind this aspect when you create your text. You also have to remember that you can achieve a great visual hierarchy through the position and color of the text.
排版的层次感在所有的设计领域都很重要。字号大小和粗细可以轻易的表示出哪些字词更重要,所以在排版时候一定要记住这一点。同时,你不得不记住,通过文字的位置和颜色一样可以达到很棒的视觉层次。
22.4.Tiny Typography 微小排版
Super small text is usually surrounded by negative space, but you can create a contrast between colors or images to make it more visible. You can also use animations to help it stand out.
超级小的文本通常被负空间包围,但是你可以用颜色和图片来创造对比而使他更明显。你也可以用动画来帮助它突出。
22.5.Animated Typography 动态的排版
Animations are everywhere even in typography. If you use a soft motion, you can’t go wrong this year.
动画无所不在甚至在排版中。如果你运用一个轻柔的运动,那么今年你不可能出错。
22.6.Typography meets photography 当版式遇到图片
The combination between text and photography can achieve great looks. Take a look at these great examples.
文字和图片的组合可以达到很棒的效果。下面看看这些非常棒的例子。
22.7.Geometric shapes and typography 几何图形和排版
Geometric shapes can also be combined with typography also, to achieve a modern result.
几何图形也可以和排版组合使用以达到一个现代的效果。
22.8.Font pairing 字体匹配
The use of two or more fonts together is still in trend this year. Check out the examples below for some interesting pairing that will help you on your projects.
两个以上的字体搭配仍然是今年的趋势。看看下面这些有趣的范例搭配也许会帮到你的项目。
Author: Loredana Papp-Dinea
Co-Author: Mihai Baldean