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

这3种独特的趋势,能让网页设计增色不少

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

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

设计趋势这种东西,往根上说是潮流,是因缘际会之下成为一个时间段内的流行风潮,大多独特,但是它并不一定符合你的喜好。

在过去的一个月当中,所流行起来的三个设计趋势,相互关联,且都涉及到文本和标题在页面设计中的运用。到底哪个更符合你的口味,而哪些又能够更常久地流行?这恐怕就需要你自己来判断了。

1、带有下划线的文本和元素

很意外地发现大家最近争先恐后地使用下划线这种元素。当然,能够在各式各样设计元素中灵活运用的下划线,自然不是设计工具默认的下划线效果或者文本链接下的那种文本下划线。

下划线原本运用在文本当中,用来强调内容,提醒用户关注特定的文本信息。当下划线和不同的元素搭配起来使用的时候,尽量让两者在风格和细节上保持一致,确保它们在设计上是无缝而一致的。

让下划线看起来是有意为之,但是又不会造成干扰,这样的设计是成功的。虽然在许多设计当中,下划线的加入会让文本看起来略显拥挤,但是实际上通过留白可以适当地缓解这个问题。

在下面的案例当中,Simon Lee Gallery 和 Hoohaa Design 均是通过下划线吸引用户注意到特定的文本。在 Simon Lee Gallery 当中,下划线和小字的搭配让它们不再显得单薄,在视觉上更重了。而 Hoohaa Design 中,下划线则是出于平衡视觉重心的目的来使用的,设计师想要突出站点的名称。

Abel Design Group 这个网站中,设计师并没有直接采用传统意义上的下划线,而是使用橙色的线条置于文本前方,起到了和下划线相似的功用。

2、被遮挡的文本

我们在探讨设计的时候,文本的可读性往往被作为相当靠前的一个标准来提,但是现在要说的设计趋势其实是和这一规则相悖的:被遮挡的文字。虽然你不一定会喜欢,但是确实有许多近期的设计作品会选择这样的设计。

当然,从技术层面上来说,有不少设计在运用这一技巧的时候并未拿捏太好。有的可能是因为字体设计的原因,有的可能是所选的用来遮挡字体的元素没有挑选好。这个中间的度其实并不好控制,尤其是当用来遮挡文本的元素是响应式、动态的时候。遮挡的元素、文本和背景之前要构成足够好的对比,但是又不能太过突兀,这是许多出问题的设计所面临的状况。

不过,如果能把遮挡的区域、遮挡元素和文本的对比以及运动的轨迹都设计好的话,实际上所创造的效果是非常醒目的。

想要运用好文本前景的遮盖元素,你需要注意下面几点:

  • 确保文本中的词汇足够常见,易于理解,比如 Root Studio 网站中的单词 Root
  • 遮盖元素不会遮挡太多部分
  • 确保遮挡不会造成不必要的识别障碍
  • 使用足够简单的字体,不会因为字体风格和障碍物造成识别障碍
  • 保持其他部分的设计足够简单,这样用户可以更机轻松的关注核心的文本,并且识别出来

3、经典的黑白配色

谈到色彩相关的趋势的时候,我们通常会认为色彩能够反应出设计者的心绪。黑白配色在这几年越来越常见,而在过去的这段时间当中出现的越来越多,是因为天气转冷设计师们的心情都越来越沉郁了么?

当然,和以前那种强调形式感的黑白摄影网站不同,现在的黑白色调的网站所覆盖的网站类型更多了,当然,在细节上可能还会点缀以其他的色彩,但是总体上是黑白色调没跑了。

因为缺乏丰富的色彩元素,黑白色调之下,这些网站所呈现出来的情绪是很接近的。

在单纯的黑白配色之下,文本的可读性往往是设计中所碰到的最实际的问题。尽管可用的色彩不多,但是设计师可以通过创造一些有趣的东西,来达到效果。

正如同前面所说的,主要色调是黑白,这个时候适当的加入一点点其他的色彩,比如红色或者蓝色,一点色彩就能从整个设计当中跳脱出来,极为醒目。

当然,黑白之间的过渡色有很多,适当的使用能够让整个设计更为丰满。

就像下面的 Crafton 这个网站,稍稍加入一点红色,就让整个设计一下子鲜活了起来。

结语

我明白,这次所探讨的设计趋势可能并不像之前的许多趋势那么有趣好玩,但是它们在很多项目中有着独特的功用,很多时候,撇开喜好探索这其中的功能,你会发现它们的适用范围还是蛮广的。试试看吧。

【这些延伸阅读值得看看】

  1. 《讲好一个故事,优秀的用户体验设计由此开始》
  2. 《游戏化设计的精髓是结合用户历程进行UX设计》
  3. 《这7个关键点,是每个产品用户体验设计的重中之重》

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

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

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

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

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

优设大课堂

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

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-233 步提升文案转化率,写出叫好又叫座的文案
  • 2018-08-23UX文案怎么写?来看看谷歌的方法总结
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:功能可供性
  • 2018-08-23人气好文!写给网页设计师的视觉设计基础手册(二)
  • 2018-08-23借鉴别人的海报?得先学会这个平面构成分析法!
  • 2018-08-23解读交互稿模板:如何让设计稿更规范化?
  • 2018-08-23沪江UED团队出品!用户体验设计师进阶实战指南(上)
  • 2018-08-23双11干货!写给运营视觉设计师的交互小技巧
  • 2018-08-23为了让 iPhone X 更好浏览网页,我给网页加了个导航按钮
  • 2018-08-23实战案例!不同导向型信息架构在产品中的应用

文章分类

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

最近更新的内容

    • 各主流浏览器及其内核介绍
    • 网页设计中的细节分析详谈
    • 小米新品的海报背景,用这个神器可以一键生成!
    • DOM编程艺术第二章
    • lazyLoad图片延时加载
    • 符合w3c标准的html标准需要注意的地方详解
    • web前端网页开发一般过程简单认识
    • 实战五步走!UI设计师如何让设计稿100%还原(上)?
    • 优设周报 | “远行”的Pinterest 和年满30岁的AI
    • 看完就会!超详细的自制手工水彩本教程

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

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