APP下载

论界面设计中的扁平化设计现象

2017-01-28武汉工程大学430000

大众文艺 2017年9期
关键词:扁平化界面设计层级

熊 昭 (武汉工程大学 430000)

论界面设计中的扁平化设计现象

熊 昭 (武汉工程大学 430000)

“扁平化设计”一词开始在界面设计中频繁出现,这种设计风格更是逐渐被广泛运用。扁平化设计并不单单只是一种简单的设计风格,它通过简洁理性的界面编排、扁平的界面层级、多运用几何造型元素以及温和的平涂式色彩搭配,来达到操作更加简易、生动、直观的效果。用户操作时软件的功能性更够得到更好的体现、使用过程更加简单流畅、操作反馈也更加清晰直接,极大的降低了用户操作上的认知学习成本,从而达到更好的用户体验。正因为扁平化设计的这些独特优势和造型美感,使得它逐渐在交互设计中占据主导趋势,成为界面设计中的主流设计风格。

扁平化设计;界面设计;用户体验;交互

扁平化设计是近年来视觉传达设计领域中出现的一种新的设计风格,在界面设计中更是被广泛运用,成为一种新的设计潮流。扁平化设计相比拟物化设计,除去了界面中一些繁琐的设计因素,崇尚简约,平面化的表现形式,在现代快节奏生活中,更易被人们欣赏和接受。

一、对扁平化设计理念的认识

过去界面设计就一直在强调交互的易操作性和优质的用户体验,扁平化设计的出现,是对这些设计目标的总体概括。它不仅是一种简约的设计风格,更是一种设计理念:让内容能够更加直接的呈现,以更低成本实现功能作用,同时让用户获得更加良好的用户体验。运用简洁、直接的的方式将信息和事物的工作方式展示出来,减少用户认知障碍。扁平化的界面设计,是以用户为中心的设计原则的必要要求,也是当代主义的集中体现。

1.扁平化设计成为交互设计主流风格的原因

扁平化对于互联网而言意味着两个词:快速,突出。时间就是金钱,快速同时代表更低成本的运作。扁平化设计的界面,能够在短时间内完成更新,也方便再更新。其次在大数据时代下,信息突出是网站取胜的关键。扁平化的界面设计通过把重要的信息放在首要位置,弱化其他次要元素,让用户的注意力能够集中放在产品和重要信息上,而不会被网站界面上的其他设计元素干扰。达到突出核心信息和操作的目的,网站的易用性和可用性大大增强。

对于用户而言在一个布局简洁逻辑清晰扁平化设计网站里,能够快速完成自己的需求,自然也就能够得到良好的用户体验。越复杂的界面设计,提取信息的时间就越长,用户的注意力会被繁琐的交互形式分散,华丽的界面元素过多也会造成用户的阅读和使用障碍。而使用清晰直观的扁平化界面,大脑提取和转换信息所用的时间会大大减少。

二、扁平化界面设计的特点

实现扁平化界面的可用性,首先需要清楚了解整个交互层级之间的结构,在用户能够快速又准确的找到交互对象的前提下,再去实现界面的美观性。所以扁平化界面设计不仅只是界面设计风格上的变化,更是一种思维逻辑层面的提升。

1.形式结构简易化

整个交互过程中,最重要的就是界面的结构设计,可以界面结构就是交互的基础。而界面布局和界面层级是界面结构的基本,可以看做界面结构中纵横的两个层面,这两者之间的逻辑是否合理,直接影响着用户的操作。所以简易化界面层级之间的形式结构,让用户能够更加直接的进行操作,降低用户操作中的错误率,这是扁平化设计最核心的目标。

2.界面布局简洁化

界面中的布局指的是将界面中的各种设计元素,根据需求及其之间的联系进行合理的排列组织。扁平化界面的基本是布局简洁,同时定位好元素之间的主从关系,这样界面中的重要功能能够直接凸显,以便于用户能够更迅速准确的获得信息。

3.界面层级扁浅

为了是用户能够快速完成需求,扁平化界面设计中应尽量避免界面之间不必要的切换。尽可能的把低层级信息合并上移,减少不必要的界面层级的划分。只有层级越少,用户才会觉得是方便的好用的。这就要求在一个层级中需要显示更多的内容,所以核心功能一定要着重突出,这样界面才更加针对性也更加便捷。

4.功能表达简便化

互联网技术发展的同时界面上也诞生了更多的功能,五花八门的功能让用户难以直接判断其真实作用,我们称这种现象为“认知摩擦”。好的界面设计一定要最大程度减少认知摩擦,让用户可以直观准确的了解界面中不同功能的作用,节省操作时间。所以,扁平化的界面设计要根据用户的惯性去设计功能,从用户行为模式出发做设计,同时操作方式要简易。

5.操作反馈明晰化

用户在APP或者网页上操作时反馈一定要及时并清晰。这是用户衡量自己操作的标准。及时,正面的反馈信息可以帮助用户更加合理的操作,例如可以防止用户错误或无意删除一些他们本身不想删除想内容。如果反馈不够及时,那么及时这个网站或者APP的界面设计多美观,动效多生动,功能多强大,也还是会造成不好的用户体验。以至用户粘性降低,最终造成用户的流失。因为清晰及时的反馈信息在整个交互设计里都是至关重要的。

三、如何在界面设计中合理运用扁平化设计

一些伟大的设计中所运用的“形式跟随功能”和“少即是多”的理念依然是我们今天还在谈论和学习的。扁平化设计要求设计师必须清楚的知道设计对象最本质,最重要的功能。然后在设计里去合理的体现这点。

扁平化界面设计的前提是好的界面排版。排版是界面信息的具体展现方式,这就要求界面排版要具有视觉导向性,能够更加有效地清晰地传达信息。而扁平化界面设计的核心是交互层级,所以,优秀的界面设计,既要做到层级扁浅有逻辑,还要做到页面布局美观功能设计合理。不能仅仅是为了简单而扁平化,而是为了更优质的用户体验而扁平化。

所以优秀的扁平化界面设计,界面的排版布局一定不能忽略,也就是要协调好界面中的图形、色彩、文字等内容,只有合理分配好它们,整个界面布局才能做到既简洁美观,同时还具有一定的视觉导向性。做到扁平化的视觉和交互设计相融合。

1.色彩

“色彩一定要酷点再酷点”。扁平化设计几乎都是平涂色彩,没有光影的立体效果。因为少了些质感,所以颜色的运用变得更加重要。而色彩之间是否和谐在扁平化界面设计中尤为重要,扁平化设计中的色彩大多给人鲜亮、强撞色的印象。高饱和度的色彩,往往更容易吸引人,给用户强烈的视觉冲击。同时不管在什么样的背景前,高饱和、鲜艳明亮的色彩都能不被背景掩盖。也正是因为如此,在扁平化界面中通常鲜亮的色彩中所包含的信息或代表的功能,就是界面要传递的主要信息和主要功能。

2.图形

在扁平化界面设计中,通常使用基本形简单明确的图形,取代以往的具有仿真效果的有机图形。这些基本形多由几何形、曲直线条等组合形成。在图标设计上也采用更加精简的方式表现,将图形进行概括提炼,用以简洁的线条来展示,几乎不具备装饰性。这样的表现形式去除或减少了多余的修饰,直接突出主题,用户能够更加关注内容本身,而不被装饰所打扰,视觉效果直接,功能清晰直观,减少了用户接受、适应信息时花费的时间和精力。

3.文字

扁平化界面设计中的重要元素之一就是文字,合理使用能够让界面整体的编排更加简洁。扁平化的界面在编排过程中,应最多使用两个系列的字体,通过改变文字的大小、粗细以及形态来区分内容的主次,例如大小字号、段落以及文字特别的排列组合等,使页面主次信息一目了然,同时兼具节奏感。正因为文字的这些特性,在扁平化设计中使用基本的设计手法就可起到保持页面的简洁和准确传递页面信息的作用。

4.具体案例分析

Windows 8的主要界面风格就是典型的扁平化界面设计,其实从2006年起,微软的应用软件就以经开始使用这种设计风格。相比之前的Windows7,不仅减少了页面之间的跳转,同时在主界面上直接添加了用户经常使用的工具,以更清爽的排版和突出重点来方便用户使用。把这些工具全部集中摆放在开始界面上,图标采用方形外轮廓,加以高度凝括的图形和纯色填充,给用户直观,醒目的视觉感受。用户使用也更加方便快捷,直接通过开始界面,就可以进入到一些常用应用,相比之前的版本减少了操作流程节约了时间,不在需要需要分别点开不同的工具和子菜单才能看到。微软的这一设计灵感源于美国华盛顿州的巴士站牌、机场和地铁的指示牌设计,它采用大量醒目的字体,以次吸引受众注意力。微软认为扁平化的设计原则应该是“光滑、快、现代”。而这也正是当下现代设计的一种趋势。

如今的微软产品,会越来越多的出现更多这种“扁平化”的设计风格,而少见传统的Windows视窗界面。其实不仅仅只是微软,我们可以看到越来越多的界面设计、APP设计都在运用扁平化的设计风格,这种以文字为主的界面导航,功能图标高度凝括、摒弃多余装饰的界面设计。

四、结语

扁平化设计用一种简洁明了,却又十分吸引用户注意的方式,实现了对界面设计的革新。扁平化的界面设计中,用户能够清楚直接的获得信息,能够快速的完成操作目标,达到最优质的用户体验。扁平化设计不单单只是做减法的设计,它传递的是一种“少即是多”的设计理念。在扁平化设计中,看似简单的图形,单调的色彩,单一的字体加以组合设计,却能够比那些花哨的设计更具视觉冲击和视觉导向性。这种设计的优势显而易见,它能够快速、准确、清晰的完成用户需求,实现界面设计为提升用户体验而服务。

[1]开源中国.深入探讨扁平化设计[EB/OL].(2013-07-10)[2014-03-07].

[2]马娜娜.简洁而不乏味——浅谈扁平化界面设计[J].大众文艺,2013(16):137—138.

[3]视觉中国.扁平化设计的色彩选择[EB/OL].(2013-04-28)[2014-03-07].

[4]张芸.扁平化设计在网页应用上的优势[J].艺术科技,2013(6):229.

[5]杨帆.基于扁平化的界面设计美学思想的探讨[J].艺术科技,2014(1):59.

熊昭(1995.07- ),女,湖北大冶人,民族:汉族,武汉工程大学艺术设计研究生在读,学历:研究生在读,研究方向:数字媒体设计,作者单位:武汉工程大学。

猜你喜欢

扁平化界面设计层级
中医养生APP界面设计
“共享员工”平台界面设计
科室层级护理质量控制网的实施与探讨
中国传统元素在界面设计中的应用
军工企业不同层级知识管理研究实践
基于军事力量层级划分的军力对比评估
手机UI界面设计中视觉艺术元素的构成
职务职级并行后,科员可以努力到哪个层级
扁平化的球星Ⅱ
扁平化的球星