移动端APP扁平化UI设计解析

在当今信息爆炸的文化背景下,人们每天都会通过手机APP接触到巨大的信息流,然后再持续的进行评估、过滤并且再加工,具有认知上的负担,扁平化UI设计更加适合信息碎片化的传递方式。
移动端APP扁平化UI设计解析
移动端APP扁平化UI设计解析
扁平化UI主要设计步骤
1
在进行手机应用程序UI的设计之前,首先要做的就是明确功能和目的,要对产品的定位要有一个明确的了解,对目标用户进行详细的研究,分析出用户群体的使用特征、情感、习惯、心理、需求等信息,并得出用户研究报告和可行性设计建议。移动端APP扁平化UI设计解析
2
其次要做的就是界面信息的梳理工作。在对应用程序功能和目的诉求充分了解的情况下,对整个信息层级进行规划,同时将整个应用程序的重点功能和逻辑关系清晰的展示出来,把不必要的信息全部删除。

移动端APP扁平化UI设计解析
3
在完成了信息梳理的基础上,第三步是为整个界面做岀原型的架构,包括操作与跳转流程、结构与布局,按照有意义的方式将信息分组,每一级页面中所包含的内容与交互反馈方式都必须在这一步完成,为后续的原型设计做出明确的框架结构。

4
根据成本和进度,绘制出界面的原型图,原型是一种设计的表现形式,它必须在最终方案成型之前就进行展示,所以在此阶段绘制出线框原型图,便于展示方案、进行讨论,同时在设计中和开发人员进行沟通,一旦发现问题能够及时的进行修改。
移动端APP扁平化UI设计解析
5
界面的视觉效果设计,根据界面原型图为框架,在此基础上进行视觉效果的处理。移动端APP扁平化UI设计解析

扁平化UI的设计美学

从设计本质上来讲就是简单的设计,是整体简约的设计风格,视觉效果是为功能服务的,提倡功能大于形式。

无衬线字体

扁平化设计的魅力在于极简,同时能展现出极高的功能性。视觉效果上的极简,功能性上的最大化,又不妨碍信息的沟通,很大程度上必须依赖字体的编排,为了使文字的字体更加符合扁平化。移动端APP扁平化UI设计解析

调与饱和度

鲜艳明亮的色彩能够使界面在任何亮度背景下都有良好的对比度,为界面创造出与众不同的感觉,以此获得用户的注意。所以在通常情况下,提到扁平化设计的色彩方案,就会联想到高饱和、单色调的色块等等。
移动端APP扁平化UI设计解析
简化图形

扁平化UI设计中常用高度精简的图标,来代表某一个操作步骤或者是功能的视觉展现,在形态上进行最大化的精炼和提取。移动端APP扁平化UI设计解析

初学者临摹建议
扁平化UI主要设计PSD分层模板的临摹学习,对于刚入门的UI设计师来说只要去图库网站找一些素材,借助工具进行修饰即可,其实这只能锻炼你的借鉴能力,当你的技法娴熟到一定程度,就可以尝试临摹。
SooUI(搜UI网)为Ui设计师、UE创意交互和程序员提供高质量UI设计资源,分享xd sketch ps等UI高质量素材源文件网站,非常适合每日灵感采集和UI练手,适合寻找临摹素材