UI的扁平化设计理念

2013.06.16 74 Comments 23,972 次阅读

Simone-Marcarino

 

可以说,在当下,UI设计是设计界讨论最多的话题。(UI设计指对软件的人机交互、操作逻辑、界面美观的整体设计)一个优秀的设计产品的宗旨是创造有用的东西。但是如果是基于平板的平面设计,它的实用度会被很大限制,所以我们需要从别的方面入手,使设计产品保持独一无二的创造力和平易近人的功能性。

在这篇文章中,将会从五个特点介绍是什么东西促成平板的界面通过设计和改造变成功能化的东西。

 

不添加特殊效果

TriplAgent

intothearctic (1)

扁平化设计设计是由所采用的形状得名。顾名思义,它是一种采用了独特的二维的风格,把物体几近平面化来进行创作设计。

 

当一个扁平化设计作品剔除一些为其增加立体感而添加的元素,如阴影效果,斜面,浮雕,渐变或其他工具之后,每一个元素和区间,图像和按钮,导航工具,都处于同一个位面,如何有效的分割它们就需要设计者展开思考了。

 

扁平化设计有其独特的观感,它依赖于一个清晰的层次感,在一个成功的案例中,最重要的就是用户体验和互动元素的设计和布局。虽然越来越多的网站开始注重和使用平面设计原则,但我认为扁平化设计原则更好的运用平台应该是应用程序和移动端。这是因为屏幕小,我们需提供尽量少的按钮和选项,就可以让用户获得完整的使用体验,这往往比网站设计更加困难并且更加需要设计者的创造力。

 

简单的元素

Filetypes

square-ui

扁平化设计中采用了许多简单的元素去设置用户界面,很常见的就是按钮和图标。设计师往往坚持简单的形状,如矩形,圆形或正方形,并偏向每个形状单独使用。这是因为,几何图形的边缘,已经提供了完美的角度或曲率。

 

每个UI元素应该是简单并且能轻松的点击或点选。人与设计产品的互动应该是直观的,研发者不需要为用户解释太多。

 

除了简单的造型,在可点击的按钮上可以配以大胆的颜色,以鼓励用户去使用。但是,不要以为使用简单的元素进行简单的设计就是扁平化设计的理念,这项设计是与任何其他类型的设计方案一样复杂的。

 

注重于字体的选择

courtneyandrew

Flatmate

由于一个平面里可以容纳的元素是有限的,排版便变得非常重要。

 

在这一方面,最常见的元素就是字体了,所以我们首先考虑的是,字体的选择应符合整体设计方案。就比如,把高度美化的字体运用到一个超级简单的设计产品上会使人看起来很奇怪。字体的类型也应该大方并且简单有效,从而产生和最终产品一致的风格,保持统一。

 

举一个简单的例子,当一个网站有大量信息更新的门户网站,无衬线字体成为了它们最好的选择。我们可以适当添加一些意想不到的新颖的艺术元素的字体,但要小心不要走极端整版整版的使用这种特殊字体。

 

注重颜色的选择Online-Radio

Squirrel-Settings

扁平化设计的另一个重要部分便是颜色设计,移动端的平面设计在颜色的选择上往往比其他媒介更需要使用明亮、丰富的色彩。在这一方面,扁平化设计可选择的用色要比其他的媒介多,虽然大多数的设计产品取色只有两种或三种颜色,但是也有一些优秀的作品使用过六到八种色彩。

 

色调往往优先使用充满活力感的,在一些成功的设计产品上运用的情况反映出,纯净的颜色很受欢迎。此外,某些类型的颜色也开始开发运用,比如复古的色彩、霓虹色彩和荧光色彩等。

 

秉持最简风格

Personal-Site

Mud

扁平化设计的原则是进行简单和行之有效的设计。

 

我们需避免一些互联网网页设计那样拥有太多花里胡哨的元素的设计风格。简单的颜色和文本可能还不能满足设计维度。如果你想添加更多的视觉效果,选择简洁的摄影作品或者插画作品也许是一个不错的办法。

 

一些零售网站,如Svpply(上图),采用的平板设计已经很好的表现了它的职责,它的办法很简单,一个简单的背景上做到这一点。(应当指出,这些照片也有一些自然的深度,但仍然适合设计成整体的融洽性)。

 

在共性中寻找特性

SimpleMail

Coming-project

Music-Web-Application

更多的设计师倾向于形成统一的样式,为之命名为平板平面设计。

 

在大多数扁平化设计中,使用最简单的元素突出主题,然后制造视觉效果添加到设计方案中。例如按钮,它可能包含轻微的梯度阴影,让人感觉有种立体感。设计师喜欢它,因为它能增加的设计空间和模拟材质纹理。用户喜欢它,因为它风格简洁明了,可以帮助用户引导正确使用其产品。

原作者:Carrie Cousins    翻译:伍舒扬

74 Responses
Comment (20)
Trackback (0)
  • #16
    GS二次元 :

    现在都是简单化么

    2014.10.6 21:17 Reply
  • #17
    GS二次元 :

    现在都是简单化么

    2014.10.6 21:17 Reply
  • #18
    李建学心理专家 :

    拟物化早就陨落了,ios也早就开始扁平化的发展了www.020ljx.com

    2014.09.28 12:28 Reply
  • #19
    李建学心理专家 :

    拟物化早就陨落了,ios也早就开始扁平化的发展了www.020ljx.com

    2014.09.28 12:28 Reply
  • #20
    Avon :

    iOS拟物化陨落了么

    2013.08.5 15:18 Reply
  • #21
    Avon :

    iOS拟物化陨落了么

    2013.08.5 15:18 Reply
  • #22
    歪扑猫 :

    搞设计的都高手啊

    2013.07.5 10:35 Reply
  • #23
    歪扑猫 :

    搞设计的都高手啊

    2013.07.5 10:35 Reply
  • #24
    疾风 :

    扁平化看着简洁 设计也方便

    2013.07.3 21:15 Reply
    • 周良 :

      不不不,扁平化是很多东西组合起来的,是更好的展示信息,而不是一个图标,一个图片

      2013.07.3 21:42 Reply
  • #25
    疾风 :

    扁平化看着简洁 设计也方便

    2013.07.3 21:15 Reply
    • 周良 :

      不不不,扁平化是很多东西组合起来的,是更好的展示信息,而不是一个图标,一个图片

      2013.07.3 21:42 Reply
  • #26
    anopos :

    好看实用就好。

    2013.06.29 16:03 Reply
    • 周良 :

      设计的精髓,哈哈~

      2013.06.29 16:04 Reply
  • #27
    anopos :

    好看实用就好。

    2013.06.29 16:03 Reply
    • 周良 :

      设计的精髓,哈哈~

      2013.06.29 16:04 Reply
  • #28
    士大夫 :

    我接着问:那今天下午在学校里玩什么了?www.zepao.com

    2013.06.22 17:35 Reply
    • 周良 :

      额?貌似你是嘉兴这边的。和我呆在一个城市。

      2013.06.22 19:45 Reply
  • 还没有Trackback
Leave a Reply