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

这3个适用性极好的网页设计趋势,会在2月流行

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

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

很多时候,设计趋势并不会表现的那么明显,甚至你看到它们也不一定会注意到。但是它们也是客观存在的。通过整个一月份的观察和总结,我们认为接下来的一个月当中,圆形元素、分屏式布局和深色背景+浅色文本会成为流行的网页设计元素。

这些元素看起来都挺常用的,不过当大家开始扎堆用的时候,就以“趋势”的形式体现出来了。

1、圆形元素

从形状心理学的角度来看,圆形和环形有着完整、和谐的心理学特征,在很多不同的场合,它常常会拿来传达爱情、能量的意象。

在 Material Design 的规范中,圆形按钮被大规模运用,并且由此开始,圆形在UI设计中开始承担越来越多的责任。

不过,由于绝大多数的屏幕和画布大都是矩形的,圆形元素通常不会贴边使用,也避免了在布局进行响应式变化的过程中,圆形元素的扭曲和形变。下面的案例当中,圆形元素都被很好的运用起来,布局保持着良好的流动性。

KymberleeJay 这个网页使用圆形元素来承载首页的主要文案,背景图片中的女性人物的目光则起到了不错的视觉引导作用。

Buddha Pizza 这个页面则让文字构成圆环,围绕这批萨,创造出独特的视觉奇观。

Hotel Poispois 这个页面则使用浮动的圆形来提升视觉,它们也可以被视作为巨大的按钮,将用户导向不同的页面。

2、分屏式设计

分屏式设计很有意思,它流行一阵子之后销声匿迹,然后又回归,来来去去好几回。最近这一设计趋势又回归了,这一次回归的分屏式设计看起来更加大胆,细节的搭配上则更加微妙。

分屏式设计的好处在于,它可以更好地呈现响应式的设计,在桌面上左右分屏,在移动端上上下叠加。无论怎么呈现,用户都不会因为这种设计而错过任何的信息。

分屏式设计之下,一个屏幕同时展示两块不同的内容,也让不同的内容和元素有了对等的展示空间。

分屏式设计让用户能够自主控制交互,让他们面对不同的内容的时候能够选择自己喜欢的内容和方式来操作。

Taco Bill 的网站就是一个很好的例子,当你打开网站的时候,设计师就为用户提出了两个问题:你是想打包带走事物,还是预订之后在餐厅里吃?通过分屏的方式,用户有了两个不同的选择。分屏式的设计让用户的选择更加直观、可视化。

Nikos Pandazaras 的作品集网站则选择了截然不同的设计思路。他将导航置于屏幕的中间,而摄影作品则左右各一并排放置,两者的重要性无疑是对等的,用户可以同时看到两幅不同的作品,屏幕的利用率倒是挺高的。

D’Aucy 在进行分屏设计的时候,选择了更加微妙的策略。左侧仅有图片,搭配着有纹理的背景;右侧的背景选择了近似的色彩却没有加上纹理,仅有文本标题。两者在保持近似一致的视觉设计的同时,又巧妙地呈现出差异性。

3、深色背景+浅色文本

深色背景+浅色文本是一个相对经典的组合。不过最新的玩法和之前的略有不同,许多设计师在深色的背景之下,加入了动效和视频。

无论加入的视频或者动效是显著的还是微妙,它们都很好地吸引了用户的注意力,增加了视觉上的愉悦感。比如 Top Estates 和 Bullying and Behavior 这两个网站,均是采用了相对微妙的背景动效。

白色的文本让整个设计的信息对比度有了保证,甚至让内容显得鲜明而突出。通常保持静态的文本和背景中深色的动效和视频构成了动静对比,使得这些网页在体验上显得非常有感觉。

背景显得越黑暗,整体所营造出的神秘感就越明显。较深的背景也增加了整体的可读性,背景中的动态元素则很好的营造了氛围和情绪。

这样的设计看起来并不复杂,但是其中所蕴含的信息量一点都不比其他的设计方案来的少。

结语

这次所总结的三种设计趋势拥有着良好的适用性,在几乎任何设计项目当中都可以适当地融入进去。无论是进行网页重设计,还是开始全新的设计项目,这些设计趋势都可以试着运用进去。当然,首先最重要的,始终是你的设计目标是什么。

【2018年设计趋势,一个都不要错过】

  1. 《2018年,这10个LOGO设计趋势值得你关注》
  2. 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  3. 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  4. 《这款独特的紫色,是为你指引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-08-23极简设计时代怎么用分隔线?看完这个分析你就会了!
  • 2018-08-23用一个实战案例,帮你学会讲述重设计作品的思路
  • 2017-08-06什么情况下使用table 什么情况下使用css(经验分享)
  • 2018-08-23学习按钮设计,看这篇就够了!
  • 2018-08-23如何将品牌与UI完美结合?Google新规范告诉你答案
  • 2017-08-06js、css、html判断浏览器的各种版本
  • 2018-08-235分钟交互设计指南系列:对话框
  • 2018-08-23从设计默认值开始,让你的产品体验更优秀
  • 2018-08-23这10个趋势,是2018年用户体验设计关注的重心
  • 2018-08-23Facebook 资深设计师何如佳:当扎克伯格是你的产品经理时

文章分类

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

最近更新的内容

    • Uber 设计师:新人和大牛的差距到底在哪里?
    • 修改网页中的FlashSWF文件的方法
    • 上亿人使用的京东“猜你喜欢”功能是如何设计出来的?
    • 这10个思路,能帮你设计出简单易用的网页
    • 需求分析:我走过最长的路,就是需求的套路
    • CSS(Cascading Style Sheet)级联样式表常用术语总结
    • 想掌握对话式交互?先来学习自然对话的基础知识!
    • 网页设计师需要的知识体系有哪些
    • 实战经验!滴滴专车会员项目背后的设计经验总结
    • 用PS这个黑科技,轻松搞定视觉设计的团队协作!

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

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