扁平化风格在网页界面设计中的应用.pdf
- 文档编号:14657171
- 上传时间:2023-06-25
- 格式:PDF
- 页数:5
- 大小:6MB
扁平化风格在网页界面设计中的应用.pdf
《扁平化风格在网页界面设计中的应用.pdf》由会员分享,可在线阅读,更多相关《扁平化风格在网页界面设计中的应用.pdf(5页珍藏版)》请在冰点文库上搜索。
扁平化风格在网页界面设计中的应用秦岁明,何梦楠(陕西科技大学,西安710021)摘要:
目的目的研究扁平化风格在网页界面设计中的应用。
方法方法探讨扁平化风格在网页设计中的核心问题,并在扁平化网页设计中应用图形抽象法、图片去底法、情感色彩导向法、色彩层级搭配法以及特定字体等。
结论结论以提高用户体验为出发点,运用“少即是多”的设计理念,有效整合图形、色彩、文字三者间的关系,既达到界面设计的美观性,又保持界面设计的功能性。
设计师要理性对待扁平化设计风格,抓住其精髓,而不是盲目追求新的设计潮流。
关键词:
扁平化风格;网页;界面设计;信息层级中图分类号:
J504文献标识码:
A文章编号:
1001-3563(2015)06-0041-04ApplicationofFlatStyleinWebInterfaceDesignQINSui-ming,HEMeng-nan(ShaanxiUniversityofScience&Technology,Xian710021,China)ABSTRACT:
Itanalyzestheapplicationofflatstyleinwebinterfacedesign.Itexploresthecoreissuesabouttheflatstyleinwebdesign,throughtheapplicsationofgraphicalabstractmethod,removingimagebackground,emotionalcolororientedmethod,colorlevelscollocationandspecificfontsintheflatstylewebdesign.Startingfromimprovingtheuserexperience,usingthedesignphilosophythatisthelessismore,areasonablerelationshipamongthegraphics,colorandwordsisintegratedtoachievetheaestheticandfunctionoftheinterfacedesign.Designersshouldreasonablytreattheflatdesignstyle,catchtheessenceofitsdesign,ratherthantheblindpursuitofnewdesigntrends.KEYWORDS:
flatstyle;webpage;interfacedesign;gradesofinformation收稿日期:
2014-10-07作者简介:
秦岁明(1956),女,陕西人,陕西科技大学教授,主要从事基础设计、设计艺术学、平面设计(传统文化与现代设计理念)研究。
对于设计师而言,提高用户体验是一切设计的出发点。
相比传统的网页界面设计,扁平化设计更简约,更具有国际主义风格。
对扁平化的网页界面和传统的网页界面进行比较后发现,扁平化的网页界面更具功能性信息更集中,信息分级更少。
它通过减少不必要的元素来凸显主要信息,强调界面设计的功能性,弱化装饰性。
扁平化设计能有效提高用户浏览页面的效率,引导用户轻而易举地找到他们所需要的重要信息1。
研究扁平化风格在网页界面设计中的应用就显得尤为重要。
1扁平化风格的基本概念1.1扁平化设计风格扁平化设计风格通常应用在视觉设计领域,它放弃一切装饰效果,所有元素的边界都干净利落,没有任何羽化、渐变或者阴影。
相比常见的拟物化设计,扁平化设计略去了一切仿真元素,目的在于让使用者将注意力集中在信息本身,而不是产品的装饰美等辅包装工程PACKAGINGENGINEERING第36卷第6期2015年3月41包装工程2015年3月助因素上。
在视觉设计中,扁平化设计强调极简主义,提倡“少即是多”的美学理念2,通过简洁的图形、色彩、文字的搭配直观地向用户展示有效信息,它是一种极简的设计方法。
在网页界面设计中,扁平化风格的界面简约,条理清晰,并且可以帮助用户快速找到目标信息,它是一种将复杂事物简单化的思维方式,其最显著的优点是可以有效传递信息,避免认知障碍的产生。
扁平化风格的暖岛网首页见图1,页面干净简洁,信息归纳清晰。
非扁平化风格的淘宝网首页见图2,页面内容略显冗杂,不便于用户查找信息。
1.2信息层级信息层级是扁平化设计的核心,它可以被理解为“信息区分”,通俗来讲就是弱化次要内容使重要的内容更加醒目。
扁平化设计强调信息本身,而不是繁复多余的其他界面元素。
扁平化设计在视觉上去除了立体、仿真的效果,不仅拍扁了按钮、界面,还简化了信息层级3。
在网页设计中,扁平化设计的最终目的是信息扁平化,图形、色彩、文字的空间布局的运用最终都是为了创建信息层级。
“信息层级”这一概念的提出使人们意识到扁平化设计并不是简单的视觉效果的极简、图形设计的抽象、字体搭配的简约。
真正的扁平化设计将信息以主次关系进行分层,主要信息以第一层级的方式出现,浏览者不需要做任何点击就能看到。
次要信息可以通过分类被归纳在一个个按钮下,以文字、色彩、图形的空间布局为辅助工具,为页面内容做视觉减法,使得页面的主次信息一目了然,减少阅读障碍。
2扁平化风格在网页设计中的运用好的版式是扁平化界面设计的前提。
排版形式是网站中信息列举的重要表现方式,优秀的版式设计不仅具有视觉导向性,而且能有效地传达信息4。
虽然信息层级是扁平化网页设计的核心,但作为设计师来说,要做到优秀的层级区分,既能满足页面设计的功能性,又能传达出简洁美,在设计上不走“为了扁平化而扁平化”的极端减法主义道路,这并不是一件容易的事。
为了创作出优秀的扁平化设计作品,首先要考虑的是页面信息的空间布局,也就是通常说的版式设计。
图形、色彩、文字是一切版式设计的基本组成部分。
在网页界面设计中,只有合理地协调它们之间的关系才能做到信息有层次,页面布局美观并具有视觉导向功能。
这里对扁平化设计中的图形、色彩、文字设计的特点及核心问题进行分析。
2.1简约性图形2.1.1图形抽象法扁平化设计运用的图形元素通常是经过高度概括的抽象图形,在扁平化设计中每个图形看起来都是扁平的,而不是能够带给人凹凸感或可触感的图形。
以商品为主要信息的野糖网的界面,页面上的按钮设计抛弃了具象的装饰,向更加抽象化甚至几何化的方向发展,并且在鼠标移动时可点击元素和非点击元素之间的区域,利用图形的变化进行区分,帮助用户在扁平化界面中作出正确判断,鼠标没有移动到可点击元素时图形的状态以及鼠标移动到可点击元素时图形的状态,其功能栏的抽象按钮见图3。
扁平化设计要求设计师具有很强的图形概括能力,以及处理好图形、色彩、文字间关系的能力。
优秀的扁平化设计作品在没有辅助装饰的情况下依然能达到良好视觉引导的效果。
2.1.2图片去底法简单来说,图片去底法就是去掉图片的背景,使图形更加突出的一种方法。
如ArcTouch鼠标,见图4(图片摘自Surface网站),经过图片去底法处理的鼠标图片在用户打开页面的第一时间内抓住用户眼球,吸引用户的注意力。
这种方法能轻松、灵活地运用图图1暖岛网首页Fig.1Nuandaoshomepage图2淘宝网首页Fig.2Taobaoshomepage42第36卷第6期像,使画面空间感更强烈,图片信息更加突出,图片的适应范围更广泛。
由于图片在网页界面中是不可或缺的内容,而优秀的网页设计应该保持图片的风格与网页设计的主题风格一致,因此,在扁平化网页设计中,除了常用的调整图片颜色、形状的方法使其适应网页设计要求外,还可以使用图片去底法达到设计目的。
这种图片处理方式具有强烈的视觉效果,可根据画面的需求对文字进行有机的调整排列,整个画面显得和谐统一,层次清晰。
这种处理方式通常运用在产品广告的网页设计中。
2.2色彩2.2.1情感色彩导向法网页设计的色彩基调通常可以从颜色的情感导向来建立,色彩与网站主题基调相符合,可产生情感导向的作用5。
以静谧为主题的网站,如豆瓣阅读,以赭石色为主体色,浅灰色为背景色,营造出安静的感觉,贴合网站的“阅读”本质,见图5。
另外可以利用色彩的“性别感”产生情感导向,例如以售卖服饰为主的暖岛网,分别用粉色和蓝色作为不同性别产品的主题色,两种颜色的饱和度基本一致,传达出平行主题的理念,既达到视觉效果上的统一,又做到色彩情感上的和谐,见图6。
2.2.2色彩层级搭配法在网页设计中,常见的应用方式是用低饱和度的色彩与高饱和度的色彩进行搭配。
而扁平化的设计常用纯色色块来承载信息,选择的色彩不仅要赏心悦目,而且要能通过色彩搭配区分主次信息以及通过色彩变化产生画面空间感6。
低饱和度的色彩,如黄色、白色,给人的感觉比较平静,一般可作为背景色。
引人注目的是饱和度较高的色彩,如红色、蓝色,它们可以用来承载第一信息。
例如Windows网站中高饱和度与低饱和度色彩的搭配,低饱和度的深灰色为背景色,高饱和度的亮黄色则比较突出,高饱和度色块上承载的信息自然会凸显出来,在第一时间吸引人们的注意力,引导阅读,见图7。
2.3文字文字可通过字体、字号、色调、排版方式等产生视觉空间感,达到区分主次信息、引导视觉流程的作图3野糖网首页功能栏的抽象按钮Fig.3TheabstractbuttonsonfunctionbarofYetangshomepage图4ArcTouch鼠标Fig.4ArcTouchmouse图5豆瓣阅读首页Fig.5DoubanReadingshomepage图6暖岛网主页中代表不同主题的色彩Fig.6ThecolorsrepresentingdifferentthemesonNuandaoshomepage图7Windows网站中高饱和度与低饱和度色彩的搭配Fig.7HighsaturationandlowsaturationcolorcollocationinWindowswebsite秦岁明等:
扁平化风格在网页界面设计中的应用43包装工程2015年3月用。
文字在版面上具有“点”和“线”的作用,它是编排设计中的基本要素,起着平衡画面、强调重点、增加版面跳跃性的作用。
在视觉设计中,主要通过字体的选择和文字的编排方式来传达不同的信息。
2.3.1字体应用特点字体是扁平化设计中非常重要的元素,不同风格的字体会产生不同的视觉情感,在选择字体时要保持文字的视觉感受与表述内容的统一,从而创建出期望的风格和基调。
例如,宋体给人的感觉是端庄典雅,它占据的版面较小,字体秀丽,适合大面积的文字编排,通常在正文中使用,是排版过程中应用最为广泛的一种字体7。
在Windows系统下网页通常使用中易宋体和新宋体。
黑体的字形严肃庄重,醒目大方,传达出来的气质干净利落,不拖泥带水,因此多用黑体作标题或标识重点,展现一级主题信息,网页编排中使用最多的是正黑和微软雅黑。
2.3.2字号应用特点在文字编排中字号是一种重要的设计元素,它能有效传递主要信息。
当前设计的编排趋势包括高对比色的大字号字体、清晰的自定义字体和平衡段落,基本上就是把传统印刷排版方法带到Web版式中,增强了易读性和可读性8。
扁平化页面在编排过程中,最多使用两个系列的字体,通过对文字的大小、粗细、形态的不同来区分内容的层级,包括大字号、小字号、平衡段落的合理搭配,使页面主次信息一目了然,更具节奏感。
如Windows网站首页的文字编排,见图8。
文字的这些特性,使得在扁平化设计中使用基本的设计手法就可起到保持页面的简洁和准确传递页面信息的作用。
3扁平化风格在网页设计中的效果分析3.1信息传递更清晰扁平化设计可以使网站传递的信息更加清晰,扁平化风格应用于网页设计的主要目的就是突出中心内容、强化信息、给用户提供更好的网页浏览体验。
相比传统风格的网页设计,用户更容易将注意力集中在站点内容上。
扁平化设计在网页设计中使用的图形元素多为抽象图形、二维图形,这种表达方式弱化了视觉上的复杂性,让浏览者不会过多地关注图形,从而强化了要传递的信息内容,使之更加容易识别9。
3.2有助于视障用户使用扁平化设计由于界面元素的简洁且易于查找,因此也更加适合近视者和弱视者,扁平化设计提倡的信息中心化及信息层级能帮助这些有特殊需求的群体。
扁平化设计的无阴影、无渐变以及图形几何化等特点,使得它可以适应不同色彩模式下的视觉识别。
例如灰度模式的暖岛网主页,将高对比色网站转到灰度版本时,网站的所有元素依然可被识别,见图9。
这一特质展示出优秀的设计是如何天然地兼容了可用性和易用性理念的。
3.3创造视觉熟悉感视觉熟悉感对于用户体验来说是非常重要的,扁平化设计使用通用的UI元素和样式来创造这种感觉,UI即UserInterface(用户界面)的简称。
例如音乐网站常用到的音乐播放器界面,在分享键、红心键、循环播放键等常用按钮上遵循前人设计的模式,在扁平化的过程中将立体改为平面,进行了微小改动,见图10(图片摘自虾米音乐网站)和图11(图片摘自百度音乐网站)。
这些图标在多年的设计中已经形成被用户默认的标志性的图形,用户在看到这些图标的时候不需要文字说明也能知道这些图标的含义。
不同的网站也会在此类图标的使用中采用已被用户熟悉并默认的元素来设计图标。
运用通用的UI元素可以帮助用户熟练操作页面的图形按钮10,节约用户的时间,降低用户的学习成(下转第54页)图8Windows网站首页的文字编排Fig.8WordslayoutonWindowswebsiteshomepage图9灰度模式的暖岛网主页Fig.9GrayscalemodeonNuandaoshomepage.44包装工程2015年3月10文闻.立体书设计与儿童创造力之关系探析J.包装工程,2012,33(14):
9193.WENWen.AnalysisontheRelationshipbetweenPop-upBooksDesignandChildrensCreativityJ.PackagingEngi-neering,2012,33(14):
9193.本,面对全新的网页时便于用户进行操作和使用。
4结语扁平化设计开创了网页设计的新形式,它用一种引人注目却又十分简单的方式,让用户准确地把握网页中的内容。
在网页设计中,有效分出页面内容的主次,借助图形、色彩、文字在版式表达上的优势,化繁为简,给用户提供更快捷、更简便的网页浏览方式。
扁平化设计传递的是一种“少即是多”的设计理念,应用扁平化风格进行网页设计时,应当在创建信息层级的基础上,实现扁平化设计的最终目的为提升用户体验而服务。
参考文献:
1开源中国.深入探讨扁平化设计EB/OL.(2013-07-10)2014-03-07.http:
/SourceChina.FlatDesign:
AnIn-DepthLookEB/OL.(2013-07-10)2014-03-07.http:
/Huan.BriefIntroductionofInterfaceDesignStyle:
FlatDe-signandPhysicalDesignoftheProposedJ.LiteratureLife,2013(8):
180.3马娜娜.简洁而不乏味浅谈扁平化界面设计J.大众文艺,2013(16):
137138.MANa-na.SimpleButNotBoring:
OntheFlatInterfaceDe-signJ.DazhongWenyi,2013(16):
137138.4许楠,魏坤.版式设计M.北京:
中国青年出版社,2009.XUNan,WEIKun.FormatDesignM.Beijing:
ChinaYouthPress,2009.5视觉中国.扁平化设计的色彩选择EB/OL.(2013-04-28)2014-03-07.http:
/shijue.me/show_text/517c7b65e744f93e22000587.VisualChina.ColorSelectionofFlatDesignEB/OL.(2013-04-28)2014-03-07.http:
/shijue.me/show_text/517c7b65e744f93e22000587.6张欣,邹建敏.视觉符号在扁平化界面设计中的应用J.艺术探索,2013,27(6):
104106.ZHANGXin,ZOUJian-min.VisualSymbolsUsedinFlatInterfaceDesignJ.ArtsExploration,2013,27(6):
104106.7周勇.编排设计M.上海:
上海书店出版社,2007.ZHOUYong.LayoutDesignM.Shanghai:
ShanghaiBookstorePublishingHouse,2007.8前端观察.扁平化设计与可访问性EB/OL.(2013-02-17)2014-03-07.http:
/Duan.FlatDesignandAccessibilityEB/OL.(2013-02-17)2014-03-07.http:
/Yun.FlatDesignAdvantagesonWebApplicationsJ.ArtScienceandTechnology,2013(6):
229.10杨帆.基于扁平化的界面设计美学思想的探讨J.艺术科技,2014
(1):
59.YANGFan.ExploretheFlatInterfaceDesignBasedonAestheticsJ.ArtScienceandTechnology,2014
(1):
59.图10虾米音乐播放界面Fig.10TheplayerinterfaceofXiami图11百度音乐播放界面Fig.11TheplayerinterfaceofBaidu(上接第44页)54
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 扁平 风格 网页 界面设计 中的 应用