扁平化风格在交互产品设计中的运用.doc

《扁平化风格在交互产品设计中的运用.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、扁平化风格在交互产品设计中的运用近年来，扁平化风格在产品交互设计中的运用越来越广泛，成为交互产品设计中的一种视觉表现风格。扁平化风格完全采用不加任何视觉效果的平面元素进行设计，摒弃投影、渐变、浮雕、凹陷等三维视觉表现形式，力求营造简洁、无干扰、直接的视觉效果。一、扁平化风格的表现形式1.框架形式简洁化框架结构的规划是产品交互设计中非常重要的组成部分，结构的设计是否具有逻辑性、是否流畅合理，是否符合产品定位和用户需要，对于产品交互设计的后期延展具有举足轻重的作用。扁平化风格在框架结构和形式设计上最大

2、的特点就是简洁化，主要体现在界面形式简洁、界面层级简洁两方面。2.界面形式简洁界面形式简洁是扁平化风格的一种视觉特点。互联网的快速发展导致用户在使用产品过程中浏览信息的可选性增加，耐心减弱，如何在最短时间内突出产品重要信息和内容，是产品取胜的关键。扁平化设计正是通过图形、图标、色彩、字体的合理简洁搭配和使用，形成具有产品特色的统一视觉效果，从而把重点信息放在第一位，便于用户第一时间关注和识别。在满目三维效果越来越逼真的当代设计环境中，一款优秀的扁平化设计犹如清新的微风，能满足信息有效阅读的同时，还

3、能带给用户轻松的浏览感受和使用体验。3.界面层级简洁4学海无涯由于网络技术的提高和普及，人们使用手机进行产品交互界面操作的时间增多，但其大部分由零散的时间构成，因此手机交互产品的界面层级应以简洁设计为主，简单的菜单层级可以节约打开界面时使用的网络流量和时间，减少用户的等待焦虑，给用户提供一个流畅的浏览环境。扁平化风格在设计中使用模块化的构成元素所占空间较小，同时单页界面的展开很大程度上也减轻了用户的视觉浏览负担。常用的一种层级设计方法是“灌木型层级设计”，将产品界面中的最基础层级信息置顶，删减需求

4、量较少的中级层级信息。由此得到的层级设计，界面叠加层次少，用户访问路径较短，用户返回主界面层级较快速，普及和操作便捷。二、功能操作便捷化产品的功能要通过操作来实现，因此操作设计便捷化是产品交互设计的另一重点。用户在友好便捷的操作过程中体验、了解产品信息，实现使用目的。但目前，不少交互产品由于功能设置过多，或功能叠加过度，操作步骤过于繁琐，导致用户体验不友好，使用过程不能体现设计师的意图，因此扁平化风格的设计成为便捷操作的一种设计途径。1.操作引导便捷界面吸引用户好奇心并激发用户尝试体验操作是产品交

5、互设计的一项重点。产品的引导页设计成为招揽用户的门面，要求既有设计感、趣味感，操作过程又不能繁琐。目前很多新闻类产品的交互界面在引导页设计上，信息放置过度，造成界面内容庞杂，视觉重点不突出，用户浏览容易疲倦等现象发生。扁平化风格的引导页界面设计，网格化布局干净、结构有条理，无装饰风格的图片和图标搭配简洁的文字说明，带给用户一种清新、明确、简约的指引性视觉体验。2.操作反馈明晰用户在使用过程中遇到错误操作，或某一操作动作结束后，操作是否成功等一些情况时，需要产品交互设计提供反馈信息这一步骤。良好的信

6、息反馈占用时间少，占用界面空间小，视觉效果不突兀，不会让用户感觉焦虑。如图1是某一网页等待界面设计，界面背景采用儿童画手绘图形，排列乱中有序，前景采用扁平化的矩形缓冲条造型，用户在提交某一操作后，借助缓冲条可以减缓等待时的焦虑。3.操作更新便捷互联网线上线下产品信息的更新是否快速便捷，是产品设计前规划定位的一大思考要素。不少交互产品在设计时过于注重复杂、绚丽的表现形式，造成产品信息更新速度较慢，成本较高的局面，而扁平化风格设计的另一优势是成本低、更新快，由于构成扁平化风格多为无装饰效果的平面构成元

7、素，因此在产品界面风格和信息的更新上，设计元素改变较便利，界面变换灵活，效果明显，使用时间少，这也成为很多交互产品公司选择扁平化风格的重要原因之一。4学海无涯三、扁平化风格在交互产品设计中的方法在产品交互设计中，扁平化风格元素的使用主要从图形、色彩、排版、字体几方面体现。1.扁平化图形运用扁平化的图形设计与三维图形有很大差别，但设计方法和审美要求都必须符合市场和用户心理标准。在具体设计上，要求图形要在深入研究产品特征的基础上，高度提炼产品和所要传达的信息形象，除去各种装饰手法、用直接概括的视觉语言

8、塑造形象。图形语意要明确，必须符合大众的生活认知，识别度较高。如图2是某一产品的网站调研数据界面设计，产品通过两种颜色划分矩形画面，让扁平化的界面产生视觉对比，界面所使用的饮料、蛋糕和人头图形，图形设计摒弃凹凸、纹理、阴影等效果，用最简洁的笔画概括调研内容，搭配左侧简练的文字，突出图形信息重点。2.扁平化版式运用越是简单的设计越体现设计师的功力。比如留白的版式设计，仅用黑白两种对比元素就能设计出的强烈的视觉美感，在白色的背景上，黑色的文字既是信息，也是一种黑色的视觉符号，通过点线面