[ISUX转译] 网页设计革新式布局与相互

图片 1

图片 2图片 3

近年“扁平化”的界面设计风格风靡一时,早在Android4.0出产的时候此计划风格就曾经拿到了大面积的认同,再到iOS7的披露,则将这一计划风格推向了高潮。流行
“平”的界面风格不仅是一种倾向,它的内在精神是指望遏制和清除多余的视觉元素,做真正的统筹。

技能提高有时会过犹不及,在十九世纪,由于广大的机械化生产,装饰品被急忙及廉价的生育出来,导致商品被过度装修。类似的事体暴发在新近几年,由于显得和体裁技术允许计划人员可以创设充足的视觉界面,导致拟物化设计(软件界面模仿现实世界中的实物纹理)和复杂样式的过度使用。

鉴于对在实际设计的追求,现代统筹活动遗弃了19世纪过度装修的规划风格,使设计更加契合大面积生产。前日,大家看到对“真实的设计”的求偶以“扁平化”的趋向表现出来,它不容拟物化设计以及过多的视觉效果,追求简单,干净,以内容为主题的计划。

现代计划的出生

19世纪末期,工业革命发生,机械化大生产,对已有装饰风格的疯狂复制导致了汪洋恶性、扎眼的货物,一些有影响力的现代计划先驱诸如奥地利建筑师阿道夫(Adolph)·洛斯的对此深感不满,同时现代统筹先驱以投机的实际设计创作影响世人,倡导现代设计,例如:“现代建筑的旗手”——著名建筑师勒·柯布西耶、“摩天大楼之父”——路易斯(Louis)·Sullivan。到了20世纪先前时期,随着德意志联邦共和国现代统筹运动先驱赫尔曼·穆特修斯的奔走相告、现代派建筑师Philip·约翰逊(Johnson)的著述在伦敦现代艺术博物馆的成功展出,将现代设计活动渐渐推动高潮。

透过差不四个世纪的刻钟,现代主义运动起来流行,直到20世纪前期,传统的风骨和技能被新的筹划形式所超过。其焦点是:远离不必要的装饰,走向一个更干净,更内敛战胜的设计款式,其美在于内容本身,而不是外在装饰,寻求一个调匀的模式与效能的融合。

数字化装饰

若果大家将不久的软件设计、网页设计和现代计划的历史来做相比的话可以窥见,两者兼有同样的向上历程,机械化大规模生产导致的过于的点缀在软件和网页设计中也得以看来,由于显得和体制技术的迅猛发展,在软件界面和网站中,大量的装饰性的因素被过分使用。在以往的Web设计师中热衷于采用动画片、声音与图像,发生过于充足的机能。

初期的包含图形用户界面的操作系统在外观和感觉上是分外基本的。当然,现实世界的隐喻,也得到了利用,比如用图像文件夹来代表文件目录,带有斜面的按钮让用户精通它们是可以点击的。但全体的审美感觉是“扁平化”且克服的。不管设计者是否想提供一个增长的视觉感受,可是黑白两色且低分辨率的展现器限制了他们。

图片 4先是代Mac
OS图形界面只用了二种颜色,苹果通过模拟现实生活中的物体来在传达深度、纹理、按钮和图标等概念,界面的天生丽质受制于当时的技艺,而不是设计师。

乘胜技术的腾飞,设计师们获取了普遍的施展空间,视觉的自由度得到了庞然大物的提拔。对于Windows
XP,微软推出了一个五花八门的品格,通过利用大量的亮部,阴影和潜移默化来模拟一个现实物理外观。

苹果揭橥的Mac OS
X则走得更远,富有光泽的塑料气泡造型的界面,拉丝铝的活灵活现图标等等。随着岁月的推移,操作系统的视觉样式拿到加强,微软给予Windows光泽,透明玻璃般的主题,而苹果集团则为其桌面和活动操作系统赋予材质感、拟物化更强的计划性风格,如带有皮革纹理的日历应用程序,以及电子书阅读器逼真的翻页效果。

图片 5Windows
Vista的界面特色Aero主旨,其光芒以及像玻璃同样的窗口镶边。

依傍现实生活中目的和纹理的体制,被说成是“拟物化”——借用现实世界里的记号作为统筹元素,目标是为了让界面为用户所耳熟能详。最近,设计师们开端质疑笔记类的应用程序是否肯定要规划成纸质台式机的样式,或日历类应用程序是否必然要设计成皮革和翻页效果。这样的做法实在可以给用户来视觉上趣味性,可是还要它为了配合现实生活中的静态感受却与数字界面的流动性和生机格格不入。

图片 6时下版本的OS
X的日历有一个仿照真实日历外观的缝制的皮子质料和纸边撕裂的效率。

乘势新型版本的Windows
8发布,微软迈出了英雄的一步,远离这个多余的视觉效果,试图给其操作系统的全数字化的感想,用本文的观点来说,这是“真实的宏图”。最新的界面是白手起家在微软开支其早期的移位版本。所表现给用户的审美准则毫无现实生活中物体纹理。

相反,Windows8依赖排版,间距和颜色带来优雅而有秩序的数字模块。现实生活中的效果以及多余的样式被摈弃,剩下的就是简约的始末本身。非凡像海尔曼·穆特修斯早已提到的以火车站作为例子的“机器美学”,微软设计师指出以火车站标志为灵感的新Windows界面,往日被称之为“Metro”。

图片 7Windows
8的发端屏幕上打破传统的桌面设计艺术,由扁平的,充分多彩的磁片组成,而不是图标。磁片不仅是一种风格上的抉择,而且她们让有效的音讯以仪表板的形式在起步画面上显现。

多年来,在网上一度看到了看似的转移。早期基于表格和Flash的规划让开发者可以以像素级其它细致度来完善兑现界面,所以设计师毫不犹豫地为内容设计出充分的视觉容器。当我们开始面对新媒体的流动性时,将显得和情节分别,网页设计变得进一步克服。中度装饰的器皿无法随意改变它们的宽窄和职务,所以设计师较少使用图像,并更多地借助简单的CSS样式,使她们的布局适应性更强且更便于维护。

响应式设计(为使一个页面适应不同的屏幕尺寸和设备)的新式发展要求设计师的干活在一发端就要跳过可视化编辑器(如Photoshop),出席到代码当中去,让大家尤其贯彻一个简易的,以内容为主导的网页设计美学,它的美感源于排版,间距和颜色,而不是靠实际的统筹使用纹理和装饰性的图纸。

最近,苹果、作为
“拟物化”设计的引领者,通过iOS7的发表,也早就迈出了向数字化设计的第一步。缝制的皮革纹理和撕开纸张边缘的拟物化设计已经一去不复返了,取而代之的是一个概括而扁平界面,它色彩丰硕、图标简单、表面半晶莹剔透。

图片 8苹果iOS7对过去的“拟物化”设计做了两次彻底的转向。左边是旧iOS的总计器应用设计,左边是新的iOS7。质感粗糙的斜面按钮和闪亮的玻璃都丢掉了,取而代之的是扁平,纯效用性的界面。

真心诚意的统筹

敦促现代规划理念在软件和网页设计中流行的关键在于对计划真正的求偶,这种追求使得设计师将装饰性的东西从他们的行事中删去,将数字设计引向干净、以效果为主的美学标准。然则到底是怎么使设计变得“真实”呢?

忠实的设计意在防止虚假的装潢,它匡助于接纳材料我的质感,没有遮挡、没有虚假的纹路,体现材质自身的优点,而不是打算隐藏弱点。真实的筹划是以一个用户熟习且能感知有用的主意来体现效果。真实的统筹是以功能优先于情势、目的在于提升效用。真实的设计是遗弃外在装饰转而寻找漂亮纯净的内在精神。

在实事求是设计中,样式不是不根本,但它不是靠装饰来达到。相反,美的花样取决于内容,内容的自然显现结果自己就是一个极具创意的方案。就像Deyan
Sudjic
在对标志性的Anglepoise灯评论时所说:“这些灯的灯罩,它看起来就像是前边加上去的如出一辙。不过,正是因为它依照效能毫无装饰的样子成就了它的非凡魅力,这种实事求是的规划,就像早期版本的英菲尼迪汽车一样是遵照技术的出色纷呈构思而不是为着创建一个诱人的消费制品所得出来的。

图片 9Anglepoise灯的筹划是为了化解真正的题目而得出的一个精美绝伦的缓解方案。所得到的花样则有着自己的美学魅力。

在数字化设计中,真实设计能够概括为着以下几点:

  • 拥抱数字化的外观。

在计划中我们从没必要去模仿诸如金属,木材和皮革的纹理。他们不是数字化的界面,所以模仿这多少个毫无意义。这并不表示计划只是平面背景颜色,而是大家不应当统计模仿或受限于现实世界中的纹理。

  • 破除“拟物化”设计。

数字图书不需要效法物理纸张翻页效果,也不需要一个记笔记的应用程序看起来像一个物理的纸本子,皮革封面,撕裂的边缘和手写风格的字体。“拟物化”设计也毫不一无是处,但它连接在界面上加码了视觉负担。例如,纸本是静态的,一维的,但数字界面却非这样,一旦这个界面模仿了现实中的纸本,它就陷入到大体隐喻的牢笼当中了。

  • 以内容为主干的统筹风格。

聚焦内容,而不是它的样式和装修。你可能会觉得这一点是老生常谈,但有多少次你在网站上阅览一个现成的,现成的焦点?核心是始终建立在捏造情节,所以,就其本质而言,绝无法完美的意味内容。虚构文本的主旨推动设计师专注于造型和装修,而不是内容上,因为那里根本就一直不内容。只有当你在拍卖实际的内容时,你才起来真正将效率和样式有机整合。

永不极简主义

按照效率的计划美学无法同一极简主义风格,前者试图去除多余的筹划,使产品更易了然,有更好的呈现同时让其变现材质本身的美感,后者则是打算建立一个极简的美感,给规划目标一个简约和根本的光环而已。一个是基于效能的计划性准则,另一个则是一种风格的挑选。

图片 10扁平的UI核心套件,由Designmodo设计,“扁平化”只是向“真实的宏图”内在变化时所得出外在表现,作为一种设计风格,“扁平化”只是一个增选,而非必要的。

机械的套用极简的计划性美学,将界面设计的简要而数字化,时常会是个误区。举个例子,一股脑地排除视觉效果,如阴影,颜色和不同的背景样式未必会让界面更便于选取。在少数意况下,这相反的毁坏了界面的层次结构和关键,而以前这一个层次结构和关键都是起家在影子和背景颜色之上的。

图片 11为了适应Windows
8的大旨,Outlook
2013的界面举办了履新。但随着界面被彻底平面化,所有的情节和菜单被联合到一个十足的白色平面,使得界面变得更混乱了。

在《The Laws of Simplicity》中约翰Maeda提议,“要达成至简的最简格局就是透过深思熟虑做减法。当有疑难时,只是做去除​​,但要小心您所删除的。”最终的警告是相当重要的。删除东西导致简化,往往只因为需要用户关心的事物变少了,可是收缩视觉元素得以在情绪上扶持用户来拍卖界面音讯,比如项目分组、按钮和标签的区别、优秀对象所用到的图片元素都会散开用户注意力,如若拔取不当都会给用户造成更多的打扰,而非是让所谓的体裁、原则来指点规划。

何以真实的计划性这样首要

“Rise”本条利用是一个圆满的例子。闹钟在现实生活中是一个业已解决了的题材,可是Simplebots决定重构这一个概念,重新思考一个依据纯数字环境的界面。

图片 12在Rise应用程序中,用户以一个改进的全屏幕滑块来安装的时光,以背景颜色的转移来影响映天空的颜料

“Rise”界面设有一个全屏幕的滑块,在你设定的时日的时候背景观的变动用以反映天空的水彩。它没有准备去模仿一个物理的钟表或物理滑块或现实生活中的纹理。相反,设计师充足利用智能手机的触屏,以介质本身来创建一种全新的经验。革新性的统筹不仅使其有一个了不起的用户体验,并让它在应用市场上脱颖而出。

像“Rise”界面的宏图唯有当您对数字化画面有一个到家的掌控,而非仅仅是照搬现实世界中的一些解决方案才能博得的。数字;屏幕可以发生抽象的款型,动画、鲜艳的色彩以及平均的色泽,没有必要被限制在抑制的色调或静态显示当中,也无需被绑死在“拟物化”的宏图款式上。怎么样通过应用像素网格找到最好的来得内容,大家可以得出更好,更简便易行的缓解方案,立异的界面设计让用户有宾至如归的感觉,提供更好的用户体验,让成品脱颖而出。

近日广为推崇的“扁平化”的设计风格或者会是一个样子,但它也是对“真实的宏图”追求的一种体现,这种追求呈现在平抑多余的装饰,专注于内容本身。技术提升有时会过犹不及,就像在19世纪机械化批量生产造成装饰的真实性的规划使用,以及显示和体裁技术在既往的网页和软件设计中的泛滥。随着时间的推迟,过度装修得到遏制,现代主义的宏图先驱寻求基于效用的美学标准,软件和网页设计中的过度设计也会拿走抑制,转而去找寻“真实的筹划”。

原稿地址:http://www.smashingmagazine.com/2013/07/16/authentic-design/

原文作者:Dmitry
Fadeyev

 

感谢您的读书,本文由 腾讯ISUX 版权所有,转载时请注脚出处,违者必究,谢谢您的合作。
声明出处格式:腾讯ISUX
(http://isux.tencent.com/authentic-design-skeuomorphic-minimalism-flat-web-design.html)