> * 原文地址：[2018 Design Trends](https://www.behance.net/gallery/59540015/2018-Design-Trends)
> * 原文作者：[Mark Banaynal](https://www.behance.net/markbnynl), [Epicco Digital](https://www.behance.net/infoe9291e3c)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/2018-design-trends.md](https://github.com/xitu/gold-miner/blob/master/TODO/2018-design-trends.md)
> * 译者：[pot-code](https://github.com/pot-code)
> * 校对者：[wzy816](https://github.com/wzy816)、[ryouaki](https://github.com/ryouaki)

# 2018 设计趋势

![](https://mir-s3-cdn-cf.behance.net/project_modules/1400/ceb29959540015.5a2e0a1760c84.jpg)

为项目选一个合适的设计风格越来越关键，挑战也很大。如何才能吸引观众呢，怎样才能让自己的设计从竞争激烈、信息过载的市场中脱颖而出呢？即便这是个信息驱动的世界，设计还是有机会让人们在情感上产生共鸣，从而打造出符合人直觉的交互体验。

## 双色调和双重曝光

2015 年末，Pantone（潘通）公布了 2016 年的代表色为静谧蓝（Serenity）和粉晶（Rose Quartz），这一声明震惊了设计界。可能正是因为这点，引领了数码界渐渐使用双色调的趋势。到了 2016 年，大量网站开始采用双色调的设计风格，试图营造一种富有冲击力和活力的氛围，典型的如 SpotifyBy。最后到了 2017 年，这种风格已经烂大街了。2018 年比以前还是有所进步：多了双重曝光的效果，倒也能在某些照片中表现出均衡的色感、增加一点戏剧性。

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/977c3359540015.5a264983aaf6c.png)

[Adison Partner's Website](http://www.adisonpartners.com/)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9fba3259540015.5a264983aac00.jpg)

[Spotlight Festival Identity](https://www.behance.net/gallery/58313279/Spotlight-Festival-Identity)，摘自 [Manitou Design](https://www.behance.net/manitoudesign)，由 [Kristina Udovichenko](https://www.behance.net/kristina_udovichenko) 和 [Shamil Karim](https://www.behance.net/shamilkarimov) 联合设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e745259540015.5a264b3a89a98.jpg)

[7h10 Double Color Exposure](https://graphicriver.net/user/7h10)

## 更大胆的用色

虽然最近渐变色大有回归之势，但大胆、鲜明的色系在设计界仍然有着不可撼动的地位。毕竟在让人眼花缭乱的品牌设计中，没有什么能比大胆和鲜明的用色更加出类拔萃、让人印象深刻了。但是，一旦决定使用大胆色系，就要斟酌色彩之间的搭配问题，还要考虑如何才能更好的凸显出品牌形象，抓住目标观众的心。

[Simply Chocolate Website](https://simplychocolate.dk/)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4cb37a59540015.5a264f2e343c5.png)

Visión Yo Soy 的商业铭牌，由 [Eduardo Vázquez](https://www.behance.net/edkills) 为 [Qualium](https://www.behance.net/qualiummx) 设计

## 更加生动的渐变

大胆色如日中天，渐变色也不甘示弱，相比以前有了很大的进步。渐变回归设计界后，也算是站住了脚跟：品牌设计、web 设计、logo 设计、用户界面设计等都陆续开始使用渐变元素。双色、三色或者色彩大满贯的组合让设计更显得有范，富有吸引力。

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/81e08a59540015.5a2dfec1aa839.png)

Magic.co 的首页，由 [Ludmila Shevchenko](https://dribbble.com/LudmilaShevchenko) 设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f43fcc59540015.5a2654e99c3cb.jpg)

[Gradient Studies 12](https://www.behance.net/gallery/51830921/Gradient-Studies)，由 [Evgeniya Righini-Brand](https://www.behance.net/jackie-kaydo) 设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/da3d5559540015.5a2654e99c88e.png)

[KIWI Rebranding](https://www.behance.net/gallery/43220641/KIWI-Rebranding-and-Website)，由 [Fabio Pistoia](https://www.behance.net/fabiopistoia) 设计

## 几何图样

继扁平设计和极简主义之后，几何系逐渐成为设计界的新宠。再加上大胆的用色，几何系适当增加了视觉上的复杂性，还有那么点视觉刺激，不过也正是这样才能足够吸睛。

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/d1bc1c59540015.5a26564069883.jpg)

Goldengate 的商业铭牌设计，出自 [Studio Recode ](https://www.behance.net/studiorecode)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/44687b59540015.5a26564069edf.jpg)

[BigCommerce Mural](https://dribbble.com/shots/3408379-BigCommerce-Mural)，出自 [Steve Wolf](https://dribbble.com/WOLF_STEVE)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/3aa66559540015.5a2656ab0abe2.jpg)

[Mercht Brand Identity](https://www.behance.net/gallery/36549745/Mercht)，出自 [Robot Food](https://www.behance.net/RobotFood)

## 动效

近几年动效发展迅猛，随着硬件性能的提升，动效的执行也越来越流畅，交互体验也更加符合直觉。 动效在 web 页面中可以起到铺陈的作用，手机端可以用来平滑元素间的过渡。毫无疑问，动效为设计注入了无穷的活力。 当然，动效也不必设计的多么华丽，避免显得多余，只需要在感官、交互和处理过程上传达出细节上的人文关怀，这样才能更好的取悦用户。

[Facebook F8 峰会的网页设计](https://www.f8.com/)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/acc01c59540015.5a265a61a057b.gif)

[PocketBook 的欢迎页设计](https://dribbble.com/shots/3613821-Onboarding-Pocketbook-Gif)，由 [Andrew McKay](https://dribbble.com/andrewmckay) 设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f3d2f559540015.5a265a61a08b3.gif)

[Intel Logo 动画](https://dribbble.com/shots/1489338-Look-Inside)，[Nicolas Girard](https://dribbble.com/nicolas) 设计

还有另一个 [Google 点阵动效](https://design.google/library/evolving-google-identity/)。

## 视差效果

视差效果让网站显得更有趣，更容易让人留下印象。例如，页面滚动时，在页面的前景和背景元素之间插入 3D 效果，可以让元素的穿梭更加丝滑，还能带来沉浸式的浏览体验。

[Ronin Amsterdam Website](https://www.roninamsterdam.com/)

[AMAIÒ Website](http://as.ouiwill.com/about)

[Elevux Website](https://elevux.com/#home)

## 3D


3D 用途广泛，例如现在 AR 和 VR 的沉浸式体验。不管是表现现实中的物体还是创作纯粹的艺术作品，3D 技术都能轻松胜任。圆润的抛光、细腻的表面和恰当的打光，达到了以假乱真的地步。3D 不仅可以给作品带来深度，还能给观者一种实感 —— 通过手头物品的联想来感知画面中物体的触感、运动趋势等。

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/4c31b259540015.5a266120b097a.jpg)

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/6ce7b859540015.5a266120b0e27.jpg)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9f3cea59540015.5a266122252e9.jpg)

[Marina Bay Sands Singapore X'Mas Comes Alive](https://www.behance.net/gallery/59201983/Marina-Bay-Sands-Xmas-Comes-Alive) [Campaign by MACHINEAST -](https://www.behance.net/MACHINEAST)


![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/913a8859540015.5a2661210d2ac.png)

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/90642859540015.5a2661210d57c.png)

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/f61d6c59540015.5a2661210da73.png)

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/90f62359540015.5a266122248f3.png)

Rubik，由 [molistudio ™](https://www.behance.net/moli) 和 [Peter Tarka](https://www.behance.net/trk) 联合设计

## 金属风

现在的渲染工具越来越强大，渲染出的模型看起来也越光滑圆润了。有了这些黑科技，要做出奢华、高级的金属质感也就不是什么难事了。打好光、调好反射和阴影参数，坐等出图就可以了。

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/0c8b8459540015.5a2661222463b.jpg)

[Grand Spectacular 2016](https://www.behance.net/gallery/42252791/Grand-Spectacular-2016)，由 [C&B Advertising](https://www.behance.net/mustaali) 设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1f8cd759540015.5a26612224bb2.jpg)

[Various Concepts](https://www.behance.net/gallery/58895659/VARIOUS-CONCEPTS)，由 [Oleg Morozov](https://www.behance.net/olegmorozov) 设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/053eb459540015.5a26612225043.jpg)

[League of Legends Mid-Season Invitational and World Championship Branding](https://www.behance.net/gallery/58298917/LEAGUE-OF-LEGENDS-RIOT-GAMES)，由 [ILOVEDUST](https://www.behance.net/ilovedust) 设计

## 等轴设计

设计也不必拘泥于二维的，可以尝试多种透视风格。等轴设计将物体分布在三个维度来隔离彼此，可以给创作带来更多机遇，或可一展宏图。

![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/3392d659540015.5a2661222579b.png)

[Adobe 之城](https://www.behance.net/gallery/53792757/Adobe-Government)，由 [Peter Tarka](https://www.behance.net/trk) 和 [Mateusz Krol](https://www.behance.net/MateuszKrol) 联合设计

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/85b0be59540015.5a2dfec0da458.png)

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/b5398e59540015.5a2dfec0da10e.png)

谷歌人，来自 [Markus Magnusson](https://dribbble.com/MarkusM) / 社交媒体，来自 [Ricardo Nask](https://dribbble.com/ricardonask)

![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/e5a5ec59540015.5a26612223d38.png)

[3D 城](https://www.behance.net/gallery/16479195/3d-city)，来自 [Anna Paschenko](https://www.behance.net/anna_paschenko)

## 留白

给用户多点呼吸的空间，满屏幕的信息怕不是要把用户噎死。适当的留白反而可以让设计更现代化，看起来更舒服，也能让用户更专注于主体内容，不被冗杂的信息干扰，对内容的消化也更彻底。

可以参考：

[Great Wisdom Buddhist Institute](https://gwbi.org/)

## 打破 Grid 布局

长久以来，元素都是呆在自己的区域内，不敢跨越界线一点，更不谈相互重叠了。当然，这也确实方便了设计师的规划：指定某个区域只展示什么内容。长期如此，观众未免产生审美疲劳，看到千篇一律的设计就失去了继续看下去的欲望。

所以，越来越多的设计师开始打破 Grid 布局风格，力图打造独特的风格，让设计看起来更富有表现力和吸引力。想要保持与时俱进，赢得市场竞争力，挑战就会存在，这种趋势也还会继续下去。

可以参考：

[Cedric Lachot Website](http://cedricklachot.com/)

[Red Collar Digital Agency](http://redcollar.digital/)

希望 2018 年，这些设计趋势不止成为趋势，还能成为主流；设计也能更加大胆，能有更多出色、独特的设计让人记住。观众们可以期待以后的设计能带来更多沉浸式的体验，在信息量和美观度之间达到平衡的同时，还能沁人心扉。

2018 年的设计，绝对碉堡了。

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
 
