网站设计分析：用扁平化的界面设计吸引用户

网站设计分析：用扁平化的界面设计吸引用户 在传统的网页开发乃至现在针对移动设备所做的设计，复杂炫目的效果对产品而言未必是一个好的选择。 尤其在移动设备上，过于复杂的效果非但很少能为应用吸引用户，反而时常让用户在视觉上产生疲劳，对产品界面中最基本的功能产生认知上的障碍。因此我们在设计中就需要参考“扁平化” 的美学。 什么是扁平化设计 在实际当中，“扁平化设计” 一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平” 的界面。 Layervault 的设计师 Allen Grinshtein曾经在HackerNews 的一篇文章当中说： “长久以来，网站的界面风格似乎都在遵从着同一种设计美学，大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说，制作这类‘可爱’的元素简直变成了行规甚至是荣誉。不过对于我们，以及为数不多的其他一些设计师来说，这种惯用的方式并非一定正确。” 去 Layervault 看上几眼，四处转转，你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着，也是蛮有意思的事情。下面是其他一些例子： Squarespace 新版的Squarespace 几乎完全采用了扁平化的视觉风格，只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现，其实他们的产品在功能逻辑上还是蛮复杂的，但这一切都隐含在简约直白的界面背后，你真的可以从中隐约感受到其设计团队付出的心血。 相关阅读：简洁至上的Web 设计 – 创意要素及设计技巧 Facebook 另外一个大家所熟悉的例子就是Facebook 了。 “Facebook 是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色，至少我们可以说这种设计风格对于Facebook 来说是完全适用的。” - Ian Storm Tay lor(Segment.io) Rdio Rdio 最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格，你很难找到使用了阴影、渐变等效果的界面元素。 相关阅读：最小化可用性设计 Nest 我曾经作为前端工程师参与过Nest 的网站开发，现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中，实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介...