网页版面视觉元素好的设计的美丑往往标志着一个网站的质量。

编者按：好的设计的美丑往往标志着一个网站的品质。虽然紧跟时尚潮人看上去标新立异，但即使运用失当从而会适得其反。纵观近十年的设计简约，我们能很显著地看到红色系、3D式、动感化的简约逐渐推动风骚而今年那些路过的“坑”又为去年更立体、好看的设计做了铺垫，下面我们可以来具体看看2017到2018年设计风格到底发生了这些差异，也助于我们更好地迎来2019！本文整理自Medium中原标题为“DangerousDesigntrends2017”及“2018DesignTrends”的文章。

2017年这些差点成坑的设计：亮色系

众所周知色调能传达不同的情感。在品牌和界面设计中，相比白色系，明亮些的色彩更易摄人眼睛并传达积极心态。这些大胆的色调搭配闪烁的效果变得更具魅力、有趣，不像淡色那样怡情放松。

2017年是激动人心的一年，很多创业公司和产品如雨后春笋纷纷涌入市场，并争取各自的一席之地。由于色彩的利用是一条吸睛的捷径，很易于让用户造成代入感，因此暴力哲学显得愈发越流行。但凡事都有两面性，这种利用也很可能会干扰用户体验。

大块大块白色的利用和条纹很可能导致视觉疲劳，让人目眩缭乱、不知所云。一旦客户造成这些感受就或许会立刻溜掉，然而这些设计简约的本意不正是为了打动人们吗，这样看是不是适得其反了呢？

如果把这些配色放在文本附近也许直接惹人不悦，没法阅读下去。亮色会反射更多光线，其产生的效果如同你在吃饭，然而有人不停用闪光灯照你一样，即使把内容读完，也会造就出消极心情。

在红色中加入更多暗系线条或中性风格调和一下；

将霓虹灯一样的色调更多地置于细节里，或用于“提示语”中吸引注意；

在大字标语中使用红色成为装饰元素；

将亮色用于指出及交互内容中。

用大片大片的鲜明颜色装饰主界面，或将其变成背景色；

在一张页面上使用过多红色设计；

把文本附近的页面做得更加花里胡哨；

别在如图标、导航等等的有特殊含义的按键中使用红色。

实验布局

为了吸引流量，设计师们不遗余力地贡献着想象力，试图摆脱僵硬的发力，将矛盾性、混乱的模块带入设计版图中，同时这些实验性的发力在2017年也逐渐流行起来。

这个潮流很有趣，也很值得玩味。这种方式在整齐划一的界面设计中为艺术及多样风格开创出了一片海洋。这种实验性布局的色调就是讲求不对称，无论是照片、排版还是交互设计或许都是风格上去的，元素与元素之间贯彻不同的装饰色调，甚至有也许相互重叠。

现实生活终于够杂乱无章了，难道看个网站必须再次经受这些“洗礼”吗？这些布局的无序性很可能让客户找不到想浏览的信息，使阅读感受强行变差。当真正的阅读内容被繁杂的版块遮蔽，合理的排布此时就显得至关重要。

视觉层次对用户的鼓励也非常重要。在实验性布局中，很多浮动元素将界面分割成混乱、散漫的状况，往往让人抓不住重点。

在非关键内容页面上可以试用实验布局增加点格调；

可以在整齐划一的模块和构架里采用非对称布局成为俏皮的点缀；

将分组表单排列在附近，并确保不同的内容模板间有显著区隔；

仅在对比明显及排版足够宽敞时使用重叠元素。

在内容繁复的组件里使用这些布局只会雪上加霜；

如果你的观众阅读时间非常有限，就不要为了这些视觉上的冲击白白给人们提高阅读难度了；

别把模块布局得太随便，像纸屑一样分布在整个版面上并不漂亮，一些基本的对齐布局必需要照顾到；

别盲目重叠元素，也别盲目设置交互效果，一定要考量模板内容中的相关性。

小细节

极简主义这几年仍然都很流行，不过现今看来这些风向似有转变，设计师迅速开始青睐于更详尽的页面布局了。当然，这是有理由的：极简风的设计大大压缩了提供惊艳感的机会，很难显得与众不同，所以要想标新立异必需要在细节上下功夫。

极简风的整体设计配色上一些精美的细节似乎是很吸引眼球的。从独特的导航设计到并无特殊含义的文艺风浮动元素，这些都可以作为设计师下手的空间。同时浮动装饰字体、下划线、几何图形等小设计也愈发越受欢迎，它们可以帮助观众在自己喜欢的内容上作标注，充当版面的指南针或分隔符，就像一些评论一样有用。

细节用得好可以让人眼前一亮并为读者起提醒作用，但如果排铺得乱糟糟，为了效果而效果，恐怕只会徒增读者的厌烦，让人认为喧宾夺主。毕竟最重要的是内容啊，要是让那些小玩意儿把内容都挡住了，恐怕读者也不情愿再费力浏览了。

小细节常常被用作装饰元素排布于图像或模板周围，有时在版面上也会与其它元素重叠，或跟随光标产生移动效果。这些细节如果吸引了观众的关注，既可能造成正面影响，也或许有消极印象。因此，我们必须意识到这个难题，有序地处理这些效果，在不妨碍阅读的前提下效率最大化。

运用细节设计起到加强阅读的效果，保证浏览顺畅；

采用细节为读者“指路”，引导人们寻求自己想要的内容，或者对不同内容区块进行隔断；

用简单明了的背景设计平衡细节的繁复感；

可以尝试在细节设计中添加文本内容，使其与网站的阅读内容形成相关性，更统一一致。

在本就冗杂不堪的背景上又降低细节的雕刻，可能会让人认为很啰嗦；

避免无的放矢，单纯无用处的细节堆砌反而变得整个网站没有主题；

要是尝试在主要的用户导航中突显这些无含义的细节设计，反而变得更没意义；

把小细节仅只是锦上添花的东西，别把它看得太重要。

忠心提醒

微型排版看上去更有层次感，也为网站中的板块与板块之间留有余地，至少一眼浏览过去不会这么累。这种小字体也起到了有趣的对比作用，没有让人认为嘈杂的觉得。

但另一方面，微型版面也或许在较为宏大的背景里被淹没，很难让人注意到。同时，由于字体太小，反而可能让人认为读出来太吃力，干脆放弃细看其中的奥妙。所以利用这些版面要特别注意——最好在短句子、小段落中使用。此外，也最好导致使用小于13pT的字体排版。

随着越来越多的设计师开拓创新，实验导航方式也随之遭到诟病。不同的导航样式可以使网站更有趣，也可以以特殊形式为读者“引路”。

如果实验导航方式足够直观，让客户无法与之交互并形成美妙感，那这些设计就是顺利的。但也需要意识到一点，即：并不是每种设计和每位观众都合适这种风格，测试其可用性至关重要。

在UI设计中，动画效果能形成无数种可能，这种成就性的转化界面能提高客户体验度，在炫彩的交互中增添不一样的体验。

但也要切记，动画效果太多可能妨碍页面的加载速度，除非你对客户的细心足够有抓住，不然最好别冒这个险。此外，和细节设计一样，冗杂的动画界面甚至会吞没网站的主题，让顾客找不到想看的内容。

2018的设计样式明显有了更长足的进步：3D静物场景

近两年来3D静物场景的设计越来越多，代表性的3D艺术家有MVSM、PeterTarka等，MindsparkleMag预测，未来3D静物场境会愈发越受欢迎，特别是在企业的logo和产品展现结合的项目中。

▲Project:SquarespacestillifeAuthor:MVSM

▲Project:Shapes&FormsAuthor:PeterTarka

▲Project:RubikAuthor:PeterTarka

▲Project:AudiQ-RiosityAuthor:PeterTarka

▲Project:AdobeGovernmentAuthor:PeterTarka

更多AR设计

增强现实（AugmentedReality，简称AR）虽然在游戏、影片及App中受到关注，在设计上还有很值得等待的前景，特别是对移动设备来说，其更是大有一番施展的空间。像DIAStudio所做的，把互动性的3D字型采用在日常生活画面中。

▲Project:DIAAuthor:DIA

▲Project:DIAAuthor:DIA

▲Project:DIAAuthor:DIA

更多3D字型

3D字型将会越来越流行，重点是引来眼球、打破创意界限。3D科技能进行有效连接，能给受众留下深刻印象，因此对企业（如耐克）来说越来越重要。当然，我们就会发现更多3D动画。

▲Project:3DTypeCollectionAuthor:ILOVEDUST.

▲Project:3DTypeCollectionAuthor:ILOVEDUST.

▲Project:3DTypeCollectionAuthor:ILOVEDUST.

▲Project:TypographyprojectsAuthor:MuokkaaStudio

▲Project:3DTypeCollectionAuthor:ILOVEDUST.

数字化手工艺术

新软件(如平板手机、stylos等)和新应用程序使使用手绘技术和将其与数字科技整合变得非常容易。在Photoshop中“旧画笔”的时代即将陆续结束了。这种新潮流被称为“数码画笔”网页版面视觉元素，其功能非常广泛网页版面视觉元素，能够运用立体维度最终呈现出一种更现代、更简洁的外形。越来越多的品牌（如Adobe、Nike）正在使用这些科技美化他们的品牌或产品。

▲Project:PaintblastVol.1Author:DavidMilan

▲Project:PaintblastVol.1Author:DavidMilan

▲Project:AdobeCreativeCloud2018Author:RuslanKhasanov

▲Project:MaskedAuthor:RikOostenbroek

▲Project:PaintwavesAuthor:AriWeinkle

▲Project:MIAuthor:RikOostenbroek

明艳多彩的渐变效果

近年来，渐变效果重回江湖。预计这一态势将会大幅下去，而且将更加更加多样化。未来将要提到更多的渐变效果创新，特别是在使用柔和和生动的色调与多种纹路结合这一方面。渐变2.0还包括了双色调的利用。

▲Project:Magic.coAuthor:LudmilaSchevenko

▲Project:DailyPostersAuthor:MagdielLopez

▲Project:DailyPostersAuthor:MagdielLopez

更多3D、2D结合的动画

类似当时看到的AR趋势，预计即将有更多设计师将3D影像与2D平面结合进行构思，例如设计师Baugasm的海报。

▲Project:DailyPostersAuthor:Baugasm

▲Project:DailyPostersAuthor:Baugasm

▲Project:DailyPostersAuthor:Baugasm

更灵活多变的3D呈现

近十年3D设计历程了很大的演进，各方面都趋于完美。人们终于越来越难区分现实与虚拟之间的差距。今年有众多取材于自然有机的方式或者动作表现，让3D设计的动画更引来他们目光：比如我们在自然界里发现的液态形式及运动。

▲Project:NikeVapormaxAuthor:MVSM

▲Project:BlobswithMediumAuthor:VincentSchwenk

▲Project:BlobswithMediumAuthor:VincentSchwenk

▲Project:CovestroDCAuthor:VitalyGrossmann

更多精巧的艺术图片

当代摄影和品牌宣传照将会更加更为大胆、前卫、具解说性且设计独特。无论这种疗效是来自手工工艺或是以3D科技捕捉并可视化，都会让人印象深刻。

▲Project:MonkifestoAuthor:Snask

▲Project:MonkifestoAuthor:Snask

▲Project:AizoneAuthor:Sagmeister&Walsh

▲Project:NikeAMDRevolutionAuthor:HappyFinish

充满现代感的撞色插画

现代插画与古典外观的结合成为了2018年的一大趋势。此外，更多精心制作的动画（讲究深度、细微动作等），除了引人注目之外，能阐述及加强故事的冲击性。

▲Project:PSBRefinanceAuthor:KirillPavlov

▲Project:BareWitnessAuthor:ReAgency

▲Project:InsidetheHeadAuthor:SaraSvensson

彩色凝胶摄影

彩色凝胶或滤镜可用来微调闪光灯的亮度；使用不同形状的滤色片可以得到非常的灯光效果。这种方法有无限的或许，可以在拍摄时为被拍摄者或物件创造出有趣的光影色彩，当使用两种或更多不同色彩时，所成就出的美好颜色及对比效果是能够用photoshop做起来的。

▲Project:NudeCoca-Cola&NudePleasureAuthor:LocalPreacher

▲Project:NudeCoca-Cola&NudePleasureAuthor:LocalPreacher

▲Project:NeonHoodiesAuthor:TimTadder

▲Project:NeonHoodiesAuthor:TimTadder

响应式logo

在满满都是移动设备的全球里，响应式logo变得愈发越重要，也显得愈发越带有适应性，它包括了移动、平板手机、桌面设备等多个版本。就像几年前响应式的网页设计一样，响应式logo现在已经变成必需品了。

▲Project:ResponsiveLogosAuthor:JoeHarrison

简单的半3Dlogo

正如以下的事例所展现的，标志设计的新趋势是将简化的外形与半三维的外型结合上去，利用平滑微妙的色调递减，均衡地降低深度效果，最终形状的整体使用感将显得非常鲜艳和饱和。

▲Project:Formula1Author:Wieden+Kennedy

▲Author&Project:Firefox

▲Author&Project:Firefox

▲Author&Project:Firefox

自定义的艺术字体

定制化的一些奇怪字表现在正成为设计师们的心中好。无论是破碎感的抑或扭曲状的，这类型型的字体设计常常脱颖而出，而这些字体在问世伊始就天然伴随着表达感。有一些字体还带有交互性，可以随着光标滑动产生变化。

▲Project&Author:JeanneBataille

▲Project:ViNovellAuthor:Atipus

▲Project&Author:AbschlussHSD

网页设计上更多的3D效果（或更具交互性）

2018年网页设计的一个主要趋势是(交互的)3D元素的盛行，它带有深度感、运动感、可随角度的差异造成视觉上的疏离甚至透视效果。3D元素及交互环境并且网站变得十分浓厚，当然也增加了美感和用户体验。例如，Atacac已经建立了一个交互式将来虚拟现实展示厅，允许用户在虚拟3D中构建时装系列。

▲Project&Author:Atacac2017Yearbook

▲Project&Author:TheArtery

交互式的鼠标指针

交互式键盘指针可以带给更好的顾客体验。使用者可以在定制的个人网页里借助控制键盘指针实现互动。例如在BenMingo的网页，当单击菜单栏的之后鼠标指针会成为磁铁，十分有趣。我们期望将来能有更多有趣的鼠标指针设计。

▲Project:FolkAuthor:Phoenix

▲Credits&Author:BenMingo

▲Credits&Author:WalkingMen

创意性的网站加载

在枯燥无味的加载页面前拼命等待的日子终于过去了。为什么不在加载的这段时间里玩点有趣的呢？

▲Credits&Author:Contemple

▲Credits:AwwwardsConferenceDesign&Development:Adoratorio

Instagram限时动态

这也许终于不是哪个特别的设计趋势了，但的确有众多设计师那样做。自从Instagram限时动态推出以后，这个功能立刻获取设计师的赞赏及使用，以确立自己的哲学品牌、获得更多的粉丝。今后可能我们可以见到更多Instagram的应用。

3D的手工艺视觉

数字与手工艺的结合成了一种渐热的作画方法。手工艺作品比起数字作品更有趣及时尚，因此可以用3D制做出手工艺一样的效果。以下就是MaximShkret的雕塑，看上去就像是用纸张手工做起来的一样。

▲Credits:3DArtAuthor:MaximShkret

▲Credits:3DArtAuthor:MaximShkret

▲Credits:3DArtAuthor:MaximShkret

等距设计及投影

等距投影是在二维空间中直观地表示三维物体的一种方式，以前主要用于科技和项目图纸，现在则被采用在设计上，无论是在摄影、插画、3D设计而是肖像学中，等距设计都正逐渐崛起，你也可以期望在未来发现更有趣味的作品。

▲Credits:UltravioletBreakofDayAuthor:Field.io

▲Project:AbstractionsVol.1Author:MohamedSamir

▲Project:IsometricHouseAuthor:AngelaChan

在“平面”设计上降低深度

采用阴影效果，在平面上的物体上提高深度，使其更具立体感，这种方式常见于当对象在不同的图层的状况。此举可以降低真实感，同时也可利用锐度和模糊度来展现效果。

▲Credits:NikePromotionAdsAuthor:JardsonAlmeida

▲Credits:FlyknitLunar1&3Author:CallumNotman

▲Credits:FlyknitLunar1&3Author:CallumNotman

原文链接：