网站设计心理学与音乐研究:设计好脾气的Web页面

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 11:15 点击:

  感觉已经连续下了九百多天的雨了,身上也仿佛即将生出苔藓与蘑菇。Down your sister's rain...淡定着,说正事儿。本篇译文其实在春节之前就有所着手,不过期间连续看到了几篇更想做的,于是相当没有节操的见异思迁了。今次恰逢母难日,抓紧时间补回来。走起。

  随着技术的进步,Web设计的理念与技法也在不断发展。设备种类越来越多,带给我们的挑战也越来越大。怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性,这是我们在工作当中必须考虑的问题。

  面对这样的挑战,我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感,而另一方面,一直普遍存在的那些旧问题也依然摆在面前。我们是否需要花费全部精力用来解决各种新旧细节问题,还是可以从宏观上寻求一些具有指导性质的“真谛”?

  Web设计的历史过于短暂,要想弄明白一些大道理,我们不妨将视野放远些,让思路跨越设计的范畴。其实,我们真的可以从那些看上去与设计没有多大关联的领域中找到一些抽象化的、更具普遍意义的思路和模式,以帮助我们解决自己的问题。心理学和音乐等都是我们可以加以研究和探索的对象。接下来,就让我们一起了解一下巴赫与当前Web设计所面临的挑战之间的关系。巴赫诶。

  巴赫与“好脾气的克莱维尔”(十二平均律钢琴曲集)

  1722年,巴赫创作了一部包括48首前奏曲与赋格(24个大小调)的钢琴曲集,主要用作培养年轻音乐家的教育素材。这套曲集是西方音乐史中最重要的作品之一,影响极为深远。巴赫本人将它命名为“好脾气的克莱维尔(The Well-Tempered Clavier)”。

  为什么这部曲集具有重大的历史意义呢?要知道,在巴赫所处的那个时代,在键盘乐器上使用全部调式演奏曲目并不是一种很正统的做法。从物理学的角度讲,具有固定音调的键盘乐器一次只能演奏几个特定的调式。对于那个时代的调音系统来说,要在钢琴上弹奏出全部12个调式,几乎是一件不可能的事情。

  物理定律是很难被突破的,但人的感知是可以被改变的,解决方案就是重新定义“合调”的概念。某些音程在被调整之后会与标准的音准产生微小的偏差,从而产生了一个新的调音体系,使人们可以弹奏全部曲调。这种为了构筑更合理的系统而调整其组成要素属性特征的能力,就是一个系统的“脾气”。

  

ui-desgin-user-experience-interactive-music

 

  巴赫的平均律对自然律进行了修正,将八度音程分为十二半音的调律法,以便于转调。这种方式自然可以被称为“好脾气”,它就像是古典音乐中的实用主义。

  Web设计中的好脾气

  Web设计面向的目标设备正在由单一发展为多元,这也许是最近一两年里最令人激动,同时又是最令人焦虑的事情了。这不再是关于样式能否在不同浏览器中保持兼容的问题,我们在新局面下面对的是各种方面的因素:不同的设备、不同的屏幕尺寸、不同的使用环境、不同的系统平台所具有的UI风格等。

  虽然响应式设计(什么是响应式Web设计?)或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方使用“固定”的全局化设计方案。这时,“好脾气”的思路就可以帮上忙了。具体的实践原则很简单明了:为了让设计方案在一系列不同类型的设备中都能产生最好的用户体验,我们需要对界面中一些关键性的UI元素做出不同程度的折中调整,使整个页面对于环境的适应能力更强。

  触控优先

  最近,越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素,这种做法很好地体现出了“好脾气”的设计思路。在触屏移动设备当中,我们需要通过手指对界面当中的交互对象进行直接操作。比起传统的鼠标指针,手指触控方式需要的目标作用区域更大。考虑到这一点,我们应该适度地增大页面当中一些重要交互元素的尺寸;同时,为了保持视觉上的平衡,我们还需要对相关元素之间的间距及它们各自的内边距进行调整。

  举个简单的例子,Google在其新版UI当中明显地增大了“写邮件”按钮这类重要交互元素的尺寸;同时,诸如导航菜单、工具栏、邮件列表等界面元素,在间距留白等方面也有做相应的调整。相比于过去,新版设计方案显著地提升了Google的这些主线产品对于触屏操作的友好性。

  

google-new-ui-gmail-desgin-user-experience-interactive

 

  从某种程度上讲,iPad在触屏移动设备

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • WordPress添加百度喜欢按钮小技巧
      • Wordpress 博客如何实现自定义Gravatar头像
      • 网站设计分析:建立良好的视觉层级
      • 网站设计分析:“中国式设计”的三个方向
      • 案例分析:奥巴马筹款网站的制作过程
      • 创建不平衡的平衡:在网页设计中使用不对称设计
      • 7大主流B2C首页导航栏设计对比分析
      • Wordpress页面模板制作方法及使用
      • css控制文字前的小图标
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1