• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 莺飞草长,这个三月将会流行这3种网页设计趋势

莺飞草长,这个三月将会流行这3种网页设计趋势

作者:CARRIE COUSINS 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含2018设计趋势,渐变色,潘通色,经验分享,网页设计趋势等相关知识,CARRIE COUSINS 希望在学习及工作中可以帮助到您

CARRIE COUSINS :进入春季之后,温度的回升,直接影响到情绪的变化,这一点也反映到最新的网页设计作品当中,最终以设计趋势的形态呈现出来。相比于冬季更为大胆的用色,更为轻盈的黑白色调,目的和指向性更为明确的海报式首页设计,所有的这些趋势,将会在这个3月发酵,嬗变。

1. 海报式首页

全屏式的页面设计已经流行好一阵子了,超大的图片和全屏视频背景是这种网页中最常见的元素之一。而现在,这种页面设计开始出现一种微妙的变化:复杂的导航和额外的文本信息被移除,页面以一种类似电影海报的形式呈现出来。

这样的设计手法受到了极简主义风格的影响,但是与之相比更加注重视觉上的华丽风格和富有凝聚力的表现手法。

虽然这种设计手法听起来不够吸引用户,但是如果搭配合理的视觉效果,它所能带来的实际效果并不会差。成就一个优秀的海报式首页,关键在于视觉效果和字体的选取与设计。如果没有足够的空间来为信息创造视觉吸引力,整个页面很难创造足够具有凝聚力的视觉效果。

这种设计趋势最令人担忧的是其中的视觉元素类型并不多(即使包括导航和 CTA 按钮),相比其他的页面,并没有那么多内容供用户去阅读和扫视。这个时候,视觉效果的设计就直接关系到了整个页面是否会给用户留下足够深刻的印象。

在下面的3个案例当中,每个网页都以不同的方式来呈现海报式首页的概念。

Tofino Resort 这个网站通过宏大的背景图片和充满个性的字体设计创造出海报式的体验,导航被隐藏在右上角的汉堡图标当中,而 CTA 按钮也为了避免喧宾夺主,被制作成幽灵按钮,置于海报图标旁边。

Ruya Digital 选择黑色背景的简约设计,而屏幕中央的动画和有趣的文字处理效果,足以吸引用户的注意力,其他的文本信息大多被放置在屏幕的边缘,让用户的注意力尽量集中在屏幕中央。同样的,这个网页没有设计导航,而是将导航信息藏到了汉堡图标当中。

Flux Broadcast 这个页面采用了体验更加突出的视频背景,相应的,屏幕上其他的元素都被设计的不那么显眼。网站给人一种看视频的体验,而非是网站页面。导航被塞到汉堡图标当中,为了让汉堡图标不那么容易被用户忽略,设计师为它增加了一个绿色的底色。右下角的小的动画箭头鼓励用户在看完视频之后循环播放。

2. 紫色为主的配色方案

别忘了,2018年的年度潘通色是紫外光(18-3838),通过最初几个月的发酵之后,这款年度潘通色逐渐在网页设计领域中产生影响力。

虽然绝大多数的网页设计师并不一定会选择紫色来进行设计,但是潘通推出年度潘通色之后,确实让更多人开始考虑红蓝两色的配色以及两者混合出来的紫色。这种配色的好处在于,它可以和时下的其他流行趋势很好的结合起来:比如色调明亮的 Material Design 的配色,以及复古的设计风格。

紫色本身是一种独特且出现频率较低的色彩,它能成为你的网站在竞争中脱颖而出的一个理由,它往往和蓝色相伴出现,并且更容易创造良好、独特的第一印象。

紫色的玩法很多。不同的紫色可以营造不同的氛围, 传递不同的情绪,你可以让它更偏向红色,营造出欢快愉悦的情绪;可以让它偏向黑色,营造出更加深沉神秘的情绪;也可以让它偏向蓝色,营造出更加冷峻的氛围。

在下面的三个案例当中,你会看到紫色多样的用法,以及它和其他不同的领域不同的内容之间良好的兼容性。紫色是神秘的,但是它同样是友好且具有良好兼容性的。

3. 渐变色+文本

渐变色不仅适宜同图片叠加在一起,而且它和文本元素之间也可以构成良好的搭配。

就目前而言,在网页中的字体设计更加倾向于使用简单的字体,并且附带一些「额外的东西」。这些额外的东西可以是色彩,也可以图片,用来填充到文本字体当中。

而随着渐变色彩的回归,在字体中填充渐变色彩成了新的选择。如果你能够接受渐变色彩,那么在文本字体中填充色彩,也是可以创造出令人惊叹的视觉效果的。

Zoocha 这个网页当中,文本是主要的视觉元素,设计师将使用了从黄到绿的渐变色,填充到文本当中。在黑色的背景映衬之下,显得非常的醒目。

Love Lost 这个网页同样使用了黑色的背景,字体则选取了优雅的衬线字体,这一点和主题非常贴合,而其中所采用的渐变色彩是白到粉红的渐变,在视觉上是非常贴切的设计。

Michael Rappaz 的作品集网站当中,渐变色彩并没有填充到文本当中,而是填充到了文本的周围。借助高光渐变动画,设计师让这部分文本充满了视觉吸引力。其余的部分相比之下则显得颇为简单,这样就让文本部分更容易被用户注意到。

结语

就目前来看,我们所观察到的这些趋势,其实都是有着相对持久的生命力的,它们通常都植根于某个非常重要的、主流的设计趋势。全屏海报风的首页设计无疑结合了极简和对于极致视觉效果的追求,紫色的流行无疑和年度潘通流行色的逐步火热有着紧密关联,而文本字体和渐变色的结合无疑是经典元素和流行配色的结合。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 在这个火热的8月,正在流行这3种网页设计趋势
  • 想紧跟流行风尚?这5种平面设计趋势了解一下
  • 2018年过半,为你总结了这13个主要的设计趋势
  • 想营造出80年代的复古风格?下面的建议不要错过
  • 想让文字更出彩?试试通过切割文本来创造视觉吸引力
  • 2018年,网页和APP中背景的8个主要设计趋势
  • 接下来的5月,流行这3种网页设计趋势
  • 这8个字体设计和排版技巧,是2018年的设计趋势
  • 这10个理由告诉你,为什么要在设计中使用渐变
  • 这3个适用性极强的网页设计趋势,在4月非常流行

相关文章

  • 2018-11-02解决checkbox复选框选中传值,不选中不传值的方案
  • 2017-08-06字体大宝库 50款精美的免费细英文字体资源 下篇
  • 2018-08-23从历代iPhone 官网设计,纪念 iPhone 诞生十周年
  • 2018-08-23高手说我的图标不止好看,还有这4个作用!
  • 2018-08-23这四个设计师最容易犯的错,赶紧注意一下!
  • 2018-08-23写给新手的APP结构指南:首页相关(下)
  • 2018-08-23用超多实例,解析「交互设计七大定律」在设计中的应用(上篇)
  • 2018-08-23一篇长文,读懂「10万+」标题的全部套路
  • 2018-08-23腾讯高级设计师:交互知识树系列之如何积累交互模型?
  • 2017-08-06页面包含img src时的重复载入问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • impress.js表现层框架(演示工具)-初体验
    • 如何绘制功能性图标?来看资深设计师的全面总结!
    • 图层英文怎么写?来看看Apple官方写法(Bars篇)
    • offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
    • 模板和UI Kit 还能从这7个方面帮你创造价值
    • 美妆造型类网站 颜色搭配技巧的方案及效果展示
    • 腾讯内部分享!一个工作坊的完整设计流程剧透
    • UI 入门基础!像素、分辨率和适配的知识全面总结
    • 三谈Iframe自适应高度代码
    • 写给入门者的三十条HTML代码编写指南

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有