header_v0.7.0

从建筑到UI——将F•L•赖特的理念带入UI设计中

1年前发布

翻译文章 / UI / 教程
Kabka 翻译,如需商业用途或转载请与Kabka联系,谢谢配合。

建筑设计是设计学里的一大分支领域,而不同领域的设计在某种程度上是相通的,本文从建筑师赖特的设计理念中找到一些我们在从事UI设计或者交互设计的一些启发。

      弗兰克·劳埃德·赖特(Frank Lloyd Wright)是上个世纪美国最伟大的建筑师之一,在世界上享有盛誉 。赖特师从摩天大楼之父、芝加哥学派(建筑)代表人路易斯·沙利文,后自立门户成为著名建筑学派“田园学派”(Prairie School)的代表人物,代表作包括建立于宾夕法尼亚州的流水别墅(Fallingwater House)和世界顶级学府芝加哥大学内的罗比住宅(Robie House)。

                 

                           

(图1 - 弗兰克·劳埃德·赖特)


      他对材质、形式、功能、空间和环境有独到的见解,这也让他造就了这么多杰出的作品。他的这些原则和方法仍然用在今天的建筑设计中,他的建筑作品经历了漫长的时间的考验,历久而弥芳。

      我在赖特那些永恒的作品里找到了很多灵感。作为设计师,我们经常被要求去创造一个有5~10年生存时间的数字产品(特别是软件),想要延长一个数字产品的寿命,让它持续地被用户喜爱,我们有必要去思考未来——在25年后,50年后,我们会用什么样的交互方式,什么样的新产品呢?

     莱特在他70年的职业生涯中,创造了一系列的理念和原则,激发我们的创造力去设计一个更能经得住时间考验的数字产品体验。本文将涵盖赖特的六条设计理念,并阐述如何将它们运用到当今的产品设计以及UI设计中。



(图2 - 弗兰克·劳埃德·赖特与马林县市政中心的方案草图)



一、维多利亚时代的美国建筑需要新血液


      我们不能单纯地为了新奇和独特来增加设计的复杂度。实际上,赖特也推崇把这样一个理念运用于建筑设计中。在他为《Studies and Executed Buildings》一书的前言中,他写道:

    “我们不能仅仅为了丰富而丰富,为了华丽而华丽。除非它们是用来表现整体的主题,否则是不可取的。”


维多利亚时代及其浮华的设计

      赖特的职业生涯开始于维多利亚时代时代。主流的美式建筑拥抱了欧洲的古典传统风格。维多利亚时代的房屋不仅仅是住房而已,也是地位和财富的象征。这些房子到处都是装饰,许多小房间没有实际功能。


(图3 - 位于旧金山的维多利亚式建筑)



     当时,用赖特的话来说,“大家普遍的想法都是想建造一些豪华漂亮的东西,好让自己显得比邻居更加重要。”而这些建筑却与赖特心目中的理想建筑相去甚远。


新建筑的曙光

      在整个1880年代和1890年代,赖特发现需要一个新的体系结构。在世纪之交的时候,他丢弃的肤浅的维多利亚时代的传统,发起一场全新的美国建筑运动:The Prairie School(草原学派)(译注:在新的世纪开始之际,他的个人风格初步形成了,人们把以他为代表的一批建筑师统称为“草原学派”(Prairie School),他们的住宅作品被称为“草原住宅”)。根据这一学派,每个建筑都有目的,每个细节都是精心策划的,目的导向的。这些细节上的理念定义这种建筑结构的审美风格。



(图4 - 罗比住宅)


       上图是功能驱动形式的一个例子:赖特的弗雷德里克·c·罗比住宅。这个私人住宅的定义特征是其夸张的悬臂式风格。虽然这些在某种程序上决定了这栋建筑的建筑视觉美学。罗比住宅处于中西部地区,这样做的提供较好的遮阳条件,降低室内温度,同时也能较好的抵抗频繁的暴风雨等恶劣的天气。



细节要为目的而生

      赖特在设计位于东京帝国饭店时,东京当时容易发生火灾,考虑到这一点,赖特设计了池塘和水景,以便在发生火灾的时候可以提供较多水源。


(图5 - 东京帝国饭店的池塘和水景)


      作为设计师,我们专职为用户创造优雅、迷人、可用的的产品体验,以满足用户的实际需求,有的时候甚至是更深层更高级的需求。我们不应该为设计无端地添加不必要的复杂性,也不应该过分追逐潮流而迷失产品自身的方向,不应该为了炫技而做一个不符合产品自身出发点的设计。相反,每一个设计中的选择都应该是有理由的,是跟从产品要求而应运而生的。



二、材料


理解材料的本质

     赖特在考虑建筑中所要用到的材料时也总要仔细推敲,不同的材料,不同的优势和特性,决定了它们他们不同的用途。例如,玻璃材质可以透光,混凝土是液体,在建造之时可以有其形状的可塑性,砖石是固体,形态也有其固定性。赖特不太喜欢当时其他一些建筑师的做法,他们漠视每个材料的独特性质,不能区分对待。他觉得应该遵循材料最本真的样子去使用他,而不是去扭曲它本来的样子。例如,木材有它自身的颜色和纹理,在上面绘画或者雕刻是不尊重材料本身的做法,是不必要的设计。


材料的组合和相互配合

      赖特对于材料的深刻理解让他能更好地满足客户的需求,在Racine的约翰逊公司行政楼的设计中,他创造性地组合了各种材料的使用。这个工程的目标之一是增加交通的流量和人员自由流通量。他利用一个开放式的布局创造了一个半密闭的空间,利用“松林”式的柱子的排布和之间的间隙引入了自然光。


(图6 - 东京帝国饭店的池塘和水景)



      赖特所创造的树状的排柱下基座很窄,而顶呈圆盘形很宽,它们似乎都无视重力的存在。当时有一些工程师都持怀疑态度,觉得他这种设计会失败,但是赖特对于材料深刻的理解让他能巧妙地结合各种材料的力学特性和美学特性,成功地实现这样让人拍手叫绝的设计方案。而至今这座建筑和这个结构也依然安然无恙,也顺应了增加交通流量的目标。而据统计,这个办公室天花板的具有革命性意义的设计也让员工的生产力提高了25%。


技术好比建筑材料,要巧妙运用于科技产品中


      在信息时代的数字世界中,各式各样的设备的诞生,都是技术和智慧的结合。我们可以参照赖特运用材料的方法,来将不同的技术运用到产品中。技术对于产品,就好像材料对于建筑一样。打个比方,一个手机设备有屏幕、加速度计、触觉引擎、相机、NFC和GPS。就像木材一样,它拥有自然的纹理,坚固,也很灵活。一个加速度计能检测到突然的运动,触觉引擎可以适时地提供振动的反馈等等。



(视频地址:http://player.youku.com/player.php/sid/XOTI0NzM1NjI4/v.swf?from=s1.8-1-1.2


      借鉴赖特设计在Racine的约翰逊公司行政楼的方法,我们可以结合不同的技术(就像赖特巧妙地结合各种材料一样),创造出全新的产品交互体验。一个非常棒的案例就是 Cycloramic 这个app。这个app能够脱离人手拍摄360度的全景照片。为了做到这一点,我们首先要利用iphone 5平整的底部的特性。这个app利用了iphone的触觉引擎振动让手机旋转起来,同时,摄像机进行同步拍摄,接着,一张完美的全景照片就完成了。

      其实iphone6圆形的底部咋办?Cycloramic提供了一个创意的解决方案。如下图所示:将iphone6的充电器做为手机底部的支架,振动能过支架传导到地面,效果如出一辙。



(图7 - iphone6 上的 Cycloramic 应用)


      好的app确实是善于应用手机已有设备和技术的,苹果今年的新产品apple watch似乎也可以带来一场全新的使用市场淘金热。像新的触觉振动引擎,NFC读卡器,心率监控器等等,都将促使新的好玩的app的诞生。而有的app也许看起来很好看,很有逼格,但是却没有为它们的核心目标服务,也往往不能成功。



三、布局和形式


自由开放的布局

      和维多利亚时代的建筑师不一样,耐特设计的房子往往以一个中心点来创造出自由开放的布局形式。比之于设计遵循当时风潮的传统房屋,他更倾向于设计更灵活,用途更广的空间和场所。这些精心设计的空间和场所,为居住者户内外的活动和生活提供了更多的便利。他巧妙的将光线、空气、空间相互渗透,整合而统一。比之于固守不变的“墙”,用来划分空间和区域的东西变成了所谓的“屏”,这些“屏”可以是任何东西来充当,好比家具(在罗比住宅中)或者连续的窗等等。


(图8 - 赖特绘制的房屋布局平面图)



      赖特认为消除四四方方的房间可以让空间更人性化,造成更小的空间或结构浪费,更舒适地生活。在迈克·华莱士的采访中他说,他收到他的客户的来信,他们说这种理念和设计确确实实地改变了他们的生活体验。

      我们似乎也能从赖特的对于布局的理念中获得启发。像我们经常使用的基本布局/排版原则,如层次结构、对比与平衡、考虑阅读方向等。屏幕,对于一个设备或者对于用户来说,至今仍然是最重要的部分,但是我们往往没有尽力发挥出它的潜力。



“填鸭式的信息”:不该做什么

      为了了解更多的可用信息,用户常常通过网站或者app的渠道来获取。于此,我们往往倾向于在我们的产品中加入过多的模块和信息。下图中就是一个例子。这个网页有顶部的一级导航,左侧的二级导航,在右边竟然又出现了另外一个层级的导航。导航所占的区域甚至起过了用户想关注的焦点内容的区域大小。这就好比维多利亚时代的建筑一样,多余的建筑构件,复杂化了原来可以简单一点的问题。


(图9 - 冗杂的UI布局)



将赖特的布局理念运用到UI的布局中

      我们的设计维度不应该只停留在真实的物理屏幕的二维上,屏幕可以被视作一个扩展我们真实的3D世界的窗口。

      UI设计中的布局,我们也应当妥当对待,内容的安排和整体的形式不应武断。像赖特对于建筑的理念一样,形式由内容而决定,简单自然,不死板,要人性化,设计不是单纯耍酷。


    (https://www.youtube.com/watch?v=xNqs_S-zEBY&feature=youtu.be 地址是youtu的视频)



      SpaceX 为自己开发了一个可以设计火箭零件的系统。你能想象得到,火箭引擎布满布着各种复杂的零部件,每一个零部件都需要经过精心设计、调整、优化等等。

      如同上文所举的界面的例子一样,这个系统的界面本可以堆满各种菜单、选项和设置按钮。取而代之,它仅仅把与当前的部件操作最相关的信息展示在屏幕上,它的布局和交互形式,就真真切切的依照着现实中工程师构建各种部件的模型而来。独特的交互、界面和开放式的布局相结合,让工程师和设计师可以很自然流畅地进行 交互,完成部件的设计工作。这个案例,将复杂的信息简单和直观地呈现和交互,如同赖特的建筑理念,化繁为简,不需要的,对体验没有太大用处的内容就要不断地减化减化减化。

      另外,动作手势控制系统作为这个系统的输入设备,即设计师们可以仅仅通过手势操作就能够精细地雕琢零部件的各个构件,从而得到了极为自然和流畅的使用体验。善于将好的技术和方法恬当地用于产品中,就好比善于将恬当的材料和技术构建于建筑中一样,得体,自然,没有丝毫多余累赘。



四、形式和功能的统一


赖特的建筑形式

      赖特的老师路易斯·沙利文有一条著名的设计法则:“形式服从功能”。换而言之,一个建筑的形式应当由它的功能所决定。其实这个理念早已存在了相当长的一段时间,是由早期的罗马建筑工程师马卡斯·维特鲁·保罗(Marcus Vitruvius Pollo)在他的著作《论建筑》里提出来的。

      赖特结合自己的理念,将“形式服从功能”这一个经典的理念重定义为“形式和功能应当在精神上得到高度统一”(原:“Form and function should be one joined in spiritual union.” )。这让他拥有了更多的思考维度,构建出了众多形式功能高度统一的惊世之作。

      赖特设计的草原住宅位于中西部大草原,作为人的居所,它的功能是抵抗恶劣的天气,帮助人们更好地适应地理和气候条件。而对应于这样的功能需要,草原住宅的形式也相得益彰。它为人们提供了一种亲密而开放的庇护所,处处以人的尺寸和比例做参考,相比于主流建筑,它的天花板更低,显得与人的关系更为亲密。主要房间都坐落在一块厚的石板上,也隔离和降低草原带给人的湿冷,保持一个相对干燥和温暖的居住环境。长长的伸出的屋檐可以在夏日里遮挡烈日,提供荫凉的空间,在主要的使用空间上,窗户一般做到最大化,以得到最好的采光、通风和视野。卧室和一些附属房间比起主要的起居室(客厅、厨房等)较为次要,因此被安排在第二层,同时也更远离了地面可能存在的湿冷之气。主要区域外围是长长的前庭或者阳台,提供了更多的活动的半开放空间。

(图10 - 赖特设计的迈耶住宅及其L形布局)




内容、形式和UI合而为一

      除了上文所说的形式功能法则之外,其实我们可以通过将内容、形式、UI合而为一,进一步的简化我们的设计。内容和UI共存,有时候也会存在矛盾,但是我们应当尽量地在保证产品可用性的基础上,保证内容和UI的质量。UI应当清晰明了地展示内容,让用户即使是“小白”也可以较为轻松地上手。内容和信息通过清晰一致的交互模型,自然而高效地传达给用户。


(图11 - Nest(学习式恒温器)的设计)


      在Nest(学习式恒温器)的设计中,形式和功能优雅地协同合作着。设计者并非将UI元素放置于屏幕上,而是制作了物理形式的UI。通过旋转,可以实现控制温度等其他功能。恒温器的传感器阵列可以不断学习用户的偏好,自动地的一天里不同的时间设置不同的温度。这比之于在屏幕上操作各种复杂按钮,旋钮的操作的方式简单至极,内容、形式和UI也达到了和谐统一。

      信息的层级化是一个很好的方法,通过缩放、移动切换等操作,用户可以到达各个层级,好的交互动画效果,可以让用户获得好的方向感,知道自己刚刚从哪个页面而来,现在要去往哪个页面。同时,如果我们要设计一个手势操作的界面,“可以重新回到原点”也是一个检查交互可行性的标准。


(图12 - Google地图的街景视图)



      Google 地图的街景功能模块也是一个将功能和形式结合得很好的例子。这个app可以让用户在屏幕上以街道的视图级别来查找城市中的某个位置。它呈现出来的形式,即直观的城市街景。用户可以点击屏幕上的街道位置来进行移动,导航到自己想去的位置。内容本身变成了UI,移动、放大等操作自然而然,不需要思考。


(图13 - Clear APP信息分层)



      Clear的例子也很棒,它清晰无缝的结合了形式和功能两方面。它的层级式框架形式,让用户方便的找到自己想要的内容。颜色和动画的相互协调配合,较好的呈现了各个层级之间切换的逻辑和位置关系。比如越靠前、颜色越深的条目,优先级越高。

http://realmacsoftware.com/clear/




五、整体和部分


       赖特认为所有部件(包括各个房间、各个部件、室内、室外、周围环境)与房屋的整体都是密切相关的,而整体反过来也和各个部分息息相关。结构、部件与他们所在的场所、材料、功能之间应当建立一种精神层面、美学层面、物理力学层面上的完美联系。赖特说,欣赏一座建筑,要慢慢走入其中静静体会,因此,他常常将建筑的入口设计的很隐秘。让走近它的人们在步入建筑的正门之前就被建筑产生的空间所环绕,而当他们真正进入正门时,会对这个建筑有更深的理解。例如,约翰逊行政大楼的员工在进入主要入口时需要先围绕建筑绕行一段距离,也是赖特有意为之的。


(图14 - 约翰逊行政大楼的停车棚)




让用户可以在体验了整体之后更好地理解各个部分

      现在,我们常用亲和图和站点图来可视化地组织信息。这些工具也能让我们清晰地理解各个部分之间的关系。我们在为原本杂乱无章的信息进行UI设计的时候,可以从这些工具图整理的结果中找到线索。我们可以像赖特一样,先让观者看到大概建筑整体,在引领他们走入建筑的内部空间慢慢体验,即先让用户看到大体的信息逻辑结构,理解了整体、部分的关系,便能更好的完成操作。

(图15 - 可视化词典)



      上述“可视化词典”的围绕某个单词,生发出它的一系列近义词。如同一个亲和图,相关近义词通过直线连接,不同的颜色表示不同的词性(名词/单词/形容词)。各个词汇作为各个小的“部分”组成了相关的整个体系网络,帮助我们更好地理解各个近义词之间的联系和区别。

      综上所述,遵循赖特的理念,让用户先看到整体结构,对整体和部分之间的关系有所理解之后再帮助他们慢慢理解每一个部分的内容。




六、环境


建筑和周边环境和谐共生

      赖特说过一句很有名的话:“建筑不能直接建在山顶上,而是应当依山而建,顺应地形,山、建筑、树木等顺势相依。”这个理念也渗入到了赖特的众多作品中,其中最有名的例子,当属:流水别墅。建筑的大悬臂,支撑起建筑的主要起居室空间,而悬臂之下,山间的瀑布汩汩而下,建筑本身,似乎成为了山林的一部分。


(图16 - 流水别墅)


      赖特喜欢将建筑的室内外空间相互渗透,玻璃门、窗将室外空间中的光线、空气引入室内。而同时伸出的悬臂结构的室内空间又将室内空间推向室外,和室外的环境静静交融。对材料的运用也恰到好处——自然而粗犷的岩石作为外墙,和山石和瀑布联而为一。不需要精致的人工处理,对材料本身的尊重,让建筑与环境和谐交融浑然一体。



UI设计而言,设计的载体设备就如同建筑的环境/场所

      应用程序是构建在设备上的。所以UI设计和交互方式也要顺应设备本身。除了最大化设备提供的技术,而设备的构成,外观和感觉也作为应用程序设计的重要参考。设备(硬件)和应用程序(软件)应当协同成一个和谐的整体。

      设备本身的众多属性可以深深影响交互模型。 一个设备的形状和将影响用户如何与之交互。例如,在手机上的应用程序(app),就必须把主要导航按钮放在拇指能轻松点击到的位置。设备本身的美学特性,也可能影响UI设计的风格。例如,iOS和Android设备的外形和UI的风格各自在美学上达成了某种契合统一。



七、总结


      赖特称得上是一个伟大的建筑领域的先锋。他的独到理念和随之而创造的建筑杰作,一个世纪以来都对世界建筑的发展产生了巨大影响。作为设计师,我们也能从他的建筑哲学中找到灵感。如同他的建筑,每一个设计细节,都需要服务于某项功能。而理解、尊重并合理利用材料,技术也能最大化的帮助我们创造出好用、有用的东西。

      同时,将形式与功能相结合,把整体与部分的关系整合理清,让软硬件相辅相成达到和谐统一,我们一定能慢慢摸索到创造的新新思路,设计出好用易用又好看的作品。


435

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功