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

这3个趋势,在接下来的9月会影响更多设计作品

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

本文主要包含2017设计趋势,经验分享,设计趋势等相关知识,希望在学习及工作中可以帮助到您

设计师们也常常通过设计作品互相汲取灵感,而这也是促成设计圈内的各种设计趋势的形成。可能是厌倦了循规蹈矩,炎热的夏季让设计师们开始寻求更多独树一帜的设计手法,大胆的用色已经不能满足需求了,而网页的首图设计也不再拘泥于现代、正面的设计风格了。在接下来的9月份, 你可能会看到更多有趣的设计,而其中有许多设计作品可能会受到下面的3种设计趋势的影响。

1、彩虹色

说实话,彩虹色所毁掉的设计比起它所创造的好设计要多得多。这种局面很大程度上还是因为绝大多数设计师无法驾驭多种色彩,最终导致设计上的失误。绝大多数的优秀的设计当中,配色方案都会将色彩的数量控制在3~4种色彩这样的范畴以内,便于控制,也不会造成视觉污染。

不过,不能因为彩虹色造成过“设计灾难”就全盘否定了它在设计中的可能性。如果掌握了多种色彩的使用诀窍,彩虹色同样可以让设计足够优雅、简单。在过去的一个月当中,不少网站开始在网页设计项目中有意识地使用彩虹色。其中不仅有小型的设计项目,还有Github Universe Conference、Southwest Airlines?和?London Grammar’s Spotify channel 这样比较著名的网站。

有意思的地方在于,每个网站在使用彩虹色这样的事情上,都采用了不同的策略,拿出了多样的方案。

Github 的网站采用的是我们平常最常见的彩虹色“黑暗模式”:将不同的色彩赋予不同的文字、LOGO的不同部分上,甚至让幽灵按钮同时承载多种色彩。Github 的设计师在彩虹色的选取上非常用心,这些色彩虽然多样,但是足够微妙,在饱和度和明度的控制上都非常合理,并不会让人觉得有违和感,并且传递出多彩和乐观的情绪,是正确而合理的色彩搭配。

Southwest Airlines 对于彩虹色的使用方法与Github 截然不同,设计师将彩虹色填充到背景元素和文本元素当中,并没有作为视觉主体,而是将它们作为视觉装饰来使用。彩虹色在这个网页设计案例中,赋予整个页面以生命力,让视觉上更加令人愉悦。

London Grammar 在 Spotify 的这个页面设计也非常有趣,黑色的背景衬托之下,作为视觉主体的彩虹色气泡非常抓人眼球,而这个彩虹色气泡会随着背景音乐而变化,给人带来非常有趣的体验,对我而言,听着音乐我能看着这个彩虹气泡扭一整天。

2、更轻量级的网页首图

超大的网页首图和轮播式Banner 在网页设计圈中已经流行多年了,不过极简主义设计在近年来的流行,使得不少设计师开始寻求更加简约、轻量级的首图构造。

由于这样的设计数量上有明显的增长,我们发现了这一趋势的存在:设计师会采用白色或者浅色的页头,只使用标题搭配零星的装饰性元素,来营造一种相对简约的体验,创造出一种轻量级的设计体验。这样的设计手法看起来很有趣,不过有一些设计会让人觉得没有视觉焦点。

不过在用户看来,这样的设计相对而言更加独特,在大量的常规设计中,更容易脱颖而出。不过,这样的设计是否提供了足够的信息量,用来吸引用户持续地关注或者带来积极的响应,还有待验证。

这一设计趋势目前还处于早期阶段,不少设计师在使用它的时候,还在不断地增删元素探索更多可能性。设计师总想打破一两项规则,创造一些与众不同的东西,这一点你我都能理解。在项目中迭代设计,能够更加有效地验证想法。目前已有的设计案例可能不少还不够理想,但是在不久的未来,就能找到一套行之有效的完整设计方案。

chaptr

stephen

rev

3、黑暗系动画元素

这可能是最近最有趣的设计趋势了,将颜色深沉的、黑色调的动画融入到网页设计中来。从色彩上来说,黑暗的色调更容易营造出神秘的氛围,创造更强烈的形式感,吸引用户的好奇心探索下去。而动画的加入,则让整个页面更加具有独特的生命力。

这种黑暗色调的动画元素有着多样的玩法,它们可以以不同的元素呈现出来,可以承载多样的效果。下面的几个网站都采用了不同的黑暗系设计元素来完成设计,这些动画和黑暗系元素都能够轻松地吸引用户去点击。

虽然这些设计看起来很酷,但是并不是所有用户都会买单。而且,这样明显是经过深度定制的设计元素,在大屏幕上显示会很有冲击力,但是在移动端设备上显示就不一定有同样的效果了。

不过,设计趋势就是趋势,它所带来的独特的设计常常是有条件的,营造特定的情绪,或者创造独特的流行风尚,很难去要求这些趋势“无所不能”。

当然,还有一部分黑暗系的设计单纯是为了营造特定的视觉效果而存在。

如果你想在自己的网站中采用这样的设计,建议最好确保其中视觉元素的可识别性,也就是保持一定的对比度,确保用户可以辨别它们的存在。

虽然下面的几个案例并没有使用太多的色彩,但是在选择对比色的时候,最好选取白色以为其他的色彩,来作为强调。

另外,这一设计趋势当中,涉及到的动画效果,没有一个采用了复杂的动效,这确保了动画内容的直观、易于理解,而且让整个浏览体验足够顺畅,这也是让它成为趋势的关键性因素。

work-play

garden-eight

projects

结语

这次所总结的三个趋势足够好玩,在接下来到来的开学季和更远一些的购物季,这些趋势应该会贡献不少好的设计。

【用户体验设计是个细致活儿】

  1. 《说句心里话,这5种常见的设计模式还是挺闹心的》
  2. 《漂亮还不够!让你APP的粘度更高的游戏化设计策略》
  3. 《想让设计更走心?你得学会用共情来驱动设计》
  4. 《原力与你同在!星球大战给我们的6个关于用户体验的启示》

原文地址:webdesignerdepot
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

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

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

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

优设大课堂

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

  • 超全面总结!2017年UI设计领域流行过这21个设计趋势
  • 最后一个月,这3个设计趋势是网页设计师的最爱
  • 这10个趋势,是2018年用户体验设计关注的重心
  • 用这5个技巧在网页设计中玩转视差特效
  • 人工智能与设计零基础手册!发展历史和定义+底层设计阐述
  • 秋风渐起,大咖们都跟随这些趋势做网页设计
  • 从建筑到网页,粗野主义风格确实有着它独特的魅力
  • 2017年最后几个月,网页设计师值得注意的趋势
  • 这3个趋势,在接下来的9月会影响更多设计作品
  • 背后的分析!iOS 11的设计理念和3个设计方向总结

相关文章

  • 2017-08-06新手建站入门教程⑧:轻松打造一个文章站
  • 2018-08-23学会这些设计黑话,再黑的甲方也不怕
  • 2017-08-06分享8款提高网页设计出色的CSS工具
  • 2018-08-23需求分析:我走过最长的路,就是需求的套路
  • 2018-08-23中文版来了!超实用的苹果AR人机界面设计指南
  • 2018-08-23你的文案太平了?四个窍门让文案“活”起来!
  • 2018-08-23为吸引用户而存在:界面中CTA按钮的设计有何讲究
  • 2018-08-23如何给节日主题做设计,来看这篇超全面的分析!
  • 2018-08-23这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
  • 2018-08-23APP授权设计:如何让用户不反感并同意授权

文章分类

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

最近更新的内容

    • 这些属于未来的UI形态,距离我们已经越来越近了
    • 授人以渔!用一个清晰的思路帮你掌握移动界面标注
    • 如何超越读者预期,更大概率地写出一稿过的文案?
    • 高质量好文!人人都在说「产品目标」,今天带你真正了解下
    • 5分钟交互设计指南系列:对话框
    • 输入自动提示搜索提示功能的样式文件:suggestion.css
    • 水彩自学第二集:水彩纸常见问题及测评
    • CSS样式表高效使用技巧充分利用样式表的强大性
    • 怎么设计响应式WEB?响应式WEB设计的优缺点
    • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验

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

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