Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >扁平化≠简单,详解扁平化界面设计的套路

扁平化≠简单,详解扁平化界面设计的套路

作者头像
用户5009027
发布于 2019-06-02 13:11:08
发布于 2019-06-02 13:11:08
1.5K0
举报
文章被收录于专栏:静Design静Design

关注+标星「静Design

海量设计干货 每天准时放送

扁平化并不是简单的删除多余的修饰效果,毕竟用几根简单的线条和几个色块来表达主题,并没有用模拟真实物体表达来的那么直观、容易。简约的界面设计需要设计师,拥有更加准确的视觉传达能力,要运用抽象而又严谨的逻辑思维方式,加上精准的归纳总结才可以完美的表现出来。

扁平化界面形式要素

扁平化风格并不代表着设计师的工作变轻松,更不能说明界面的可用性能被降低。在进行扁平化风格创作时,不仅仅是探求视觉效果的问题,追求产品功能和使用效果才是最本质的。

图形

从图形的角度来看,扁平化风格设计已经不再推崇写实的图形设计,取消了原来设计中大热的阴影、渐变、高光等3D效果,而采用简洁直观的呈现形式,用抽象、高度概括性的平面图形取代三维效果的图形。扁平化图形创意的基本形状有矩形、圆形、菱形、多边形等,但要留意最好不要用多于六条边的形状,因为这样人们的注意力,就有可能会在图形的边数上,而忽视掉图形本来要表达的内容信息。

虽然扁平化的图形表面看起来十分简约,但这并不是简单地把拟物化设计中复杂的装饰效果丢弃就能达到的,刚好相反它对设计者的要求更高,要求设计者对图形有更加准确的把控能力,通过既抽象又严谨的思维条理,才能对扁平化图形进行精简总结,最终呈现完美的设计表现。

其中最重要的主旨就是要使图形经过抽象和简化过后,依然能被受众正确的辨别,从而有效的进行信息的传递,让用户能有更好的体验。所以说,表面看起来很简单的内容,但其实内部大有乾坤。如果扁平化图形设计可以处理适当,就会给人一种简约而不简单,清新而不单调之感。

色彩

色彩的运用在扁平化设计中有着举足轻重的地位,在日常设计中我们就可以发现,基本上所有的扁平化设计都脱离不了色彩。它不仅仅传递此图形是什么颜色,它还是传递给观众情感的一种最直接的表达方式,一般扮演着和观众情感互动的主要角色。所以,如果一个界面的色彩非常明快、活泼那么也就很容易吸引受众的目光。

对于色块的颜色,传统的色彩规律不大适用于扁平化设计中了,扁平化设计一般都有特定的设计法则,一般用纯色、复古色或是同类色会使设计更加出彩。例如:复古色调,是在纯色的基本上增添白色,以降低颜色的饱和度,让颜色变得更加柔和。如果把复古色当作设计的主色调,这种颜色会让页面变得更加淡雅,让人看着舒适。

总的主旨就是各种颜色搭配要协调,虽然视觉上扁平,但整体界面会感觉丰富、活泼。在拟物化设计里,有很多界面的底纹都会采取肌理效果,使界面具有很强的质感,给人一种亲和力。而扁平化设计中,抛弃掉了真实质感的底纹设计则会让界面更简洁直观,从而可以更加清晰地向受众传达想要表达的情感和内容。

字体

扁平化风格的界面设计,选择简单的字体最为适宜。文字的清晰度和粗细也都非常重要的因素,而且最好一个界面中字体系列保持在两种左右,不易太多以免繁杂。字体不单单要迎合大众的审美需求,也要实用、方便阅读。

在扁平化设计中经常采用的是无衬线字体,如:黑体、微雅等,这是由于它们特殊的字体形态更符合扁平的特点。无衬线体里,字体较宽,会让人感到轻松,排版的时候不容易有紧张感,更容易阅读,而且不管在任何背景上也都能轻松的识别。无衬线体的线条非常的简练,具有几何感,这种不带有任何花哨的字体,与简单明快的扁平化界面设计是非常吻合的,从而确保设计在视觉上的统一。

另外,扁平化界面设计中字体的排版也需要格外的注重,字体占据面积的比例一定要把控好,一定要适当的留白,让整个画面有呼吸感,这样可以更好的衬托出主体内容,更易被受众接受,文字占的空间面积大则会显得拥挤,给人以压迫感,也不适合扁平化简约,明快的风格。

扁平化界面的形式创新

在实际生活中也很容易发现,扁平化的设计在辨识度上没有拟物化那么直接,从而增加了使用者的学习成本。另外,扁平化设计如果没有处理得当,就会显得很平、没有层次感,使用操作起来就会产生一些问题。

扁平化并不等于没有一点设计修饰效果,在实际设计中,设计师应根据设计理念、服务对象的特征以及要解决的问题灵活运用扁平化风格。一个较为成功的扁平化设计的创作,最根本上需要把产品功能排在第一位,而不单单只是考虑视觉呈现的问题,不要为了扁平化而扁平化,扁平化的视觉呈现也是为了产品的功能服务的。

在界面设计时,我们要时刻牢记设计形式是服务于产品功能的,怎么样用直观的界面和交互向用户,展示产品的整体构架和功能,是我们首先要考虑的问题。简约而不简单的把影响用户理解和使用产品的视觉要素删除,合理的运用效果,自然的指引用户正确的使用产品是扁平化界面设计的宗旨。

有些设计不能完美的呈现出来,那么我们可以寻求另新的形式,来取代纯粹的扁平化形式:扁平立体化,即是在扁平化的基础上延伸出拟物化设计。在平面上展现出拟物的视觉效果,既简单又富有趣味性,综合了两者的优点,避免了单纯的扁平化不直观的弊端。

设计服务于人,不管我们在设计时选用哪一种设计形式,扁平化、拟物化还是扁平立体化,都取决于哪种形式更能表达我们想要的最终效果,并且以用户的情感需求为主导。设计师们应根据用户需要扬长避短、合理的取舍,让各种设计形式发挥自己最大的优势,既给人们带来视觉上的盛宴,又有实质上的便利。

作者:李亭翠 陈颖 原文地址:http://dmit.top/Wt6lbD

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
扁平化设计原则
扁平化设计 —— 设计社区不得不谈论的话题, 这种趋势的感觉是强烈的, 大多数设计师不能顺应这种趋势, 甚至讨厌这种趋势。
beginor
2020/08/10
1.2K0
扁平化设计原则
PHPer 学产品[2]|扁平化设计
概念 ---- 所谓扁平化设计,国际上流行的称呼叫“Flat Design”,其实比较适宜的称呼应该是“Minimal Design”,或“Honest Design”。此设计的目的在于去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。 案例 ---- 微软的 Metro Design,后因为商标问题,更名为Modern Design,它还有一个主页:htt
猿哥
2019/07/25
8240
了解这些知识点,扁平化UI设计轻松搞定
在当今信息爆炸的文化背景下,人们每天要通过过手机APP接触巨大的信息流,然后再持续的进行评估、过滤并且再加工,具有认知上的负担,扁平化UI设计更加适合信息碎片化的传递方式。
用户5009027
2019/09/03
1K0
了解这些知识点,扁平化UI设计轻松搞定
扁平化设计是否已经失宠?10个案例告诉你答案
近年来的设计风格一直在变化,设计师们在这方面的喜好和倾向性以及网页设计趋势方面的话题一直争论不休。例如,Flat design vs. Material design这对欢喜冤家。但是我们今天不做比较,他们之间的恩怨让设计师自己解决吧。今天的主题是给大家介绍一些优秀的扁平化设计的案例。 在学习扁平化设计案例之前,我们先给大家科普一下什么是扁平化设计。根据维基百科权威解释:“扁平化设计是一种简约的UI设计理念,现被广泛应用于图形用户界面上(例如网络应用程序和手机应用程序),在图形材料,例如海报,艺术作品,
奔跑的小鹿
2018/03/16
9710
扁平化设计是否已经失宠?10个案例告诉你答案
Material 还是扁平化?开发者还有第三个答案
2011年,拉里·佩奇担纲谷歌CEO之后,改变谷歌工程师主导的文化,其中一项重要行动便是,下令谷歌设计师将谷歌旗下所有产品重新设计。谷歌启动“肯尼迪”项目,召集公司里的骨干设计师,重新设计Google的每一项产品,寻找一种共同的设计语言。三年后即2014年的Google I/O大会上,MaterialDesign被隆重介绍,MaterialDesign提取自卡片的材质和真实的光影,在UI 设计上提取出具体的物理细节,只保留物理特效、光影和层次,能够实现不错的动画效果,它在繁复的拟物化设计与极简的扁平化设计之
罗超频道
2018/04/27
1K0
Material  还是扁平化?开发者还有第三个答案
2020-2021 设计趋势ISUX报告 · 运营篇
前言 互联网市场环境瞬息万变,在玩法层出不穷的今天,运营活动从来要求创新以及出其不意,以此来实现拉新、促活、回流、营收等产品设计目标,一个个运营活动也在不断塑造品牌认知、提升品牌价值。 与此同时,快速变化的技术也在影响着运营活动的落地实现方式。市场变化背后,自有根源和连接,本文尝试探求变化的脉络,从全局视野观察,形成运营体验设计趋势判断。 我们将运营体验设计归纳为3个大层面:基础层、风格层、策略层,拆解各个层面的模块内容、元素、玩法,从字体、图形、色彩、动效、空间等多个维度出发,同时考虑技术趋势等
腾讯ISUX
2020/07/15
9530
为什么大家都爱极简主义设计
简约并不意味着原始,这是两个截然不同的概念。而极简主义设计种大量的留白也并不等同于空。
宇相
2018/08/06
7590
为什么大家都爱极简主义设计
UI设计丨一款没有美感的产品真的能拿出手吗?
视觉作品本身带着很强的个人属性,除了审美问题,更让人头疼的是,很多人为了模仿而模仿,而不是按照自己的产品需求设计版面,最终呈现的作品既没有自己的风格,也没有别人的舒适。
齿轮易创说互联网
2019/03/15
7670
设计师必须了解的美术基础
任何分类的设计师都需要有一定的美术基础,甚至也要有一定的手绘能力。我们在用电脑设计图形的时候其实也在潜移默化地在使用我们储存在大脑中的美术知识和审美,即使再先进的人工智能,也不能代替设计师的审美和美术知识。说到底软件仅仅是工具而已。要想提高你图形的审美和设计感,那么就需要补一下美术基础的课了。互联网视觉设计中手绘在互联网设计中占的比重也在逐渐增多。对于我们UI设计师来说手绘也成为一个绕不过去的技能,但是不要紧张:我们不需要成为手绘大神或者插画师,只需要掌握一定的美术知识再加练习即可。那么如果我们掌握了美术知识并可以画出还可以的画,对我们会有什么好处呢?
宇相
2019/09/19
9520
设计师必须了解的美术基础
扁平化设计开始流行啦~
在最近几年里,我们发现软件和应用的界面快速的从立体,纹理化变为扁平,简洁化。这种变化趋势是普遍存在的,我们来花些时间来看看这些变化是如何发生的,以及这些变化产生的影响。除此之外,我会分享一些关于扁平化设计的贴士以及注意事项。
前端GoGoGo
2018/08/27
6300
品牌体验趋势 2018
1. 品牌形象策略 品牌策略的核心在于品牌的维护与传播,而随着互联网信息时代的迅猛发展,如何凸显品牌特征和怎么赢得消费者的心才是互联网品牌最首要目的。如今品牌营销方式多种多样,不管是传统品牌营销方式,
腾讯ISUX
2018/06/29
5590
CorelDRAW2023全新版本多项新功能优化改进
还更新了CorelDRAW Graphics Suite 2023引入了一项新工具、超过200款设计模板,以及最新的潘通颜色等等。CorelDRAW 全称“CorelDRAW Graphics Suite“,也就是众所周知的”CDR“,是一款智能高效的平面设计软件,广泛应用于排版印刷、矢量图形编辑及网页设计等领域,30多年来无数优秀的设计师通过CorelDRAW大胆展现真我,交付了出众的创意作品!CorelDRAW Graphics Suite是配备齐全的专业设计工具包,可以高效提供令人惊艳的矢量插图、布局、照片编辑和排版项目。即时、有保障地获得独家的新功能和内容、一流的性能,以及对最新技术的支持。 CorelDRAW Graphics Suite 是矢量制图行业的标杆软件,2023年全新版本为您带来多项新功能和优化改进。
用户7442547
2023/03/20
8140
巧用渐变色打造精致移动端APP
渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法。然而自从Instagram把经典的宝丽来相机logo更改为色彩鲜亮的扁平化图标以来,渐变色逐渐回归到了人们的视野之中,也逐渐成为了近年来移动APP设计的主要风潮之一。 渐变色兴起的原因在于扁平化风格极其容易造成同质性,设计师如果需要追求视觉丰富度的设计语言,多数会运用插画设计和动效设计让自己的设计脱颖而出,但是这些技巧短时间内难以快
奔跑的小鹿
2018/03/16
2.3K0
巧用渐变色打造精致移动端APP
2018最佳网页设计:就是要你灵感爆棚!!!
2018已然过半,网页设计涌现了一些新的设计趋势,例如破碎网格设计,动态或不规则文字排版设计,流体特效应用等。也同时延续着2017和2016,甚至更早的网页设计趋势,例如简约风设计,扁平化设计,响应式设计,视觉滚动差设计,单页以及全屏视频背景设计等等。
奔跑的小鹿
2019/01/24
1.8K0
2018最佳网页设计:就是要你灵感爆棚!!!
2020年最值得关注的10个UI设计趋势
这篇文章来自 UI 设计师 Diana Malewicz,她在日常工作中会非常注意 UI设计的流行趋势,而这篇总结就是她梳理总结的10个小趋势。它们更多的是偏向 UI 视觉方面,并不涉及到体验和交互。
用户1730674
2020/06/17
5690
设计师会编程、程序员懂艺术:Semi Flat Design
本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron 本号正在更新的系列有: 写给设计师的人工智能指南 移动App设计之xxxx 数据爬取及可视化系列 技能之xxxx 读书笔记 还有其他杂文。 欢迎关注,转发~ 本文为系列文章: 设计师会编程、程序员懂艺术 的第2篇。 往期直达: 01设计师会编程、程序员懂艺术:设计规范 以下为正文 ---- Semi Flat Design 半扁平化设计 设计师、程序员需要了解的最
mixlab
2018/04/17
2.6K0
设计师会编程、程序员懂艺术:Semi Flat Design
钱塘弄潮 | 苹果和Facebook都在用这种风格设计界面,它叫什么?
Facebook、Apple、Instagram、Airbnb……这些走在 APP 设计最前面的公司,似乎在最近几个月都选择了同一种方法来改进 UI(用户界面)。 ” 它们设计上的一些共同点:去除原
钱塘数据
2018/03/01
1K0
钱塘弄潮 | 苹果和Facebook都在用这种风格设计界面,它叫什么?
【愚公系列】《AI智能化办公:ChatGPT使用方法与技巧从入门到精通》 029-ChatGPT 的设计应用(平面设计)
当涉及到平面设计时,关键词可以涵盖设计风格、色彩搭配、排版方式、图形元素等方面。以下是一些常见的平面设计关键词,您可以参考并根据需要进行扩展:
愚公搬代码
2024/10/14
2620
[新] 2020年最佳移动应用UI设计趋势
译者:Winterbure / Violet 原文:Django Stars
用户5009027
2020/06/19
8030
[新] 2020年最佳移动应用UI设计趋势
移动端APP设计趋势
移动端APP在2017年经历了诸多的变化, 人工智能、聊天式的界面、响应式设计、虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战。研究表明,用户每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,可以看出移动端APP的快速发展都是不争的事实,在我们不断吸收新的东西和掌握新的潮流的同时,还需要确认这些设计趋势是否被验证了。以下是2017年移动端产品最有影响力的趋势:
進无尽
2018/09/12
1.3K0
移动端APP设计趋势
推荐阅读
相关推荐
扁平化设计原则
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档