设计好脾气的Web页面

2015-04-03  来源:本站原创  分类:编程  人气:1 

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

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

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

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

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

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

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

设计好脾气的Web页面

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

Web设计中的好脾气

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

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

触控优先

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

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

设计好脾气的Web页面

从某种程度上讲,iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁,它的普及提升了触屏设备UI风格在桌面设备当中的影响力。看看Gmail和Twitter这类主流产品在最近的改版,或是花时间到那些CSS网页设计案例集当中浏览一下最新的优秀作品,你会发现当前的Web设计风格看上去确实和以前不大一样了,它们看上去似乎更加的...丰满。留白更多,按钮更大,一切看上去都又大又平。不过我们也必须承认,这种现象与桌面显示器不断增大的尺寸也有一定的关联。

在这类设计方案当中,界面元素所占据的空间对于鼠标指针来说显得有些许浪费了,但对于手指触控的方式却恰到好处。这也正是“好脾气”的设计思路的核心思想,即为了使界面能够适用于更多的平台环境,而对“标准化”的设计方案进行微调,最终达到一种折中的状态。

设计好脾气的Web页面

而且在很多时候,这种权衡的结果对于键鼠交互方式来说也并不坏。容易被手指触摸的按钮同样易于鼠标的控制,整个UI在传统设备上下文环境当中的用户体验也许反而有所提升。

此外,我们之前的又是为了触屏移动设备而设计一文也可以在触控体验设计方面为大家带来一些参考。

响应式设计方案

市面上有很多关于这个话题的讨论,不过它们大多是围绕着各种相关的开发技术来进行的。其实,“响应化”本身不是目的,我们真正需要的是一种机制,它能够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式。

响应式方案离不开全局化的用户体验设计。正像我们在前文当中提到的,这类方案固然可以在一定程度上帮助我们面向不同的环境调整设计方案,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方通过“好脾气”的设计思路权衡出一种最优的全局化解决之道。在这方面,波士顿环球报(Boston Globe’s)的网站就是一个不错的例子。

设计好脾气的Web页面

各位可以试着使用不同类型的设备来访问这个站点,或是直接在桌面设备中不断调整浏览器窗口的尺寸,以观察页面的响应化调整规则。

响应式策略可以使同一套设计方案适应于各种类型的显示设备,用户甚至可以通过老旧的苹果Newton掌上电脑来浏览波士顿环球报的页面。不过,这不只是前端开发方面的成就,实际上,这种策略所体现出的具有高度适应性的设计思路才是最重要的。

我想,如果我们只需要面向桌面设备进行设计,那么最终的方案应该是更加纯粹的,包括视觉效果及交互体验等方面。毕竟,在这种情况下,我们拥有足够的时间和资源来使一种设计方案尽量趋于完美。一旦要考虑到不同类型的设备环境,我们就必须做出某种程度的权衡,以便“弹奏出全部调式”。

有兴趣的同学不妨参考我们之前的相关文章,对响应式Web设计的概念及实践方式进行深入了解:

移动优先的设计

之前的话题主要偏向于页面的视觉设计。其实,“好脾气”的设计思路同样可以体现在产品设计、用户体验、信息架构等诸多方面。接下来让我们来看看产品设计当中的移动优先策略。

在这个概念里,我们会从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说:

如果一个团队以移动优先为策略原则开展设计工作,其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中,而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。

对这种设计策略进行扩展,使其超越移动体验的范畴,并上升到整个产品的层面,我们就可以在它身上发现很明显的“好脾气”特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。

设计好脾气的Web页面

Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面,更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。

我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的“Home”、“Connect”、“Discover”、“Me”这四个导航标签,从数量上来说正好适用于移动设备的小尺寸屏幕规格,这正体现出了产品的信息架构针对移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到,虽然桌面环境相对于移动设备来说拥有更大的界面显示空间,但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致,只是在整体布局方面进行了调整。可以说,整个桌面版的设计方案在某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。

当心狼

在巴赫平均律之前的自然律体系中,那些不在当前调式当中的音符被弹奏出来的时候,通常会产生一种非常刺耳的效果。当时的音乐家们喜欢将这种情况比喻成狼叫。

借鉴这个凶残的概念,我们可以将用户界面当中那些在某些平台当中适用,但在其他环境中就会破坏产品体验的视觉或交互元素称之为“狼”。当你使用手机浏览Web页面的时候,那些本是为了鼠标指针而设计的难以通过手指准确触摸到的链接,那些微小到几乎无法辨识形状的文字,那些依赖鼠标悬停而触发显示的UI元素...这些都是移动设备上下文环境当中的Web界面之狼。

设计好脾气的Web页面

纽约时报的单篇文章页面中,正文右侧通常是一组分享链接,其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时候,会发现这样的尺寸确实很容易造成误操作,你几乎难以准确地触摸到正确的目标对象。对于这些功能性质的链接单元,最好可以按照苹果在iOS人机界面设计规范当中所要求的那样,在宽度和高度上都至少给到44像素。

对于下图所示的导航结构,移动设备用户普遍表示压力很大。这种下拉菜单形式的UI组件在传统设备当中是非常常见的,但是由于它需要通过鼠标悬停的方式来触发弹出,所以在触屏移动设备当中,这种形式通常无法正常的工作

总结

最后再次强调,虽然响应式设计或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整页面的外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性。我们有必要将按钮或其他一些全局化的界面组件以某种折中的方案进行调整,使页面无论在整体还是细节当中都可以面向不同的设备提供最优且相对一致的体验模式。另外有一个很现实的因素是我们不可以忽视的,即使我们有足够的资源面向不同类型的设备打造具有高度针对性的设计方案,用户在更换设备进行使用的时候同样会将之前的体验转化为潜意识当中的期望而带到另外一个设备当中,所以体验一致性的问题是我们必须认真考虑到的。

  • 触控优先:在尺寸上适合手指触摸的按钮或链接同样适合于鼠标点击,但反之则不然。所以触控优先的设计思路可以确保页面在多数平台当中都能有不错的体验。
  • 响应式设计方案:响应式设计方案够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,不过同时,我们还需要在很多局部的UI元素或模块当中权衡出一种最优的全局化解决之道
  • 移动优先:从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能,使其最终所带来的体验具有高度的任务驱动性的。
  • 留意细节当中的交互方式:要特别留意细节当中的那些不具备跨平台能力的交互模式。其中最常见的一个问题就是触屏设备通常无法支持传统设备当中的鼠标悬停状态。

巴赫相信人们有权利也有能力以他们认为合适的调式来演奏音乐,他通过好脾气的调律法以及基于平均律的伟大音乐集向世人证明了这一点。而我们则希望,无论人们使用哪一类设备,他们都能感知到最佳的产品体验;我们希望自己的网站产品在可用性及可访问性等方面做到最优。

相关文章
  • 设计好脾气的Web页面 2015-04-03

    随着技术的进步,Web设计的理念与技法也在不断发展.设备种类越来越多,带给我们的挑战也越来越大.怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性,这是我们在工作当中必须考虑的问题. 面对这样的挑战,我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感,而另一方面,一直普遍存在的那些旧问题也依然摆在面前.我们是否需要花费全部精力用来解决各种新旧细节问题,还是可以从宏观上寻求一些具有指导性质的"真谛"? Web设计的历史过于短暂,要想弄明白一些大道理,我们不妨将视野

  • ASP中Web页面间的数据传递方式 2013-10-25

    摘要:基于web的动态网页设计必会涉及到页面间的数据传递,文章探讨了asp设计中常用的web页面间的数据传递方式,分析各种数据传递方式的使用方法.使用场合及优缺点,其都是设计阶段选择数据传递方式考虑的关键. 关键词 数据传递变量浏览器端网页 往往使用动态网页技术制作asp应用程序时一般至少拥有二个或二个以上的web页面,这时就得考虑在多个web页面间传递数据的处理工作.而asp应用程序的各个页面类似于windows应用程序的form窗体,windows应用程序各form间数据传递可以通过定义全局

  • CC-lib无线跨平台web页面自动化生成技术的设计实现 2013-11-22

    摘要:前端开发通常需要开发多套web页面代码,从而为不同的移动终端浏览器开发不同的web页面,例如低端手机需使用wml,高端手机则支持html和javascript等.本文介绍了一种跨平台web页面自动化生成技术,该技术利用php设计了一个中间层(CC-lib),可以屏蔽底层的web展示语言的差异,程序运行时动态生成各个UI组件的wml/xhtml/html代码,从而可以有效降低前端开发人员的页面开发维护成本. 关键词:浏览器兼容,跨平台,无线,web前端,自动化生成,CC-lib 技术领域:无

  • 了解WEB页面工具语言XML(二)定义 2014-01-29

    二.XML的定义 XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中.XML保留了SGML的可扩展功能,这使XML从根本上有别于HTML.XML要比HTML强大得多,它不再是固定的标记,而是允许定义数量不限的标记来描述文档中的资料,允许嵌套的信息结构.HTML只是Web显示数据的通用方法,而XML提供了一个直接处理 Web 数据的通用方法.HTML着重描述Web页面的显示格式,而XML着重描述的是Web页面的内容. XML中包括可扩展格式语言XSL(Exte

  • 用JavaScript脚本实现Web页面信息交互 2015-04-17

    要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识. 一.窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为. 1.什么是窗体对象 窗体(Form):它构成了Web页面的基本元素.通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问. <form Name=Form1> <INPUT type=text...> <In

  • 现代Web页面开发流程 2014-01-14

    现代Web页面开发流程 通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式.然后前端的开发人员(在ThoughtWorks我们称之为UI Dev)来手工的将图片转换为对应的HTML+CSS,往往还需要在各个浏览器中调试等. 大多数时候,设计师会提供色卡,或者至少前景色/背景色/高亮色的值给开发人员.如果没有的话,开发人员会用到一些工具如colorpicker,ruler之类来确保最终的效果和设计稿是一致的. 如果你观察过UI D

  • 2010网页设计最新流行趋势 Web Design Trends 2015-01-26

    新的一年已经来临,是时候该辞旧迎新.虽然设计新趋势并不是从新年的第一天开始,但这种转换确实是在在地发生着,从我们渴望的年初到进行总结的年尾.大多数时候这种变化是微妙的.眼下最热潮流的趋势要么完美,要么是重新演绎.潮流趋势帮助我们这些设计师不断进化.对于我们掌握设计美学来说,我们不断地将设计潮流向前推进,并不断探索下一波设计趋势. 先澄清一个事实,在看完这些设计趋势后你会明白是什么意思.虽然这些趋势与2009年的设计趋势相比并没有急剧变化,但是这些趋势会逐步蔓延并且结果会越来越好.如果你想在你的设

  • 10个帮助你处理Web页面层布局的jQuery插件 2012-03-09

    效果很炫,可以借鉴下. 在一些特殊的Web布局设计中,可能当前的 CSS并不能满足我们的Web页面布局需求,这时,优秀的jQeury相关的层布局扩展插件可以及时地帮助我们完成需求的布局,这里是10个非常优秀的 jQeury层布局插件,可以帮助我们更好地完成类似需求. UI.Layout mb.containerPlus css-template-layout Masonry Columnizer jQSlickWrap Equal Heights js-columns Columnize jLa

  • 响应式Web设计(三):响应式Web设计的方法 2013-05-06

    介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的. 首先我们一起来看看Media Queries,这里我只会对其做一个简单的列举介绍.(有兴趣深入的同学可以参考:http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2) 通过媒体查询的设置,我们可以根据屏幕宽度.屏幕方向等

  • web页面内容优化管理与性能技巧 2013-08-15

    日期:2013-8-14 来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我们又回到了过去的窘状.网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速. 图片:控制在合适的尺寸大小 很多时候我们在不同的网站使用同样的图像,例如一个网上商店,所有产品 都 有一个概览图片.打个比方,有三个页面

  • 如何在Web页面上直接打开.编辑.创建Office文档 2013-10-17

    如何在Web页面上直接打开.编辑.创建Office文档 有朋友询问如何在Web页面上做到像SharePoint中的效果一样,能直接激活客户端的Word来打开.doc文件,而不是类似直接点击.doc文档链接时Word在IE中被打开那样.想想这个问题应该很多人都会感兴趣,所以干脆写一篇blog来大致描述一下方法. 在安装Office2003以后,有一个ActiveX控件被安装到了系统中,这个控件位于"Program Files\Microsoft Office\OFFICE11\owssupp.dl

  • 了解WEB页面工具语言XML(一)产生背景 2013-10-31

    一.XML产生的背景 XML同HTML一样,都来自Standard Generalized Markup Language, 即标准通用标记语言,简称SGML.早在Web未发明之前,SGML就早已存在.正如它的名称所言,SGML是一种用标记来描述文档资料的通用语言,它包含了一系列的文档类型定义(简称DTD),DTD 中定义了标记的含义,因而 SGML 的语法是可以扩展的.SGML十分庞大,既不容易学,又不容易使用,在计算机上实现也十分困难.鉴于这些因素,Web的发明者--欧洲核子物理研究中心的研

  • 利用javascript实现web页面中指定区域打印 2013-11-30

    将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容 最近做到了web页面课程表打印时,上网找了一些资料,最后使用了下面的方法实现了我需要的功能.将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 示例代码(代码中有些内容已省略) function preview() { bdhtml = window.document.body.innerHTML; sprn

  • JavaScript将Web页面内容导出到Word及Excel的方法 2013-12-21

    这篇文章主要介绍了JavaScript将Web页面内容导出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JavaScript将Web页面内容导出到Word及Excel的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>WEB页面导出为EXCEL文档的方法 </title> </HEAD> <

  • asp.net的web页面(aspx)数据量过多时提交失败对策 2013-12-25

    asp.net的web页面,数据量过多时提交失败的情况想必有很多朋友都有遇到过吧,下面与大家分享下详细的解决方法 asp.net的web页面,数据量过多是提交失败,对策: web.config文件中,增加 <appSettings> ... <add key="aspnet:MaxHttpCollectionKeys" value="5000" /> ... </appSettings>

  • CSS对Web页面载入效率的影响分析总结 2014-01-18

    我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,因此我们常常关注JavaScript是不是会占用客户端较多的资源,然而大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响. 我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅. 请不要告诉我,你看不懂E文,只是你不愿意看!!! 1.How the style system breaks up rules The style system breaks ru

  • 编写Python脚本使得web页面上的代码高亮显示 2014-01-31

    这篇文章主要介绍了编写Python脚本使得web页面上的代码高亮显示,主要使用了pygments工具,需要的朋友可以参考下 做了一个在线代码高亮的项目,强大的Python一如既往没让我失望,一个强大的Pygments模块可以对多种(很多)语言进行代码高亮 下面来介绍一下它: 首先安装很简单,使用easy_install来进行安装: easy_install pygments 安装完后我们来使用,Python的简单不会让大家失望: from pygments.lexers import Pytho

  • 基于jquery的web页面日期格式化插件 2014-03-19

    基于jquery的web页面日期格式化插件,需要的朋友可以参考下. (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')')

  • web server使用php生成web页面的三种方法总结 2014-08-17

    web server使用php生成web页面的三种方法.需要的朋友可以过来参考下,希望对大家有所帮助 查找mysql_pconnect时在mysql帮助文档上发现的,记在这里. web server使用php生成一个web页面的三式有以下三种: 一:把PHP作为CGI Wrapper.这种方式下,每个到达web server的请求都会导致一个php解析器进程被创建,当这个php页面执行结束时,这个php解析器进程终止. 二:在多进程的web server中,把php作为web server的一个

  • Winform实现抓取web页面内容的方法 2014-08-26

    这篇文章主要介绍了Winform实现抓取web页面内容的方法,代码只有短短几行,但是功能很实用,需要的朋友可以参考下 本文以一个非常简单的实例讲述了Winform实现抓取web页面内容的方法,代码简洁易懂,非常实用!分享给大家供大家参考. 具体实现代码如下: WebRequest request = WebRequest.Create("http://1.bjapp.sinaapp.com/play.php?a=" + PageUrl); WebResponse response =