扁平化设计在高校网站建设中的应用研究
来源:用户上传
作者:
摘 要：扁平化设计具有清晰的界面布局、高效的信息传递、舒适的交互体验等优点。研究了扁平化设计在高校网站建设中的应用，探讨了扁平化设计风格在网站界面设计、图形创意、色彩搭配、文字择选及版式布局中的应用。 扁平化设计以提升高校网站用户操作体验为目标，倡导简约而不简单的设计美学理念，有效整合界面、图形、色彩、文字、版式各个元素之间的关系，体现了高校网站界面设计简洁之美，同时，又具备优良的网站功能，适应了时代发展需求。
关键词：扁平化设计； UI设计；GUI设计；交互设计；高校网站建设
DOIDOI：10.11907/rjdk.151640
中图分类号：TP319
文献标识码：A 文章编号文章编号：16727800（2015）009013202
0 引言
随着互联网技术的发展，很多高校网站顺应新形势，改版其网站首页，改建后网页的GUI设计（Graphical User Interface），即图形用户界面设计逐渐体现出扁平化趋势。
1 扁平化设计
1.1 扁平化设计理念
扁平化设计（Flat Design）是相对于拟物化设计提出的一种新兴的界面设计风格，隶属于现代主义设计体系。它摒弃了以往网站建设中的过度装饰，简化三维效果元素，运用抽象化的视觉语言表现二维性，着重表现设计的简洁之美，强调网页界面设计的功能性，使用户享受到简单舒适的交互体验，具有国际主义风格。扁平化设计体现了去繁从简、少即是多、简约而不简单的设计美学理念，通过简约的界面、图形、色彩、文字、版式的搭配，直观地向用户传递有效的目标信息。扁平化设计发展具有必然性，它源于用户对信息化功能的诉求，可以减少干扰，让用户直观接收信息，同时符合大众审美需求，符合互联网去中心化的精神。目前扁平化设计常应用于网页设计、手机UI设计、电视广告设计及平面广告设计等。高校将扁平化设计应用于网站首页改版，以适应时代发展要求。
1.2 扁平化设计发展历程
扁平化设计理念最早由Allan Grinshtein提出，Allan认为组合较少的视觉元素构成较完美的视觉效果才是最理想的界面设计。2010年微软发布了Windows Phone7，扁平化设计首次被运用于Windows Phone的界面设计；2011 年，扁平化设计应用于安卓4.0的开发；2013年苹果IOS7将扁平化设计推向新高，扁平化风格在界面设计领域迅速发展，并逐渐形成设计潮流。目前，主流网站及移动终端应用界面都趋向于扁平化设计，如Face book、Google、腾讯、人人等网站，这些网站的设计变更与推进预示着交互设计开始步入扁平化时代。
1.3 扁平化设计原则
网络信息的高速传播需要依托更加清晰的形式和更加直接的方式，将图文信息依托于扁平化风格设计，以简单高效的方式进行信息传递与接收，用户的浏览效率和网站的视觉美感都会得到大幅提升。扁平化设计可以看作是功能上的简化与重组，其设计原则包括：①考察用户需求，设计适应不同文化背景的用户群；②打造风格一致的界面，减少用户认知障碍，优化网站交互体验；③图标采用二维化设计，图形简约、色块单纯，用色彩与用户进行交互，达到视觉效果极简、图形设计抽象、字体搭配简约的视觉体验；④简化信息层级，强调信息本身，突出主要内容弱化次要内容，为页面内容做视觉减法，使得页面主次信息直观明确；⑤注重排版，合理搭配图形、色彩、文字的空间布局，使可点击的界面元素在视觉上与其它元素形成强烈对比，并体现出趣味性；⑥增加页面视觉动线，增强用户视觉平衡感，创造更加流畅的使用体验。
2 扁平化设计应用
2.1 界面设计
网站的交互界面设计是信息传递最为重要的媒介。优秀的网站界面必须要让用户操作起来有效易用、简单方便、舒适愉悦。简化交互界面设计，使用用户熟悉的信息显示方式，保持页面整体结构基本相同，确保知识主体能够被用户理解。目前已被应用的扁平设计作品中，设计师们常常采用方形、圆形、矩形等简单的形状或是菱角分明的形状，在保持功能界定清晰的前提下，尽可能简化设计，保证网站的直观性，节省用户面对新交互界面时的反应时间。
2.2 图形创意
格式塔心理学认为，人类在认识事物的过程中都会下意识地关注主要的视觉形态，忽略次要的视觉信息，人类知觉具有简化倾向。同样地，诺曼曾提出产品设计同人脑印象相一致时，会形成自然匹配，会下意识地领悟产品的功能及用法。扁平化设计中，极富寓意且标识度高的图形会让用户快速发现它所隐含的应用功能。扁平化设计中的图形一般是经过高度概括、简单纯粹的抽象几何化形状，这是对图形的一种精准提炼，给用户以强烈的视觉冲击力。虽然界面是简单的几何元素，但是通过不同的排列组合、拼接裁剪，同样可以得到良好的视觉引导效果。设计师要能简单有力地概括图形，并且能处理好界面各元素间的关系，从而表现出设计美感。扁平化设计中还常常用到写实图片拼贴法，在表现一些主要新闻人物的过程中，设计师会去掉写实图片的背景使人物更加突出，再通过与几何图形的结合，形成极具现代感的图像。这种方法可以灵活运用新闻写实图片，使信息更加突出、空间感更强、适应范围更广。
2.3 色彩搭配
曾有研究者将色彩倾向分为冷暖、软硬、轻重、强弱、明暗、质朴华美和宁静兴奋7种情感类型。色彩可以激发人类视觉并诉诸于情感，传递出内容和功能信息。扁平化设计常用色彩来划分功能信息，使用6～8种色彩。平衡的色彩搭配会令用户身心畅快，有6种搭配形式：①高纯度与高饱和度色彩搭配。扁平化设计常使用鲜亮的色彩进行混搭，尤其是纯度、饱和度高的颜色；②低饱和度与高饱和度色彩搭配。低饱和度色彩作为背景色可以让人感到平静，高饱和度的色彩可以用来承载主要信息；③同类色搭配。把单色的黑、白、灰3种色调结合起来，通过调整色彩的饱和度与色调使得界面色彩统一，形成整体感、层次感，增加信息辨识度；④对比色搭配。运用对比色会形成撞色，令界面明快活跃、充满视觉冲击力；⑤互补色搭配。在色彩提纯的同时，加大了差别阈限，内容愈发明晰；⑥复古色搭配。复古色含有怀旧复古的情感，是建立在纯色基础上的不饱和色，与白色结合能带来舒缓柔和的视觉效果。 2.4 文字择选
文字可以通过字体、字号、色调、排版等方式区分主次信息、引导视觉流程、生成视觉空间感。字体是扁平化设计中很重要的元素，不同风格的字体会产生不同的视觉情感。字体择选时既要风格简约、又要与表述内容相一致。为了便于用户游览信息，一般使用1-2种字体，常用无衬线字体或者简洁字体，通过字体大小、粗细、形态的不同来区分信息层级，合理搭配大号字、小号字、平衡段落，使页面主次信息清晰，增强易读性、层次感和节奏感。文字在版面上起着强调重点、平衡画面、增加版面跳跃性的作用。在排版上，很多设计者采用留白的方式给人以想象空间，纤细的字体更增加了设计感、空间感、精准感、细致感。日本设计师原研哉认为留白是一种有效的设计方式。这里的留白并不是单纯的空白，它强调的是空间中的势，具有一种力量感。
2.5 版式布局
扁平化设计在版式布局上更需要设计思考。图形、色彩、文字是版式设计的基本组成部分，在有限的界面空间中，只有合理安排页面信息空间布局、合理协调各设计元素间的关系、划分出主次强弱，才能做到信息层次分明、页面布局美观、视觉导向明确，从而让用户直观看到并理解各元素所代表的功能和使用方式，使界面交互更加便利，表达出一种和谐的美感，给用户流畅的视觉体验。具体来讲，要有统一的界面风格，独立的图形元素与整体版式的设计要协调一致。可从图形中提取一项重要特征运用于版式设计，起到前后呼应的作用。
3 扁平化设计优势
3.1 扁平化设计优点
扁平化设计在高校网站建设、视觉交互设计方面具有很多优势：①简约而不简单：突出主要内容和主要功能，更加方便易用，保证了良好的网格架构、排版布局、色彩搭配，网站的开发建设更加简单；②使用更加高效：简单的色彩能够在第一时间引导人们阅读，提高了用户浏览效率；③缓解审美疲劳：清新简约的设计不仅提高了信息传递的准确性，也提高了界面的视觉美感。
3.2 在网站建设中的优势
（1）网页布局更加清晰。扁平化设计使用网格布局，删除了多余的边框线条，降低反复操作，用色彩进行页面布局，色彩上映衬文字信息内容，将重要字段加以区分，在同一个视觉动线上活动，增加了视觉稳定感，提升了视觉识别性。重要新闻图放在视觉中心区，增加图片量，内容直观明了，便于用户阅读。运用交互动画设计，在页面布局上有留白，使用户关注主要信息。
（2）信息传递更加直观。扁平化设计突出了中心内容、强化了主要信息，可以使网站信息传递更加直观。扁平化设计使用的图形元素多为几何化图形，这种表达方式弱化了页面复杂性，强化了信息内容并使之更加容易识别。扁平化设计除了简化视觉形式，还可简化信息传递过程，有效缩短信息传输间隔，进而提升信息传递效能，它正在创立一种全新无障碍的信息交互体系。
（3）用户操作更加舒适。优秀的界面设计包含了可用性和易用性特质。扁平化图形的几何化特点，使其保持不同色彩搭配中的高辨识度。由于扁平化设计界面元素简单易读，更适合用户中有近视等特殊需求群体。扁平化设计采纳设计中通用的UI（User Interface用户界面）元素，便于用户操作网页。
4 结语
扁平化设计理念新颖，它弱化外在装饰性，探寻设计简约本质，强调界面设计的功能性，突出主要信息内容，其显著的视觉特征得到了广大设计师的关注和用户的喜爱。在信息爆炸时代，扁平化设计使信息内容得到聚焦，让用户准确把握网页中的重要信息，有效提高了用户浏览网站的效率。扁平化设计是大数据时代与交互设计相结合的产物，它借助图形、色彩、文字在界面版式表达上的优势，化繁为简、以少胜多，提升了用户体验，开创了网页设计的新形式。相比传统的高校网站界面设计，扁平化设计更加简约、更具国际主义风格，其设计风格在高校网站建设中必将得到大力发展。
参考文献参考文献：
[1] [美]库尔特・考夫卡.格式塔心理学原理[M].李维，译.北京：北京大学出版社，2010：35.
[2] [美]诺曼.设计心理学[M].北京：中信出版社，2010：18.
[3] [美]SUSAN M.WEINSCHENK.网页设计心理学[M].崔玮，译.北京：人民邮电出版社，2013：69.
[4] [日]原研哉.白[M].南宁：广西师范大学出版社，2012：58.
[5] 张芸.扁平化设计在网页上应用的优势[J].艺术科技，2013 （6）：229.
[6] 秦岁明，何梦楠.扁平化风格在网页界面设计中的应用[J].包装工程，2015，36（6）：4144.
责任编辑（责任编辑：杜能钢）
转载注明来源:https://www.xzbu.com/8/view-11593494.htm
