扁平化风格毕业论文

【前言】扁平化设计是一种自2012年开始流行开来的网页设计风格、至今仍广泛使用。但滥用扁平化设计可能导致严重的可用性问题，其中最大的问题是这种设计缺少可点击的视觉标识。扁平在这方面则可以有更好的变现。扁平化设计是一种流行的设计风格，采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为，这是极简设计的分支。 扁平化设计常被视为是3D效果、纹理与写实主义设计风格的对立面。一个真正的扁平UI完全不会出现任何的3D效果、纹理或写实主义风格的元素。 3D效果为界面带来深度错觉，帮助用户形成视觉层次并知晓哪些元素是可交互的。早期的界面中，伪3D效果（阴影、梯度和高光）来使可操作元素一目了然。然而，这种伪3D效果冲击性太强、过于厚重而容易分散用户注意力。 纹理是指界面设计时使用的那些用于模仿真实世界的装饰性设计。纹理设计想要做到的是，让用户可以借助已有经验去迅速理解所接触到的全新产品界面。 写实主义是指模仿真实物件或者其审美性的纹理的设计风格。 纹理设计常常与写实主义相混淆。我们常在网页设计中见到这两者的混合使用。两者的主要区别是：写实主义的目的纯粹是满足审美需要，而纹理设计则希望借助隐喻来帮助用户理解界面。 2011年，微软Metro design设计风格和Windows 8的发布极大地推动了扁平化设计的流行。微软文档将新设计风格描述为“真实的数字化”（authentically digital）——这一描述巧妙地提升了扁平化设计对设计师的吸引力。不同于纹理设计，扁平化设计被看着是对数据化媒介的探索，而不是真实物理世界的重复。 苹果官网页面的扁平化成为这一趋势风向标。苹果一直坚持的是纹理设计和写实主义设计，直到2013年，苹果官网才转变成扁平风格。自2011年扁平化设计提出开始，Nielsen Norman Group便公开批评其可用性问题（见链接 vocal critic of its inherent usability issues  ）。其最主要的观点是扁平化设计为了追求美学的时尚而牺牲了用户的需求。 多年来，用户已经习惯了传统的点击标识，比如蓝色字体、下划线链接或带3D效果的按钮。随着设计趋势的改变、用户接触到新的设计原型，用户识别可链接可点击元素的能力也在进化，但这并不意味着我们可以完全抛弃这些可点击线索。 当我们问一个22岁的加拿大人，她是如何知道网站的可点击元素的时，她给出了如下回答: “最初可点击样式，无论文字或其他元素，蓝色、有下划线就表示可点击。但是……有下划线时会特别有帮助。或者是一个按钮……不必说点这里……只需要说立即购买、购买或添加到购物车即可。” 这句话形象地说明了人们是如何利用线索来判断可点击性的：如果您的网站想要变得更加扁平，为避免影响用户快速找到可点击元素，请遵照我们的点击元素设计指南（译者注：原文另附，要点翻译如下）： 1、最安全的颜色为蓝色，其他颜色也可选择； 2、下划线并不是必须的，比如导航菜单就不需要。 3、请测试你的超链接颜色，确保色盲色弱者能正常使用； 4、超链接（或其他科点击元素）以外的任何地方，请勿使用你定义的超链接颜色，也不要 不要使用蓝色字体或下划线； 5、请保持全站超链接样式的一致性。 1、请确保你的按钮看起来像真正的按钮。必须有正确的视觉线索来帮助用户快速识别按钮。如果你使用3D效果，那么按钮建议设置为矩形；如果使用扁平化设计，也要确保它看起来可点击。 2、不可点击的元素，请避免其看起来像按钮。比如为标题文字添加了黑色的背景，就会给人以按钮的感觉。 3、请留意页面的内容层次，避免为用户带来五花八门的按钮。这样用户无法区分。 1、让小图片在点击时有视觉反馈，比如图片变大。 2、要充分利用图片、ICON、文本等元素，来扩大可点击区域、提高用户的点击意愿。 3、请不要为图片设置过多的行动召唤按钮（CTA），除非图片里清晰地呈现了超链接列表（或按钮）。 1、如果要使用icon图片链接，请确保其清晰可识别。 2、请尽量为icon添加文本等可点击的视觉线索，除非你所使用的icon识别性很高或已成为行业惯例。 注：此处只介绍要点。详细解释和案例，请访问文末链接：可点击性设计指南。 最近，设计师们开始意识到扁平化设计中的可用性问题。因此一个更为成熟和平衡的扁平化设计开始成型。设计师们发现可以在探索“真实的数字化”的独特机会的同时，不会损害可用性。 这样的扁平化设计也被称为“半扁平”（ semi flat ），“准扁平”（ almostflat）或“扁平”。这种风格的设计几乎扁平，但使用了微妙的阴影、高光和布局设计来创建用户界面的深度。谷歌的材料设计语言是扁平的一个例子：它借助遵循物理学原理的隐喻和原则，去帮助用户理解界面及其视觉层次。 Evernote Android 版是一个扁平的优秀案例。尽管大部分死扁平UI，这个APP在导航栏和FAB按钮（the floating plus button“+”）中添加了微妙的阴影。在内容展示方面，它采用了卡片隐喻方式提供了扁平而有层次的三维空间。 早期伪3D GUI和史蒂夫·乔布斯式的纹理设计往往产生沉重的的界面。去除这些沉重的元素有利于提升可用性。但磨平视觉差异、完全扁平化也会走向另一个坏的极端。扁平则为我们设计出既易于使用又简洁的界面，提供了可能。