百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

翻译丨网页设计的新趋势:类扁平(附PDF下载)

csdh11 2025-02-14 22:47 13 浏览

在拟物(skeuomorphic)风格时代崛起,扁平风格以简约的方式风靡数年。然而,它也在大众口味的变化和技术进步中变化着。

类扁平(Ryan Allen解释为“扁平2.0”)与过去的完全扁平风格已经青出于蓝而胜于蓝。

iPhone iOS 6&iPhone 6 Apps

受瑞士国际主义风格的简约风格影响,扁平化从不同媒介及年代吸收营养。在这篇文章中,我们将看到这种风格的7种特点。

这些特点可以为特定优点单独使用,也可以合并起来有一个更大的扁平风格。但是开始你的“扁平之旅”之前,清楚扁平风格的优点和缺点也是非常重要的。

优点

  • 有利于响应式设计

  • 提高系统和导航的易用性

  • 结构化布局和清晰化视觉,提高视觉成熟度

  • 加快加载时间

  • 简单的排版加强可读性

    图片来源:christmas-joy

缺点

  • 不容易做好

  • 简洁的风格会削弱指示性

  • 容易出现无聊的风险

  • 由于普遍性而显得无个性

如何使用?1底纹

在扁平2.0时代,阴影增加了深度和复杂性而不会牺牲简约的特性使得扁平化更具吸引力。在《网页设计趋势2015-2016》所述,这是扁平化设计的新补充,使得旧风格有了新活力。

Image Source: Duffy & Partners

虽然过去几年有过更长、更深的阴影,但最近这种趋势变得更加微妙。图片中Duffy & Partners的产品是非常少和不显眼,但是还是增加了一点额外的视觉兴趣。

3动态颜色

为了弥补视觉效果,扁平化设计包含了动态色彩,尤其是鲜艳的色彩。这些有能量的色彩的碰撞避免了单个元素组合出现的沉闷现象。

Image Source: CSS Conference EU.

这些有活力的色彩从一开始就有了最具识别性的特征。上述网站CSS Conference 采用了传统扁平方式,并使用了柔软和快乐的颜色。因为颜色的使用如此重要, Flat UI Colors 已经帮你收藏了最有效的色板。

5简单的排版

一如既往的,扁平化设计的排版保持简单和易于阅读——使用无衬线字体和统一的线条宽度。

Image Source: Intercom.

如上所例,字体并不需要强调,而且文字非常容易阅读。这就让用户把注意力放在有趣的图片上。

由于它强调可读性,其受欢迎程度渗透到其他需要简约设计的领域。我们可以看到这种扁平设计文本使用大幅图片、超大文本、文字居多的网站。

6幽灵按钮

最近时髦的一个设计元素是幽灵按钮(ghost button):它与扁平设计非常搭配,并不引人注意,但是仍然可以识别为按钮。

Image Source: SCEATT.

按钮内的文本增加了注意效果。幽灵按钮的极少注意力属性适合扁平效果,并使得其最显著特性之一。相对与本文的其他属性,幽灵按钮几乎可以使用在其他任何风格。

8极简主义

扁平化设计与极简主义一起可以使用许多原则,例如易用性与简洁性。

Image Source: Pelican Books.

虽然看起来它看起来很容易,但是极简主义远比看起来复杂。更少的元素意味着必须更考究的设计。

11图标化

由于屏幕上显示的只有最基本的元素,图标需要更多的细节和灵气(flair)使得设计更有趣。

Image Source: Stash Flat Icons.

图标变得越来越大,可以容纳更多细节,并成为一个网页元素表达的支柱。如上所例,Stash Flat Icons,每个图标风格都已蕴藏在其中:明亮的色彩,卡通风的设计,还有足够多的细节。

12突出色彩(Accent Colors)

扁平化设计的传统颜色并不会完全过时。扁平化设计确实以更明亮的色彩方式标准化了。

Image Source: C2s.

在单一的背景上呈现鲜艳的颜色,给予设计师更多控制权,更需要充分思考给与舍。

特别是基本色,白与黑色使得鲜艳颜色脱颖而出。

结论

扁平化设计慢慢影响到其他的网页设计风格中,而且混合设计已经像其他单一风格一样变得流行。如果你想使用扁平化设计,不要犹豫的使用其中一种或两种所述特点:这些特点可以使你的风格脱胎换骨。

想知道更多扁平化设计技巧,以及更多9个扁平设计趋势,免费下载185页的《网页设计趋势2015-2016》,了解来自阿迪达斯、苹果、谷歌、范思哲等公司的实例。

PDF地址:
http://pan.baidu.com/s/1bn4sTP1(英文版,也可仅作观赏),也可在公众号回复“PDF”直接进入

原文地址:
http://speckyboy.com/2015/08/05/almost-flat-design-web-trend/,

译者:饭特稀,转载请注明出处。欢迎分享、转发、点赞。

相关推荐

探索Java项目中日志系统最佳实践:从入门到精通

探索Java项目中日志系统最佳实践:从入门到精通在现代软件开发中,日志系统如同一位默默无闻却至关重要的管家,它记录了程序运行中的各种事件,为我们排查问题、监控性能和优化系统提供了宝贵的依据。在Java...

用了这么多年的java日志框架,你真的弄懂了吗?

在项目开发过程中,有一个必不可少的环节就是记录日志,相信只要是个程序员都用过,可是咱们自问下,用了这么多年的日志框架,你确定自己真弄懂了日志框架的来龙去脉嘛?下面笔者就详细聊聊java中常用日志框架的...

物理老师教你学Java语言(中篇)(物理专业学编程)

第四章物质的基本结构——类与对象...

一文搞定!Spring Boot3 定时任务操作全攻略

各位互联网大厂的后端开发小伙伴们,在使用SpringBoot3开发项目时,你是否遇到过定时任务实现的难题呢?比如任务调度时间不准确,代码报错却找不到方向,是不是特别头疼?如今,随着互联网业务规模...

你还不懂java的日志系统吗 ?(java的日志类)

一、背景在java的开发中,使用最多也绕不过去的一个话题就是日志,在程序中除了业务代码外,使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”,没错在日常的开发、调试过程中打印日志是常干...

谈谈枚举的新用法--java(java枚举的作用与好处)

问题的由来前段时间改游戏buff功能,干了一件愚蠢的事情,那就是把枚举和运算集合在一起,然后运行一段时间后buff就出现各种问题,我当时懵逼了!事情是这样的,做过游戏的都知道,buff,需要分类型,且...

你还不懂java的日志系统吗(javaw 日志)

一、背景在java的开发中,使用最多也绕不过去的一个话题就是日志,在程序中除了业务代码外,使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”,没错在日常的开发、调试过程中打印日志是常干...

Java 8之后的那些新特性(三):Java System Logger

去年12月份log4j日志框架的一个漏洞,给Java整个行业造成了非常大的影响。这个事情也顺带把log4j这个日志框架推到了争议的最前线。在Java领域,log4j可能相对比较流行。而在log4j之外...

Java开发中的日志管理:让程序“开口说话”

Java开发中的日志管理:让程序“开口说话”日志是程序员的朋友,也是程序的“嘴巴”。它能让程序在运行过程中“开口说话”,告诉我们它的状态、行为以及遇到的问题。在Java开发中,良好的日志管理不仅能帮助...

吊打面试官(十二)--Java语言中ArrayList类一文全掌握

导读...

OS X 效率启动器 Alfred 详解与使用技巧

问:为什么要在Mac上使用效率启动器类应用?答:在非特殊专业用户的环境下,(每天)用户一般可以在系统中进行上百次操作,可以是点击,也可以是拖拽,但这些只是过程,而我们的真正目的是想获得结果,也就是...

Java中 高级的异常处理(java中异常处理的两种方式)

介绍异常处理是软件开发的一个关键方面,尤其是在Java中,这种语言以其稳健性和平台独立性而闻名。正确的异常处理不仅可以防止应用程序崩溃,还有助于调试并向用户提供有意义的反馈。...

【性能调优】全方位教你定位慢SQL,方法介绍下!

1.使用数据库自带工具...

全面了解mysql锁机制(InnoDB)与问题排查

MySQL/InnoDB的加锁,一直是一个常见的话题。例如,数据库如果有高并发请求,如何保证数据完整性?产生死锁问题如何排查并解决?下面是不同锁等级的区别表级锁:开销小,加锁快;不会出现死锁;锁定粒度...

看懂这篇文章,你就懂了数据库死锁产生的场景和解决方法

一、什么是死锁加锁(Locking)是数据库在并发访问时保证数据一致性和完整性的主要机制。任何事务都需要获得相应对象上的锁才能访问数据,读取数据的事务通常只需要获得读锁(共享锁),修改数据的事务需要获...