我生待明日,万事成蹉跎

设计和谐的网页

随着科技的发展,网络设计的艺术性和技巧也在不断发展。新科技创造新挑战,这就要求新的解决方法。我们经常在新的未知领域工作,在那儿,我们需要全新的解决方法,有时,我们会遇到更加普遍的具有历史性的本质问题。

考虑到网络设计历史有限,我们有必要在网络以外的历史领域寻找答案,以应对这些更具挑战性的问题。我们由此常常关注平面设计和视觉艺术的丰富历史。但是我们不应当限制于这些一贯的做法。如果我们可以识别组成这些挑战的抽象因素和模式,我们可以从其他任何领域中找到指引。我们可以研究一些看起来毫不相关的领域,例如心理学和音乐。我们甚至可以研究下关于18世纪早期德国作曲家约翰·塞巴斯蒂安·巴赫的历史片段。

在这篇文章中,我们将会看到巴赫和现代网络——特别是为不同属性和性能的设备做设计遇到的问题—有什么关系。

1772年,巴赫将键盘独奏作品放在一起成书,打算把它做为供那些年轻音乐家练习的曲目合集。这本书包括48篇——为每一个全音和半音都谱了前奏和赋格曲。如今,这本书被认为是西方音乐史上正典的代表作品中最重要的作品之一。巴赫将这本书命名为“平均律钢琴曲”

为了了解这本书在音乐史上的重要性,我们有必要了解,在巴赫所处的时代,认为一个人可以为所有的琴键谱曲是不可能的。这不是一个哲学的问题,而是一个物理性的问题:一个固定宽度的键盘乐器一次只能用有限的键作曲。在那个年代的作曲体系中,用全部的12个音作曲被认为是显然不可能的。

物理定律是难以改变的,但人们的感知是很容易改变的。解决的方法是重新定义“调律”。通过调整特定的音程,使它们稍微偏离原来完美的音调,一个调律体系就被创造出来了,这个调律体系使得人们可以在所有琴键上演奏出和调。牺牲个体品质已达到更完美的整体效果,这被称为平均律

巴赫使这个变化的调律体系变得有名。十二音平均律钢琴曲集,无疑,是“非常协调的乐律”。今天,绝大部分的西方音乐的音调都是基于“平均律”。方法不同,但目标相同:使每个键都稍有缺陷,以便使每个键都被用到,以使整体更加完美。这就像将功利主义应用于声学。

平均律与用户界面设计的关系

也许在过去的几年里,针对多设备进行设计是网络设计领域最令人兴奋的发展。它们不再仅仅关注一个网站在两个不同的浏览器中是否运行正常,而是关注它在特性完全不同的多种设备上的是否运行正常:它们有不同的屏幕尺寸,不同的功能,不同的运用环境,不同的界面。

尽管响应式设计和针对特定网站设计的网页可以帮助我们针对不同体验进行追踪设计。但,仍有些时候,我们不得不做出统一的决策——当我们这样做时,平均律就起作用了。

这个概念在UI(用户界面设计)上的应用是明确的:为了针对一系列设备设计出好的体验,我们不得不允许个别界面出现偶尔的瑕疵。我们不得不做出稍许让步,以保证我们的设计在其他环境中运行良好。

触摸优先设计

一个平均律运用的普通例子是触摸界面在桌面式网站的设计上的应用。

当手指成为操作工具,它比鼠标要大得多,这就要求比鼠标光标需要的更大的触控区域,因此,为了保证可用性,交互式元素就得更大。交互式元素的面积变大,其他元素都需要增大,以维系平衡。这就引出了由更多的留白和填充所引出的美学问题。
新版的Gmail(谷歌邮箱)在按钮处就有大量的留白和额外的填充,尽管这是一款针对桌面的设计,但可以很好的适应触摸界面。

iPad架起了触摸界面和台式桌面设计的联系,随着iPad的流行,加速了触摸界面对台式界面设计的影响。看看现在重新设计的主要界面,例如Gmail和Twitter或者CSS(计算机系统模拟模拟)画廊浏览器,你就会发现网络设计在逐渐变得不同。它们看上去….更丰满。有更多的留白,按键有更多的填充,东西感觉似乎变得更大。当然,其他因素也在起作用,例如台式机屏幕尺寸的持续增大。

这样的结果就是在为手指触摸设计合适的留白的同时,使鼠标有过多的空间。为了使所有可能的体验有更好的支持(系统),我们允许个别体验相较于基准有稍许偏离。

重要的是,这种设计在使UI更加便于触摸操作的同时,也使UI更加便于桌面鼠标的使用者操作。一个便于触摸的按键通常更易于鼠标点击。通过稍微偏离合用性的标准,我们提高了传统桌面操作环境的设计性能并从中获利。
微软Metro风格的设计受到了触摸优先的交互设计的影响。
通过响应式设计达到统一设计的目的

尽管大多数的关于响应式设计的讨论,趋向于集中研究响应能力的技术,但响应能力并非研究本身的目的。这是一种达到目的的方式。响应式设计是为了——支持不同的运行环境,服务于低宽带传输的图片,或者适应于在小屏幕上有更好的布局,也可能是为了在大部分不同的装置上提供统一的操作体验。

搭载响应式设计的火车,我们可以达到统一体验设计的目的地,这就像在倾听平均律的曲子。响应式设计应用最棒最出色的例子就是BostonGlobe网站。
Boston Blobe 网站是响应式设计在大规模网站上应用的一个出色的例子。

这种响应式策略使得一个单一的设计,可以使读者用它来浏览Boston Globe使用的任何设备(甚至是Apple Newton!)。但是,这不仅仅是前端工程师的功劳。配合使用Media queries ,加上JavaScript的魔力,一个简单的可塑性设计也可以适应于这种应用。

这是一种平均律式的设计。简约也许只是一种风格,但单纯的桌面式体验设计或许可以让我们看到更多的东西。优化针对各个单一环境的体验的设计,会有很长一段路要走。因此,设计者需要稍作权衡取舍,创造出可以调试应用于所有可能的环境中的设计——就像可以用所有的12个音演奏。

移动优先设计

前面的例子关注的多是平面设计,平均律的概念可以被应用于产品设计,用户体验、信息结构——几乎其他任何的设计领域。让我们首先来看看产品设计中手机设计的理念。

如果你以移动为优先条件做设计,那么你会经常同平均律式的设计打交道。以移动为出发点,设计出一个满足受移动环境制约要求的产品,你就需要关注这个产品最本质的因素。就像Luke Wroblewski写到的:“因此,当一个设计团队做移动优先设计时,最终的结果是这样一种经验——关注于用户想要完成的关键任务,就没有现如今扰乱台式机访问网站的无关的弯路或界面碎片。这对用户体验和商业都有好处。”当这种设计原则超出手机体验,扩展到重新定义其他所有设计,那么这种设计就起到如平均律一样的作用了。最近Twitter的新版设计(i.e. “New Twitter” or “New new Twitter”)就体现了这个原则。
新版Twitter 采用简洁的设计,在各种设备上有一致体验。

Twitter重新设计的一个目的就是在电脑和手机上给用户一个一致的体验。在外观和感官上获得一致的体验是UI设计的一个挑战,在所有的产品上获得一致的体验则是一个更深层次的挑战。在这些设计中,手机优先设计把我们引向了一条正确的道路。

Twitter新的设计中,我发现一些有趣的东西:移动体验对产品相关的所有设计都产生了影响。例如,除了微博按钮,其余所有的按钮都安排布置在 “Home”、“Connect”、“Discover”和“Me”四个选项卡之下。这是简约化的例子在一个小小屏幕上的完美演绎。这四个项目在选项栏中非常合适。

在桌面网站上,虽然其他特征被加了进去,但依然要延续手机版本中的简约风格,尽管台式机版本有许多空间——清晰,形象——来完成更复杂的设计,但设计应当受到限制并有好的适应性,以保证有一致的多设备体验。

小心狼

在自然音律体系中,在巴赫的音律体系产生之前,当不和谐的音程被同时演奏时,会产生强烈的刺耳的声音。音乐家对此有一个形象的名字,“狼嚎”。

把这种比喻用到界面设计上。我们可以把为某种体验设计的视觉和交互式元素设计用到另一个体验时会在一定程度上崩溃,我们可以将之看作是狼。想想你努力用手指点击一个小的链接,而这个链接是为鼠标设计的,或者是不得不在手机屏幕上阅读字体很小的文章,或者,在一个触摸设备上,使用一个依赖于鼠标点击存在的界面。狼存在于UI设计中。
这篇文章有为鼠标点击的交互式设计的链接。当在手机触摸屏幕上浏览时,它们的稳定性就会受到很大的损坏。

 
New York Magazine提供了便利的,设计优良的下拉菜单——但仅供鼠标使用。
结尾词和实用的建议

响应式设计和特定设备的体验为我们解决许多诸如此类问题提供了一种解决方式。如果我们可以调节一个按钮的尺寸来适应某个特定的环境,那么我们的系统就不必接受迟缓的、全面的治疗。但是我们需要支持的设备数量将会不断增长,适应每一个可能的情景会迅速变得不合理。

即使我们可以在执行水平提供量体裁衣的设计,但平均律的思考方式对于概念水平上的可用性设计仍然具有价值。

另外,仅仅因为我们可以针对特定的体验做量体裁衣的设计并不意味着用户就不希望从一种体验转换到另一种体验。不管我们乐不乐意,这个界限是模糊的。

注意事项

l响应式地思考
即使你不是在使用一个完全的响应式设计,简单的响应式的思考方式对可用的统一的设计有很大的帮助。

l触摸优先地思考

一个为触摸设计的按钮通常也可以用鼠标操作,但一个为鼠标设计的按钮对与手指点击操作来说就太小了。触摸优先的设计可以保证你的网站或应用可以很好的转换到其他运作环境中

l统一地思考
“早测试,常测试”。在你的设计过程中,趁早、经常思考你的设计是否可以在多种设备上发挥功能。

l移动优先思考

开始设计时,重点放在手机用户最关注的是什么。通过关注最本质的特征,设计在不同设备上得到统一的体验就更加容易了。

小心交互习惯,不是所有界面都支持这个习惯。鼠标点击在触摸设备上无法发挥作用。使用者不能用鼠标点击。这并不是说我们不能使用这些,只是我们不得不注意它们的限制性。

结尾

巴赫相信人们应当可以用任何一个他想用的键谱曲,并通过谱写优美的乐曲说服世界统一他的观点。他设计除了他想要的体系。

我们希望我们的用户在任何自己选择的设备商能通过我们的网站和应用来得到最大限度的体验。我们希望我们的产品尽可能的可用、好用。

你将要设计什么?

未经允许不得转载:徐宏涛博客 » 设计和谐的网页

分享到:更多 ()

评论 抢沙发

评论前必须登录!