当前位置: 首页 > 科技观察

FlatUIDesignGuidelines-EasytoCreateFlatUI

时间:2023-03-13 20:06:31 科技观察

在我看来,好设计的定义就是好用。只要能设计出好的产品,什么方法我都可以,扁平化就是其中之一。但必须认识到,没有一种放之四海而皆准的风格,你不能强行将一种风格用在不该用的地方。那么,如何实现扁平化以及如何应用呢?下面我要做的是分析扁平化最典型的五个特征,同时也介绍一下伪扁平化(不是贬义,只是一种折衷的设计)。1、拒绝特效。扁平化一词来源于此设计中使用的样式和形状。完全属于二次元世界。一个简单的形状加上一个没有景深的平面是对扁平化这个术语的浪费。这个概念的核心是放弃所有的装饰效果,比如阴影、透视、纹理、渐变等可以做出3D效果的元素都没有使用。所有元素都有清晰的边界,没有任何羽化、渐变或阴影。这种设计趋势试图避免任何拟物化元素,这使得这种设计风格在其他平台上有时会显得突兀,前景图像、按钮、文本和导航栏与背景图像不兼容。那么,扁平化有什么作用呢?由于这种设计具有鲜明的视觉效果,其使用的元素之间有清晰的层次结构和布局,使用户能够直观地了解每个元素的作用以及它们之间的交互方式。如今,从网页到移动应用程序,到处都在使用扁平化设计风格,尤其是在手机上。由于屏幕的限制,这种风格在用户体验上更有优势。更少的按钮和选项使界面干净整洁,更易于使用。极其简单。#p#2.界面元素平面设计通常使用许多简单的用户界面元素,例如按钮或图标。设计师通常坚持使用简单的形状(矩形或圆形)并尽可能强调形状。这些元素都是直角的(很少有一些是圆形的)。这些用户界面元素便于用户点击,可以大大降低用户学习新的交互方式的成本,因为用户通过体验可以大致知道每个按钮的作用。此外,除了简单的形状外,扁平化还包括大胆的配色方案。但需要注意的是,扁平化设计并不意味着简单地匹配形状和颜色。与其他设计风格一样,它由许多概念和方法组成。想学习具体设计方法的朋友可以看看Designmodo,这里有很多现成的设计实例给大家分享(免费矩形UI,免费平面UI,这两个地方是一些简单的PSD/HTMLUI工具包和一些基础组件;专业的矩形UI,专业的平面UI,这两个地方是一些完整的网页/APPPSD/HTMLUI包)。#p#3.优化排版由于扁平化设计中使用了特别简单的元素,排版成为了非常重要的一个部分。排版的好坏直接影响视觉效果,甚至可能间接影响用户体验。字体是排版的重要组成部分,是对其他元素的补充。想一想卷曲字体在平面界面中是多么突兀。上面的图片是一些在平面网站上使用的无衬线字体的例子。无衬线字体家族庞大而且分为很多,有些字体在特殊情况下会有意想不到的效果。但是要小心,已经太晚了,不要使用那些极其不常见的字体,因为如果你留不住它们,你就会被带进坑里。如何使用字体也是一门学问,学会让不同的字体表达不同的概念,通过字体告诉用户某个设计/功能的意义,努力让字体成为简化你设计的利器。#p#4.如何配色在扁平化设计中,配色似乎是最重要的一环。扁平化设计通常采用比其他风格更明亮、更耀眼的色彩。同时,扁平化设计中的配色方案也意味着更多的色调。例如,其他设计最多只包含两种或三种主要颜色,但平面设计平均使用六到八种。而在扁平化设计中,倾向于使用单一色调,尤其是纯色,不做任何淡化或柔化处理(最好的颜色是纯色和二次色)。还有一些流行色,比如复古色(浅橙、紫、绿、蓝等)。#p#5.极简方案设计师应该尽量简化自己的设计方案,避免设计中出现不必要的元素。简单的颜色和字体就足够了,如果你想添加一些东西,尽量选择简单的图案。平面设计对一些零售网站特别有用。它可以有效地组织产品并以简单但合理的方式排列它们。(编者注:有兴趣的读者可以自己找一些例子,原文章作者推荐Svpply,但网站与作者描述略有不符,略过。)#p#Another:有一个伪-最近平面设计。趋势值得关注。一些设计师在整体平面度中加入了某种特殊效果,使其成为一种独特的效果。例如,在一个简单的按钮上添加一点渐变或阴影可以使这种风格脱颖而出,产生平面设计的变化。这种设计比简单的扁平化更适用、更灵活。许多设计师更喜欢这种设计,因为这意味着他们可以为某些元素添加一点阴影或透视。用户可能还会欣赏稍微更时尚的设计方法,这种方法可以引导他们进行一些适当的交互。