Be For Web - 网站移动化 http://www.beforweb.com/taxonomy/term/46 en 设计好脾气的Web页面 http://www.beforweb.com/node/41 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-well-tempered-web-interactive-user-experience-interface-design-iphone-ipad-mobile-responsive.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>感觉已经连续下了九百多天的雨了,身上也仿佛即将生出苔藓与蘑菇。Down your sister&#39;s rain...淡定着,说正事儿。本篇译文其实在春节之前就有所着手,不过期间连续看到了几篇更想做的,于是相当没有节操的见异思迁了。今次恰逢母难日,抓紧时间补回来。走起。</p> <p>随着技术的进步,Web设计的理念与技法也在不断发展。设备种类越来越多,带给我们的挑战也越来越大。怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性,这是我们在工作当中必须考虑的问题。</p> <p>面对这样的挑战,我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感,而另一方面,一直普遍存在的那些旧问题也依然摆在面前。我们是否需要花费全部精力用来解决各种新旧细节问题,还是可以从宏观上寻求一些具有指导性质的&ldquo;真谛&rdquo;?</p> <p>Web设计的历史过于短暂,要想弄明白一些大道理,我们不妨将视野放远些,让思路跨越设计的范畴。其实,我们真的可以从那些看上去与设计没有多大关联的领域中找到一些抽象化的、更具普遍意义的思路和模式,以帮助我们解决自己的问题。心理学和音乐等都是我们可以加以研究和探索的对象<a class="eLink" href="http://beforweb.com">。</a>接下来,就让我们一起了解一下巴赫与当前Web设计所面临的挑战之间的关系。巴赫诶。</p> <!--break--><h3> 巴赫与&ldquo;好脾气的克莱维尔&rdquo;(十二平均律钢琴曲集)</h3> <p>1722年,巴赫创作了一部包括48首前奏曲与赋格(24个大小调)的钢琴曲集,主要用作培养年轻音乐家的教育素材。这套曲集是西方音乐史中最重要的作品之一,影响极为深远。巴赫本人将它命名为&ldquo;好脾气的克莱维尔(The Well-Tempered Clavier)&rdquo;。</p> <p>为什么这部曲集具有重大的历史意义呢?要知道,在巴赫所处的那个时代,在键盘乐器上使用全部调式演奏曲目并不是一种很正统的做法。从物理学的角度讲,具有固定音调的键盘乐器一次只能演奏几个特定的调式。对于那个时代的调音系统来说,要在钢琴上弹奏出全部12个调式,几乎是一件不可能的事情。</p> <p>物理定律是很难被突破的,但人的感知是可以被改变的,解决方案就是重新定义&ldquo;合调&rdquo;的概念。某些音程在被调整之后会与标准的音准产生微小的偏差,从而产生了一个新的调音体系,使人们可以弹奏全部曲调。这种为了构筑更合理的系统而调整其组成要素属性特征的能力,就是一个系统的&ldquo;脾气&rdquo;。</p> <p><img alt="ui-desgin-user-experience-interactive-music" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-music.png" style="width: 498px; height: 284px; " /></p> <p>巴赫的平均律对自然律进行了修正,将八度音程分为十二半音的调律法,以便于转调。这种方式自然可以被称为&ldquo;好脾气&rdquo;,它就像是古典音乐中的实用主义。</p> <h3> Web设计中的好脾气</h3> <p>Web设计面向的目标设备正在由单一发展为多元,这也许是最近一两年里最令人激动,同时又是最令人焦虑的事情了。这不再是关于样式能否在不同浏览器中保持兼容的问题,我们在新局面下面对的是各种方面的因素:不同的设备、不同的屏幕尺寸、不同的使用环境、不同的系统平台所具有的UI风格等。</p> <p>虽然响应式设计(<a href="http://beforweb.com/node/6">什么是响应式Web设计?</a>)或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方使用&ldquo;固定&rdquo;的全局化设计方案。这时,&ldquo;好脾气&rdquo;的思路就可以帮上忙了。具体的实践原则很简单明了:为了让设计方案在一系列不同类型的设备中都能产生最好的用户体验,我们需要对界面中一些关键性的UI元素做出不同程度的折中调整,使整个页面对于环境的适应能力更强。</p> <h4> 触控优先</h4> <p>最近,越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素,这种做法很好地体现出了&ldquo;好脾气&rdquo;的设计思路。在触屏移动设备当中,我们需要通过手指对界面当中的交互对象进行直接操作。比起传统的鼠标指针,手指触控方式需要的目标作用区域更大。考虑到这一点,我们应该适度地增大页面当中一些重要交互元素的尺寸;同时,为了保持视觉上的平衡,我们还需要对相关元素之间的间距及它们各自的内边距进行调整。</p> <p>举个简单的例子,Google在其新版UI当中明显地增大了&ldquo;写邮件&rdquo;按钮这类重要交互元素的尺寸;同时,诸如导航菜单、工具栏、邮件列表等界面元素,在间距留白等方面也有做相应的调整。相比于过去,新版设计方案显著地提升了Google的这些主线产品对于触屏操作的友好性。</p> <p><img alt="google-new-ui-gmail-desgin-user-experience-interactive" src="/sites/default/files/images/201203/google-new-ui-gmail-desgin-user-experience-interactive.png" style="width: 498px; height: 353px; " /></p> <p>从某种程度上讲,iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁,它的普及提升了触屏设备UI风格在桌面设备当中的影响力。看看Gmail和Twitter这类主流产品在最近的改版,或是花时间到那些CSS网页设计案例集当中浏览一下最新的优秀作品,你会发现当前的Web设计风格看上去确实和以前不大一样了,它们看上去似乎更加的...丰满。留白更多,按钮更大,一切看上去都又大又平。不过我们也必须承认,这种现象与桌面显示器不断增大的尺寸也有一定的关联。</p> <p>在这类设计方案当中,界面元素所占据的空间对于鼠标指针来说显得有些许浪费了,但对于手指触控的方式却恰到好处。这也正是&ldquo;好脾气&rdquo;的设计思路的核心思想,即为了使界面能够适用于更多的平台环境,而对&ldquo;标准化&rdquo;的设计方案进行微调,最终达到一种折中的状态。</p> <p><img alt="ui-user-experience-interactive-windows-8-metro-touch" src="/sites/default/files/images/201203/ui-user-experience-interactive-windows-8-metro-touch.jpg" style="width: 500px; height: 272px; " /></p> <p>而且在很多时候,这种权衡的结果对于键鼠交互方式来说也并不坏。容易被手指触摸的按钮同样易于鼠标的控制,整个UI在传统设备上下文环境当中的用户体验也许反而有所提升。</p> <p>此外,我们之前的<a href="http://beforweb.com/node/49">又是为了触屏移动设备而设计</a>一文也可以在触控体验设计方面为大家带来一些参考。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 响应式设计方案</h4> <p>市面上有很多关于这个话题的讨论,不过它们大多是围绕着各种相关的开发技术来进行的。其实,&ldquo;响应化&rdquo;本身不是目的,我们真正需要的是一种机制,它能够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式。</p> <p>响应式方案离不开全局化的用户体验设计。正像我们在前文当中提到的,这类方案固然可以在一定程度上帮助我们面向不同的环境调整设计方案,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方通过&ldquo;好脾气&rdquo;的设计思路权衡出一种最优的全局化解决之道。在这方面,<a href="http://www.bostonglobe.com/">波士顿环球报(Boston Globe&rsquo;s)的网站</a>就是一个不错的例子。</p> <p><img alt="ui-user-experience-interactive-responsive-solution-boston-globe" src="/sites/default/files/images/201203/ui-user-experience-interactive-responsive-solution-boston-globe.jpg" style="width: 498px; height: 322px; " /></p> <p>各位可以试着使用不同类型的设备来访问这个站点,或是直接在桌面设备中不断调整浏览器窗口的尺寸,以观察页面的响应化调整规则。</p> <p>响应式策略可以使同一套设计方案适应于各种类型的显示设备,用户甚至可以通过老旧的苹果Newton掌上电脑来浏览波士顿环球报的页面。不过,这不只是前端开发方面的成就,实际上,这种策略所体现出的具有高度适应性的设计思路才是最重要的。</p> <p>我想,如果我们只需要面向桌面设备进行设计,那么最终的方案应该是更加纯粹的,包括视觉效果及交互体验等方面。毕竟,在这种情况下,我们拥有足够的时间和资源来使一种设计方案尽量趋于完美。一旦要考虑到不同类型的设备环境,我们就必须做出某种程度的权衡,以便&ldquo;弹奏出全部调式&rdquo;。</p> <p>有兴趣的同学不妨参考我们之前的相关文章,对响应式Web设计的概念及实践方式进行深入了解:</p> <ul> <li> <a href="http://beforweb.com/node/6">什么是响应式Web设计?怎样进行?</a></li> <li> <a href="http://beforweb.com/node/7">通过CSS3 Media Query实现响应式Web设计</a></li> <li> <a href="http://beforweb.com/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a></li> <li> <a href="http://beforweb.com/node/21">案例学习 - 响应式网站的产品需求和设计流程详解</a></li> </ul> <div class="embed"><article id="node-259" class="node node-related-books" about="/node/259" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计实践" src="http://beforweb.com/sites/default/files/images/products/02.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计实践</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"> 本书结合理论与实践,辅以大量配图、注释和引用,详尽介绍了如何结合使用流动布局、媒介查询和流动媒介来构建响应式网页;如何从项目一开始就采用响应式的工作流程;如何为不同的设备强化内容;如何使用功能检测和服务器端检测来提供更好的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 移动优先的设计</h4> <p>之前的话题主要偏向于页面的视觉设计。其实,&ldquo;好脾气&rdquo;的设计思路同样可以体现在产品设计、用户体验、信息架构等诸多方面。接下来让我们来看看产品设计当中的移动优先策略。</p> <p>在这个概念里,我们会从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说:</p> <blockquote><p>如果一个团队以移动优先为策略原则开展设计工作,其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中,而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。</p> </blockquote> <p>对这种设计策略进行扩展,使其超越移动体验的范畴,并上升到整个产品的层面,我们就可以在它身上发现很明显的&ldquo;好脾气&rdquo;特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。</p> <p><img alt="ui-desgin-user-experience-interactive-new-twitter-design" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-twitter-design.jpg" style="width: 500px; height: 406px; " /></p> <p>Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面,更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。</p> <p>我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的&ldquo;Home&rdquo;、&ldquo;Connect&rdquo;、&ldquo;Discover&rdquo;、&ldquo;Me&rdquo;这四个导航标签,从数量上来说正好适用于移动设备的小尺寸屏幕规格,这正体现出了产品的信息架构针对移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到,虽然桌面环境相对于移动设备来说拥有更大的界面显示空间,但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致,只是在整体布局方面进行了调整。可以说,整个桌面版的设计方案在某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。</p> <div class="embed"><article id="node-271" class="node node-related-books" about="/node/271" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:移动Web设计精髓" src="http://beforweb.com/sites/default/files/images/products/15.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:移动Web设计精髓</a></h4> <p><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容涵盖移动Web开发的趋势、如何建立一个移动网站、iPhone和iPad的网络应用发展、应用开发的趋势和误区、iPad应用开发要点、如何制作移动Web应用、移动设备的形式、如何推销你的移动应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 当心狼</h4> <p>在巴赫平均律之前的自然律体系中,那些不在当前调式当中的音符被弹奏出来的时候,通常会产生一种非常刺耳的效果。当时的音乐家们喜欢将这种情况比喻成狼叫。</p> <p>借鉴这个凶残的概念,我们可以将用户界面当中那些在某些平台当中适用,但在其他环境中就会破坏产品体验的视觉或交互元素称之为&ldquo;狼&rdquo;。当你使用手机浏览Web页面的时候,那些本是为了鼠标指针而设计的难以通过手指准确触摸到的链接,那些微小到几乎无法辨识形状的文字,那些依赖鼠标悬停而触发显示的UI元素...这些都是移动设备上下文环境当中的Web界面之狼。</p> <p><img alt="ui-desgin-user-experience-interactive-new-twitter-design-nytimes-touch-wolf" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-twitter-design-nytimes-touch-wolf.png" style="width: 498px; height: 373px;" /></p> <p>纽约时报的单篇文章页面中,正文右侧通常是一组分享链接,其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时候,会发现这样的尺寸确实很容易造成误操作,你几乎难以准确地触摸到正确的目标对象。对于这些功能性质的链接单元,最好可以按照苹果在iOS人机界面设计规范当中所要求的那样,在宽度和高度上都至少给到44像素。</p> <p>对于下图所示的导航结构,移动设备用户普遍表示压力很大。这种下拉菜单形式的UI组件在传统设备当中是非常常见的,但是由于它需要通过鼠标悬停的方式来触发弹出,所以在触屏移动设备当中,这种形式通常无法正常的工作<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="ui-desgin-user-experience-interactive-new-york-times-navigation" src="/sites/default/files/images/201203/ui-desgin-user-experience-interactive-new-york-times-navigation.jpg" style="width: 498px; height: 358px;" /></p> <h3> 总结</h3> <p>最后再次强调,虽然响应式设计或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整页面的外观形式及体验方式,但不是所有的UI元素或模块都可以被赋予弹性。我们有必要将按钮或其他一些全局化的界面组件以某种折中的方案进行调整,使页面无论在整体还是细节当中都可以面向不同的设备提供最优且相对一致的体验模式。另外有一个很现实的因素是我们不可以忽视的,即使我们有足够的资源面向不同类型的设备打造具有高度针对性的设计方案,用户在更换设备进行使用的时候同样会将之前的体验转化为潜意识当中的期望而带到另外一个设备当中,所以体验一致性的问题是我们必须认真考虑到的。</p> <ul> <li> <strong>触控优先</strong>:在尺寸上适合手指触摸的按钮或链接同样适合于鼠标点击,但反之则不然。所以触控优先的设计思路可以确保页面在多数平台当中都能有不错的体验。</li> <li> <strong>响应式设计方案</strong>:响应式设计方案够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,不过同时,我们还需要在很多局部的UI元素或模块当中权衡出一种最优的全局化解决之道</li> <li> <strong>移动优先</strong>:从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能,使其最终所带来的体验具有高度的任务驱动性的。</li> <li> <strong>留意细节当中的交互方式</strong>:要特别留意细节当中的那些不具备跨平台能力的交互模式。其中最常见的一个问题就是触屏设备通常无法支持传统设备当中的鼠标悬停状态。</li> </ul> <p>巴赫相信人们有权利也有能力以他们认为合适的调式来演奏音乐,他通过好脾气的调律法以及基于平均律的伟大音乐集向世人证明了这一点。而我们则希望,无论人们使用哪一类设备,他们都能感知到最佳的产品体验;我们希望自己的网站产品在可用性及可访问性等方面做到最优。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Wed, 07 Mar 2012 06:26:10 +0000 C7210 41 at http://www.beforweb.com http://www.beforweb.com/node/41#comments 网站产品移动化的用户体验设计思路浅析 http://www.beforweb.com/node/32 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-mobile-website-application-user-experience-ux-design-m.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>又是到处流淌着阳光的周末。让人忙碌和揪心的一件件事依然在继续。想到之前在微博上看到的一句话,大致是这么说的:&ldquo;最终一切都会好的;如果还没好起来,那就是还没有到最后...&rdquo;。今天的内容发掉之后,继续收拾家当;最好呢,这两天可以再抽时间搞些字出来,接下来的几篇候选文章还是不错的样子。大约10天之后搬家,所以下个周末能否如期更新就看前面几天的造化了。</p> <p>说正事儿,今天的小译文相对务虚,原文作者浅谈了一些关于移动化产品在用户体验设计方面需要注意的问题,值得思考和借鉴;话题中有待深入探讨的空间还不小,全当抛砖引玉,强烈欢迎各位朋友通过<a href="http://beforweb.com/node/32#comment-form">评论</a>提出您的看法。走着。</p> <p>对于移动化产品(移动版本的站点、Web应用等)的用户体验设计,我们会习惯性的将更多注意力放在&ldquo;动&rdquo;的方面。回想一下自己是否经常会幻想这样的情景:用户正走在上下班的路上,或是在等车,或是挤在地铁上...他们掏出手机很匆忙的上上网或是摆弄摆弄app,然后继续奔波。</p> <p>现实中,用户对移动产品的使用情景以及体验需求,其实早已超出简单的&ldquo;动&rdquo;的范畴;另外,随着平板电脑的普及,需求的种类也在不断的扩大和发展。作为用户体验设计相关人员,我们会发现,曾经惯用的一些小伎俩,比如简单的缩放功能或是更容易触控的大按钮等,已经无法满足用户更深层次的体验需求了<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>移动设备、应用及移动互联网的发展脚步仍在日益加快,在这种局面中,我们怎样才能让自己的Web产品在移动化方面的表现更好的满足用户的诉求与期望呢?</p> <h3> 了解用户的实际需求</h3> <p>不能否认,设想用户在一种繁忙的状态下尽量抽时间访问网站或使用应用的做法并不是没有意义的;&ldquo;高效&rdquo;和&ldquo;易用&rdquo;仍然是移动产品的重要成功要素。不过,&ldquo;动&rdquo;只是一个方面;一个越发明显的趋势是,用户会越来越多的像使用台式机或笔记本那样,在家中或是其他相对安静稳定的环境中使用移动设备。随着移动互联网和移动应用在功能、设计、体验等方面的日渐成熟和易用,人们会越发习惯于使用移动设备完成目标,解决需求。</p> <p>从应用软件,到用户需求,到市场发展,整个移动领域已经打破了几年前那种单调乏味的束缚。移动产品的用户体验设计工作的重要程度已经和传统桌面设备领域中的不分伯仲;我们势必要更加用心的了解用户,理解他们在不同情景中的行为习惯,以及对应的多种方面的需求。</p> <h3> 了解设备的功能特性</h3> <p>在进行移动产品相关的用户体验设计工作时,我们需要时刻牢记在头脑中的,就是用来运行该应用的设备平台本身的功能特性。通常,屏幕类型是第一个需要关注的方面;通过用户调研,我们可以事先对产品的目标用户群的设备使用情况做到预估。举例说,黑莓用户更习惯鼠标风格的控制方式,对于这种交互方式来说,按钮或链接的悬停状态样式是有意义的,而iPhone类的触屏手机则不然。</p> <p>设备的性能与速度也是与用户体验相关的重要功能要素。大家都知道,在传统的Web行业中,页面加载速度会在很大程度上影响产品的用户体验与SEO;对于移动设备来说,这方面的因素变的更加重要,因为用户对于移动设备的性能与速度的敏感度要高于桌面设备。如果一个移动版站点或是Web应用的加载和响应速度过于迟缓,用户会很容易&ldquo;武断&rdquo;的认为该产品根本无法正常的工作,或是归罪于自己的网络链接方面的问题而放弃。页面或应用界面中过于丰满的内容和功能会导致设备在内存等方面的资源吃紧,加载时间也会相应增加。然而,这些显而易见的问题往往会在实际的产品设计过程中被忽视或搁置。</p> <h3> 对内容结构和页面长度的控制</h3> <p>传统桌面版的网站,绝大多数仍是通过不同的页面来体现网站结构。相比之下,移动设备则比较欢迎内容更集中、页面更少更长的结构与呈现方式;尤其是对于触屏手机来说,滚动页面的操作方式比基于键鼠的桌面设备来的要容易的多。</p> <p>不过这并不意味着所有的内容都应该被一股脑的呈现在一个页面中,否则对用户来说,体验将会变得非常糟糕&mdash;&mdash;用手指拖拽页面进行滚屏的交互方式虽然很来感,但过于频繁的话,则会挑战用户的耐心。我们应该花些心思考虑一下怎样以更巧妙的、交互性和控制性更强方式来进行输出,例如采用下拉菜单或手风琴风格的&ldquo;展开 / 收起&rdquo;列表等UI模式,通过JavaScript的配合,将内容按照合理的优先级组织起来。</p> <h3> 清晰、简洁、易跟随的功能流程</h3> <p><a href="http://www.useit.com/jakob/">Jakob Nielsen老师</a>一直站在信息架构革新的最前沿。他在2008年提出的<a href="http://www.useit.com/alertbox/interaction-elasticity.html">弹性交互理论</a>(interaction elasticity theory)对移动领域的用户体验设计产生了重要的影响。</p> <p><!--简单的说,该理论认为,清晰、简洁、易跟随的功能流程会对用户体验带来最大的优化作用;操作步骤并非越少越好,对流程的刻意简化,反而会使产品功能变的难以理解,甚至增加操作的复杂度。--></p> <p>简单的说,该理论认为,清晰、简洁、易跟随的功能流程会对用户体验带来最大的优化作用。如今,传统Web用户似乎已经习惯了复杂的网站架构、导航系统以及操作流程,但这些并不适用于移动版本站点或Web应用。对于用户体验设计人员来说,要在移动化产品的设计中时刻遵循并实践这一理论,以保持功能流程尽量简短,并且易于聚焦和跟随,让用户快捷的获取信息、完成目标&mdash;&mdash;这些远没有理论本身看上去那么简单。整个&ldquo;简化&rdquo;过程也许需要很多相关部门的参与配合,尤其对于已有产品的移动化重设计项目而言。</p> <h3> 避免功能和内容的缩水</h3> <p>移动版的站点或应用,绝不应该是普通桌面版产品的缩水版,无论在是功能还是用户体验等方面。但是我们可以在不少移动版产品中发现,为了减小文件尺寸,加快下载速度,内容中的很多图片、视频、甚至文案本身都被删除或简化了,只剩下一些最基本的信息。</p> <p>对于那些经过认真调研和设计的桌面版网站产品来说,有很多&ldquo;非必要&rdquo;的内容或页面元素,往往是出于增进内容多样性或提升易用性等方面的原因而存在的;在移动版的产品中,这些元素是否有必要存在,还要视具体情况而定。更加合理的做法是基于自己的产品对这些内容和视觉元素进行优先级判断,并在尺寸规格、布局结构等方面重新规划,专门针对移动设备进行响应式的调整,而不是一味的将它们抹掉。</p> <p>在这方面的一些具体的实施策略和方法,可以参考我们之前关于<a href="http://beforweb.com/node/6">响应式设计的概念、组成要素、基本实现思路</a>以及<a href="http://beforweb.com/node/7">怎样通过CSS3 Media Query实现响应式Web设计</a>的文章。</p> <h3> 移动化的未来</h3> <p>在移动领域,无论是用户的数量与成熟度,还是设备本身拥有的技术和功能,都在持续快速的增长和发展。市面上出现了越来越多类似<a href="http://jquerymobile.com/">jQuery Mobile</a>这样的前端开发框架,用以帮助传统Web领域的设计师和开发者打造与本地客户端在UI与交互风格上非常接近的Web应用或混合型应用。(相关话题,可以参考阅读我们之前的文章,包括<a href="http://beforweb.com/node/22">前端开发者的跨平台移动应用开发策略及工具</a>和<a href="http://beforweb.com/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a>)</p> <p>如今的用户,多数已经脱离了&ldquo;我用移动设备,因为这很酷&rdquo;的幼稚阶段,他们在设备和应用方面的见解以及对技术的了解程度越来越高,同时,对糟糕的用户体验的容忍程度也越来越低。我们曾经了解和习惯的那些用于提升传统Web产品用户体验的原则方法,有很多同样适用于移动领域<a class="eLink" href="http://beforweb.com">。</a>对于移动版的网站产品,不可以仅仅从&ldquo;移动&rdquo;的角度进行简单而盲目的&ldquo;优化&rdquo;&mdash;&mdash;站在用户体验的角度,移动版需要我们思考和投入的,甚至会超过桌面版产品。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sat, 17 Dec 2011 04:23:33 +0000 C7210 32 at http://www.beforweb.com http://www.beforweb.com/node/32#comments Foundation框架 - 快速创建跨平台的网站页面原型 http://www.beforweb.com/node/23 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-foundation-prototype-framework-responsive-multiple-device.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。</p> <p>独白终了,进入正题。最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些<a href="/node/22">用于移动应用开发的前端框架工具</a>;今天这篇的立足点偏向设计开发流程的上游,它将向我们展示<strong class="ePoint">怎样使用Foundation</strong><strong class="ePoint">框架</strong><strong class="ePoint">快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型</strong>。下面开始正文部分。</p> <p>开门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:</p> <ul> <li> 每天,人们用来上网的设备种类和数量都在不断上升。</li> <li> 为每种设备设计开发不同的界面是不可能的。</li> <li> 即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。</li> </ul> <p>真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p>如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。这就是我们(英文原文作者的团队)开发<a href="http://foundation.zurb.com/">Foundation</a>框架的原因。</p> <p>Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。(关于响应式Web设计,可以参考我们之前的几篇文章,包括<a href="/node/6">响应式设计的概念、组成要素及基本实现思路</a>,<a href="/node/7">怎样通过CSS3 Media Query实现响应式Web设计</a>,以及相关的<a href="/node/21">产品需求和设计流程案例学习</a>)</p> <p>接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!</p> <h3> 资源概览</h3> <p>首先到<a href="http://foundation.zurb.com">foundation.zurb.com</a>下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:</p> <ul> <li> index.html - 我们将从这里开始创建第一个页面。</li> <li> javascripts和stylesheets路径 - 主要的静态资源文件,包括jQuery及所需的样式表。</li> <li> humans.txt和robots.txt - 里面的代码算是不错的样板,有空的时候可以溜几眼。</li> </ul> <p>JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:</p> <ul> <li> global.css - 全局基础样式表,包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。</li> <li> ui.css - 用来对那些组成原型的常规UI元素进行样式定义。</li> <li> mobile.css - 负责移动设备方面的样式,涉及响应式的样式定义都在这里。</li> </ul> <p>分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-multiple-device.png" rel="lightbox"><img alt="foundation-prototype-framework-responsive-multiple-device" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-multiple-device.png" style="width: 500px; height: 383px; " /></a></p> <p>接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。</p> <h3> 网格系统</h3> <p>首先来简单看看global.css中的网格系统。如果你熟悉<a href="http://960.gs/">960网格系统</a>或是<a href="http://blueprintcss.org/">Blueprint CSS框架</a>,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot; id=&quot;mainContent&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot; id=&quot;sidebarContent&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。</p> <p>行容器拥有一个固定的最大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。</p> <p>列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器<a class="eLink" href="http://beforweb.com">。</a>上面的代码中,我们创建的是典型的&ldquo;内容+侧边栏&rdquo;布局,宽度分别为全宽的2/3和1/3。</p> <p>网格布局可以进行嵌套:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>Foundation官网中有一些<a href="http://foundation.zurb.com/grid.php">布局范例</a>可以参考。</p> <div class="embed"><article id="node-260" class="node node-related-books" about="/node/260" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/03.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">HTML5移动Web开发实战</a></h4> <p><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书从移动Web、设备端配置和优化、交互、响应式设计、设备访问,调试、性能、富媒体等角度出发,包含了60多个实例,详细阐释了如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、Windows Phone和BlackBerry等众多主流移动应用平台...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 快速创建原型</h3> <p>开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型;整个过程包括两部分:使用Foundation快速创建基础原型,以及为不同类型的设备进行移动化处理。首先来看第一部分。</p> <p>最好拿起纸和笔,在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图:</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch.jpg" rel="lightbox"><img alt="foundation-prototype-framework-responsive-sketch" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch.jpg" style="width: 500px; height: 539px; " /></a></p> <p>可以看到,首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面,我们可以用到一些Foundation自带的布局结构,以及一个不错的外部服务。</p> <ul> <li> 页面整体布局方面,使用前面介绍过的网格系统。</li> <li> 全局主导航使用Foundation预设的tab结构。</li> <li> 对于每个图文单元中的图片,我们使用<a href="http://placehold.it/">placehold.it</a>提供的服务。它会按照指定的比例输出可以填满容器的示范内容,包括用来占位的图片,以及可以自定义的文案等。</li> </ul> <p>OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5,所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构,所以我们还要为它添加class=&quot;row&quot;。代码如下:</p> <pre class="brush:xml;"> &lt;div class=&quot;container&quot;&gt; &lt;header class=&quot;row&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>可以看到,在外部容器container中,我们将header作为完整的一行,其中放置了三列,宽度方面是1:4:1的关系。在第一列和第三列中,我们使用了placehold.it提供的占位图片,用来表示logo等元素。在第二列中,我们使用h1标签作为网站标题的容器,副标题则使用h5。</p> <p>接下来是导航。我们要使用Foundation预设的tab形式;代码结构如下:</p> <pre class="brush:xml;"> &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>虽然在这一行中只有一套导航元素,但是我们仍然需要将导航元素列表dl放置在一个列容器中,并且将这个列容器设置为12列全宽,否则布局将出现问题。</p> <p>对于页面其他部分的内容,基本方式是类似的,我们将会用到网格系统、一些基本的元素、以及Foundation自带的UI组件。下面是页面剩余部分的HTML代码:</p> <pre class="brush:xml;"> &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;img src=&quot;http://placehold.it/800x340&quot; /&gt; &lt;h3&gt;&lt;a href=&quot;#&quot;&gt;Llamas: Great Pets or the Best Pets?&lt;/a&gt;&lt;/h3&gt; &lt;p&gt;Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!&lt;/p&gt; &lt;a href=&quot;#&quot; class=&quot;small radius nice blue button&quot;&gt;Read More &amp;rarr;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;four columns&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;five columns&quot;&gt; &lt;img src=&quot;http://placehold.it/120x100&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;seven columns&quot;&gt; &lt;h5&gt;&lt;a href=&quot;&quot;&gt;Alpaca Farm Closed&lt;/a&gt;&lt;/h5&gt; &lt;p&gt;Anthony Tadina reports on this tragic closing.&lt;br /&gt;&lt;a href=&quot;#&quot;&gt;Read More &amp;rarr;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; ... [repeat this row twice more] &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;hr /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;three columns&quot;&gt; &lt;img src=&quot;http://placehold.it/260x190&quot; /&gt; &lt;h5&gt;&lt;a href=&quot;#&quot;&gt;Feature 1&lt;/a&gt;&lt;/h5&gt; &lt;p&gt;Description&lt;br /&gt;&lt;a href=&quot;#&quot;&gt;Read More &amp;rarr;&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; ... [repeat this column 3 more times] &lt;/div&gt; &lt;footer class=&quot;row&quot;&gt; &lt;div class=&quot;seven columns&quot;&gt; &lt;p&gt;&lt;strong&gt;The Foundation Times&lt;/strong&gt;&lt;br /&gt;&amp;copy; 2025 no rights reserved.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;five columns&quot;&gt; &lt;p&gt;&lt;a href=&quot;#&quot;&gt;All News&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/footer&gt;</pre><p>我们可以看到,HTML原型中每个部分的代码结构其实都是相当基础和简单的。需要注意的是class中带有&ldquo;button&rdquo;的元素,这些是Foundation预设的按钮,包括几种不同的风格样式。我们可以用这样的方式将a标签或是button类型的input元素定义为风格化按钮,并通过&ldquo;small&rdquo;、&ldquo;radius&rdquo;等class为其设置具体的样式:</p> <ul> <li> <strong>small</strong>或<strong>large</strong> - 可选;控制按钮的尺寸;如果不做设置,默认将为中等尺寸。</li> <li> <strong>radius</strong> -&nbsp;可选;为按钮增加几像素的圆角效果。该值还可以是<strong>round</strong>,样式为左右两侧完全圆弧。不做设置时,默认样式是矩形。</li> <li> <strong>nice</strong> - 可选;添加少许高光等细节效果。</li> <li> <strong>blue</strong> - 可选;设置颜色;该值还可以是<strong>red</strong>、<strong>black</strong>、<strong>grey</strong>,或是在样式表中进行过自定义的任何名称。</li> <li> <strong>button</strong> - 唯一的必要class,用来将元素格式化为按钮。</li> </ul> <p>通过这样一些很基本的HTML代码,我们就已经创建好了基础版本的原型;当前的实际效果如下图所示。</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-homepage-basic.jpg" rel="lightbox"><img alt="foundation-prototype-framework-homepage-basic" src="/sites/default/files/images/201111/foundation-prototype-framework-homepage-basic.jpg" style="width: 500px; height: 359px; " /></a></p> <p>如果仅仅需要为桌面设备制作页面原型,那么到这里我们的任务就已经完成了。不过在本次实例中,我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容,实现跨平台<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-271" class="node node-related-books" about="/node/271" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:移动Web设计精髓" src="http://beforweb.com/sites/default/files/images/products/15.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:移动Web设计精髓</a></h4> <p><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容涵盖移动Web开发的趋势、如何建立一个移动网站、iPhone和iPad的网络应用发展、应用开发的趋势和误区、iPad应用开发要点、如何制作移动Web应用、移动设备的形式、如何推销你的移动应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 移动化</h3> <p>用户使用移动设备访问网站时,期望会有所不同。对于眼前这个内容类网站,我们希望用户在使用移动设备进行访问的时候,可以在首屏直接看到主要内容部分。移动设备用户在浏览网页时,很厌恶的一点就是,在忍受了网站页头和全局导航的加载过程之后,仍然无法立刻看到主要内容。(关于在移动设备中,网站内容呈现方式的策略,可以参考我们之前关于<a href="/node/21">响应式网站产品需求及设计流程</a>方面的文章)</p> <p>在不做任何移动化处理之前,我们的原型在小屏幕移动设备中的呈现方式如下图所示:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-default" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-default.jpg" style="width: 380px; height: 744px; " /></p> <p>首屏中,我们只能看到logo、网站标题等与主要内容、全局导航无关的元素。真心不靠谱。我们接下来要使用一些Foundation提供的的专门用来处理不同设备视图的class,让原型中某些元素在小屏幕移动设备中发生变化。</p> <p>当前,我们的基础版页面原型中,header部分的代码是这样的:</p> <pre class="brush:xml;"> &lt;header class=&quot;row&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>添加了移动化的class之后:</p> <pre class="brush:xml;"> &lt;header class=&quot;row hide-on-phones&quot;&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;eight columns&quot;&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;div class=&quot;two columns&quot;&gt; &lt;img src=&quot;http://placehold.it/200x120&quot; /&gt; &lt;/div&gt; &lt;/header&gt; &lt;header class=&quot;row show-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;img src=&quot;http://placehold.it/480x100&quot; /&gt; &lt;h1 class=&quot;centered&quot;&gt;The Foundation Times&lt;/h1&gt; &lt;h5 class=&quot;centered&quot;&gt;December 1, 2011&lt;/h5&gt; &lt;/div&gt; &lt;/header&gt;</pre><p>重点在于两个新的class,一个是<strong>hide-on-phones</strong>,另外一个是<strong>show-on-phones</strong>。顾名思义,它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class,用来根据不同类型的设备,响应式的调整页面元素的呈现方式。</p> <p>现在,当使用手机浏览页面原型时,只有第二个简化的header会显示出来。接下来,我们为这个移动版本的header写几行样式:</p> <pre class="brush:css;"> h1.centered { text-align: center; margin-bottom: 0; } h5.centered { text-align: center; } .show-on-phones h1.centered { font-size: 24px; font-size: 2.4rem; } .show-on-phones h5.centered { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }</pre><p>来看看到目前的成果:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-header" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-header.jpg" style="width: 380px; height: 744px; " /></p> <p>好多了。现在的问题是,导航项在小屏幕中显得太多了,布局发生了错乱。一个常见的解决方案是,对手机设备,将导航移至页面底部。当然,我们并不是要真的移动它,而是像前面那样设置不同的显示规则。对于目前的全局导航,在class中增加一个hide-on-phones:</p> <pre class="brush:xml;"> &lt;div class=&quot;row hide-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>接下来,在页面底部,footer之前,添加一个新的导航;HTML结构与头部的全局导航基本一致:</p> <pre class="brush:xml;"> &lt;div class=&quot;row show-on-phones&quot;&gt; &lt;div class=&quot;twelve columns&quot;&gt; &lt;dl class=&quot;tabs mobile&quot;&gt; &lt;dd&gt;&lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;All News&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Llamas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Alpacas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Vicunas&lt;/a&gt;&lt;/dd&gt; &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Other Dromedaries&lt;/a&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/div&gt;</pre><p>区别在于两点:一是在容器的class中使用了show-on-phones,使该导航只在手机中显示;另外,在导航列表的class里增加了一个&ldquo;<strong>mobile</strong>&rdquo;,这样可以使每个导航tab都成为全宽,整个导航将成为一个纵向列表<a class="eLink" href="http://beforweb.com">。</a></p> <p>现在,我们的原型在手机中的首屏效果是这样的:</p> <p><img alt="foundation-prototype-framework-mobile-iphone-content" src="/sites/default/files/images/201111/foundation-prototype-framework-mobile-iphone-content.jpg" style="width: 380px; height: 744px; " /></p> <p>基于网格系统,编写了少量的高语义化HTML代码,配合Foundation原生提供的一些样式工具class,我们已经创建出了可以用来进行跨平台演示和测试的首页原型。</p> <div class="embed"><article id="node-292" class="node node-related-books" about="/node/292" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="深入浅出Mobile Web(中文版)" src="http://beforweb.com/sites/default/files/images/products/37.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">深入浅出Mobile Web(中文版)</a></h4> <p><a href="http://www.amazon.cn/深入浅出Mobile-Web-加德纳/dp/B00DGM8I9Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何使用你熟悉的Web技术建立网站和应用,可以在各种任意大小的设备上工作。把你的HTML、Javascript和CSS技术派上用场,然后优化你的网站,让它在要求很高的移动市场中有最出色的表现...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 自己试试看</h3> <p>接下来,你可以按照我们前面的方法,自己试着为文章内页创建原型。同样,从手绘草稿开始。我们已经帮你完成了这一步,并添加了一些注释,作为编写原型代码时的小提示;见下图:</p> <p><a href="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch-article-page.jpg" rel="lightbox"><img alt="foundation-prototype-framework-responsive-sketch-article-page" src="/sites/default/files/images/201111/foundation-prototype-framework-responsive-sketch-article-page.jpg" style="width: 500px; height: 564px; " /></a></p> <p>你可以<a href="http://mos.netmagazine.com/site/files/tutorials/assets/2011/11/computerarts-quickly-build-a-prototype-to-test-on-any-device.zip">下载这套实例的源文件包</a>,实际看看这些原型相关文件(包括文章内页)的完整代码。</p> <h3> 跨平台原型在项目实践中能起到怎样的作用?</h3> <p>正如我们在本文开头提到的,要使网站在任何类型的设备上都尽量兼容,最好的办法就是从设计流程的上游出发,创建跨平台性比较强的原型,确保从一开始就可以对布局结构等方面的设计方案进行及时检验<a class="eLink" href="http://beforweb.com">。</a>设计方面的迭代不能再仅仅依靠Photoshop了。</p> <p>最近,我们在一个为本地某公益组织创建网站的实际项目中,运用这样的方式,进行了24小时冲刺式的设计开发。在勾画出网站页面的草图之后,我们使用Foundation框架,在不到两个小时的时间里,为所有的页面创建了原型。这些原型可以帮助我们在多种设备平台中直接测试相应的设计方案,同时,前端人员能够基于这些原型的代码结构并行式的展开相关开发工作,内容团队也可以基于可视化的原型策划文案;在这期间,我们也同时进行着视觉设计方面的工作。</p> <p>有兴趣的话,可以<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/">查看关于这次项目的更多细节</a>,包括<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/frame/lowfi-wireframes.php">全部页面的草图</a>、<a href="http://www.zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/">跨平台原型</a>等。</p> <p>到目前为止,我们已经在很多客户项目案例中使用了Foundation框架;在我们自己的一些应用类型网站的设计开发过程中也有用到,包括<a href="http://www.axeapp.com/" rel="nofollow">axeapp.com</a>,<a href="http://www.spurapp.com/" rel="nofollow">spurapp.com</a>和<a href="http://www.reelapp.com/" rel="nofollow">reelapp.com</a>。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel">框架</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网格系统</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/18" typeof="skos:Concept" property="rdfs:label skos:prefLabel">语义化</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li></ul> Sat, 19 Nov 2011 02:07:16 +0000 C7210 23 at http://www.beforweb.com http://www.beforweb.com/node/23#comments 案例学习 - 响应式网站的产品需求和设计流程详解 http://www.beforweb.com/node/21 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-responsive-web-design-project-showcase.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>今次的译文中,我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主,本篇则围绕一个实际网站案例展开,从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。</p> <p>本篇的部分内容要点会与之前几篇产生交集;我们会在这些地方提供相应文章的入口,便于深入参考阅读。接下来进入正文。</p> <p>根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户。除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下,怎样让我们的网站尽量兼容各种类型的设备,并确保优良的用户体验,这将是越来越重要的问题。</p> <p>通过响应式的设计开发方式,我们可以使网站页面随浏览设备的不同而自行响应,动态的调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户。</p> <p>如果你对响应式Web设计还不大了解,可以先参考阅读我们之前的关于<a href="/node/6">响应式设计的概念、组成要素及基本实现思路</a>方面的文章,全方位预热一下。</p> <!--break--><h3> 什么情况下适宜采用响应式Web设计的方式</h3> <p>当客户提出产品功能移动化的需求时,有一些解决方案可供我们选择,包括原生客户端应用、Web应用等;究竟怎样的方式更合适,还是取决于具体的需求情况。另外也要考虑网站本身是否需要实施移动化。虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是,在某些情况下,这种方式是非常值得考虑的。</p> <h4> 你心里没谱</h4> <p>设计开发一个全新的移动版本站点或是客户端应用,整个过程是有很大挑战性的。除非产品正式上线,否则你无法真正了解它是否会成功。与其单纯的为了移动化而花费资源打造移动版本站点或是开发客户端应用,不如先花些心思将原本的网站打造的更具弹性,使其在各种主流移动设备中都拥有尽量优秀的用户体验。</p> <h4> 你想节约成本</h4> <p>要打造响应式站点,自然离不开有经验的交互、视觉设计及前端开发人员。所需的资源,尤其是时间方面,比起普通网站来说大约增加20%到30%的样子;但比起单独打造移动版本的网站,或是设计开发客户端应用的成本来说,却要低很多。从维护的角度来说,也会轻松很多。</p> <h4> 你希望网站可以兼容未来的新设备</h4> <p>所谓的移动版本站点,通常是针对某类具体规格的设备进行单独打造的,弹性比较差。新的移动设备层出不穷,传统的移动版本站点需要不断的进行更新维护,才能尽量保证在新设备中工作良好。响应式设计可以根据设备浏览环境的具体规格进行判断,使用不同的呈现方式来展示内容,无需针对某种特定的规格进行维护,适应性更好。</p> <h4> 更多</h4> <p>关于网站移动化的方式选择,可以参考我们之前的文章&ldquo;<a href="/node/12">走出移动互联网的迷宫 - 网站移动化的方法策略</a>&rdquo;。</p> <div class="embed"><article id="node-271" class="node node-related-books" about="/node/271" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门:移动Web设计精髓" src="http://beforweb.com/sites/default/files/images/products/15.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:移动Web设计精髓</a></h4> <p><a href="http://www.amazon.cn/众妙之门-移动Web设计精髓-德-Smashing-Magazine/dp/B00BUT6S92/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容涵盖移动Web开发的趋势、如何建立一个移动网站、iPhone和iPad的网络应用发展、应用开发的趋势和误区、iPad应用开发要点、如何制作移动Web应用、移动设备的形式、如何推销你的移动应用...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 响应式网站页面的设计流程</h3> <p>我们将使用一个真实的<a href="http://www.macdonaldhotels.co.uk/" rel="nofollow">酒店网站</a>作为范例,来演示响应式Web设计的流程。这个网站是我们在九月份刚刚为Macdonald连锁酒店创建的。在整个设计开发流程中,有几个关键步骤,是我们接下来要逐一展开学习的:</p> <ol> <li> 用户研究与设备规格预估</li> <li> 制作线框原型</li> <li> 视觉设计</li> <li> 前端构建</li> </ol> <h4> 用户研究与设备规格预估</h4> <p>前期,通过用户调研,我们可以了解到用户群所使用的设备类型分布情况,并预估出几种典型的响应规格,用来规划不同的呈现方式。有几个问题需要特别考虑下:</p> <ul> <li> <strong class="eTitle">用户在不同设备上的目标有多大区别?</strong></p> <p>&nbsp;</p> <p>过去,我们通常会假设用户在使用移动设备访问网站时,其行为都是高度目标驱动化的,例如在旅途中获取酒店地址、预订房间一类。但实际情况不仅如此&mdash;&mdash;智能手机、平板电脑等各类移动设备的用户,会越来越多的在相对稳定从容的状态下使用网络。所以在很多时候,用户使用不同设备的目标差别并没有想象的那么大,我们不能片面的假设不同类型设备的用户对功能的需求差异。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-mobile-user-task.png"><img alt="responsive-web-design-mobile-user-task" src="/sites/default/files/images/201111/responsive-web-design-mobile-user-task.png" style="width: 500px; height: 143px; " /></a></p> </li> <li> <strong class="eTitle">关于功能与内容呈现,从技术的角度出发,需要考虑哪些?</strong></p> <p>&nbsp;</p> <p>对于功能繁多复杂的网站,需要针对不同的设备类型进行功能和内容的优先级排序,以便在开发阶段通过CSS定义不同的响应规则,以最合理的样式规格和布局方式进行呈现;尤其对于手机等小屏幕设备,需要多花些心思。</p> </li> </ul> <h4> 制作线框原型</h4> <p>通过线框图,我们可以对响应式的视觉效果背后的逻辑结构进行规划和定义。(关于线框原型,可以参考我们之前的&ldquo;<a href="/node/20">线框原型的本质及实践应用概述</a>&rdquo;)</p> <p>我们根据之前一步的研究和预估结果,规划出几种比较典型的屏幕尺寸规格。本次案例中,我们选择了三款具有代表性的主流设备,包括桌面显示器、iPad和iPhone,因为根据我们的用户研究结果,使用这三种设备的用户占了绝大部分。</p> <p>需要强调一下,响应式设计的目的在于,针对不同设备的屏幕规格区间,进行功能及内容的输出格式预设。所以我们只需要选取一些具有代表性的设备,而不必顾全所有已知的规格类型;我们制作线框原型的主要目标是规划样式背后的逻辑。</p> <p>在这个阶段,我们必须清楚,整个网站中有哪些关键页面是在功能和布局方面具有代表性的。对于这次的案例网站,&ldquo;关键页面&rdquo;包括首页、预订流程中的页面、酒店详情页面等。</p> <ol> <li> <strong class="eTitle">开始规划</strong></p> <p>&nbsp;</p> <p>首先来定义每种关键规格中的结构网格。我们创建了三个页面模板,宽度分别为1024像素(桌面显示器)、768像素(iPad竖屏宽度)、320像素(iPhone竖屏宽度)。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-framewire-layout-grid.png" rel="lightbox"><img alt="responsive-web-design-framewire-layout-grid" src="/sites/default/files/images/201111/responsive-web-design-framewire-layout-grid.png" style="width: 500px; height: 254px; " /></a></p> <p>如上图所示,从每列等宽的情况入手,可以让规划工作相对简单一些,帮助我们将注意力放在响应式的布局改变上。</p> </li> <li> <strong class="eTitle">沟通与评审</strong></p> <p>&nbsp;</p> <p>接下来我们需要考虑的是,每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整。在这个过程里,保持团队成员之间的沟通是非常重要的,包括视觉设计师、前端开发人员等;使用初步的线框原型,与大家交流模块组件在布局和样式方面的调整计划,尽量在初期就让相关成员对整个规划做到心中有数,并尽早发现前端实现等方面的潜在的问题。</p> </li> <li> <strong class="eTitle">首页</strong></p> <p>&nbsp;</p> <p>也许对于你自己的实际项目来说,其他页面的重要程度或代表性是超过首页的。这不是问题,你可以调整具体的页面规划次序;我们的这个项目案例是从首页开始入手的。下图中展示的,就是我们为首页制作的三种响应规格的线框原型。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-framewire-homepage.png" rel="lightbox"><img alt="responsive-web-design-framewire-homepage" src="/sites/default/files/images/201111/responsive-web-design-framewire-homepage.png" style="width: 500px; height: 712px; " /></a></p> </li> <li> <strong class="eTitle">全局导航</strong></p> <p>&nbsp;</p> <p>我们创建了一个简单的横向导航条,其宽度可以随着屏幕宽度的变化而调整;在最后一种规格的范围里(320像素以下),导航条会折行显示,以保证导航元素的可读性。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-framewire-global-navigation.png" rel="lightbox"><img alt="responsive-web-design-framewire-global-navigation" src="/sites/default/files/images/201111/responsive-web-design-framewire-global-navigation.png" style="width: 500px; height: 86px; " /></a></p> <p>头部中其他元素的调整方式与全局导航的类似。</p> <p>在这一步中,最好提前考虑一下关于组件元素的样式问题,做好与视觉设计师的交流沟通。比如,对于导航元素,如果使用复杂的tab式背景,就很有可能在小屏幕设备中、特别是导航条折行的情况下产生样式问题。</p> </li> <li> <strong class="eTitle">页脚</strong></p> <p>&nbsp;</p> <p>默认尺寸下,页脚由四列内容组成;另外两个规格范围中,布局分别为三列和一列;内容模块随文档流向下依次扩展即可。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-framewire-footer.png" rel="lightbox"><img alt="responsive-web-design-framewire-footer" src="/sites/default/files/images/201111/responsive-web-design-framewire-footer.png" style="width: 500px; height: 165px; " /></a></p> </li> <li> <strong class="eTitle">其他模块组件</strong></p> <p>&nbsp;</p> <p>全局的四列等宽网格布局使其他组件的规划也非常轻松。在首页中有一个组件,其中包含若干内容模块。默认尺寸下,可以并排显示四个模块;左右两边各有一个触发滚动的按钮,以点击之后模块列表会前后滚动,以显示更多内容。在平板电脑类型的布局中,默认显示的数量变为三个;而在手机的小尺寸屏幕中,内容模块列表会变为单列,并去掉了用于左右滚动的按钮,用户可以上下滚动页面,依次查看不同的模块。</p> <p>类似的,其他涉及到多列显示的组件和模块都需要做这样的考虑。要了解不同设备的用户所习惯的操作方式,同时结合该设备的屏幕宽度规格,设计出最合理的布局及交互方式。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-framewire-components.png" rel="lightbox"><img alt="responsive-web-design-framewire-components" src="/sites/default/files/images/201111/responsive-web-design-framewire-components.png" style="width: 500px; height: 99px; " /></a></p> </li> <li> <strong class="eTitle">测试线框原型</strong></p> <p>&nbsp;</p> <p>我们可以在线框原型的初稿完成之后,将其图片导入对应的设备中,进行一些简单的初步测试。试着上下或左右滚动原型界面,感受导航与功能、内容的布局,完成一些假设的获取信息的目标。这样的测试可以帮助我们尽早的检验页面在可访问性及可读性等方面的潜在问题。</p> <p>对于手机用户来说,有一个问题:多数页面在首屏中只能显示网站名、全局导航和搜索等功能;用户点击全局导航中的链接之后,即使页面正常的进行了跳转,也会给人一种错觉,好像页面并没有发生变化;除非滚动页面,通过查看页面的主要内容部分,来判断当前是否处于自己的目标页面。一个常见的解决方法是,对于小屏幕设备,将全局导航与主要内容之间的部分设计为可以展开或收起的容器,默认状态为收起,这样即能使主要内容可以呈现在首屏中,也可以保证功能的可用性。</p> <p><img alt="responsive-web-design-framewire-iphone-prototype" src="/sites/default/files/images/201111/responsive-web-design-framewire-iphone-prototype.png" style="width: 225px; height: 457px; " /></p> </li> </ol> <div class="embed"><article id="node-277" class="node node-related-books" about="/node/277" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="原型设计:实践者指南" src="http://beforweb.com/sites/default/files/images/products/21.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计:实践者指南</a></h4> <p><a href="http://www.amazon.cn/原型设计-实践者指南-沃菲尔/dp/B00AX1MC3Y/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">原型设计是用于沟通设计意图的清楚而高效的理想方式,可以帮助设计师洞察设计想法,测试产品预设条件和收集用户反馈意见。本书向我们表明一点:“原型不只是一种设计工具,它还可能帮助我们进行产品推广,赢得更多内部支持,并有机会和开发团队一起测试产品的可行性。”...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> 网页视觉设计</h4> <p>相比于传统的Web视觉设计过程,在这里我们不仅要打造出风格恰当的UI元素,而且要根据前面制定下来的几种规格方案,对某些关键性的UI元素进行样式扩展或改造。例如下图所示的酒店搜索模块,正如我们前面提到的,在小屏幕版本中,最佳实践方式是做成可展开和收起的模式,而这种交互方式在平板电脑或桌面设备中是不需要的。类似这样情况,在视觉设计方面需要花些额外的功夫。</p> <p><img alt="responsive-web-design-additional-ui-style" src="/sites/default/files/images/201111/responsive-web-design-additional-ui-style.png" style="width: 392px; height: 491px; " /></p> <p>在视觉设计过程中,有一些很实际的经验和原则:</p> <ul> <li> 尽量保持小屏幕规格样式的简洁;在UI元素风格方面,可以多与前端开发人员交流,尽量采用可以通过CSS3实现的常规风格样式,减少背景图片的使用。</li> <li> 要保证内容的字体字号在所有设备中都足够可读,尤其是在手机上。</li> <li> 与传统Web设计开发相似,最终产出的页面必定会与视觉稿有所出入;尤其对于响应式站点来说,由于在布局结构和细节样式等方面都需要有调整变化的能力,所以在开发过程中产生设计还原度方面问题的几率会更大。仍然要强调一点,就是在项目前期和中期保持设计师与开发者之间的交流与沟通,尽可能早的发现各类潜在问题。</li> </ul> <p>下图就是针对三种设备规格的首页最终视觉稿。</p> <p><a href="/sites/default/files/images/201111/responsive-web-design-homepage-versions.png" rel="lightbox"><img alt="responsive-web-design-homepage-versions" src="/sites/default/files/images/201111/responsive-web-design-homepage-versions.png" style="width: 500px; height: 731px; " /></a></p> <p>&nbsp;</p> <h4> 前端构建</h4> <p>来看一些在前端构建的过程中需要注意的问题;关于技术性的细节问题,仍不会在这里过多讨论。(技术实施方面,可以参考我们之前的文章&ldquo;<a href="/node/7">通过CSS3 Media Query实现响应式Web设计</a>&rdquo;)</p> <ul> <li> <strong class="eTitle">关于图片尺寸</strong></p> <p>&nbsp;</p> <p>对于小屏幕规格的设计方案,即使我们通过CSS缩小其显示尺寸,在文件资源方面仍然是要加载完整的大图的。所以我们在优化保存文件图片的时候要尽可能的让文件更小。不过另外有些方法,可以帮助我们真正实现图片文件的响应化。大致思路是,通过JavaScript判断当前设备的分辨率规格范围,并根据预设的规则加载不同尺寸的图片文件。详情可以参考我们之前文章中关于<a href="http://beforweb.com/node/6/page/0/1">响应式图片</a>的部分。</p> </li> <li> <strong class="eTitle">使用高级CSS</strong></p> <p>&nbsp;</p> <p>让客户或需求方理解&ldquo;渐进增强,平稳退化&rdquo;的思路是很重要的,对于传统Web设计开发也是如此。对响应式站点来说,CSS3在降低资源消耗、提高页面加载速度等方面的作用尤为重要。</p> </li> <li> <strong class="eTitle">及时沟通</strong></p> <p>&nbsp;</p> <p>正如我们在前文中多次强调的,保持设计师与开发者之间的密切沟通和交流,对于项目的顺利进展会起到不可估量的作用;换个角度说,如果这方面做的不好,很多致命的潜在问题则有可能在项目后期集中爆发出来。</p> </li> </ul> <div class="embed"><article id="node-258" class="node node-related-books" about="/node/258" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/01.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计:HTML5和CSS3实战</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来,为读者全面深入地讲解了针对各种屏幕大小进行设计和开发现代网站的各种技术,包括媒体查询、流式布局、相对字体、响应式媒体等...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/38" typeof="skos:Concept" property="rdfs:label skos:prefLabel">线框原型</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-14" rel="dc:subject"><a href="/taxonomy/term/64" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原型</a></li></ul> Sun, 06 Nov 2011 02:45:55 +0000 C7210 21 at http://www.beforweb.com http://www.beforweb.com/node/21#comments 从网站到移动客户端应用 - 随"机"应变的用户体验设计 http://www.beforweb.com/node/14 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-web-mobile-app-design-user-experience.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>平日的工作忙碌了些许,疲劳因素让每晚散碎的时间显得更加吃紧;赶上这样稍微有点篇幅的文章,做起来就有些迟缓了,哼哼唧唧的翻译了将近一周。</p> <p>话说,又是以移动应用为主线的文章,这是闹哪样呢。但也不至于和本小博客的主旨相悖;网站产品移动化,设计思路移动化...在移动互联网汹涌的大潮面前,这是合情合理的趋势,也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。</p> <p>如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作,而如今开始打算扩展视野、提升技能、随&ldquo;机&rdquo;应变,做一名移动互联网的弄潮儿...那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题:</p> <ul> <li> Web设计师需要学习哪些知识和技能,才能进入移动应用的设计和开发领域?</li> <li> 从设计的角度讲,移动客户端应用与传统网站页面之间的主要区别在哪里?</li> <li> 怎样提升移动客户端应用的用户体验?设计师需要特别注意哪些?</li> </ul> <p>开始进入正题。现如今,到处都有人在谈论移动应用方面的话题,从视觉外观到交互体验,这个那个的不亦乐乎<a class="eLink" href="http://beforweb.com">。</a>实际的统计数字也是蛮惊人的。最近,一份<a href="http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror">来自Flurry的研究报告</a>显示,用户(美国地区)每天使用移动应用的时间,平均下来是81分钟,已经超过了平均74分钟的上网时间<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p><a href="/sites/default/files/images/201110/chart-mobile-app-vs-web-consumption-2011.png" rel="lightbox"><img alt="chart-mobile-app-vs-web-consumption-2011" src="/sites/default/files/images/201110/chart-mobile-app-vs-web-consumption-2011.png" style="width: 500px; height: 333px; " /></a></p> <p>在这个世道里,身为用户体验设计相关从业人员的你,无论一直以来的主攻方向是交互、视觉还是前端,也许现在都已经开始琢磨着探索移动应用的相关领域了。</p> <p>本文中,我们将从三个主要问题入手,与几位业内专家进行探讨,看看他们在&ldquo;转型&rdquo;方面有哪些看法和建议。</p> <h3> Web设计师需要学习哪些知识和技能,才能进入移动应用的设计和开发领域?</h3> <h4> Josh Clark <span class="note">(设计师、开发人员,著有《<a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心 - 设计优秀的iPhone应用</a>》一书,译者老包)</span></h4> <p>说到正经八本的设计技术能力,在入门阶段其实没太多新东西需要学。我们完全可以使用已经轻车熟路的HTML、CSS和 JavaScript创建出用户界面非常优秀的客户端应用。别误会,我不是在谈论Web App形式(什么是Web App?请参考我们之前<a href="/node/12">关于网站移动化方法的文章</a>),我是指所谓的&ldquo;混合型应用(hybrid apps)&rdquo;,这是一种将基于HTML等前端技术实现的用户界面搭载在原生客户端上的方式,相当于为Web App穿上了原生客户端的外衣,并放到App Store当中。对于希望转型的传统Web设计和开发人员,这种方式是个不错的起点。</p> <p>关于&ldquo;混合型应用&rdquo;,Jonathan Stark写了两本很棒的书,分别是《<a href="http://www.amazon.cn/构建iPhone企业级应用-基于HTML-CSS-和JavaScript-斯塔克/dp/B0050381QC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">构建iPhone企业级应用&mdash;基于HTML, CSS 和JavaScript</a>》以及《<a href="http://www.amazon.cn/使用HTML-CSS和JavaScript开发Android程序-申林/dp/B005468TWQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">使用HTML、CSS和JavaScript开发Android程序</a>》,书中展示了怎样使用开源框架PhoneGap创建这种混合形式的客户端应用。</p> <p>作为入门是不错,但混合型应用在太多方面无法与原生客户端应用相提并论。如果你想打造在视觉及动画效果等方面都更加原汁原味的、特别是需要发挥设备硬件本身各种功能的应用的话,原生客户端应用仍然是不二之选。这就意味着你需要学习使用面向对象C语言(Objective-C)去写iOS应用,或是使用JAVA来打造Android版本。这些都是实实在在的编程语言,对于我们这样的Web设计相关人员来说,学习的难度会骤增;通常,我们可以与经验丰富的开发人员搭档,由他们将设计思路和方案通过代码实现出来。</p> <p>即使这样,我们也无需扔掉HTML、CSS、JavaScript或是相关的Web App前端开发框架&mdash;&mdash;这些工具可以帮助我们在开发原生应用的过程中创建快速原型&mdash;&mdash;无论视觉还是交互方面都相当高保真的快速原型。</p> <p>说到设计工作本身,特别在用户体验方面,移动应用与传统网页之间还是有着显著差异的。有两点需要特别注意:人机交互方式与使用场景。</p> <ul> <li> 对于移动设备来说,你需要面对和解决的交互设计方面的问题会有很多,和以往不同,你现在是在为手指做设计。你必须考虑的一个问题是,怎样的页面元素布局可 以让拇指自由的操作并充分的休息。另外,当用户在进行操作时,界面的一部分必然会被拇指遮挡住,所以要尽量保证控制元件的布局不会干扰到实际内容。类似这 样的问题还有很多,多数可以归纳到&ldquo;舒适度&rdquo;与&ldquo;可视性&rdquo;这两方面。这也是多数触屏智能手机会将主要控制元件或导航一类放在屏幕底部的原因&mdash;&mdash;而这些与传 统Web设计的习惯正好相反。</li> <li> 你需要知道用户多数会在怎样的环境下以怎样的方式使用客户端应用。对于这个问题,我们通常有个误解,就是觉得用户都会在很忙很赶、无法集中注意力的情况下使用应用。其实这只是实际情况的一部分,&ldquo;移动应用&rdquo;并非只在移动的状态下被使用;很多时候,人们会在沙发上、在厨房中、在机场候机时进行操作。在这些场景里,用户拥有足够多的操作时间,注意力也可以非常集中。另外,移动设备在很多方面的功能是超越桌面计算机的,譬如GPS、内置麦克风及摄像头、触控、陀螺仪、罗盘等;基于这些功能打造的不同类型的客户端应用,它们所对应的使用场景也各有不同<a class="eLink" href="http://beforweb.com">。</a></li> </ul> <p>不要过于自信的假设用户的意图。移动应用未必代表功能的简化,当你告诉自己&ldquo;用户并不需要在移动版本中使用这个功能&rdquo;时,你也许是错的。回忆一下你是否有这样的经历:在移动设备的浏览器中打开一个你所熟悉的网站,却发现页面跳转到了所谓的移动版本,不仅在视觉和操作上与你的习惯不符,更糟的是也许它所简化掉的功能正是你所需要的。虽然用户正在使用小屏幕设备,但这不代表他们需要获取的信息、需要使用的功能变少了<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-262" class="node node-related-books" about="/node/262" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="触动人心:设计优秀的iPhone应用" src="http://beforweb.com/sites/default/files/images/products/06.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">触动人心:设计优秀的iPhone应用</a></h4> <p><a href="http://www.amazon.cn/触动人心-设计优秀的iPhone应用-乔什•克拉克/dp/B005R36I6U/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书会告诉你如何从iPhone的角度来思考和理解应用设计,使你明白怎样去综合思考设计、心理、文化、人体工程和可用性问题。在书中,你会看到大量的真实应用的设计实例和思考过程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <p>我想说的是,我相信在多数情况下,无论移动应用还是所谓的移动版页面,它们都应该与桌面版的网站及产品具有相似的内容与功能。当然,正如我们在前面提到的,在呈现及交互方式等方面,它们需要基于设备自身的特点而区别对待,但在内容方面应当尽可能保持一致。有些时候,移动应用甚至需要做的更多,拿亚马逊(Amazon)举例子,他们的移动客户端应用还具有条码扫描功能;这是充分利用移动设备特有功能的典型案例。</p> <p>从网站移动化这个角度来说,作为Web设计和开发人员,需要把思路锻炼的更加具有弹性。在过去超过15年的时间里,我们只是为桌面浏览器设计网站。真正的Web设计不该是这样的,它应该中立于平台之间的差异,在任何设备、任何尺寸的屏幕中都保证可访问性及可用性。</p> <p>当然,在移动设备大规模普及之前,我们确实很难看到这一点;现在,我们开始了解到自己的网站和产品会被各种类型的设备访问及使用。这并不是说我们要为所有类型的设备都单独打造一个版本&mdash;&mdash;真正需要的是让网站有足够的适应性和响应性。</p> <p>关于响应式Web设计,可以参考我们之前的两篇文章:&ldquo;<a href="/node/6">什么是响应式Web设计?怎样进行?</a>&rdquo; 以及 &ldquo;<a href="/node/7">通过CSS3 Media Query实现响应式Web设计</a>&rdquo;。</p> <h4> Robin Nixon <span class="note">(Web开发人员、科技文章作者,著有<a href="http://www.amazon.com/HTML5-iOS-Android-Beginners-McGraw/dp/0071756337/ref=sr_1_1?ie=UTF8&amp;qid=1318865483&amp;sr=8-1">HTML5 for iOS and Android: A beginner&#39;s Guide</a>一书)</span></h4> <p>在我看来,对于传统Web设计及开发人员来说,进行扩展或转型的最佳入门方式,就是保持手头技术的先进性,包括HTML(5)、CSS(3)和JavaScript;目前,将Web App整合成为原生客户端应用的解决方案正在日趋成熟,要实现产品的移动应用化,我们并不一定需要花时间学会那些复杂的编程语言,比如面向对象C语言、JAVA、.NET等。只要你拥有足够扎实的前端设计和开发能力,你就可以很轻松的创建Web App。</p> <h4> Aaron Maxwell <span class="note">(Mobile Web Up创始人)</span></h4> <p>从设计的角度讲,多数概念和技能依然适用。作为一名设计师,你要清楚自己希望用户在使用移动应用的过程中做出怎样的行为,你希望自己的产品能够提供怎样的用户体验。这种说法虽然有些务虚,但是将注意力集中在这些问题上并延伸思考下去,确实是一个良好的开端。</p> <p>菜单是一种可以带来高效率的UI组件,除非你提供的菜单项过多。试着以逐层滑入作为呈现方式,将菜单项以合理的继承关系组织起来,确保每层里面的菜单项不要过多。另外,标签(tab)形式的导航也是移动应用中的重要元素。</p> <p>和传统Web页面一样,移动应用界面中的留白也是一门学问。怎样使用留白来表达视觉元素之间的关联及分组关系,是需要认真琢磨和尝试的。尤其受移动设备屏幕的可视区域尺寸所限,在对元素之间距离的控制方面,我们并没有太多像素可用,所以对像素级细节的把握能力就显得越发重要了。</p> <p>要记得在适当的时候舍弃一些元素。比如,在设置菜单中,每添加一个菜单项都会增加操作的复杂度,使用户多花费一份时间和注意力在他们未必需要的功能里面。对于你的产品所涉及到的使用场景,要做到充分的了解,并在此基础上判断功能元素的优先级,做好取舍。</p> <h4> Sarah Lynn <span class="note">(Web设计师、创意设计师)</span></h4> <p>在向移动领域转型这方面,我个人认为最棒的、最切实可行的入门方式,就是研究学习市面上的各种移动应用。观察它们,分析它们的功能,学习它们对原生控件的利用方式;去实际使用这些应用,熟悉并理解各种控件的交互方式,并将不同的应用加以对比。另外,不少公司和团队都做过大范围的用户研究,你可以通过他们的研究报告学到很多东西,尤其是在用户体验等方面<a class="eLink" href="http://beforweb.com">。</a></p> <p>另外,有些不错的书也可以帮助你入门。我最推荐的一本,是Suzanne Ginsburg的《<a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实战与案例</a>》。</p> <p>有些工作需要花时间和心思去执行,比如,要学会获取用户的反馈,另外一点是在进入实际设计开发流程之前,做好充分的计划工作;在初期可以制作纸质原型,并尽早与用户或有经验的移动应用设计开发人员进行交流<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-264" class="node node-related-books" about="/node/264" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iPhone应用用户体验设计实践与案例" src="http://beforweb.com/sites/default/files/images/products/08.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iPhone应用用户体验设计实践与案例</a></h4> <p><a href="http://www.amazon.cn/iPhone应用用户体验设计实践与案例-金斯伯格/dp/B0052HZC54/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书简述了iPhone硬件和应用风格,逐步介绍了如何进行前期的用户研究和竞争性分析,以及提升iPhone应用用户界面和视觉设计的最佳实践。全书通过13个案例分析展示了知名设计师的实践过程,为读者了解应用背后的设计过程提供了第一手资料...</a></p> </div> </div> <p>&nbsp;</p> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 从设计的角度讲,移动客户端应用与传统网站页面之间的主要区别在哪里?</h3> <h4> Sarah Lynn</h4> <p>我认为最大的区别还是在于交互设计方面。</p> <p>比起传统的Web设计,你要考虑的东西有很多不同,比如移动设备的屏幕尺寸、不同系统平台之间的差异、使用场景和用户习惯等。移动应用的使用场景其实有很多,包括最常见的在&ldquo;移动&rdquo;中使用;另外一个常见的但是往往被忽视的场景,就是用户身处稳定的环境中,但因为没有条件或懒于使用台式机或笔记本,所以使用移动设备应用代替执行。所以,要清楚你的应用最适宜的使用场景,针对这些场景中的用户习惯进行相应的设计。以目标用户为中心,这个原则无论对移动应用设计还是网站页面设计,都是必须贯彻的。</p> <p>从传统Web向移动应用转型的过程里,怎样很自然的把设计对象想的更小更弹性,这是个不小的挑战。屏幕定向也是必须考虑的问题,你必须让你的应用在横竖两种模式下都可以很好的工作,并充分发挥每种定向方式的优势。</p> <p>在入门阶段,建议首先选定一个平台,把它的优点和缺点都吃透,对该平台的设备可以提供的原生功能做到充分了解。做选择时需要考虑的因素是多方面的,包括对自己的应用所需提供的功能的充分规划,以及对目标用户群的研究等。</p> <h3> 怎样提升移动客户端应用的用户体验?设计师需要特别注意哪些?</h3> <h4> Mike Gualtieri <span class="note">(精算分析师,报告书<a href="http://www.forrester.com/rb/Research/mobile_app_design_best_practices/q/id/59132/t/2">Mobile App Design Best Practices</a>的作者)</span></h4> <p>相比于普通的Web站点,用户对移动应用的期望值更高。苹果的iPhone等产品为移动应用树立了很高的威望,尤其是在设计方面;多点触摸和手势等功能为移动应用带来了全新的革命性的交互方式。想要在移动应用中实现优秀的用户体验设计,你必须对用户有充分的了解,甚至超过他们对自身的了解。传统的用户研究方式仍可以有效的帮助我们创建人物角色,了解他们的实际需求、对应用的使用场景等。</p> <p>通常情况下,对于移动应用,设计师要尽量考虑到以下5点因素,以指导交互和视觉设计流程:</p> <ul> <li> 地点:用户会在任何地方使用移动应用。</li> <li> 移动:用户会在移动的状态下使用应用,比如走路、慢跑,或是在汽车等交通工具里。</li> <li> 即时:用户会随时拿出设备使用应用。</li> <li> 偏好:有条件的情况下,用户会根据不同的需求使用不同的移动设备;有些用户会对设备产生数码依赖感,有些则是根据实际需求偶尔使用,情况因人而异。</li> <li> 设备:移动设备只是个笼统的概念,对于某些应用,必须全面的考虑到各种设备,比如智能手机、平板电脑、电子阅读器等<a class="eLink" href="http://beforweb.com">。</a></li> </ul> <p><a href="/sites/default/files/images/201110/mobile-app-user-experience-consideration.jpg" rel="lightbox"><img alt="mobile-app-user-experience-consideration" src="/sites/default/files/images/201110/mobile-app-user-experience-consideration.jpg" style="width: 500px; height: 242px;" /></a></p> <h4> J.D.Biersdorfer <span class="note">(科技产品记者,著有<a href="http://www.amazon.com/Best-iPhone-Apps/dp/1449394140/ref=sr_1_29?ie=UTF8&amp;qid=1311339073&amp;sr=8-29">Best iPhone Apps</a>)</span></h4> <p>在写Best iPhone Apps的过程里,我观察并尝试了400到500种iPhone应用,总结下来,我认为,能够带来很好的用户体验的,多数是那些针对移动设备特性而在视觉与交互方式等方面专门进行打造的应用。而那些很明显在沿用传统Web设计思路的、对屏幕尺寸和触控操作方式都缺乏考虑的应用,无论是元素的视觉风格,还是布局的组织、空间的控制等方面,多数会产生不尽如人意,甚至是很糟的体验<a class="eLink" href="http://beforweb.com">。</a></p> <div class="embed"><article id="node-285" class="node node-related-books" about="/node/285" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="移动互联:用户体验设计指南" src="http://beforweb.com/sites/default/files/images/products/30.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">移动互联:用户体验设计指南</a></h4> <p><a href="http://www.amazon.cn/移动互联-用户体验设计指南-Rachel-Hinman/dp/B00DQH2LZQ/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书阐述如何设计出独一无二的移动体验,展示移动用户体验最重要的要素,介绍各种设计框架和实践。本书首先介绍移动用户体验的关键特点,接着介绍五种广泛使用的移动用户体验模式,然后介绍移动体验设计的设计实践、原型方法以及设计指南,最后讨论移动体验的前沿设计...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-2"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户研究</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li></ul> Thu, 20 Oct 2011 14:36:27 +0000 C7210 14 at http://www.beforweb.com http://www.beforweb.com/node/14#comments 走出移动互联网的迷宫 - 网站移动化的方法策略 http://www.beforweb.com/node/12 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/iphone-android-mobile-web-icon.png" width="70" height="80" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>继两篇关于<a href="/taxonomy/term/7">响应式Web设计</a>的译文之后,再来搞一篇&ldquo;网站移动化&rdquo;方面的。琢磨着自己大概是无论穿着什么鞋都打算趟趟这摊浑水的样子了。</p> <p>今次篇幅不长,在我看来,本文更像是当老板或产品决策者无论穿着什么鞋都打算趟趟这摊浑水时,作为项目执行者,尤其是用户体验设计团队,所能给到的建议和方法参考。正像前面那篇&ldquo;<a href="/node/9">步步为营的用户体验设计 - 团队、影响力、协作与策略</a>&rdquo; 一文中提到的:&ldquo;其实,&lsquo;用户体验设计&rsquo;并非用来获取答案,它应该为项目执行方式的选择提供建议,或是为更好的设计开发流程创建架构。&rdquo;OK走着吧。</p> <p>眼下,移动互联网正扮演着越来越重要的角色,无论开发者还是普通用户,几乎所有人都在谈论它。传统互联网用户所习惯的那些访问内容、使用服务的交互方式正在被智能手机、平板电脑等设备迅猛的改变。作为线上内容及服务的提供者,我们必须尽快进入这个新兴市场,学习新的游戏规则<a class="eLink" href="http://beforweb.com">。</a></p> <p>愿望是好的,&ldquo;移动化&rdquo;的方式却会时常让人找不着北。究竟应该怎么做?开发一款iPhone或Android应用吗?还是为网站专门搞一套或N套适用于不同移动设备的设计方案?最重要的莫过于首先对自己产品的内容及功能进行正确定位,对移动化需求的程度进行合理的评估;在此基础上,尝试最适合自己的移动化方式。目前,有一些比较常见的思路可以供我们参考选择:</p> <!--break--><h3> 什么也不做...</h3> <p>这确实是一种选择,而且没有听上去那么让人沮丧。</p> <p>使网站在桌面浏览器与移动设备中的渲染方式保持一致&mdash;&mdash;这种处理方式并非不可行,尤其是在缺乏各方面开发资源的情况下。对于iPhone或iPad一类拥有多点触摸等功能的相对高端的设备来说,用户多数已经习惯了、甚至乐于进行转屏及双指放大操作。何苦为了移动而移动的去为这些用户提供一个缩水版本的网站呢?</p> <p>这自然是再廉价不过的方案了。不过,平板电脑毕竟不是小型PC,智能手机也并非小型平板电脑,在很多方面,它们自身的特点都决定了独特的交互方式。如果想切实提升网站内容或功能在不同设备上的适应能力,单独开发移动版本显然是一条必经之路。</p> <h3> 响应式页面设计</h3> <p>响应式页面设计的主要思路是,页面对浏览环境的尺寸所处的规格范围进行判断,并加载对应的预设样式方案,从而响应式的调整布局结构、内容元素的尺寸等。</p> <p>如果页面的内容结构与样式分离的足够好,那么这种方式是具有长远保证的,我们不需要为任何现有或将来的、拥有不同屏幕分辨率的设备面面俱到的进行单独设计开发。这种方式无论从交互设计还是UI视觉等方面,其实仍属于相对传统的页面设计开发模式,并不会增加太多的成本,可以说是一种性价比很高的选择<a class="eLink" href="http://beforweb.com">。</a></p> <p>关于响应式Web设计的概念、组成要素、基本实现思路和开发方式等,可以参考我们之前的两篇文章:&ldquo;<a href="/node/6">什么是响应式Web设计?怎样进行?</a>&rdquo; 以及 &ldquo;<a href="/node/7">通过CSS3 Media Query实现响应式Web设计</a>&rdquo;。</p> <p><a href="/sites/default/files/images/201110/showcase-of-responsive-web-design-for-mobile-website-2.png" rel="lightbox"><img alt="showcase-of-responsive-web-design-for-mobile-website" src="/sites/default/files/images/201110/showcase-of-responsive-web-design-for-mobile-website-2.png" style="width: 500px; height: 171px; " /></a></p> <div class="embed"><article id="node-259" class="node node-related-books" about="/node/259" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计实践" src="http://beforweb.com/sites/default/files/images/products/02.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计实践</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计实践-卡德莱茨/dp/B00BOUJMS6/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"> 本书结合理论与实践,辅以大量配图、注释和引用,详尽介绍了如何结合使用流动布局、媒介查询和流动媒介来构建响应式网页;如何从项目一开始就采用响应式的工作流程;如何为不同的设备强化内容;如何使用功能检测和服务器端检测来提供更好的用户体验...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> Web应用(Web App)</h3> <p>通过对HTML5、CSS3、JavaScript或相关前端开发框架(<a href="http://www.sencha.com/products/touch/">Sencha</a>、<a href="http://jquerymobile.com/">jQuery Mobile</a>等)的配合使用,我们可以创建出一种独特的页面内容呈现及功能使用模式,无论是视觉风格还是交互方式,它都更像应用程序,而非我们习惯于在桌面浏览器中看到的页面。</p> <p>任何安装了现代浏览器的设备都可以浏览使用Web应用,从这个角度讲,它具有一定的跨平台性。根据资源条件,你可以只做一款Web应用,也可以使用不同的UI元素风格为iOS、Android或是Windows打造不同的皮肤及相应的行为触发方式。</p> <p>然而,Web应用的本质仍然是页面,它依赖于浏览器环境。所以,虽然在外观和行为方面可以做到与原生客户端应用很相似,但从功能和用户体验的角度来说,它仍然是一种局限很大的方式。</p> <p><img alt="jquery-mobile-framework-html5-css3-javascript" src="/sites/default/files/images/201110/jquery-mobile-framework-html5-css3-javascript.png" style="width: 380px; height: 377px; " /></p> <div class="embed"><article id="node-280" class="node node-related-books" about="/node/280" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="jQuery Mobile即学即用" src="http://beforweb.com/sites/default/files/images/products/24.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">jQuery Mobile即学即用</a></h4> <p><a href="http://www.amazon.cn/图灵程序设计丛书-jQuery-Mobile即学即用-弗特曼/dp/B00B29AJCC/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书着眼于移动Web应用开发实战,从应用结构和导航开始,介绍了jQuery Mobile的各种界面部件,包括列表视图、工具条、按钮、表单、网格布局等,以及事件、配置及响应式布局API,最后向读者展示了一个完整的Web应用开发示例...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 原生客户端应用(Native App)</h3> <p>在内容呈现方式与操作行为方面,原生客户端应用与网站网页有着巨大的差异。这种方式可以挖掘移动设备的硬件与系统所蕴藏的各种技术功能,比如罗盘、陀螺仪、摄像头、存储介质(包括离线存储或云端)、NFC(什么是NFC?Near Field Communication,近距离无线通信、近场通信)等。</p> <p>原生客户端还可以给用户带来最流畅的操作体验,因为有一整套标准的原生UI组件和交互方式供开发者使用和遵循。</p> <p>相应的,这种方式的开发成本也是以上几种方案中最高的,无论技术能力还是开发时间等方面。而且,我们需要针对每种系统环境及设备类型进行独立开发。原生客户端基本不具备跨平台性。</p> <p><img alt="iphone-ios-app-store-application" src="/sites/default/files/images/201110/iphone-ios-app-store-application.jpg" style="width: 500px; height: 330px; " /></p> <div class="embed"><article id="node-308" class="node node-related-books" about="/node/308" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS 6应用开发入门经典(第4版)" src="http://beforweb.com/sites/default/files/images/products/54.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS 6应用开发入门经典(第4版)</a></h4> <p><a href="http://www.amazon.cn/iOS-6应用开发入门经典-美-John-Ray/dp/B00DMS8WZW/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书循序渐进地介绍了从事iOS开发所需的基本知识,包括使用Xcode、Objective-C和Cocoa Touch等开发工具,设计及美化用户界面,利用多场景故事板、切换、弹出框、导航控制器和选项卡栏控制器...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 应该选择哪种方式?</h3> <p>在制定网站产品移动化策略的时候,我们需要考虑以下几点因素:</p> <h4> 我需要客户端应用吗?</h4> <p>无论Web应用还是本地原生客户端,它们主要适用于提供一种特定的功能,帮助用户完成特定的任务。如果需求是将企业站点或同类型的网站整体移动化,那么客户端应用并不是合适的选择。如果目标网站属于客户服务、电子商务、在线工具等类型,那么客户端的形式是值得考虑的。</p> <h4> 我需要客户端应用,但用户是否真的需要呢?</h4> <p>我们必须了解我们的网站及产品的目标用户群,并且做切实的调研,了解主要用户群是否会通过移动客户端的方式使用我们的服务。</p> <p>不同的群体倾向于不同类型的设备,使用同类型设备的用户群体又需要根据不同的设备系统环境做进一步的划分,譬如iOS用户对App Store的使用频率会高于Android用户使用安桌市场的频率。</p> <p>如果产品的目标用户群范围过大,那么除非我们有足够的资源来支持几条战线上的、长期的开发和维护工作,否则原生客户端未必是最好的选择。这种情况下,Web应用的方式是值得尝试的。虽然在用户体验等方面赶不上原生客户端,但是从平台适应性及开发成本的角度来说,整体性价比却不错<a class="eLink" href="http://beforweb.com">。</a></p> <h4> 我不需要客户端应用</h4> <p>除非决定什么也不做,否则响应式Web设计就是我们的最佳实践方式了。不过虽然问题表面是关于样式和呈现方面的,但是在页面代码结构上,也许需要进行很多的重构工作。当然,如果你的网站在结构和表现分离等Web标准化方面已经做到了足够的无懈可击,那么可以相对轻松很多。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动互联网</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Thu, 13 Oct 2011 13:20:04 +0000 C7210 12 at http://www.beforweb.com http://www.beforweb.com/node/12#comments 通过CSS3 Media Query实现响应式Web设计 http://www.beforweb.com/node/7 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-css3-media-query-responsive-web-design.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。</p> <p>OK开始说正经的了。在之前一篇译文中,我们了解了<a href="/node/6">响应式Web设计的概念、组成要素以及基本的实现思路</a>。今天继续相关话题,我们将从前文介绍过的&ldquo;<a href="http://beforweb.com/node/6/page/0/2">弹性布局结构</a>&rdquo;这方面出发,通过一个具体的实例来深入学习。</p> <p>如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 范例效果预览</h3> <p>首先,我们来看看本篇范例的<a href="http://webdesignerwall.com/demo/adaptive-design/final.html" rel="nofollow">最终效果演示</a>。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。</p> <p><img alt="html5-css3-responsive-web-design-final-demo" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-final-demo.jpg" /></p> <h4> 更多范例</h4> <p>我(原文作者)使用media query的方式设计了一些<a href="http://themify.me/" rel="nofollow">WordPress模板</a>,比如<a href="http://themify.me/themes/tisa" rel="nofollow">Tisa</a>、<a href="http://themify.me/themes/elemin" rel="nofollow">Elemin</a>、<a href="http://themify.me/themes/suco" rel="nofollow">Suco</a>、<a href="http://themify.me/themes/itheme2" rel="nofollow">iTheme2</a>、<a href="http://themify.me/themes/funki" rel="nofollow">Funki</a>、<a href="http://themify.me/themes/minblr" rel="nofollow">Minblr</a>和<a href="http://themify.me/themes/wumblr" rel="nofollow">Wumblr</a>等。</p> <h3> 概述</h3> <p>我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由&ldquo;固定&rdquo;方式改为&ldquo;液态&rdquo;,布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。</p> <p><img alt="html5-css3-responsive-web-design-design-overview" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-design-overview.jpg" style="width: 560px; height: 250px; " /></p> <h3> HTML代码</h3> <p>我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚:</p> <pre class="brush:xml;"> &lt;div id=&quot;pagewrap&quot;&gt; &lt;header id=&quot;header&quot;&gt; &lt;hgroup&gt; &lt;h1 id=&quot;site-logo&quot;&gt;Demo&lt;/h1&gt; &lt;h2 id=&quot;site-description&quot;&gt;Site Description&lt;/h2&gt; &lt;/hgroup&gt; &lt;nav&gt; &lt;ul id=&quot;main-nav&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;form id=&quot;searchform&quot;&gt; &lt;input type=&quot;search&quot;&gt; &lt;/form&gt; &lt;/header&gt; &lt;div id=&quot;content&quot;&gt; &lt;article class=&quot;post&quot;&gt; blog post &lt;/article&gt; &lt;/div&gt; &lt;aside id=&quot;sidebar&quot;&gt; &lt;section class=&quot;widget&quot;&gt; widget &lt;/section&gt; &lt;/aside&gt; &lt;footer id=&quot;footer&quot;&gt; footer &lt;/footer&gt; &lt;/div&gt;</pre><h4> HTML5.js</h4> <p>IE是永恒的话题;对于我们使用的HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件:</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><div class="embed"><article id="node-260" class="node node-related-books" about="/node/260" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/03.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">HTML5移动Web开发实战</a></h4> <p><a href="http://www.amazon.cn/HTML5移动Web开发实战-石川/dp/B00CU5V1T2/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书从移动Web、设备端配置和优化、交互、响应式设计、设备访问,调试、性能、富媒体等角度出发,包含了60多个实例,详细阐释了如何构建快速、响应式的HTML5移动网站,适用于iOS、Android、Windows Phone和BlackBerry等众多主流移动应用平台...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> CSS</h3> <h4> HTML5块级元素样式</h4> <p>首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些&ldquo;新&rdquo;元素声明为块级:</p> <pre class="brush:css;"> article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }</pre><h4> 主要结构的CSS</h4> <p>忽略细节,我们仍是将注意力集中在大问题上。正如在前文&ldquo;概述&rdquo;中提到的,默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素,左浮动;侧边栏(sidebar)右浮动,宽度为280像素。</p> <pre class="brush:css;"> #pagewrap { width: 980px; margin: 0 auto; } #header { height: 160px; } #content { width: 600px; float: left; } #sidebar { width: 280px; float: right; } #footer { clear: both; }</pre><h4> 截至目前的效果演示</h4> <p>目前我们只是初步完成了页面结构的HTML和默认结构样式,当然,并不包括那些与话题无关的细节实现问题。正如可以在<a href="http://webdesignerwall.com/demo/adaptive-design/demo-step1.html">目前的演示</a>中看到的,由于还没有做任何media query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局<a class="eLink" href="http://beforweb.com">。</a></p> <h3> CSS3 Media Query</h3> <p>终于开始说正事儿了。首先我们需要在页面中调用<a href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>文件,来帮助IE8或是之前的版本支持CSS3 media queries:</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><p>接下来,我们要创建CSS样式表,并在页面中调用:</p> <pre class="brush:xml;"> &lt;link href=&quot;media-queries.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</pre><h4> 当浏览器可视部分宽度大于650px小于980px时(液态布局)</h4> <ul> <li> 将pagewrap的宽度设置为95%</li> <li> 将content的宽度设置为60%</li> <li> 将sidebar的宽度设置为30%</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; } }</pre><h4> 当浏览器可视部分宽度小于650px时(单栏布局)</h4> <ul> <li> 将header的高度设置为auto</li> <li> 将searchform绝对定位在top 5px的位置</li> <li> 将main-nav、site-logo、site-description的定位设置为static</li> <li> 将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏),并取消float设置</li> <li> 将sidebar的宽度设置为100%,并取消float设置</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 650px) { #header { height: auto; } #searchform { position: absolute; top: 5px; right: 0; } #main-nav { position: static; } #site-logo { margin: 15px 100px 5px 0; position: static; } #site-description { margin: 0 0 15px; position: static; } #content { width: auto; float: none; margin: 20px 0; } #sidebar { width: 100%; float: none; margin: 0; } }</pre><h4> 当浏览器可视部分宽度小于480px时</h4> <p>480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时,我们需要做以下调整:</p> <ul> <li> 禁用html节点的字号自动调整。默认情况下,iPhone会将过小的字号放大,我们可以通过-webkit-text-size-adjust属性进行调整。</li> <li> 将main-nav中的字号设置为90%</li> </ul> <pre class="brush:css;"> @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #main-nav a { font-size: 90%; padding: 10px 8px; } }</pre><h3> 弹性图片</h3> <p>我们需要为图片设置max-width: 100%和height: auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:</p> <pre class="brush:css;"> img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }</pre><h3> 弹性内嵌视频</h3> <p>同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:</p> <pre class="brush:css;"> .video embed, .video object, .video iframe { width: 100%; height: auto; }</pre><h3> iPhone中的初始化缩放</h3> <p>默认情况下,iPhone中的Safari浏览器会对页面进行自动缩放,以适应屏幕尺寸。我们可以使用以下的meta设置,将设备的默认宽度作为页面在Safari的可视部分宽度,并禁止初始化缩放。</p> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><h3> 最终效果演示</h3> <p>该范例的最终演示正像我们在本文开始时看到的那样;另外记得,在条件允许的情况下,使用各种典型移动设备(iPhone、iPad、Android、Blackberry等)来检验页面的移动版本<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="html5-css3-responsive-web-design-final-demo" src="/sites/default/files/images/201110/html5-css3-responsive-web-design-final-demo.jpg" style="width: 560px; height: 395px; " /></p> <h3> 要点总结</h3> <h4> Media Query JavaScript</h4> <p>对于那些尚不支持media query的浏览器,我们要在页面中调用css3-mediaqueries.js</p> <pre class="brush:xml;"> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;</pre><h4> CSS Media Queries</h4> <p>实现自适应页面设计的关键之一,就是使用CSS根据分辨率宽度的变化来调整页面布局结构。</p> <pre class="brush:css;"> @media screen and (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } }</pre><h4> 弹性图片</h4> <p>通过max-width: 100%和height: auto实现图片的弹性化。</p> <pre class="brush:css;"> img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }</pre><h4> 弹性内嵌元素(视频)</h4> <p>通过width: 100%和height: auto实现内嵌元素的弹性化。</p> <pre class="brush:css;"> .video embed, .video object, .video iframe { width: 100%; height: auto; }</pre><h4> 字号自动调整的问题</h4> <p>通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整</p> <pre class="brush:css;"> html { -webkit-text-size-adjust: none; }</pre><h4> 页面宽度缩放的问题</h4> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><div class="embed"><article id="node-258" class="node node-related-books" about="/node/258" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="响应式Web设计:HTML5和CSS3实战" src="http://beforweb.com/sites/default/files/images/products/01.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">响应式Web设计:HTML5和CSS3实战</a></h4> <p><a href="http://www.amazon.cn/响应式Web设计-HTML5和CSS3实战-Ben-Frain/dp/B00AH83HUK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来,为读者全面深入地讲解了针对各种屏幕大小进行设计和开发现代网站的各种技术,包括媒体查询、流式布局、相对字体、响应式媒体等...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/17" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HTML5</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/13" typeof="skos:Concept" property="rdfs:label skos:prefLabel">media query</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/18" typeof="skos:Concept" property="rdfs:label skos:prefLabel">语义化</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/19" typeof="skos:Concept" property="rdfs:label skos:prefLabel">WebKit</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Tue, 04 Oct 2011 03:25:02 +0000 C7210 7 at http://www.beforweb.com http://www.beforweb.com/node/7#comments 什么是响应式Web设计?怎样进行? http://www.beforweb.com/node/6 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-responsive-web-design-d.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>开始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joomla文档翻译的;长假好时光,总会可以抽出一两天,安静的窝在家里做做博客、学做些新东西,简直没有比这更舒心的事情。</p> <p>说正事儿。准备在近期的几篇里集中翻译学习一下&ldquo;响应式Web设计&rdquo;的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!...),今天放上的这篇几乎花掉了两天的&ldquo;闲暇时间&rdquo;;对耐力是个考验,努力提高喽。废话结束,here we go.</p> <p>眼下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle...各自打造一款&mdash;&mdash;页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?</p> <p>在Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的;结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。</p> <p>响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 响应式Web设计的概念</h3> <p><a href="http://ethanmarcotte.com/">Ethan Marcotte</a>曾经在A List Apart发表过一篇文章&ldquo;<a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a>&rdquo;,文中援引了响应式建筑设计的概念:</p> <blockquote><p>最近出现了一门新兴的学科&mdash;&mdash;&ldquo;响应式建筑(responsive architecture)&rdquo;&mdash;&mdash;提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产&ldquo;智能玻璃&rdquo;:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。</p> </blockquote> <p>将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。</p> <p>显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。</p> <h3> 调整分辨率</h3> <p>不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于竖屏(portrait),有些是横屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况?</p> <p><img alt="responsive-web-design-screen-portrait-landscape" src="/sites/default/files/images/201110/responsive-web-design-screen-portrait-landscape.jpg" style="width: 550px; height: 300px; " /></p> <p>要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且<a href="http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/">很多用户甚至不去将浏览器的窗口最大化</a>;类似这样的变数,我们还要考虑多少呢?</p> <p>Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(<a href="http://www.quirksmode.org/mobile/mobilemarket.html">查看报告</a>),下图展示了大致的统计结果:</p> <p><img alt="responsive-web-design-screen-sizes" src="/sites/default/files/images/201110/responsive-web-design-screen-sizes.jpg" style="width: 550px; height: 300px; " /></p> <p>在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着&ldquo;多方案&rdquo;的思路继续走下去;那么我们应该怎样做呢?</p> <h4> 部分解决方案:一切弹性化</h4> <p>几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。</p> <p>现在,我们可以通过响应式的设计和开发思路让页面更加&ldquo;弹性&rdquo;了。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。</p> <p>在前文提到的Ethan Marcotte的文章中,他通过<a href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html">一个实例</a>展示了响应式Web设计在页面弹性方面的特性:</p> <p><img alt="responsive-web-design-flexible-demo" src="/sites/default/files/images/201110/responsive-web-design-flexible-demo.jpg" style="width: 550px; height: 321px; " /></p> <p>该实例的实现方式完美的结合了<a href="http://www.alistapart.com/articles/fluidgrids/">液态网格</a>和<a href="http://unstoppablerobotninja.com/entry/fluid-images">液态图片</a>技术,并且聪明的在正确的地方使用了正确的HTML标记。&ldquo;液态网格&rdquo;是一种很常见的实践方式;对于&ldquo;液态图片&rdquo;技术,下面的文章做了不错的介绍:</p> <ul> <li> <a href="http://zomigi.com/blog/hiding-and-revealing-portions-of-images/">Hiding and Revealing Portions of Images</a></li> <li> <a href="http://zomigi.com/blog/creating-sliding-composite-images/">Creating Sliding Composite Images</a></li> <li> <a href="http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/">Foreground Images That Scale With the Layout</a></li> </ul> <p>说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》,或是下载个样章先:&ldquo;<a href="http://www.flexiblewebbook.com/bonus.html">怎样创建弹性图片</a>&rdquo;。另外,Zoe的这篇&ldquo;<a href="http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/">Essential Resources for Creating Liquid and Elastic Layouts.</a>&rdquo;提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。</p> <p>从技术角度讲,虽然听上去这些都简单可行,但它比&ldquo;将这些功能结合在一起&rdquo;要复杂些。举个例子,仔细观察Ethan Marcotte提供的实例中的logo图片:</p> <p><img alt="responsive-web-design-flexible-demo-logo" src="/sites/default/files/images/201110/responsive-web-design-flexible-demo-logo.jpg" style="width: 550px; height: 321px; " /></p> <p>如果我们将浏览器窗口不断调小,会发现logo图片的文字部分始终会保持同比缩小,保证其完整可读,而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分:插图作为页面标题的背景图片,会保持尺寸,但会随着布局调整而被裁切;文字部分则是一张单独的图片。</p> <pre class="brush:xml;wrap-lines:false;"> &lt;h1 id=&quot;logo&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;site/logo.png&quot; alt=&quot;The Baker Street Inquirer&quot; /&gt;&lt;/a&gt; &lt;/h1&gt;</pre><p>其中,&lt;h1&gt;元素使用插图作为背景,文字部分的图片始终保持与背景的对齐<a class="eLink" href="http://beforweb.com">。</a></p> <p>这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短,并且logo文字最终会变的小到难以识别,背景图片也会被过多的裁切。</p> <h3> 弹性图片</h3> <p>响应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的<a href="http://unstoppablerobotninja.com/entry/fluid-images/">液态图片</a>一文中也有提到。</p> <pre class="brush:css;"> img { max-width: 100%;}</pre><p>只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的<a href="http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/">CSS Media Query for Mobile is Fool&rsquo;s Gold</a>一文中提到的,&ldquo;液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。&rdquo; 一种简而美的方法。</p> <p>图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。</p> <h4> 响应式图片</h4> <p>由Filament Group提出的&ldquo;响应式图片&rdquo;技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下<a href="http://filamentgroup.com/examples/responsive-images/">demo页面</a>先。</p> <p><img alt="responsive-web-design-flexible-image-filamentgroup" src="/sites/default/files/images/201110/responsive-web-design-flexible-image-filamentgroup.jpg" style="width: 550px; height: 300px; " /></p> <p>这个技术的实现需要使用几个相关文件,我们可以<a href="https://github.com/filamentgroup/Responsive-Images">在Github上获取</a>。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考<a href="https://github.com/filamentgroup/Responsive-Images#readme">Responsive Images的说明文档</a>。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径&ldquo;/rwd-router&rdquo;。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的&ldquo;响应式图片&rdquo;,并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。</p> <p>这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。</p> <h4> 禁用iPhone中的图片自动缩放</h4> <p>在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示<a class="eLink" href="http://beforweb.com">。</a></p> <p><img alt="responsive-web-design-iphone" src="/sites/default/files/images/201110/responsive-web-design-iphone.jpg" style="width: 550px; height: 400px; " /></p> <p>我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的&lt;head&gt;部分添加以下代码(详情可以参考<a href="http://thinkvitamin.com/design/responsive-design-image-gotcha/">Think Vitamin的相关文章</a>):</p> <pre class="brush:xml;"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0&quot;&gt;</pre><p>将initial-scale的值设定为&ldquo;1&rdquo;,即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹<a href="http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html">果官方的文档</a>。</p> <h3> 打造布局结构</h3> <p>当页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表,或者更有效的,使用CSS media query。这不会引起多大的麻烦,多数样式设定不会被影响和改变,只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。</p> <p>我们可以使用一个默认主样式表来定义页面的主要结构元素,比如#wrapper、#content、#sidebar、#nav等的默认布局方式,以及一些全局性的配色和字体方案。</p> <p>我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:</p> <p>下面的代码可以放在默认主样式表style.css中:</p> <pre class="brush:css;"> /* Default styles that will carry to the child style sheet */ html,body{ background... font... color... } h1,h2,h3{} p, blockquote, pre, code, ol, ul{} /* Structural elements */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } </pre><p>下面的代码可以放在子级样式表mobile.css中,专门针对移动设备进行样式覆写:</p> <pre class="brush:css;"> #wrapper{ width: 90%; } #content{ width: 100%; } #sidebar-left{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right{ width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } </pre><p>大致的视觉效果如下图所示:</p> <p><img alt="responsive-web-design-moving-structure" src="/sites/default/files/images/201110/responsive-web-design-moving-structure.jpg" style="width: 550px; height: 600px; " /></p> <h4> Media Queries</h4> <p>CSS3支持CSS2.1所支持的所有媒体类型,例如screen、print、handheld等,同时添加了很多涉及媒体类型的功能属性,包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向,横屏或竖屏)和color。在CSS3发布之后出现的新玩具,如iPad或Android相关设备,都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式,而忽略那些不支持CSS3的台式机中的旧浏览器<a class="eLink" href="http://beforweb.com">。</a></p> <p>在Ethan的文章中,我们能看到一段media query使用实例:</p> <pre class="brush:xml;"> &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen and (max-device-width: 480px)&quot; href=&quot;shetland.css&quot; /&gt;</pre><p>代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过480px,则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息,可以参考&ldquo;<a href="http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html">The Orientation Media Query</a>&rdquo;一文。</p> <p>我们可以创建多个样式表,以适应不同设备类型的宽度范围。<a href="http://www.alistapart.com/articles/responsive-web-design/">Ethan的文章</a>中的&ldquo;Meet the media query&rdquo;部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中:</p> <pre class="brush:css;"> /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } </pre><p>上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式,与通过media queries调用不同样式表的方式之间的区别与联系,可以参考&ldquo;<a href="http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries">Hardboiled CSS3 Media Queries</a>&rdquo;一文。</p> <h4> CSS3 Media Queries</h4> <p>上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值,不久的将来则一定会全部派上用场。</p> <p><strong>min-width</strong>和<strong>max-width</strong>这两个属性很靠谱。通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之。</p> <p>下面的几个示例中,我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述,这样做更加高效,减少请求数量。</p> <pre class="brush:css;"> @media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }</pre><p>上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。</p> <pre class="brush:css;"> @media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } }</pre><p>而这段代码的作用则相反:aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。</p> <p>可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候,我们希望通过media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用<strong>min-device-width</strong>与<strong>max-device-width</strong>,用来判断设备本身的屏幕尺寸。</p> <pre class="brush:css;"> @media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } }</pre><pre class="brush:css;"> @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } }</pre><p>还有一些其他方法,可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章:</p> <ul> <li> <a href="http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/">CSS for iPhone 4 (Retina display)</a></li> <li> <a href="http://thomasmaier.me/2010/03/howto-css-for-the-ipad/">How To: CSS for the iPad</a></li> </ul> <p>对于iPad来说,<strong>orientation</strong>属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。</p> <pre class="brush:css;"> @media screen and (orientation: landscape) { .iPadLandscape { width: 30%; float: right; } }</pre><pre class="brush:css;"> @media screen and (orientation: portrait) { .iPadPortrait { clear: both; } }</pre><p>不幸的是,这个属性目前确实只在iPad上有效。对于其他可以转屏的设备,譬如iPhone,可以使用min-device-width和max-device-width来变通实现;详情可以参考&ldquo;<a href="http://www.thecssninja.com/css/iphone-orientation-css">Determine iPhone orientation using CSS</a>&rdquo;一文。</p> <p>我们还可以将上述属性组合使用,来锁定某个屏幕尺寸范围:</p> <pre class="brush:css;"> @media screen and (min-width: 800px) and (max-width: 1200px) { .classForaMediumScreen { background: #cc0000; width: 30%; float: right; } }</pre><p>上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。</p> <p>其实,很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:</p> <pre class="brush:xml;"> &lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width: 600px)&quot; href=&quot;small.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (min-width: 600px)&quot; href=&quot;large.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; media=&quot;print&quot; href=&quot;print.css&quot; /&gt;</pre><p>所以呐,凡事没有绝对,最好根据实际情况决定使用media queries的方式。比如,对于iPad,我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向,这种情况下,要保证页面在极短的时间内响应屏幕尺寸的调整,我们必须选择效率最高的方式。</p> <div class="embed"><article id="node-266" class="node node-related-books" about="/node/266" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div><span class="thumbnail"><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="众妙之门-精通CSS3" src="http://beforweb.com/sites/default/files/images/products/10.jpg" /></a></span></div> <div class="content"> <h4><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">众妙之门:精通CSS3</a></h4> <p><a href="http://www.amazon.cn/众妙之门-精通CSS3-德-Smashing-Magazine/dp/B00CJGM90C/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书内容是知名网页设计网站Smashing Magazine上关于CSS专题的知识及经验的分享,包含了许多资深网页设计师提供的各类实用技术、技巧和指南,内容涉及布局、响应式网页设计、字体排版、跨浏览器兼容性及其他的高级CSS技术...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h4> JavaScript</h4> <p>JavaScript也是我们的武器之一,特别是当某些旧设备无法完美支持CSS3的media query时,它可以作为后备支援。幸运的是,已经有专门的JS库来帮助旧浏览器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很简单,下载<a href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>并在你的页面中调用它。</p> <p>而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度,并为不同的情况调用不同的样式表:</p> <pre class="brush:jscript;"> &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function(){ $(window).bind(&quot;resize&quot;, resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // If width width is below 600px, switch to the mobile stylesheet if(newWindowWidth &lt; 600){ $(&quot;link[rel=stylesheet]&quot;).attr({href : &quot;mobile.css&quot;}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth &gt; 600){ $(&quot;link[rel=stylesheet]&quot;).attr({href : &quot;style.css&quot;}); } } }); &lt;/script&gt; </pre><p>类似这样的解决方案还有很多。所以我们要清楚,media queries不是一个绝对唯一的答案,它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript,我们则可以实现更多的变化。这篇&ldquo;<a href="http://www.quirksmode.org/blog/archives/2010/08/combining_media.html">Combining Media Queries and JavaScript</a>&rdquo;向我们展示了JavaScript配合media queries的更多细节信息。</p> <div class="embed"><article id="node-270" class="node node-related-books" about="/node/270" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS Web应用开发:运用HTML5、CSS3与JavaScript" src="http://beforweb.com/sites/default/files/images/products/14.jpg" /></a></span></div> <div class="content"> <h4> <a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS Web应用开发:运用HTML5、CSS3与JavaScript</a></h4> <p><a href="http://www.amazon.cn/iOS-Web应用开发-运用HTML5-CSS3与JavaScript-皮基/dp/B00E88LV0S/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点是使用HTML5、CSS3 及JavaScript等Web标准来为iOS做设计与开发,主题围绕为Apple移动设备设计界面和开发应用的完整流程而展开。读者除了能从中学习相关Web标准、专有技术、工具以及一切有助于设计和开发的东西,还能亲身体验适用于所有面向移动项目的真实工作流程...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 显示或隐藏内容</h3> <p>通过前文的学习,我们已经了解到,对于响应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方法。但是对于页面中的文字内容信息来说,则不能简单的只从&ldquo;同比缩小&rdquo;和&ldquo;调整布局结构&rdquo;这两方面去处理。对于手机等移动设备来说,在文字内容方面,已经有了很多最佳实践方式和指导原则:简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。</p> <p><img alt="responsive-web-design-digg-app" src="/sites/default/files/images/201110/responsive-web-design-digg-app.jpg" style="width: 550px; height: 425px; " /></p> <p>响应式Web设计的思想,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另一方面,则是增强可读性和易用性,帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。</p> <p>有一条样式代码,我们已经使用了多年:</p> <pre class="brush:css;"> display: none;</pre><p>我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也可以使用前文的方法,通过JS判断当前硬件屏幕规格,在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如,对于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一个简单的导航结构,其中的导航元素可以指向详细内容页面<a class="eLink" href="http://beforweb.com">。</a></p> <p>注意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说,避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例:</p> <p><img alt="responsive-web-design-content" src="/sites/default/files/images/201110/responsive-web-design-content.jpg" style="width: 550px; height: 600px; " /></p> <p>图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:</p> <pre class="brush:xml;"> &lt;p class=&quot;sidebar-nav&quot;&gt;&lt;a href=&quot;#&quot;&gt;Left Sidebar Content&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Right Sidebar Content&lt;/a&gt;&lt;/p&gt; &lt;div id=&quot;content&quot;&gt; &lt;h2&gt;Main Content&lt;/h2&gt; &lt;/div&gt; &lt;div id=&quot;sidebar-left&quot;&gt; &lt;h2&gt;A Left Sidebar&lt;/h2&gt; &lt;/div&gt; &lt;div id=&quot;sidebar-right&quot;&gt; &lt;h2&gt;A Right Sidebar&lt;/h2&gt; &lt;/div&gt;</pre><p>下面是默认的主样式表,其中,我们要隐藏掉链接导航部分(sidebar-nav),因为默认样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。</p> <pre class="brush:css;"> #content{ width: 54%; float: left; margin-right: 3%; } #sidebar-left{ width: 20%; float: left; margin-right: 3%; } #sidebar-right{ width: 20%; float: left; } .sidebar-nav{display: none;}</pre><p>下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并使sidebar-nav显示出来。借助JavaScript,当用户点击sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变侧边栏的display属性值,也可以为其添加额外的布局样式。</p> <pre class="brush:css;"> #content{ width: 100%; } #sidebar-left{ display: none; } #sidebar-right{ display: none; } .sidebar-nav{display: inline;}</pre><p>现在,我们的页面已经可以随着设备和屏幕规格的变更,响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备,我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如,针对手机设备,使用一个特定的样式,将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读:</p> <ul> <li> <a href="http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/">Mobile Web Design Trends For 2009</a></li> <li> <a href="http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml">7 Usability Guidelines for Websites on Mobile Devices</a></li> </ul> <h4> 触屏与鼠标</h4> <p>触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品,比如手机,但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如<a href="http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=series_detail&amp;category=notebooks&amp;series_name=tm2t_series&amp;aoid=51320&amp;keyword=hp+touchsmart+tm2&amp;tafcjnef=fy10&amp;DS_KWID=p117477087">HP Touchsmart tm2t</a>,即使用传统的键鼠设备,同时也加入了触屏技术。</p> <p><img alt="responsive-web-design-touchscreen" src="/sites/default/files/images/201110/responsive-web-design-touchscreen.jpg" style="width: 550px; height: 368px; " /></p> <p>相比于传统的基于鼠标指针的互动,触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸,要使我们的设计方案同时满足这两类设备的规范,并非一件难事,只是有些地方需要注意。比如,触屏设备无法反映CSS定义的hover行为及相应的样式,因为它没有鼠标指针的概念,手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。</p> <p>有兴趣的话,可以读读这篇&ldquo;<a href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for Touchscreen</a>&rdquo;,这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。</p> <div class="embed"><article id="node-284" class="node node-related-books" about="/node/284" typeof="sioc:Item foaf:Document"><section class="embed-article"><div class="embed-article-entry"><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div> <div> <span class="thumbnail"><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23"><img alt="移动Web实现指南:面向移动设备的网站优化、开发和设计" src="http://beforweb.com/sites/default/files/images/products/29.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">移动Web实现指南:面向移动设备的网站优化、开发和设计</a></h4> <p><a href="http://www.amazon.cn/移动Web实现指南-面向移动设备的网站优化-开发和设计-莱昂/dp/B008LWRNE0/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;qid=1380852823&amp;sr=8-18&amp;tag=c7210-23">全书介绍了移动化规划、移动化设计和相应的编码技巧,特别适用于那些最初是为桌面电脑展示而设计的网站。书中的建议和实例,也是根据在优化这些网站的过程中所遇到的不同挑战来组织的...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> </div></div></div><ul class="field_categories"><li class="design taxonomy-term-reference-0"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li><li class="front-end taxonomy-term-reference-1"><a href="/front-end" typeof="skos:Concept" property="rdfs:label skos:prefLabel">前端</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/7" typeof="skos:Concept" property="rdfs:label skos:prefLabel">响应式Web设计</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/8" typeof="skos:Concept" property="rdfs:label skos:prefLabel">CSS3</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/9" typeof="skos:Concept" property="rdfs:label skos:prefLabel">JavaScript</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/13" typeof="skos:Concept" property="rdfs:label skos:prefLabel">media query</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网站移动化</a></li></ul> Sat, 01 Oct 2011 13:05:19 +0000 C7210 6 at http://www.beforweb.com http://www.beforweb.com/node/6#comments