素材8网-专注前端素材！ › 首页 ›经验分享› PS教程&设计文章 › 查看内容

用超多案例，帮你掌握 7 种最常用的排版方法！

2019-10-30 03:27| 查看: 500| 评论: 0|原作者: Mihai Baldean

摘要: 趋势总体来说还是跟着技术走的。以前 2G、3G 网络受限于传输速度，那时候流行的是像素设计，然后慢慢的支持更大的图片，到现在 3D 设计、视频动画设计流行起来，这背后很多都是依赖于技术的升级，硬件的升级才得以落 ...

趋势总体来说还是跟着技术走的。以前 2G、3G 网络受限于传输速度，那时候流行的是像素设计，然后慢慢的支持更大的图片，到现在 3D 设计、视频动画设计流行起来，这背后很多都是依赖于技术的升级，硬件的升级才得以落地。

所以看待设计趋势，不应该只受限于设计领域，平时多看看设计之外，比如技术趋势，硬件趋势都可能给设计带来灵感。多留心观察，扩展自己的视野，说不定你也能成为下一个趋势的弄潮儿。

这是我们连续 5 年针对未来设计趋势发布预测了。在过去几年中，我们获得了非常多积极的反馈，这不断激励我们在设计领域发现和探索设计的新趋势。虽然大多数趋势都是过去一年就已经形成的，但在 2020 年，我们还是会有一些值得追求的新趋势。

设计趋势往往会随着技术的升级而改变。

话不多说，让我们一起探索最新最复杂的 2020 年设计趋势吧！

动效设计和动画设计

彩云注：这个标题原文是 Motion 和 Animations ，我相信很多人可能会分不清，我在这里解释一下。Motion 我翻译为动效，比如 Loading 动画，没有任何故事性的设计；而 Animations 我翻译为动画，类似于动画片，是有故事性的。

在 2020 年，我们认为动效设计会是主要趋势，因为在几乎所有的设计领域都能用到动效，从微动效到 Logo 和 UI，一切都在动。动画内容正在进入一个全新世界，在这个世界里，纯文字内容不再像以前那样吸引人了。

正确的动效设计可以使信息更快更准确的传达给受众。

△ 01.theQoos Brand Illustration by Min kyung ；02. Legion Season 3 by Nick Scarcella ；03. Solvent – Making Cannabis Banking Open by BluBlu Studios ；04 Cloud services（animated icons）by Alexander Baleev ；05. VIRAL by Ambre Collective , Thibault ZELLER , Jonathan Plesel ；06. UXC_Design2020_Project Research by Donerzozo

UI/UX

1. 深色模式（android Q and iOS 13）

深色模式会成为 2020 年的新趋势，Android 推出了两种深色模式，分别叫 Force Dark Mode 和 System Dark Mode。微软抢在谷歌之前在他们的邮件应用中首先更新了深色模式，谷歌紧随其后，也在他们的 Android 10 中的邮件应用 Gmail 中跟进了这个模式。

随着这一波更新的发布，许多设计师将会选择在他们的设计中使用这一模式，所以预计在未来的一年里会看到越来越多的深色模式。

2. 大胆的配色

大胆鲜艳的配色在最近两年成为了一种很重要的趋势，在 2020 年这一趋势将会继续。这些颜色丰富，明亮，充满活力。他们既可以作为主色也可以作为辅色。

△ 01. EMART UX/UI RENEWA by Plus X, Lee boram , Sabum Byun , Hee Jung, Youjin Jeon , 원 지혜, Bongho Choi 02 NSH by Sofiya Fedotova 03. Eldorado Casino – Mobile Web UI, App U by Loredana Papp-Dinea, Mihai Baldean , Milo Themes 04. mmcité+ website by Studio 9 Zlín, Pavel Valek 05. The Automated Hack Series #21-25 by Andrea Hock 06. Flipd app by Estudio Pum

3. 更多的插画被应用在UI中

最近几年来，插画设计一直是设计领域中最热的趋势之一。插画是一种很好的视觉符号来帮助用户理解产品背后的故事，配上一些好的创意概念，使得信息传达得更快。

△ 01. raken Redesign by Sylvain Theyssens , Antonin Collard 02. Reliefy – Medical Project by Marcin Pankiewicz Gorzów , Miłosz Pożarkowski 03. ABUK: Book Covers Design for Audiobook Store by Sergey Valiukh, Tubik Studio 04. Illustration System for GOL by Estudio Pum 05. Smart Home App – IOS by Maria Osadcha 06. Skilling Trading（skilling.com） – Loredana Papp-Dinea , Mihai Baldean

4. 更多的故事性

故事，能帮助用户在产品的使用过程中，获得尽可能简单和流畅的体验。一个好的故事更容易帮助用户理解产品。为了把故事讲好，我们可以创造出一个品牌人物，赋予他人格，为他制造一些故事和冲突，最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础，至于讲故事的方式，在 UI 和 UX 中都有使用，原理一样只是落地方式不同。

△ 01.YOGO – Trip Planner App by Julie Truong 02. UX/UI | Food delivery app by Konstantin Seredkin 03. cooc by cuneyt sen

5. 更多的微交互动效

正如我们所说，动效是今年的趋势，在 UI 中的表现尤为突出，也能为插画增加丰富的细节，强化信息传达，提升记忆点。

微交互的概念最早出现在 2018 年，但这是一个值得在 2020 年关注的趋势。它们是 UI 设计中一个极其重要的趋势，决定了一个 App 或网站是普通还是优秀的区别。微交互在让用户理解系统如何工作，并引导其获得更好的体验方面扮演着非常重要的角色。

如果你是一位 UI 设计师但还不会在工作中用微交互，我们建议你赶紧学起来，因为在 2020 年的 UI 设计工作中，缺少了微动效，整个产品都会黯然失色。

△ 01. UI/UX | Smart Pharmacy app by Anastasia M, Sergey Nikonenko UX 02. Climate & Animals: Extinction Crisis Website UI/UX by Daniel Tan, Daphnie Loong 03. Flying Veggies by Patricia Reiners 04. UKRPOSHTA. Mobile app of Ukraine’s national post by Ilona Kim 05.Alarm App for the Deaf by Tagir Tikeev

6. 应用视频到UI中

在 2020 年，信息的触达将会变得更快，而视频是最好的载体。无论是选择通过动画还是电影的方式来推广产品，视频都是任何网站或应用所必须具备的。

△ Pockee – a family banking app by Adam Zielonko , Toto Castiglione , Wiktor Półtorak , Iryna Korshak , Netguru Team , Maciej Dyjak

7. 关注功能性

UI 设计中很重要的一个部分就是其功能性。每一个元素的设计都是基于它的目的和功能。很多人认为在设计过程中，对于视觉和功能只能二选一，但是随着技术的发展，两者可以很好的兼顾到。设计是为了让网站或应用引起用户的注意，而功能是为了让体验变得容易，目的是为了让用户更快的找到自己想要的信息。

△ Skilling Trading（skilling.com）- Loredana Papp-Dinea , Mihai Baldean

8. 追求极致细节

高度关注细节对于 UI 设计来说非常重要。从每一个按钮，图标，Loading，导航，以及任何一处小的细节都需要做到极致设计。我们在 UI 中需要注意的细节，总是随着新技术的出现而发生变化。

明年我们会看到越来越少的按钮，更多的基于手势的导航。例如，Android 的一个主要导航按钮「返回」，将会在 Android 10 中正式消失。

△ FLYR Visual Identity and Marketing Website by Ramotion

△ Alarm App for the Deaf by Tagir Tikeev

9. 渐变

近些年，我们一直在说渐变，这个趋势在 2020 年会愈演愈烈，值得大家关注。那些鲜艳的颜色是最合适拿来作为渐变了，这些配色方案可以用在按钮，图标，插画甚至是文字中。

△ 01.Wavecut – IOS Application by Eleken Agency 02. Product design（UX/UI）- anti-depression app by Anna Arutiunian 03.Paul Ilea – Film Score Composer, Producer, DJ, Perfomer by Loredana Papp-Dinea , Mihai Baldean , Milo Themes 04. ITEXIA by Nextpage Agency , Alex Seagull , Jegor Walowski

插画

1. 角色

角色设计包括需要定义出符合整个品牌概念的形象。这其中最重要的事情是，通过插画，设计师需要给角色注入强烈的个性特征。当你在 App 或网站中遇到虚拟助理就是角色设计的一个很好的例子。

△ 01. Newly Tiny Things • Children’s Picture Book by Vuon Illustration, Vinh Nguyen, Rong Pham 02. Adobe x Createfulness by Maïté Franchi, Matthieu Tarwane 03. 3D Characters V2 by Antonio Petit Cwirko 04. Malayali by Danny Jose

2. 纹理

插画和纹理是一对非常棒的组合，能够创造出令人难忘的画面。你可以自己制作笔刷，也可以在素材网站上找到非常多的纹理和笔刷预设，能很方便地把你很多的创意想法和图案纹理加入插画中。

△ 01. JDE – Common Grounds by Marianna Tomaselli 02. Japan by 饭太稀

3. 扁平描边插画

在过去几年，扁平插画几乎无处不在，这个趋势将会继续，但是会有一些新的变化：在每一个元素上会画上一条细的描边。大多数设计师习惯使用一条黑色的细线描边，但其实也可以用其他颜色，颜色要比插画主色深一些。

△ 01. BILLY KENNY – just came for the music by SANGHO BANG 02. Babelia – Lecturas para verano by Miguel Ángel Camprubí 03. Boxing Cat – First Blood by Felms 04. COUSCOUS STUDIO | EXPLAINER VIDEO by khaled abdelaziz

4. 轴侧图

轴测图（也叫2.5D）依然会流行，主要应用于 UI 设计。这一趋势发迹于虚拟货币领域，但在 2019 年得到了充分的发展，现在已经被广泛的应用到其他领域。

△ 01. Cyberpunk City by ONJO _ 02. FastCompany – Isometric Numbers by Artur Tenczynski 03 & 05. ISOTYPE by Mario De Meyer 04. Slack illustrations by Jing Zhang

5. 3D

随着越来越高效的软件和工具的出现，3D 渲染也逐渐产生了变化。3D 元素已经开始变得越来越受欢迎，因为与 2D 不同，它提供了更为逼真的效果。

△ 01. Games Casas Bahia by Miagui 02. Balance by Cabeza Patata Studio 03. Castle Crashers by Mohamed Chahin 04. Eyoo family 3D illustration by Baianat 05. Personal Illustrations Vol 1 by Pablo Marín 06. A Person Travel by 乱 Elaine

6. 超大胆的颜色

大胆的配色给插画提供了强大的表现力。这些颜色能营造出活泼的氛围，使人物脱颖而出，在背景上也给人以丰富的想象力。

△ 01. Mural for STRTFD Coffee in Moscow by Masha Shishova 02. Twitter – Mobile Internet Mind by Leo Natsume 03. Coca-Cola Sleek Cans Illustrations by Tania Yakunova

动态图形

1. 3D视频

在 2020 年，很难想象做动态视频不用到 3D 技术。这种设计形式仿佛像打开了新世界的大门，只怕想不到，没有做不到。我们可以在商业广告，电影，游戏和更多的领域中找到 3D 设计。

△ Cyberpunk City by ONJO _ , Visual Design Art S

△ States of Matter #3: Montage by Juan García Segura

2. 视频+动画插图（也叫混合媒体）

拍摄的视频，生动的插图，还有静止的照片，把这些结合在一起会产生意想不到的惊喜。2D 或 3D 插图能够创造出令人难忘的视频，从几条线的动画到 3D 中的真实人物，甚至是现实生活中并不存在的复杂视觉效果。

△ Coppel / Back to school by Plenty Studio

△ PWR by Ana Hoxha, Edvina Meta

3. 2D动画——介绍性视频

2D动画聚焦于创作故事和角色，并以矢量形式居多。当想要为一个活动或产品做介绍性视频时，2D是一个完美的选择。在一个忙碌，没有时间阅读的世界里，介绍性视频是任何网站的必备品。

△ Freelive by Studio Infografika, Sergey Sadowski, Anastasia Alterka, Arsentiy Lesnik, Yuriy Armstrong, Arin Good, George Vald, Maxim Tleubaev

△ ESN – Railway Package by Andres Hertsens, Squarefish Studio

4. 动态Logo

前面说了那么多，你应该明白动画在 2020 年是必须要有了，为了保持竞争力，我们也需要把它们整合到 Logo 设计中。许多公司已经开始运用动态 Logo 演绎来吸引用户的关注。这是 Logo 设计的一个主要趋势。

△ Cuppa by Victoria Ng 02 – 07. Motion Beast ✕ Logomachine. Logo animations by Motion Design School, Víctor Villamarín , Bogdan Dumitriu , Logomachine .net , Alexander Kuznetsov , Zack Lee , Denys Siurin , Stanislav Marchenko , Lizaveta Tsareva , Supremus Levenus , Anton Fomin , Emile Khafizov, Ach Hadda

5. 2D与3D的混合动画

这种趋势并不新鲜，但绝对值得一提。通过一整套软件流程，将 2D 与 3D 的动画结合到了一起。（彩云注：比如可以用c4d+ae组合的软件制作流程）

△ Olof Storm Channel On Youtube

平面设计

1. 在平面设计中运用3D元素

虽然在平面设计领域主要是用 2D 元素来呈现的，但 3D 元素的加入可以为画面增加了更多的视觉体验。3D 元素可以是插画，动画或者字体等形式。

△ 01. Portraits by Fernando Domínguez Cózar 02. NASA | Space Age by Studio—JQ ∆ 03. NASA X BBC | Unnatural World by Studio—JQ ∆

2. 双色

少即是多，这几个字非常完美的诠释了这一趋势，在其中设计师运用大胆的元素，优雅而又对比强烈。这种趋势非常适合印刷，如果颜色过多，印刷费用和技术要求也更高。

△ 01. Winter Open ’18 by Kinoto Studio, Romina Rios, Luc Geoffroy 02. Synticate© by Stepan Solodkov 03. TIGER IN A MUSEUM by de_form studio, nora demeczky , eniko deri 04. Lettering Series IX by Rafael Serra

3. 欧普艺术

欧普艺术是抽象的，很多著名的作品只有黑白两色。通常，它们给观众的印象是动感，神秘，闪烁或抖动，膨胀或扭曲的。

这种趋势是以静态的画面，但能给人动感的视觉印象。如果想在印刷海报中实现这种「动态图形」，这是最合适的方法。

△ 01 & 02 Tokyo Blends Film Festival by Mercedes Bazan , Adobe Live 03. Posters — Vol I by Xtian Miller

4. 平面设计中应用插画

插画在所有设计领域都非常重要，所以平面设计中也能表现良好。2D 插画在最近几年极为流行，在 2020 年以后，将继续受设计师喜爱。

△ 01. NA HELU – PLAKATY by Ewelina Gąska 02. CAT bar and dance club / 2019 by kissmiklos , Eszter Sarah

5. 动态海报

动画无处不在，我们在设计的各个领域都能找到它们，在一些线上海报中也有使用到。动画混合了 2D 和 3D 元素，效果非常棒。

△ 01. Festival Metro Metro by Bzoing , Virginie Bédard 02. Failing Windows by Pierre Kleinhouse, Ohad Zivony

6. 复古科技风（赛博朋克）

赛博朋克是 80 年代出现的一种趋势，但在好莱坞发行那个时代的电影又重新出现。随着《怪奇物语》系列的成功，这股浪潮又开始流行起来。

△ 01. Cocktails and dreams by Gjorgji Despodov 02. C I N E M A X by Jeison Barba 03. Stranger Things (Netflix.com)

7. 瑞士平面风格，达达主义，包豪斯

20 世纪平面设计中最重要的运动往往是最优秀设计师的灵感来源。这些风格是值得一提的，因为它们是经典的，历久弥新，遵循它们的规则几乎不可能在设计中犯错。总的来说，这些风格强调版式，无衬线字体（Helvetica就是在1957年包豪斯时期设计的），几何图形，简单的线条，体积感和颜色等元素的运用。

△ 01. Swiss poster 01（typography terms）by Mehman Mammedov 02. Yellow Vision vol.3 by Violaine & Jeremy

8. 大面积连续的色彩空间

大面积连续的色彩空间将会在明年大为流行，它们大胆的排版及搭配，可以在平面设计，产品设计以及 UI 中找到。

△ 01. Synticate© by Stepan Solodkov 02. Havaianas Branded Content by Johann Vernizzi 03. Kekkilä—BVB by Kurppa Hosk

9. 极简主义

极简主义强调设计只使用必要元素，用简单有限的颜色和形状来设计出一个难忘的画面。放弃任何多余的元素，所有的设计内容都聚焦于每一个目的。为了打造出一个极简主义的设计，需要使用尽可能多的留白，一个简单的配色方案和一些最基本的几何形状。

△ 01. Heim magazine, n.3 by Sasha Yaguza 02. Andrei Gheorghe – DADA – Publishing by moodley brand identity

技术趋势

科技正在用智能设备和全新的理念给我们的生活带来革命性变化。这些新技术使得设计师们已经开发出了符合当前趋势的新功能。人工智能，机器学习，虚拟现实和增强现实正在影响着设计师们的思维方式和创作方式。

1. 增强现实的移动应用

随着苹果和谷歌推出的各种 AR 开发平台，ARKit 和 ARCore，很明显，整个世界都将转向增强现实技术。

许多大的品牌已经开始在他们的应用中采用这些技术，而那些还没有这样做的，必须认真考虑如何让用户体验这种新的交互方式。

有一些 AR 交互形式可以创建非常直观的应用。第一种是直接把应用界面放在手机内，另一种是把 AR UI 与周围的环境相互关联。最常用的交互之一是当 UI 与对象关联并通过扫描特定的内容来触发，这个操作的结果是把界面中的某一个元素链接到现实世界中的一个特殊标记上。

有关更具体的人工智能规则，可以去阅读下苹果公司编著的规范，这个规范旨在提供身临其境的体验，能将虚拟物体与真实世界无缝的融合在一起。

2. AI，机器语言，聊天机器人，虚拟助手

聊天机器人是一种软件，它通过听觉和文本的方式进行交互。这些程序经常设计成模拟人类进行对话，尽管在 2019 年，它们还远远不能通过「图灵测试」。

人们还不习惯跟人工智能聊天，所以设计师和开发的一大部分工作就是简化过程并建立信任。他们需要帮助人们理解这个系统可以做什么，以及如何使用。

在 AIML（人工智能标记语言）中设计和编写机器人脚本是一个优秀的 UX 设计师的魔力之处。

大多数使用聊天机器人的公司都选择用一个助手来演示如何面对人工智能。以下是一些在用户界面中使用聊天机器人的品牌：Spotify、Starbucks、MasterCard、Sephora、Lyft、Pizza Hut。

3. VR

大多数人将 VR 与游戏产业联系在一起，这是有原因的，但当所有主要的科技公司都在开发 VR 工具包和应用的时候，我们可以肯定地说，我们在不久的将来可以发现使用和享受这项技术的新方法。VR 已经在教育，医疗，旅游，房地产或建筑领域得到应用。

4. 语音用户界面

语音用户界面（VUI）使人与计算机的语音交互成为可能，它使用语音识别来理解说话，然后用文本转化为语音的流程来播放回答。语音命令设备（VCD）是由语音用户界面控制的设备。

在过去的一年中，40% 使用互联网设备的人每月至少使用一次语音助手，这一数字比去年增加了 10%。

产品设计

1. 包装上的图案

在一个过度饱和的包装市场中，很难创造出引人注目的新产品，所以设计师回到原点，期望创造出能让产品在拥挤的零售货架上脱颖而出的包装图案。几何图形，花卉，浪漫或单色图案是任何产品包装的大胆选择。

△ 01. Flying Goat Coffee by Nicole LaFave 02. VITA SPA for skin by DWYW 03. Chocolate Packaging Design by arithmetic 04. 100 Hand-drawn seamless patterns and shapes by Arseny Samolevsky

2. 包装上的插画

插画一直是包装设计中的一个强大元素。通过这些插画能让用户更好的理解产品背后的故事，插画已经存在了几十年，很有可能它们永远都是一股潮流。

△ 01. Briggs Original by Hee Jae Kim 02. Velvet Coffe Cups by Anton Malishev, Oh Carola 03. Waste-Not Kitchen — Brand Creation by Tried&True Design 04. Home Sweet Sushi Kids by Savvy Agency, Mariana Spark 05. Cerveza Maleante by Antonay

3. 留白

如今，极简主义已经是设计中的一个基本原则。它以留白替代了任何无用元素。这种趋势带来了干净的设计，也让字体得以突出。

△ 01. A SCENT Essential Oil by Yu-Chien Lin, Huang Wun-Siang , Chi Tai Lin 02. Rebranding concept for Bodri Pincészet by Kristóf Gáthi

4. 单色和双色

只使用一种或两种颜色似乎是限制了设计的发挥，但却可以创造一个强大的视觉识别系统。只使用一种或两种颜色，可以让产品保持一个极简主义的外观，放弃一切多余的元素。其结果就是得到一种精致，优雅，赏心悦目的产品。

△ 01. Zerbet Sorbet by Cailin Giles 02. Bailey Brew by Ed Hall Sydney, Ekaterina Leontyeva, Boaz Suen

5. 大胆的颜色

大胆的颜色和渐变在 2020 年依然是一股强大的趋势，使用好颜色你可以创造出难忘的产品。

△ 01. Minimalism and Hedonism: Millennium Brand Redesign by Fabula Branding；02.Tattoo Mall by Openmint Studio, Ekaterina Teterkina , Dima Je, Yegor Kumachov；03.Orgânica by Larissa Kendrik , Gabriel Schatzmann；04.VIZOU – Reading Glasses by Studio Chapeaux, Axel Domke；05.Packaging for Flavoured Pistachios by Mila Katagarova

6. 注重细节

关注细节的包装比以往更受欢迎。设计师之所以选择这种趋势是因为它赋予了产品品质感。这种趋势让我们以现代视角重新思考经典。

△ 01. HYWILDE by Chad Michael Studio 02. AMSTEL KARGO IPA by Caparo design crew；02.Big Island Coffee Roasters – Espresso Bites by Farm Design

7. 包装里讲故事

到 2020 年，各个品牌将不得不重新思考产品和包装。品牌必须讲故事，帮助顾客体验到产品的精髓。这可以通过在包装上的视觉设计来实现。

△ 01. Beak Pick by Backbone Branding 02. Coloreat by Backbone Branding

字体

1. 粗体

粗体字设计是一个极为重要的设计趋势，将能代替图片成为主要的元素。新颖的字体设计能在网页设计和平面设计中发挥作用。

△ 01. Eirik Lyng by Erik Herrström 02. Bauhaus_100（x3）by BunkerType（Jesús Morentin）；02.UCCA Center for Contemporary Art Beijing by Bruce Mau Design（BMD）elle Maréchal

2. 小写字母

越来越多的应用使用完全小写的字母，非常容易阅读，这与现代设计中的极简主义完美的契合。明年，我们一定要密切的关注这一趋势。

△ 01. Autea Branding & Web Design by Michał Markiewicz 02. Yamadai Food Corporation CI by Masaomi Fujita / tegusu Inc. 03. Aquality Branding by Häkan Fidan

3. 自定义字体

虽然这种自定义的版式已经不算新鲜，但我们会看到这种趋势越来越多的出现在设计中，尤其是在 Logo 和海报中。这种做法在大品牌中更为常见，因为生产一种专用字体可能相当贵，但设计师其实可以对现有字体进行小的调整，结果就可以做到非常独特。

△ 01. Think8 Global Institute by Blok Design 02. ZINEZŐ // design periodical by Barbara Katona , Media & Design Department Eger 03. TYPE DESIGN ’19 by TRÜF Creative 04. Cako typeface by Violaine & Jeremy

4. 动态字体

就像我们前面说的，动画在设计中真的是无处不在，所以我们也会在字体中发现它的身影。动态字体在屏幕上会用一些小的形变和移动进行设计。这个简单的技术设计字体，给观众留下记忆点。

△ 01 & 02. Grafika by Gimmick Studio . 03 & 04. Augmented Reality & Motion Typography by Alex Slobzheninov

5. 堆叠字体

堆叠文字可以说是现代的解决方案，重在引起用户关注。我们可以在网页设计，应用及平面设计中看到这一趋势。

△ 01. L’Om by Atipus Barcelona 02. Journal by Gemma Mahoney 03. poster collection | vol.8 by Roman Post 04. SMLXL by Melissa Baillache, Mat Groom, Jason Little