扁平化设计现已被界面设计的多个领域所使用。随着融合了扁平化设计的Windows8等的发布,许多网站都开始应用扁平化的设计,这一设计风格将在未来获得更为广泛的应用。
一、“扁平化设计”
1.扁平化设计。随着网络技术的发展,设计多采用扁平化的风格。该种设计的目标在于创造出一种更“平”的界面,形式更加简单,思路更加明晰,使得用户更方便的理解和使用。
扁平化的设计,追求的是扁平化,排除阴影,应用颜色推动用户实现交互。然而实际上,是有一定的改变的。当然,它也不会忽视深度这一概念。与之相反,适当的添加深度的元素能够推动用户对其的认识。日常生活中,扁平化设计是非常多的,当前最为典型的要属Win8metro,它不单单是视觉上的扁平化,构造也追求扁平化,最终呈现的效果非常好。
2.相通的设计原则。
(1)一致性。
通过采取一致性的设计形式,为用户构建起相同的心智模型,使得服务更为易用,改善用户体验。
(2)对比。
利用对色彩等的配比,使相应的界面按键在感官上与别的按键对比强烈。
(3)布局。
引导用户随着设计所给定的径路自发地前进,提升其感官平衡性。
(4)减少摩擦力。
不管采用何种风格的设计,都要使其简单化,降低用户实现目标所做的工作,创造通畅的用户体验。
(5)用户需求。
多元化的用户所追求的风格也必然是多元化的。时尚等领域的人们可能更欣赏扁平化风格,而别的较为“普通”的群体则更欣赏较为常规的拟物化风格。
二、网页整体风格设计
网页设计,是一种视觉上的语言,较为追求排版与布局,为了获得最好的视觉特效,要不断试验布局的合理性,使用户体验到最优的视觉享受。
1.排版布局。
实行扁平化设计,首页的标识要置于主视觉区,导航等也要尽可能的简单化,图片占到了排版的大部,使得用户观察到有趣的环节很方便的进行选择,风格直观,图片的选用也要认真斟酌,增强其视觉特效。
2.网页的栏目设计。
网页的栏目是网页的重要组成部分,是支撑网页内容的躯干。扁平化的设计,能够帮助用户更方便地浏览网页,提升用户的驻留时限。
3.网页的内容组织。
新形势下,仍然要以内容为主,可以说内容是网页真正的核心构成。外观漂亮固然很好,然而真正能留驻用户的还得是内容。因此,对内容的规划是网页创建过程中最为重要的一部分。
4.交互动画设计。
(1)鼠标停驻图片之上,呈现其所属信息。
(2)点、线的交互设计,通过拖动点,构成多样化的图形。在逻辑层面,也削减了繁琐的层次,更加简单大方。
5.首页。
其表现的是网页的第一形象,是用户视觉停驻的重点,人们最为关心的内容需要在首页体现出来。通过扁平化设计,排除多余的选项,将标识、导航平铺式地放在首页,使用户一览无余。在感官上,去除了渐变等效果。为了获得最好的视觉效果,还要不断试验整体上的配置,使用户获得顺畅的视觉感受。
6.网页标识。
标识在网页上的应用应尽量地放在特定位置。大多数情况下是将其放于左上方,这也是大部分网页的选择。
7.导航。导航的使用在于方便用户使用,使其在使用过程中不会迷路,而且能迅速地找到感兴趣的内容。通过扁平化设计,去除导航的渐变等,只是用色彩当作背景,其上是导航的说明。
8.文本。
当人们谈到网页易用性的时候,常常会提到界面(UI)、按键等的设计。然而文字才是网页的重要内容,它蕴含了多种对使用者有用的信息。网页首先要有能吸引用户的内容才是最重要的。通过扁平化设计,将相关的文字内容进行区分,方便用户选择。
9.图片。
它也是网页上非常重要的构成,图片的选择及效果会对网页造成非常大的影响。全新的设计将更有助于图片的呈现,将通过更少的装饰来展现图片,同时这也对图片的质量提出了更高的要求。
三、网页设计的优化
1.页面设计的优化。
对于图片的选用必须审慎,要使其与网页的风格想搭配,增强用户对其的观感,进而获得积极的引导作用。并且在页面上也要加上一定的交互设计,使其表现的更具亲切感。
2.交互设计的优化。
(1)按键的设计:要追求更易选择,更加突出,更为协调。
(2)图片的表现形式:突出简单易操作。
(3)各页面间的跳转:指向性更加明确,能够流畅地转换。
3.文字设计。
对于网页来说,特定文字的使用不多。当前,较为常用的是微软雅黑,它要比宋体更宽一些,且使得笔画往周围撑,表现的更加饱满,该类字体更易呈现出汉字线的观感,进而方便用户的阅读,也给其中加上了线的设计感。
4.色彩的配搭。
网页设计的优化,要注意对色彩的选择,假如网页的色彩非常鲜艳,就很能够吸引人们的目光,会给使用者强烈的视觉冲击。对于图片的色彩的选用与网页的配搭也要注意,对于网页的整体风格,选择不一样的颜色所呈现出的效果不同,能够影响到使用者的感受。而且在辅色之中,可选择相似的,如此看起来会较为一致,更具层次感。
>>> 查看《企业做网站浅析网页设计中扁平化设计的趋势》更多相关资讯 <<<
本文地址:http://www.phpweb.com.cn/news/html/5880.html