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

刚刚过去的6月,网页设计师们特别青睐这3种设计趋势

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

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

如果要深究近期网页设计趋势的变化,这些变化更多是关于用户模式,色彩和排版设计的。但是不论是其中哪种,都牵涉到一些微妙的设计技巧和复杂的影响因素,将它们纳入6月的设计趋势,似乎略有不足。在过去一个月所出现的新网页设计作品当中,最显著的设计趋势还是体现在一些设计元素上,风格独特的底部导航,自由随性的Box元素,装饰性极强的竖线元素。

近期如果你在纠结怎么设计网页的话,这些设计趋势可以用来看看~

1、底部导航设计

在手机上,底部导航是普及率颇为高的设计,但是在网页上就不算多见了。虽然侧边栏和垂直导航基本上要脱离实验性设计的身份了,但是底部导航这种“反习惯”的设计,仍然算是激进的一种设计手法。

底部导航在网页上是先锋的设计,所以它不是兼容所有用户的一种设计策略。如果你做的是一个强调设计、受众接受性较强的网站,可以尝试接入这一设计趋势。

如要使用底部导航加持设计,那么你需要正确地使用它:

  • 保持简约,在不用向下滚动的页面上使用上佳,少数页面使用为好
  • 设计的要醒目,不要让用户忽略它们
  • 如果页面较长,使用悬浮固定的底部导航
  • 搭配极简风格的设计框架,复杂的网页设计会让用户忽略底部导航
  • 加入一些额外的元素来强化导航功能,确保用户不会迷失

Lapland

Rockwood

Hotdot

2、Box元素

Box,盒子是一种非常实用的页面元素载体,在数字设计日趋多样繁复的2017年,Box 元素简直是设计师手里的攻城利器。从功能上来说,它和Material Design 中卡片的概念是高度相似的,但是它并没有限制在这个风格当中。和卡片一样,Box 元素可以承载各种各样的内容,它非常符合今年设计师对于多样性的需求。

当你开始使用Box元素的时候,应该注意下面的问题:

  • 使用Box 来创建视觉焦点,比如下面的 Cedrick Lachot 这个网站
  • 使用Box 将不同的元素分层,类似下面的Feudi Di San Gregorio 这样设计
  • 使用Box 来强化流程和视觉。Beoplay 的网站就使用堆叠的Box来创建视觉路径,每个Box中承载不同的动画,吸引用户滚动浏览

Cedrick Lachot

Feudi Di San Gregorio

Beoplay

3、竖线元素

虽然用户并不一定会时刻注意到网页背后的栅格系统,但是恰到好处的竖线元素,绝对能够强化整个网页的设计感。

竖线元素主要还是起到装饰性的作用,和我们常见的原型、矩形和横线元素不同,竖线元素其实出现的非常少,在很多时候能够给整个设计一种有趣、别具一格的体验。

竖线元素无疑会让网页更加风格化,不过它的侵略性并不强,所以,它的应用范畴还是很广的:

  • 可以尝试使用较细的竖线融入背景
  • 创建垂直竖线的图像拼贴
  • 在主图上使用竖线元素创造视觉深度,强化层次
  • 使用竖线穿过图片上的视觉焦点
  • 使用分屏式的设计,创造出垂直分割的视觉体验
  • 使用其他的小元素纵向排列,在背景中使用
  • 让元素在纵向上堆叠,而不是常见的横向排列

Porche

Radio

7h34

结语

趋势能够流行多久?谁不知道,这是使用设计趋势的风险所在。趋势无疑是有时间限制的,但是在此刻,它是有价值和意义的。

【紧跟趋势,也要搞定基本功】

  1. 《划重点!在为可穿戴设备设计时这11点超重要!》
  2. 《对比这10个注意事项,你的网页文字排版达标了么?》
  3. 《从这些工具开始,在设计时更科学地搞定配色》
  4. 《讲真,如今的好设计还是离不开数据的支持》
  5. 《想让设计更走心?你得学会用共情来驱动设计》
  6. 《学会插画的这四种玩法,能让你的UI体验更优异》
  7. 《这样做引导,帮你的用户快速熟悉手势交互》
  8. 《悬浮按钮要怎么设计才能带来好体验?》
  9. 《怎样借助故事板做好用户体验设计?》

原文地址: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个设计方向总结

相关文章

  • 2018-08-23最全最好用的动效落地方法,都帮你总结好了(上)
  • 2018-11-02idea如何从svn上,上传项目,以及下载项目
  • 2018-08-23美团打车推出之际,来聊聊分时租赁的共享汽车
  • 2017-08-06css技巧收藏——经典中的经典
  • 2017-08-06网站标准开发流程图
  • 2018-08-23用一篇文章,帮你掌握基础实用的动效技能
  • 2018-08-23优设国庆节专题!超实用的精选素材打包+出效果教程
  • 2017-08-06新手建站入门教程 域名的解析与绑定
  • 2018-08-23接到了一个小程序的设计私单,和App设计一样吗?
  • 2017-08-06谈谈网页设计中的Less和More(图)

文章分类

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

最近更新的内容

    • 如何输出高质量的交互稿?来看京东设计师的总结!
    • css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器
    • 如何界定借鉴和抄袭?高手用一个插画案例让你轻松看懂!
    • PS教程!教你绘制低多边形星空效果熊猫头像
    • 用一个实战案例,帮你快速学会现在最火的设计冲刺法!
    • 能让你顺利过稿的结对设计方法,原来这么易懂!
    • 超详细的 2018 年设计师面试指南
    • 负距离(换位思考)-相互影响的迭代过程
    • 这次圣诞活动的交互设计,居然踩了这么多坑!
    • 设计能力修炼的好办法

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

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