恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
瞬间提升网页设计level的3个趋势
0.0°
2018-01-03 好文转载 设计趋势 原作者: CARRIE COUSINS 举报 1227 4 4 0

下划线、遮挡、经典黑白 →


Image title




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


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




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


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


下划线原本运用在文本当中,用来强调内容,提醒用户关注特定的文本信息。当下划线和不同的元素搭配起来使用的时候,尽量让两者在风格和细节上保持一致,确保它们在设计上是无缝而一致的。成功的下划线运用,是让下划线看起来是有意为之,但又不会造成干扰。虽然在许多设计当中,下划线的加入会让文本看起来略显拥挤,但是实际上通过留白可以适当地缓解这个问题。


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


Image title


Image title


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



Image title




Trend 2   被遮挡的文本


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


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


Image title



不过,如果能把遮挡的区域、遮挡元素和文本的对比以及运动的轨迹都设计好的话,实际上所创造的效果是非常醒目的。想要运用好文本前景的遮盖元素,你需要注意下面几点:

❶ 确保文本中的词汇足够常见,易于理解,比如 Root Studio 网站中的单词 Root

❷ 遮盖元素不会遮挡太多部分

❸ 确保遮挡不会造成不必要的识别障碍

❹ 使用足够简单的字体,不会因为字体风格和障碍物造成识别障碍

❺ 保持其他部分的设计足够简单,这样用户可以更机轻松的关注核心的文本,并且识别出来



Image title


Image title




Trend 3  经典的黑白配色


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


Image title



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


Image title



因为缺乏丰富的色彩元素,黑白色调之下,这些网站所呈现出来的情绪是很接近的。在单纯的黑白配色之下,文本的可读性往往是设计中所碰到的最实际的问题。尽管可用的色彩不多,但是设计师可以通过创造一些有趣的东西,来达到效果。正如同前面所说的,主要色调是黑白,这个时候适当的加入一点点其他的色彩,比如红色或者蓝色,一点色彩就能从整个设计当中跳脱出来,极为醒目。


当然,黑白之间的过渡色有很多,适当的使用能够让整个设计更为丰满。就像下面的 Crafton 这个网站,稍稍加入一点红色,就让整个设计一下子鲜活了起来。


Image title





结语


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



原文 | CARRIE COUSINS   译文 | 陈子木



酷九合金社第七期全栈设计培训班,持续招生中~18年3月开课。欢迎热爱生活,对设计感兴趣的小伙伴咨询我们的酷九小管家~

咨询微信:c9dkjhjs  咨询qq:483348967  咨询电话:025 - 52850456


Image title




更新:2018-01-03

收藏

4人已收藏

酷九合金社

qq交流群:423655278 微信:conineacademy

  • 149

    作品

  • 6118

    粉丝

  • 16

    关注

  • 严选 | Mockups免费资源网站
  • 五月归来,看小伙伴们锋芒毕现
  • 不仅是设计,更是做人
  • 要始终坚持对美好事物的追求

    猜你喜欢

      2018-01-03 好文转载 设计趋势 原作者: CARRIE COUSINS 举报 1227 4 4 0

      瞬间提升网页设计level的3个趋势

      0.0°

      你确定要举报瞬间提升网页设计level的3个趋势

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年01月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录