APP 界面设计中扁平化设计的运用——以《武汉军运会》APP 设计 改造为例

收藏 打印 发给朋友 发布者：lunwenchina

热度0票  浏览62次 时间：2020年11月02日 16:11

王煜，刘丹 / 武汉商学院艺术学院

摘 要：随着社会经济的快速发展，互联网普及程度越来越广泛，我国手机的交互设计水平已经取得进一步的发展。

与此同时，随着用户的增多，要满足更多的受众的需求，移动端 APP 的界面设计已经转变成扁平化设计风格。扁平化设计在设计理念上有着更符合当下用户的需求的优势，在视觉感官上更为直接，化繁为简，将信息作为核心直接面对用户，让用户可以最快的获取信息。本文重点探讨了《武汉军运会》APP 设计中扁平化设计在理论和实际运用，希望通过本 APP 的设计，能够为扁平化风格的 APP 界面设计者提供帮助。

关键词：互联网 +；第七届世界军人运动会；界面设计；扁平化设计扁平化设计起源于北欧风格与极简主义设计，将“信息”

作为主要核心的表达，减轻视觉上的繁琐设计，强调用户体验感。这些设计理念极大的符合如今数字世界的设计需求，满足了如今快节奏生活秩序下的用户的需求，并逐渐成为设计领域的设计趋势，也对如今的移动端 APP 设计产生了极大的影响。

一、互联网 + 背景下 APP 界面设计发展前景

1近年来，互联网生态发生了巨大的变革，向着连接性，开发性，网站，移动中心，APP，位置基点，社会化网络等七个方向进行变革。这就意味着传统互联网开始了向新的移动互联网发展，具体体现就是移动端用户特别是手机用户的指数级增长。

传统连接互联网的电脑发展成了现在手机 APP 应用的形态，未来互联网服务会变成 APP 应用和 WEB 的联合服务，APP应用将成为人们在生活中转递信息的主要工具。而从现在移动互联网不断增长的用户数量和巨大额商业价值，不难看出未来移动互联网会有更大的发展。在这其中，智能手机 作为移动终端的代表物，必然会带动APP应用的设计与发展。现在，APP 应用已经是移动互联网的重要部分，在未来，互联网生态中，APP 应用将会成为其核心部分之一。

二、互联网 + 背景下 APP 界面设计发展趋势

当今是“互联网 +”时代，通过互联网平台将世界的距离缩短。连接互联网的移动终端——手机界面设计也发展的越来越快。微信、QQ、微博等各式各样的手机 APP 也逐渐进入到了我们的日常生活，与此同时，用户对手机的界面设计需求也在不断增加。一个好的界面设计可以让一款 APP 脱颖而出，让用户使用感到便捷与舒适。

设计师在设计时需要考虑用户的操作习惯与应用体验，对界面中的文字图片进行合理的整合排列，高效的传递重要信息，以达到美观的视觉效果和信息传递的目的。在 APP 界面设计的初期，由于技术等各方面的原因，APP 界面没有受到人们的重视，但经过长期的发展，APP 的界面对用户的影响越来越大，APP 界面设计的风格、方式月越来越丰富新颖。

一个良好的 APP 界面设计可以给用户轻松、愉快的体验。

三、选择扁平化设计风格的理由

（一）扁平化设计风格的优势

当下是一个信息爆炸的时代，生活在这样的时代，会无时无刻接受到各种繁杂信息。路边的广告牌、电视剧植入的广告、千篇一律的使用说明等等，这些重复无数遍的信息，会让人们想不停追求新鲜的信息。各类手机 APP 通过互联网即时更新的特性出现，满足了人们这样的需求，但大量 APP提供实时更新的同时，也附带了许多无用的信息，因此人们又开始追求极简的设计。

《武汉军运会》是一款关于军运会新闻类的 APP，针对军运会的政策、消息、工作以及活动为主要内容的手机应用程序。

在移动端中，显示屏幕小，扁平化的设计更加适合，而且能够弥补较小界面设计的信息容量不足。《武汉军运会》

APP 作为一款主要传播信息的应用程序，在使用中重点在信息上，这就要求在界面设计中既要有界面的美观性，与此同时，又要避免不必要的信息与视觉，这与在扁平化设计中的清晰的交互模式和高效率的信息传达相符合。

（二）与拟物化风格的对比

与拟物化设计相比，扁平化设计舍弃了对实际物体的高度模仿，而是更多的关注设计与信息的自身。这种设计使得扁平化设计的色彩搭配相对直观，以此来凸显信息为主的配色要求。拟物化设计是对“物”的描述和刻画，因此在复杂的物体标绘中，必然会出现对物体的还原而限制了色彩的选择和物体的繁杂装饰，因此会带来更多的视觉疲劳。扁平化设计舍弃不必要的元素，用颜色来表达层次与界限，这样的特性使得其颜色的选择范围十分广泛，并且不受实际物体的限制。扁平化设计摆脱了拟物化设计中对“形”的枷锁后，色彩被释放出它无限的可能，尽情发挥它的各层涵义，从而达到扁平化设计传递信息自身的特点。

IOS6 的拟物化设计与 IOS7 的扁平化设计对比，IOS7 的色彩更加丰富艳丽，能够更加快速的吸引用户的视线，并且能够在短时间内获取所表达的信息。丰富的色彩搭配使用户不易产生视觉疲劳，反而可以感受到鲜艳的色彩搭配所带来的舒适感。反观，拟物化设计执着于复杂物体形态的描绘，一方面要尽量向实物的色彩靠近，另一方面由于对物体形态的写实，色彩的选用愈发狭窄，并且为了避免色彩混杂和形态重复而产生的视觉疲劳与重点分散，因此整体色彩的呈现感觉给人过于沉闷。

四、《武汉军运会》APP 设计改造方案

本文以第七届世界军人运动官方 APP 为例，拟将 APP 的界面设计分为四个部分进行分析改造设计。

（一）界面结构设计

本 APP 改造采用板块式布局，这种布局具有清晰整洁，识别度高的优点。对于本 APP 而言，一方面其整洁舒适的视觉效果可以给用户识别性高的观感体验；另一方面，又将主要信息进行了合理排列整合，使用户可以更加快捷的找到所需要的内容，并协调了大量繁杂文字内容所带给用户的阅读疲劳感。

与此同时，还采用了扁平化的信息结构组织方式与层级结构，消减了繁琐的路径查找，使用户可以直接在顶层界面就可以获取其它界面层级，这样大大减少了用户的操作。采用了板块布局后，将各主要信息合理分配在不同的板块中，使各个板块的功能明确，结合扁平化设计简洁的特点，将各个入口整齐排列，用户在使用时，通过不同的需求，来观看不同的板块，这样用户就可以不用承担单层页面信息负荷增大所带来的问题，相反，可以更好的发挥出扁平化结构的优势。

（二）色彩设计

色彩是界面设计中不可或缺的一部分。在扁平化设计中，颜色是主体之一，并经常有多种颜色被用于信息的分层管理。

使用不同的颜色来引导用户进行互动，激发用户探索并理解以不同的颜色信息，并且在美化视觉效果的同时又兼顾了功能的本身作用。《武汉军运会》APP 的设计改造中，采用蓝白主调与多种其他活泼的颜色组合。其中蓝白主要用于大量文字部分，避免活泼颜色所带来的视觉疲劳。在按键和主页部分则采用的是活泼明亮的纯色，来丰满充实视觉感官。利用简单的几何色块，通过色块与色块之间的相互关系来表现层级。这样的色彩搭配形成鲜明的对比，突出了重点信息。

（三）文字呈现

在扁平化设计中，使用的设计元素一般非常抽象，重点在于对信息的表达和传递，通过高度的抽象化来提炼人们认知中的视觉符号。因此，在扁平化风格的《武汉军运会》APP界面设计中，文字的呈现也趋向于简洁明晰，使用户能够第一时间认清文字信息，并在此的指导下快捷的进入所需要的内容中。

因此需要采用与整体扁平化风格相符合的字体，并且舍弃过度装饰的字体，使用户可以在识别时可以轻松舒适的获得文字的内容。最终，所采用的字体选择为黑体字。这样对于各个不同系统和平台都可以完美配适，而更重要的是，黑体字清晰典雅，线条工整，是目前能够最快捷传递文字内容的字体之一。简洁明了的字体，对于用户有着较高的接受程度，这对用户的使用粘连性起着决定性的影响。

（四）交互方式

扁平化设计的界面交互方式可以让用户的访问过程更加方便，通过对多繁杂层级的精简；让用户在界面顶层就能对子页面信息进行了解，从而对整个交互方式有了初步的了解。

加入快捷悬浮按钮，用户自定义设置到达界面；这种快速访问路径的设计，打破了传统组织层级结构中的一级级单路径访问的弊端，让信息可以更加方便的了解，使用户可以对整个 APP 信息层级进行总体把控。

《武汉军运会》APP 的本身内的容层级并不繁杂，采用了扁平化风格的界面设计后，大部分主要内容都可以整合在主要页面中，极大的满足了用户对信息的需求，大大减少了获取信息的效率。

结语

随着互联网在中国的发展，如今人们的生活节奏的加快，对于信息的传递要求变得更加精确，这与提倡“形式服务于功 能 (form follows function)”、“ 少 即 是 多 (less ismore)”的设计理念的扁平化设计相符合，APP 界面设计的扁平化风格已是当今的设计的趋势，扁平化设计从清晰的信息架构，简洁的视觉效果和便捷的交互体验三点，提高了人们的操作效率，这样的界面设计符合当下人们的实际需求。扁平化设计的兴起，带来了新一轮的视觉革命，给人们带来了全新的体验。

参考文献：

[1] 薛玲 .“互联网”背景下的品牌形象设计研究 [D]. 天津工业大学 ,2017.

[2] 方心怡 . 扁平化设计风格下平面视觉元素的应用研究 [D].

苏州大学 ,2015.

[3] 姜波 . 扁平化设计在智能手机界面中的研究 [D]. 吉林建筑大学 ,2018.

作者简介：王煜，学生。研究方向：动画。

刘丹，讲师。研究方向：艺术设计、数字媒体艺术。

基金项目：本研究为 2017 年武汉市市属高校教学研究项目“双创”背景下的人才培养模式创新改革研究—以“艺术设计”专业为例（项目编号 2017107）的阶段性成果之一。

基金项目：本文系湖北省大学生创新创业训练项目“互联网 + 背景下“世界军人运动会”视觉系统及周边产品设计的可行性研究”（项目编号 201811654058）的阶段性研究成果。）