设计平均律：让网页在各式终端“奏响美妙乐章”!

《设计平均律：让网页在各式终端“奏响美妙乐章”!》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、设计平均律：让网页在各式终端“奏响美妙乐章”！科技在进步，网页设计的技巧也在进步。新的科技带来了新的挑战，因此，我们需要新的解决方案。有时，我们面对崭新的未知领域，实在是毫无经验，只能根据直觉去打造解决方案。而有时，我们在新领域面对的问题有过去的影子，我们可以从历史、别人的经验中找到答案。相对其他设计那漫长而又荣耀的历史，网页设计的历史有限，因此能给出的经验也相对有限，而我们又不得不借鉴这段有限的历史去解决近乎无限的问题。虽然图形设计和视觉传达艺术的经验我们也可以学习。但是网络完全不一样，我们不应该被束缚

2、，因为网络的本质是自由。如果我们能够分析出问题的因和果，分析出问题的组成，那么问题就好解决多了，世界上任何事物都有一定的规律，有章可循，我们可以向一切学习，获取灵感，从而解决问题。即使是音乐和心理学这种不相关的领域，我们也可以从其中找到解决问题的答案。即使是约翰·塞巴斯蒂安·巴赫的乐章，其中也暗藏着迎接挑战的方案。本文我们将进行一次历史的穿越，让那个时代伟大的艺术家巴赫来解决网页设计中的问题——网页设计，该如何适兼容性不尽相同、特性各异的不同设备。推荐阅读：《那些年,我们看过的各种设计理论法则》《你知道网

3、页设计的黄金比例吗？》《这20种平面设计理论你知道吗》巴赫和他的十二平均律1722年，巴赫收集整理了自己的键盘曲集，打算用此来为年轻的音乐家教学。这本曲集包含了48首曲子——从C到B有十二个音，十二种调性，每种调性包含了大调与小调。调式总和为24，而每一个调都写了前奏曲和赋格曲，共计48首。现在成为了西方音乐的主要规范，这是西方音乐史上总重要的作品之一。巴赫将此命名为平均律你要知道巴赫时代的钢琴是古钢琴，和现代钢琴不同，那时候的键盘现在看起来也很非常规。古钢琴的发音原理是：通过羽毛管的拨子拨动金属弦发音，

4、且击弦后立即脱离琴弦的装置，所以无法连续弹奏，一次只能弹一个键。在那样落后的时代，想要将十二个大调弹奏的合调，是很艰难的。因为在巴赫的时代，所使用的调律法节本上是纯律，这很不利于转调。想要改变物理规律很难，但是人类的观察角度却很容易转变。问题：无法和谐的弹奏。原因：1.钢琴物理因素。2.弹奏无法合调。既然物理上改造钢琴很难，所以巴赫换了一种角度来思考，他将问题重新定义，主要致力于“合调”问题的解决。巴赫将8度音程平均分为十二个半音。这样，问题就得以解决。这种折中的、系统性的解决方案被称之为音律。巴赫十二平

5、均律中第一首前奏的开头部分（图像来自：维基百科）这种因巴赫而驰名的、可以用来解决问题的音律系统被称之为十二平均律，今天西方音乐的“均分律”和“平均律”有一些差异，但是他们的目标是一致的：使每个按键略有差异（或者说是略有瑕疵。，这样就能合理利用全键盘。这是音乐上的实用主义。那这跟界面设计有什么关系？网页设计近些年来最令人兴奋的进展是什么？是网页设计对多设备浏览的支持。不再是那种支持多浏览器浏览的小把戏，而是支持不同特性设备浏览：不同的屏幕尺寸，不同的兼容性，不同的使用场景，不同的界面。尽管响应式设计网站以及

6、具有设备针对性的网站能够重新塑造设计，使之符合不同设备上的用户需求。但这并不是万能的办法，有时问题依然会凸显，我们依然要采取最妥当的决定——这时，我们便可以借鉴平均律中的方法，将平均律作为一种隐喻，帮助我们解决设计问题。将这种概念应用到界面设计中也非常简单：为了将优质的用户体验提供给尽可能多的设备，就不得不做出牺牲，个别界面可能会“略有瑕疵”。小小的折中能够使设计的适应面更广，应用更多样化。触摸至上的设计这种折中的设计思维，可以体现在触摸交互界面中，现在它以经扎根于桌面网页设计中了。在触摸交互界面中，手指

7、作为定点设备，它比鼠标的指针大得多，这就需要更大的触摸对象。为了确保可用性，交互元素也需要更大。出于美学的考虑，相应的需要增大内边距和外边距。因为更大的交互元素需要更大的边距来保持一种视觉上的平衡感。Gmail在新设计中采用了很多留白区域，增大了按钮的内边距，非常适合手指操作，尽管这是桌面版的设计。按照以前的思维，触摸交互界面和桌面界面泾渭分明，但iPad的出现以及流行使两者之间的界线变得模糊，iPad为两者“牵线搭桥”。iPad的触摸设计影响了桌面界面设计。可以留意一下最近桌面界面设计的主要作品，诸如G

8、mail，Twitter，以及一些CSS图库，你可以看到网页上的设计开始跟以前略有不同了。似乎元素看起来更…丰满了。更多的留白区域，更大内边距的按钮，总体来说，就是元素更大了。当然，日益增长的桌面屏幕尺寸也是这一现象的原因之一。这种设计，对于鼠标操作来说，可能元素排布不是很紧密，但是却给拇指提供了充足的操作空间，防止了触摸的误操作。允许些许的不完美，以提供更普遍化的用户体验。等等，听起来这论调怎么那么熟悉？没错，这就是界面设计