扁平风格设计|UI界面设计流程

2021年12月16日


我们在做UI界面设计的时候,有很多种风格设计供我们选择,比如说我们常见的扁平风格设计、微渐变风格设计等,而下面我将以扁平风格设计为例,为大家详细地介绍UI界面设计流程。

一、设计流程

第一步、明确产品功能

首先要做的就是明确功能和目的,要对产品的定位要有一个明确的了解,对目标用户进行详细的研究,分析出用户群体的使用特征、情感、习惯、心理、需求等信息,并得出用户研究报告和可行性设计建议。

 扁平风格设计

第二步、界面信息梳理

在对应用程序功能和目的诉求充分了解的情况下,对整个信息层级进行规划,同时将整个应用程序的重点功能和逻辑关系清晰的展示出来,把不必要的信息全部删除。 

 扁平风格设计

第三步、设计原型架构

在完成了信息梳理的基础上,第三步是为整个界面做岀原型的架构,包括操作与跳转流程、结构与布局,按照有意义的方式将信息分组,每一级页面中所包含的内容与交互反馈方式都必须在这一步完成,为后续的原型设计做出明确的框架结构。或者您也可以使用单线条风格设计手法来进行绘制,使其条理清晰!

扁平风格设计

第四步、原型图设计

根据成本和进度,绘制出界面的原型图,原型是一种设计的表现形式,它必须在最终方案成型之前就进行展示,所以在此阶段绘制出线框原型图,便于展示方案、进行讨论,同时在设计中和开发人员进行沟通,一旦发现问题能够及时的进行修改。

扁平风格设计

第五步、视觉效果设计 

界面的视觉效果设计,根据界面原型图为框架,在此基础上进行视觉效果的处理。参考品牌定位和品牌形象来确立不少于两种视觉风格提案并进行分析,当方案确立之后再对其进行深化设计,包括界面元素的布局、色调风格、图标、皮肤的表现等方面。 

扁平风格设计

二、如何让产品富有美感

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

色调与饱和度

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

扁平风格设计

无衬线字体

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

在设计时应该选择简单易用的字体,在通常情况下,最好的选择就是无衬线字体,在西文中它被称为无衬线体,在中文中则与黑体相对应,它没有锐利的转折和收笔时的棱角,整体感觉较为流畅、简洁,呈几何形态,在手机屏幕中也更加容易被阅读。 

扁平风格设计

综上所述,扁平风格设计更倾向于单色调的色彩搭配,通过色调融合实现饱和,让整体页面看上去更加地干爽舒适,若是您想看更多扁平风格设计案例,可以来蓝橙互动的网站做进一步地了解!

相关阅读:

《扁平风格设计的优势与原则(一)》