扁平化来了www.316.net亚洲必赢

-翻译渣那种事写出来就是求喷的,喷喷才有上扬。
-从那篇开头来源什么的写到最终了。

在过去的几年间,大家见证过软件和选取界面设计的便捷生成,从3-D、拟物化(skeuomorphic)到扁平、简约。即使这么些主旋律已接近无处不在,大家仍旧花点时间考虑我们怎么跟随它,它完整来说又是怎么影响界面设计。别的,我会分享部分关于安顿扁平界面的提醒和注意事项。

www.316.net亚洲必赢 1

Interfaces on a Windows Phone 8 and Apple’s iOS 7.

Windows Phone 8和Apple’s iOS 7的界面

发出什么样了?

国有意识怎么从爱护有纹理、有斜面、有阴影的事物,到心仪扁平的水彩、简约的排版呢?很多因素推动本次转变,可是多少因素更加非凡。

音信过载

在频频联网的文化下,我们要处理不停流动的音讯,其中有的事有用的,大多数都是没用的。我们不住地开拓进取、过滤,当然还会创设新内容,这几个都会令人筋疲力竭。其它,我们消耗的大多数内容都更换来小屏设备上,加剧音信过载的觉得。很简单就变得不堪重负,在UI上减小杂乱创立一丝视觉禅意。

www.316.net亚洲必赢 2

Geckoboard

去除杂乱:Geckoboard的视觉设计使重点数据在扫描中也能便于精晓

简言之是金

在类似的自由化下,很多颠覆性的Web应用和劳务都以个其他效应去提供莫大注意的工具。不过传统的软件开发者尝试以高于的意义来鉴定高昂的价钱。那一个变化趋向专注型的小型应用喜欢简洁而不是功效。简洁应用意味着简洁界面。

www.316.net亚洲必赢 3

Blue weather app

美观并简短:天气应用——Blue
by Oak.

内容为王,再次强调

一般说来事情会这么暴发:当一个新设施、技术进入市场,大家对“它能做哪些、交互会怎么发展”都很着迷。界面热潮常常伴随专注内容。媒体消费,无论是文字、音频、视频,都可能是大家在手机上最常加入的移位,鉴于那样的用例,大家只想让界面消失。

技术素养

智能手机、平板已快速渗透到所有用户,关切显而易见的主宰的人早就减弱。然则,我们已经担心一旦按钮没有卓越屏幕,用户可能会寡见少闻那么些按钮。大家现在更乐于去探索微妙的并行。Window
8和Android
上的Chrome已经支持触摸指令去行使屏幕,且从未提供任何视觉上的提醒。

www.316.net亚洲必赢 4

Fitbit

Fitbit的仪表板明亮的、大篆的、和善可亲的视觉识别(VI)。

科学和技术的熏陶

大部软件受限于运行的平台。显示屏大小、像素密度都是硬件限制的要素。简约设计只要求少量的颜色,那就表示每一个元素都必要被赞扬。排版比例、字体粗细很大程度上主宰扁平设计的美学和可用性。

一经您的对象设备不能够处理细微的异样,那你就不幸咯。移动装备的显示屏尺寸、像素密度会屡次三番升高,更细更小的书体能被明晰地选用。当然,襄助@font-face会有助于简约专注排版的统筹。

www.316.net亚洲必赢 5

Wallmob

Wallmob做一般的行销监控:持续从随机有浏览器的装置上跟踪数据

响应式设计

乘胜联网设备的尺寸增多,UI有必不可少变得更流动性,响应式设计的移位曾经开头。响应式设计不是指某种专门的美学,有一些务必认同,扁平UI比起其余风格更适于响应式。简约设计的其余优点包涵下跌页面重量(page
weight)(那里译成「权重」的话算是优点吗?)和加载时间。

www.316.net亚洲必赢 6

onsite

轻量化:OnSite

最好的履行

OK,理论到此截至。我们伊始进行实际性的勘察。创立一个很快的简练设计是一个很大的挑衅。当你远离一般的UI技巧(阴影、斜面、纹理),你飞速就发现到剩余的要素有多首要。上面一些提示是最普遍适用的,更加是在扁平UI上。

开班以前

就像是其余项目那样,第一部是保障您选拔的风骨是适用的。在你跳进扁平设计这一个坑之前,先管教它非凡你目的用户的感官和你的靶子平台、设备、应用项目。要是那不是好的类型方案,跟随时尚是没意义的。

过程

不论是您挑选什么样的品格,进度很紧要。当您的对象是不难化,这几个想法自然要记在你脑海。

  • 统筹简单界面的时候,我日常从pre-PC时代中会寻找灵感。在非常时候,设计师和方法用更少的事物来表明越来越多的意思(did
    more with less)。那是一个很好的机会去重新拜访设计大师,如:Josef
    Müller-Brockmann 和 Wim Crouwel。我也会看简约的绘画,如Ellsworth
    凯利;建筑师,如:Mies van der Rohe;工业设计师,如:Dieter Rams。
  • 离开工作也是很关键。扁平、简约的宏图都是些席位的出入。休息一下再重返,新的意见比不断锤炼更实用。
  • 正如差距的版本。在用20分钟左右移动5像素将来,我会保存四个本子,然后相比它们。最佳选用很快就是发泄。
  • 是因为品种比重是很重点的少数,尽早在分裂的指标设备上印证你的宏图概念。
  • 边做边问自己“我真得必要那个事物吧?”重点关心某个元素是很不难,可是大家要关怀所有的因素,去除或简化。如果您花多量岁月在上头,你就很难废弃它,然则内容才是决定性的。
    www.316.net亚洲必赢 7
    Global Closet
*[Global
Closet](https://link.jianshu.com?t=http://globalcloset.education.nationalgeographic.com/):一个设计给「国家地理」教育频道的互动游戏
by [The
Workshop](https://link.jianshu.com?t=http://www.theworkshop.co.uk/)*

网格

网格在众多设计中都扮演一个重点的角色,那里也不是例外。当您品尝用有限的视觉元素去建立秩序和可用性交互时,网格就有很大帮扶。

  • 网格建立不只是视觉秩序。使用它去正规内容,效能群组。你不要求经常用线、框来为元素分组。简单的对齐,留白就足以让用户知道界面的布局。
  • 尝试用异样的元素去打破网格,可以招引用户注意。没有了伪3-D的技巧,基本的图层规则(如:比例、布局)就是最好的因素,那些可以升高视觉的层级关系。
  • 试验用比平时更凝聚的网格。当你减掉颜色时,你就会意识这几个安排布局比想象中复杂,但又不显凌乱。看下哪些音信你可以由此布局来承载。
    www.316.net亚洲必赢 8
    Live School
*[Live
School](https://link.jianshu.com?t=http://www.rossul.com/portfolio/liveschool-ipad-app/),iPad应用
by Rossul Design*

颜色

很引人侧目,颜色是视觉设计的第一组成。简约设计中,它就更主要。

  • 用更大的调色板。如果你像我那么,你就会觉得小的调色板平日会导致越来越多职能的界面。一个大彩虹就能了事它。那是你伸展的好机会,专注少量的因素,你会认为拓展调色板是很好的一件事。
  • 当你设定调色板的时候,在不一致光线的环境下考查你挑选的色相,确保在灯火辉煌、漆黑的情状下它都适用。
  • 您恐怕想要试验同系色搭配、或是用了然的颜色系。尽早用你的调色板去做试验,以有限帮助有丰裕的色域来应付微小的异样和高反差的要素。
    www.316.net亚洲必赢 9
    TriplAgent
*[TriplAgent](https://link.jianshu.com?t=http://www.triplagent.com/)的视觉设计很好地使用调色板*

排版

扁平化、内容使得的网站,排版就是关键。

  • 有衬线字体是个接纳,无衬线字体日常都会令人觉得很彻底。
  • 挑选一款含有分歧重量、样式的字体。你不自然要全方位都用,不过越来越多的选料可以帮您更好地定义层级关系,你甚至会发现,特定的字重适合特定的条件。
  • 专注字体的易读性。我领悟那听起来很傻,不过你在要多关注你挑选的字体,确保它们在各样比例下都抱有易读性。
    www.316.net亚洲必赢 10
    Siteleaf
*[Siteleaf](https://link.jianshu.com?t=http://www.siteleaf.com/)上清晰易读的排版。*

交互

在扁平设计中,表示一个因素得以互相有点难度。我依仗于下边的一对方式

  • 内容是首要。如若图层的主色调是白,你就要求给可互相的元素一点颜色。即使安顿是以文字为着力,你就用简短的图标。假诺标题用大号的小写,你可以把链接弄成小号的大写。你懂的~
  • 正常布局也是挺好的。假诺您用超细的字形作为后退箭头,把它置身左上角,用户愿意在那里找到后退按钮。
  • 当您放更加多的成效在页面上的时候,让各样可相互的要素看起来像按钮是船到江心补漏迟的。界面应该更直觉性。但谨防交互更加复杂或不测,让它变得不难从错误中苏醒过来。(译得有点生硬,就是「容错」。如:Gmail平常都有「取消」提示。)
    www.316.net亚洲必赢 11
    Taasky
*简单的图层、绝佳的对比:[Taasky](https://link.jianshu.com?t=http://taasky.com/)*

总结

本人不信任设计有难用的、飞快规则。设计师对创建简约的UI感兴趣是一件令人欢喜的事。扁平设计是或不是就意味着不可能用渐变和影子?当然不是。如今自己做的一部分办事,就要平衡扁平和多维,智能地提供内容的同时保持互动的直观。

在中度连接、新闻富裕、全能的电子世界中间,简约设计的苏醒吸引眼球。那并不是兼具难题的一级解决方案,经过深思、适当的利用之后,它会铸就一个更好用、愉悦的电子体验。


来源:smashingmagazine
/ Sep 3rd, 2013
作者:Adrian Taylor
翻译:lyzhie