全世界都被拍扁!你应如何理性对待扁平化设计

作者:柚子C 

扁平化设计如日中天。去除繁杂装饰的极简主义界面设计正当时。扁平化设计聚焦两点:视觉的极简主义,功能的最优表达。用最简单的用户界面达成最详备的功能。

在革新了由iPhone建立的拟物时代后,扁平化成为设计风格的领导者。
大家都认为苹果iOS7采用扁平化设计是”改朝换代”的信号:业内领军企业苹果都做出了改变,那么你还有什么理由不去紧跟潮流呢?

但设计往往是复杂的,设计跟穿衣服一样,固然有潮流,但是潮流是不适合你又是另外一回事了。
量体裁衣——你认为扁平化设计真的符合你的项目吗?

初步认识扁平化设计

本文既不否定扁平化,也不盲目追随扁平化。

扁平化的好与坏取决于两点:

1.设计师个人设计理念与设计造诣的高低。
2.扁平化是否与设计需求相符。

那么怎么判断扁平化是否合适呢?首先,我们需要初步了解扁平化设计

极简主义

极简主义装饰风格

扁平化设计天生简约。我们需要回归到事物的本质,追寻最重要的特质加以体现——这样,最重要的元素便显得突出,成为了视觉焦点。

参考:

网页设计的极简主义:少即是多
推荐:50个极简主义的网页设计

字体

具有50多年历史的Helvetica字体

因为扁平化设计是简约的,形状是最基本的。那么扁平化设计中,字体将被打造成视觉焦点。
扁平化设计习惯加粗字体,提高视觉表现和辨识度。
字体应该在极简背景下视觉表现良好,例如无衬线字体Helvetica便是典型。

参考:
怎样给扁平化风格选择合适的字体(附字体案例)
24套适用于扁平化设计的免费英文字体

按钮样式

按钮务求形状简单,不带有投影、光效以及渐变,色彩扁平。色彩之间对照感要强,从而提高辨识度。

但,凡事都在发展,长投影、3D 扁平式、多边形的应用为扁平化按钮设计加入了更多的变数。

色彩

2013年流行色——Emerald

扁平化设计多姿多彩,用色大胆,因为细节的缺失必然要用色彩加以弥补。光鲜整洁的色彩将为整体设计加分。

参考:
推荐:扁平化设计与色彩趋势
干货!专属扁平化设计的PS色板(配色库)

形状

一改传统的蜂巢型

几何形状是扁平化设计采用的主要形式,优雅整齐。

图标

图标能起到形象化简述内容的作用。扁平化的图标设计务求简单。使用图标可以减少文字,提高网站的整齐感。

参考:
9款适合扁平化设计的图标悬浮效果
趋势!来瞧瞧扁平化设计进化成哪些类别了

我的设计应不应该”扁平化”?

关于扁平化设计,最错误的理念便是:扁平化设计意味着视觉风格的扁平。字体、图像、图标一律都要扁平吗?全面扁平化、全面拟物化是不可取的,真要是这样,设计连一点可操作性都没有,还要设计师干嘛?

扁平化设计是一种糅合视觉与理念的设计风格,不能从字面意义上理解这种风格。很多网站明白这个道理,将扁平化提炼至纯粹,采用适合他们网站风格的扁平化元素。
视觉上可以部分使用扁平化风格,但是组织形式和主题表达上却不必拘泥形式。如果一味的盲目跟风,兼容性、可发挥的地方必然有限。

例如,如果你的网页用来贩卖产品,那么你的设计中必须要包含产品图像。显而易见,产品图像不是扁平化的,会给页面增添一种深度感。但是我们可以在其他地方使用扁平化元素。
这就说明了:扁平化设计有的地方能够提高你的视觉表现了,达成设计目标。有的地方不能。灵活使用,才能走的更远。

记住,我们做的是设计,而不是扁平化设计。

看看 Nitrografix这个网站。

网站的美学风格与内容相符。通过扁平化设计去除了繁杂元素,提供了更容易上手的导航。将机构的创意体现最大化。

再来看看魔兽世界的网站。

这个网站并不适合扁平化风格。导航条和图像增添了整体的神秘感和中世纪氛围。如果采用扁平化设计,很明显,设计和内容无法联系到一起。
在进行重设计时,一定要考虑新美学风格与内容的联系性。新风格适合内容吗?新风格与产品描述相符吗?

如果不幸的错误使用扁平化设计,会对网站形象造成损害。
要记住好的设计是超越潮流的,一定要谋而后定。

那么,什么情况下适合?什么情况下不适合?

那么如何判定扁平化风格是否适合你的网页设计呢?

采用扁平化:

  • 如果你的用户能够认可扁平化网站、熟悉扁平式导航
  • 扁平化设计后,网站信息依然组织有效
  • 内容过载,信息量大,需要整洁、有序的设计风格时。
  • 当你需要收束一下页面中过于自由、散漫的设计元素时。
  • 一些具有进步精神的行业;诸如数码界和科技界就适合,而儿童站点不适合。

不要采用扁平化:

  • 面向用户无法接受扁平化这么新潮的风格
  • 扁平化对你的设计没什么提高。如果你的页面本来就高效整洁,又何必多此一举?
  • 基于本能层的设计,需要对观众产生情绪作用。
  • 网站高度依赖视觉、交互元素,这时扁平化设计会起到限制作用。

几条建议

网站是机构面子的豪华汽车。进行扁平化设计时要审慎,不要让汽车轮胎也”扁平”了,否则会跑不起来。

  • 不要被扁平化设计的名字唬住,扁平化不是全盘肯定,也不是全盘否定。扁平化设计主要提倡一种极简设计理念,消灭华而不实,将一切变得简单。记住,是将一切变得简单轻松,而不是让一切看起来枯燥呆板。
  • 不要复制那些优秀设计师的作品。微软是喜欢标题和小方块,但是你没必要学微软。做自己的设计。
  • 不要忽略字体。字体要和网站的色彩和视觉风格搭调。
  • 扁平化设计的目标是通过简洁让重要元素更加醒目。因此要在布局上下功夫。

结论:世界是平的吗?

平化世界的支持者会向你滔滔不绝的讲述科技进步,全球一体化,全时段的数字时代,更扁平化的信息传递模式。某种角度来看,他们的说法没错。任何一个人通过手机,几秒钟之内就能实现上网。因此,对设计可用性的要求更高了。我们需要更人性化的的触感和更联系用户的设计方法,打造更好的用户浏览体验?那么扁平化设计是用户体验的绊脚石,影响了设计的兼容性吗?只要不盲目使用扁平化风格,就不会。

值得一提的是,扁平化设计对响应式设计大有裨益,因为扁平化设计的核心便是简约,网页的”减负”,自然能让响应式设计更高效。

时至今日,扁平化风格已经被多家大公司采用,随后,全世界都在跟风。
我们必须谨记一点:一切都是周而复始,反之亦然的,反复、循环、更替的出现,扁平化设计必然会在未来的某一天被取代。

扁平化设计的变种有很多,但是还没有出现一种统一的标准风格。这是好事,这说明还是有一部分人没有盲从潮流,他们做出了一种反射式的设计:根据趋势与理念,掺杂一点个人理解,在趋势的基础上进行创造。

在使用扁平化风格之前,一定要进行种种考虑,到底这种风格和你的网页、内容是否能够协调。如果能提升功能性,那么自然可以。如果仅仅是为了追赶一时潮流,将风格强加给用户,且与内容不相符,那么这种设计模式是不可取的。

扁平化浪潮过后,又会是谁?

标签:
本站遵循CC协议署名-非商业性使用-相同方式共享
转载请注明来自:柚子C℃

全世界都被拍扁!你应如何理性对待扁平化设计相关推荐

  1. 全世界都认为汉语是婴儿语(转载)

    看到一篇文章,感觉很有道理 团结湖海带丝 发表于:2006-5-10 16:30 标  题: 强烈推荐:全世界都认为汉语是婴儿语(转载) 100年前,全世界都认为汉语是婴儿语 100年前,全世界都认为 ...

  2. 为什么全世界都要鼓励青少儿学习编程?

    2014年,英国将编程编入教育大纲,所有英国的孩子从5岁起就必须学习编程.而后的2016年,美国政府投入了40亿美元,在全美大力推广编程教育,现在全美有超过1200万孩子在学习编程. 当中国的孩子还在 ...

  3. 华为,为什么让全世界都感到害怕?

    华为,为什么让全世界都感到害怕? 台湾政治大学商学院教授李瑞华认为,台湾的企业可以通过认识华为而有所反思.为什么你需要了解华为,以及华为的创办人任正非?因为任正非在短短26个年头里,创造了全球企业都未 ...

  4. 11位CEO自述:全世界都怀疑我的时候,我选择了相信自己

    这个世界上大部分的选择存在于两个没那么好的路径.事情或者东西之间,如果一个好一个不好,那就不是选择:而对于我们大多数人来说,人生的大部分时候,还没什么机会在两个足够好里挑一个. 痛苦.犹疑和艰难是人生 ...

  5. 戴上耳机,全世界都是你的

    戴上耳机,全世界都是你的 这些歌, 请戴上耳机, 调大音量, 一个人听 ,全世界 都是你的!!!!! 这些歌很温暖,没有金属味,适合有阳光的午后,很悠闲... [Anaesthesia]Maximil ...

  6. 全世界都可以放弃你,但是你不可以放弃你自己!

    昨天看到这样一个电影,故事中讲述了一个发人深省的哲理,故事中的主人公在一次比赛中讲的话,令人深思."全世界都可以放弃你,但是你不可以放弃你自己!" 这是美国的一部电影,它向我们讲了一个勇于坚持的一个职 ...

  7. 冥王星轨道发现不明生命 全世界都惊呆了

    据美国宇航局官方最新消息,新视野号探测器在去年完成了对冥王星的飞掠,创造了人类史上的第一次,这里距离地球48多亿公里,NASA飞船整整飞了九年的时间才抵达. 进入冥王星飞掠轨道时,全世界都屏住了呼吸, ...

  8. 比尔盖茨:面对病毒,全世界都没有做好准备!

    点击标题下「视学算法」可快速关注 2月29日,微软创始人比尔·盖茨发布了一篇文章,其呼吁各国都应该紧张起来,以面对正在全球蔓延的新冠肺炎疫情. 比尔·盖茨还在文章中表示:"面对任何危机,领导 ...

  9. HTML5----响应式(自适应)网页设计(自动适应屏幕大小)

    HTML5----响应式(自适应)网页设计(自动适应屏幕大小) 现在,很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机,电脑等设备,那么就需要我们在页面上下功夫,但移动端的布局不同于pc ...

最新文章

  1. vue里面_Vue中如何使用自定义插件(plugin)
  2. 第一个net-mvc程序
  3. spring配置datasource三种方式 数据库连接
  4. 人质困境:多个人的囚徒困境(博弈论的诡计)
  5. Linux netstat查看网络连接信息
  6. 关于REST API设计的一些小经验
  7. Linq 中 Any与All
  8. P5904-[POI2014]HOT-Hotels加强版【长链剖分,dp】
  9. python语法学习—打印九九乘法表
  10. 深入理解JavaScript系列:根本没有“JSON对象”这回事!
  11. 解决Linux下pcieport 0000:00:1c.5问题导致的系统根目录/磁盘空间不足
  12. 《线性代数》(同济版)——教科书中的耻辱柱
  13. 安装Ruby、多版本Ruby共存、Ruby安装慢问题
  14. 【51单片机】十分钟学会定时器中断¹
  15. PCIe是如何工作的——How PCI Express Works
  16. python的turtle库认识和学习(3)之窗体大小和位置
  17. python网络爬虫技术课后答案_尔雅《Python网络爬虫技术(2020年秋季学期)》网课答案...
  18. contains用法
  19. 2022电工杯A题B题高质量保奖代码思路合集
  20. 2011年12月1日-2021年12月4日

热门文章

  1. 当爱吐槽的美女遇到羊驼,话多会被羊驼怼,这种短视频如何配音
  2. android 仿微信9宫格图片
  3. EOJ #3601 恢复古诗
  4. 小汽车行驶动画svg htlm代码
  5. 【双亲委派机制详解】
  6. zynqpl端时钟_基于ZC706,ZYNQ学习手记(2):用PL端点亮流水灯
  7. python字节数组如何使用?
  8. CPU、内存、磁盘性能监控
  9. 利用分析函数和开窗函数进行分组查询
  10. BugKu——字符?正则?小记