www.316.net亚洲必赢再谈扁平化

原作者:KATE
MEYER

译者:励定洲

概述:扁平化设计是从二零一二年伊始风靡的一种网页设计风格,在后天仍被广泛应用在一切。然凡事过犹不及,在某些时候这种作风会导致惨重的可用性问题。其中之一便是行走按钮的可见性缺失。扁平化2.0则能为我们解决这类问题。

称为扁平化设计?光明、三维视觉效果不俱存的图纸元素便是。很多设计师都赞成于把它当作极简网页设计的一个支行。

立体效果、拟物化设计、现实主义

在明明扁平化设计前边,我们先来看一下有什么样因素是和其绝缘的。扁平化设计一般被认为是和那么些立体效果、拟物化设计和现实主义唱反调的一种风格。在一个彻头彻尾的扁平化设计里你绝不相会到上述因素。

立体效果

立体效果能在界面上制作深浅不一的觉得,这能援助用户知道视觉层级以及怎么样因素是可以相互的。

浮动的元素看起来就象是是足以被按下来的(用鼠标)。这种计划一般被使用在按键上。

沉淀的元素看起来就恍如可以被填塞。这一般被接纳在输入框里,比如搜索框。

是因为早期的图形化用户界面中,立体效果被隆重用在具有地点,这还隐含了影子、渐变和高光等一多级的效率,其目标是为了让用户能首先眼就分辨出行动按键。但是,早期的GUI把那个伪3D效果应用得太过火了,在视觉上导致了一定的搅和,并极富侵略性。

Windows
95的对话窗口使用了大气的阴影和高光来创造3D效果(注意这多少个按键的上凸和输入框的下凹)。同时我们也能清楚地看看下面的五个tab中哪些盖在最下面。不过,过量的影子很容易让界面从视觉角度失去吸重力。

拟物化设计

在数额设计中,拟物化设计就是这个模仿现实世界事物“非必要”及“装饰性”的计划特性。拟物化设计是为着利用用户于实际世界的惯性思维来连忙领悟什么运用一个全新的界面。

早期的AmazonKindle
Fire三星平板,使用了拟物化的书架设计,可以看到其中形似立体书柜的背景和木质的纹路。如此隐喻能帮忙用户把她们对现实生活中书架的明亮(可以存放、整理书籍)沿袭到虚拟情境中。即便这些架子和木质纹理的筹划与系统的成效性毫无关系,却能加深该隐喻。然则Amazon在事后的UI版本中剔除了拟物化的书架设计。

现实主义

现实主义是一种以艺术的角度模仿现实事物或纹理的规划风格。

它一般和拟物化设计被模糊。其首要的区别在于拟物化设计提供隐喻的方法帮忙用户领悟界面,而现实主义是一种纯粹以美学目标使用计划因素和纹理来模拟现实事物的视觉风格。

www.316.net亚洲必赢 1

就像早期的Kindle
FireGALAXY Tab一样,Sprouts的网站也应用了立体木纹设计。不过,这种现实主义的设计只是为着让其在美学上有着吸重力,而非包含其他扶助用户了然什么使用该界面的隐喻,它也不曾去刻意模仿现实世界中的任何事物。

扁平化设计的出世

二零一一年微软的Metro设计语言和Windows8的生产对扁平化的拓宽起到了推动的效益。微软的规划文档把它的新计划风格称为“authentically
digital”——一下让大气设计师抓住了扁平设计的美观。与拟物化设计不同,扁平化设计并不需要借助复制现实事物的外形,这对于广大人来说是一种崭新的筹划语言。

从苹果网站的渐渐扁平化就能窥见到这多少个企划风格的流行水平。拟物化设计和现实主义曾一度是苹果设计的标配,这种坚定不移从来持续到二〇一三年,然后一切都变了。

来看望苹果二〇〇七年时候的网站,注意丰裕带有高光的立体标签导航栏。

二零一二年的时候苹果的网站上隐喻的标签导航不复存在,但如故采取了高光加圆角的计划(注意这是现实主义而非拟物设计)。通过在搜索框里添加阴影让它有种凹陷的感觉到,尽管这从视觉效果上来说真的要比Windows十七年前的输入框看起来淡雅不少,但它们本质上是一样的。右下角的那么些图标接纳了丰硕夸张的高光处理,或许是为了让用户能弹指间明亮它们分别是做哪些的。

苹果2015年的主页。包括Logo在内的全部导航栏都变得扁平了——无阴影、无材质、无高光。没有了立体、现实主义和拟物化的功力。用户现在识别这是个导航栏的方法是通过影响的考虑定式:一个停放网页顶部的深色条状物不是导航栏仍是可以是咋样?(恩对,也有可能是广告,但这家伙实在是太细了,这点在nngroup以前的一篇有关banner盲点的稿子里有关联过)

扁平设计的可用性问题

从今扁平化在二〇一一年出现以来,Nielsen
Norman小组就直言地对其神秘的可用性问题暴发过质疑。我们不予的机要理由是因为我们觉得扁平化设计是一种为了投其所好流行势头而献身用户需求的筹划风格。

几年下来,用户对价值观的行事按键样式已极为熟练,比如含有下划线的黑色文字和立体效果的按键等等。设计方向的快速扭转带给用户的是一种崭新的合计——绝大多数用户对于链接元素的直觉反应能力确实已经进化,但是她们能更好地了解链接元素并不意味他们完全不需要依靠其他线索了。

本人询问了一位22岁加拿大人她是什么领会网站上哪点东西是可以点击的,她作了之类答复:

“即便文字是灰色或者有下划线的话可以眨眼之间间就反应过来,Word里不也这么做的呢?呃下划线确实很有帮衬,或者按键的榜样也可以,没有必要标注‘点自己’这样的指示文字,假若一定要有,‘现在买入’或‘参预购物车’等依然正确的。”

这段回答相当简单地证实了众人借以识别可点击元素的视觉焦点:

观念、外部一致的标识(比如含有下划线的肉色文字、凸起的按键等)

有些经文的标识(比如含有下划线的文字,或者隐含一个外框的文字)

前后文的端倪(比如有意义的文字:购买、插足购物车等、页面顶端的地点:导航栏、logo居多)

Trader Joe’s的首页显示了一名目繁多的可点击标识,这包括

1 View All ——带有下划线的绿色文本

2 Find ——红色背景让它看起来就像一个按键

3 在导航栏里的粗黑文字:只可以通过它们的职位和文件音信来判定是否可点击 

只顾:在成品的轮播图下还有一个拟物化设计的木质架子

假使你的成品要向扁平化方向转变,请按照我们的《设计可辨识点击元素指南》以保险您不会让用户暴发困惑。

扁平化设计的变体

如今,设计师们起首察觉到了扁平化设计的可用性问题。对于扁平化更成熟的新释义现身了,设计师们正在不妥协于可用性的前提下探索更多的火候(此处鼓掌,啪啪啪)。

偶然这种新思潮被描述为“半扁平”、“近扁平”或“扁平2.0”。这种设计风格完全上是扁平的,但利用了有些微薄的阴影、高光和图层来打造UI的纵深。

长投影,那个我们可能都挺熟知了,从二〇一三年起来火起来的。长投影是扁平2.0走火入魔的一个事例——这种3D效果只是纯粹为了美感而生,并不可能为用户带来其他有价值的信息。谢天谢地,这种作风没有起来多大的浪花,但它在图标设计领域依旧占有一席之地。

谷歌的Material
design
是扁平2.0的一个自重范例:它利用了借鉴于物理世界的隐喻和观点来救助用户领悟界面并直观地把内容层级视觉化。

安卓上的伊芙(Eve)rnote
app可以拿来看一下,尽管总体上运用了扁平化的品格,它在导航栏和转移按键上仍采取了有些分寸的黑影。伊芙(Eve)rnote通过卡片设计予以其内容在3D空间的扁平概念。

正如所有计划方向一样,我们从上抵消和适度。不要为了赶时尚做出会牺牲可用性的宏图决策。必须牢记除非您是为另外设计师设计产品,不然你永远不应把温馨幻想为用户。您对于按键和链接的可见性偏好并不均等你的用户们,不要认为他们和你同一对你的规划了如指掌。

最初的3D
GUI和史蒂夫(Steve)乔布斯(乔布斯)式的拟物化设计给人带来致命、杂乱的界面。对其简要实在能够立异可用性。不过为了兑现纯粹的扁平化罔顾元素可见性而自由删除视觉标识的行事只是走下坡路。扁平2.0提供了一个折中的方案——简而不减,这才是我们需要的扁平化。