Be For Web - 移动设备 http://www.beforweb.com/taxonomy/term/10 en iOS Wow体验 - 第二章 - iOS用户体验解析(2) http://www.beforweb.com/node/69 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-2.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"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第二章译文精选的第二部分,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/66">Wow体验 - 第二章 - iOS用户体验解析(1)</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>在本书后面的章节中,我们将深入探讨那些可以为iOS应用带来独特交互效果的理念与方法。不过在那之前,我们还需要再花些时间对iOS用户体验中的一些尚未成文的方面加以解析。</p> <p>在iOS交互模型的最底层,有一个&ldquo;空间&rdquo;的概念,用户就是在这个空间中前后行进,完成各种目标任务的。我们可以把这个概念想象成一个微小的宇宙,里面囊括着全部的系统功能及应用程序。与真实世界相仿,这个宇宙也有它自己的规则和限制,它所固有的属性会作用于其中的万物。</p> <p>了解了这个交互空间中的基本原理之后,我们不仅能够打造出更加卓有成效的产品设计方案,甚至还可以冲破这个空间的限制,自己创造全新的规则<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3 id="a1"> iOS空间模型</h3> <p>从本质上讲,iOS是一个平面环境,当然也有些例外因素。所谓&ldquo;平面环境&rdquo;,是指其视觉呈现方式是基于二维的。虽然用户界面处于平面环境,但iOS的交互操作方式却不受制于二维,它通常由三个互相依存的层面构成,其中的每一层都拥有特定的交互机制。这些机制决定了系统中的操作流程应该以怎样的方式贯穿于不同的层面。</p> <p>我们将这三层界面拆解开来,并根据它们对操作流程的重要程度,依次列在下面:</p> <ul> <li> <strong>默认层</strong>:由应用图标和停靠栏组成;来自于用户的交互行为多数会直接作用在这个层面上。</li> <li> <strong>隐含层</strong>:由多任务栏以及其中的相关功能元素组成。对于系统来说,这层空间是一种结构上的补充,主要用来提供一些组织与导航方面的功能支持。</li> <li> <strong>叠加层</strong>:用于显示对话框、警告、模态窗口和弹出信息等界面元素。</li> </ul> <p><a href="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interface-planes.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-interface-planes" src="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interface-planes.png" style="width: 550px; height: 179px;" /></a></p> <p class="figure-caption">图 2-1 用户界面的三个层面 (从左到右依次为默认层、隐含层、叠加层)</p> <p>这些层面共存于一个很紧凑的视觉空间当中,从界面渲染的视觉效果上来看,它们之间在z轴方向上仅相隔一两毫米的距离。虽然这只是一种基于二维图形环境的立体视觉效果,但它却体现着这些层面在交互空间当中的密切关系。可以说,这种视觉上的临近关系,强化了用户对这些空间层面之间关联性的认知。另外,隐含层的存在还可以帮助iOS维持一种印象,让人始终觉得在界面以外还有一些额外的功能存在。</p> <p>通常,在这三个层面之中,默认层被使用到的次数最为频繁,而且它对交互行为的支持程度也是最高的。相比之下,在另外两个层面中发生的交互行为要少的多,因为它们本身所具有的功能相对有限。隐含层存在的主要目的是为组织与导航提供支持。它为iOS用户界面带来的伸缩性,在一定程度上解决了我们在前文所说的应用数量过多导致的管理与导航方面的问题。另一方面,我们也可以将隐含层理解为默认层的一种状态变化;这两个层面的交互模型共同构成了iOS的核心用户界面。</p> <p>而叠加层所包含的元素对象,包括对话框、警告、模态窗口等,与另外两个层面的组成元素有很大区别。我们可以从不同的角度来审视这些对象,例如,它们会导致操作流程的中断、它们是临时性的、它们在核心用户界面中没有一个类似首页的容器等等。也许是因为与叠加层的交互过程在感觉上通常很自然,所以我们会认为这种交互模型的存在方式是理所应当的。而实际上,这些交互对象还能以很多不同的方式存在于核心用户界面中,譬如在屏幕中保留一部分区域,专门用来显示这些元素。不过苹果认为,将这些交互对象呈现在一个独立的层面上,将是一个更合理的解决方案。相比于其他两个层面,叠加层中发生的交互行为是最少的,但同时,当这个层面中的界面元素呈现出来的时候,它们所获得的注意力也是最多的。</p> <!--为什么是这样呢?对于任何类型的用户界面来说,警告和对话框都是交互流程中的关键信息呈现点;目前的标准做法是将这些元素从界面中弹出,并叠加在所有其他元素之上。对话框本身具有模态窗口的特征,它会从系统的层面上中断当前的操作流程。苹果将这种设计模式运用在警告的呈现上,有效的增强了信息的传达效果,使用户更加清楚接下来应该做些什么。--><p>那么我们在前文中提到过的&ldquo;例外&rdquo;又是指什么呢?在iPhone的&ldquo;音乐&rdquo;应用中,当用户正处于播放列表、专辑、曲目等视图界面的时候,如果掉转设备至横屏状态,就可以看到旋转木马形式的专辑列表;重新恢复竖屏状态之后,又会回到之前的传统界面。</p> <p>&ldquo;旋转木马&rdquo;的三维立体模型不同于我们之前讨论到的任何一种交互元素形式。在这个模型空间中,元素队列只能沿着x轴移动于横屏视图的固定框架中(见图 2-2)。&ldquo;固定框架&rdquo;的概念与iOS其他层面的交互模型有很大差异,在那些层面中,当用户浏览着屏幕中的应用图标时,他们所感知到的是自己的视线正在从A点移动B点;也正是这种感知定义了iOS二维环境的概念。然而,当用户与旋转木马模型进行交互的时候,虽然对象被移动着,但视线却是静止不动的。无论模型框架中有多少对象,视点始终保持不变。从iOS用户体验的整体角度来看,这种视觉交互方式确实是一种相反的特例。</p> <p><a href="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-carousel-view-spatial-model.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-carousel-view-spatial-model" src="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-carousel-view-spatial-model.png" style="width: 550px; height: 279px;" /></a></p> <p class="figure-caption">图 2-2 旋转木马视图的立体模型</p> <p>对组成iOS交互环境的三个层面的基础视觉构成做了一定程度的了解之后,我们来详细深入的看一看用户的交互行为是怎样移动于界面空间中的x轴与y轴上的。在iOS中,这两个方向上的操作代表了截然不同的交互行为。x轴上的操作多数属于导航行为,而y轴上的则多是用于内容浏览等方面。x轴是关于&ldquo;左&rdquo;和&ldquo;右&rdquo;的,这正符合我们在现实生活中对于导航的认知。在主屏幕中,向左轻扫会使界面进入下一屏,而向右轻扫则会进入搜索界面。可以说,整个iOS系统顶层是由一组各自独立的界面空间所构成的,其中左侧扩展出一屏(搜索界面),右侧扩展出十一屏(iOS的上限)。用户通过左右移动来进入相邻的界面空间;每一个空间的尺寸范围都由固定数目的应用图标所界定。</p> <p><a href="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interaction-behavior.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-interaction-behavior" src="/sites/default/files/images/201204/Deconstructing-the-iOS-User-Experience-iphone-interaction-behavior.png" style="width: 550px; height: 271px;" /></a></p> <p class="figure-caption">图 2-3 x轴与y轴的交互行为</p> <p>很多层级化信息结构中的导航行为也是发生在x轴上的。在这方面,iOS的&ldquo;设置&rdquo;应该是我们最为熟知的例子:在&ldquo;设置&rdquo;的主界面中,我们可以看到一个顶级分类列表,其中的每个分类选项当中都有一个指向右侧的箭头。随便选择一个分类,比如&ldquo;通用&rdquo;;在接下来的过渡动画效果中,当前界面会逐渐向左移出屏幕的可视区域,而右侧的相邻界面则会随之进入视图。你可以继续选择其中的某个具有下级结构的选项,重复这样的操作,直到进入信息结构的最底层。我们还可以点击左上角的按钮回到上一层结构。在回退的过程中,界面的切换方式与之前的正好相反。不过必须承认,这种沿着同一条路径进入下层或是退回上层的方式,并不适用于层级层次过多的结构;这也正是苹果在人机界面设计规范中强调层级化信息结构的层次数量必须受到约束和限制的原因。</p> <p>而y轴上的操作则通常用于内容浏览。目前来看,iOS对于界面的纵向长度是没有限制的。也就是说,所有y轴上的交互行为都是发生在同一个界面空间中的;这与x轴上的行为方式形成了鲜明的对比。正像前面提到的,x轴上的交互行为能够让我们对一组各自独立的界面空间产生感知;在这些空间中,我们必须逐一前进或后退。而y轴上的交互体验则要流畅的多。</p> <p>很大程度上讲,交互空间模型是由我们对于交互对象行为特性的感知来定义的。这些交互对象本身的行为表现会增强或削弱模型的体验度。在iOS中,苹果为各类界面元素所赋予的行为方式都具有高度的一致性。其中,最重要也是最常见的就是过渡动画效果。从用户体验的角度讲,&ldquo;过渡&rdquo;就是一种用来展示状态变化的机制。我们之所以能够对界面空间产生感知,很大程度上所依靠的正是视觉上的过渡效果。</p> <p><!--目前为止我们所讨论到的问题,基本都是关于iOS系统本身的。而各类应用中的界面空间模型则是另外一个话题了。通常,应用内部的交互模型并不需要受到系统本身的限制。人机界面设计规范确实提供了一套最佳实践方案,但这并不意味着设计师必须完全遵照规范进行实际工作,同样,应用也不必照搬iOS系统自身的界面空间模型。实际上,我们可以发现很多应用都在明确地走着自己的路线。不过,我们仍然可以从它们身上观察到一些具有普遍代表性的交互方式。最容易发现这些共同点的地方就是应用的出入口。--></p> <p>通常,我们可以从系统中的很多地方进入某个应用,而不同的入口所涉及的过渡动画效果也有所区别:</p> <ul> <li> <strong>通过系统主屏幕或后续界面进入应用</strong>:这是用户进入应用的最常规的方式。在过渡效果方面,应用界面会从当前系统界面后方显现出来,并将周围的应用图标&ldquo;挤&rdquo;到屏幕可视范围之外。从视觉上说,这会给人一种感觉,仿佛被打开的应用界面移进了由其他图标所组成的系统界面中。</li> <li> <strong>通过Spotlight</strong><strong>搜索结果进入应用</strong>:对于典型的iOS用户来说,这恐怕是我们正在说到的三种入口类型之中最少被用到的。当用户在这里选择了某个应用之后,搜索结果界面会表现出一种向后退去并最终消失于一点的过渡效果,而应用界面会紧随其后从同一个点出发,向前移动并最终完整地呈现出来。</li> <li> <strong>通过多任务切换功能进入应用</strong>:多任务切换功能有它自己的独特行为模式。当其中的应用被选中的时候,包括多任务栏在内的整个当前界面会以围绕着y轴旋转的方式移到后面,与此同时,被激活的应用界面也会以同样的方式绕到最前方;两者在旋转过程中的定位点是相同的。我们可以在这种独特的行为当中了解到一些含义:首先,这种视觉效果很好的表达出了&ldquo;切换&rdquo;的概念。其次,从&ldquo;多任务&rdquo;的角度来看,这种方式也是非常合理的,因为我们会感觉到,当前所离开的应用只是暂时退到了后面,它并没有随着被激活应用的进入而关闭或彻底消失。</li> </ul> <p>而在应用的出口方面,任何时候我们都可以通过Home键退出应用回到主屏幕;在这个过程中,应用界面会向后退去并最终消失于一点。不过,目前还没有什么方式可以让我们从应用中直接进入Spotlight搜索界面。至于多任务切换功能,它本身已经包含了象征&ldquo;退出&rdquo;的过程。</p> <p>这些不同的方式之间具有怎样的共同特征呢?在过渡动画效果方面,它们都突破了系统核心用户界面的二维环境,视觉呈现方式已经不再限于常规导航行为中所使用的线型移动。站在用户的角度,这些方式可以帮助他们建立起一套基于应用的交互行为预期,这其中的互动体验与系统核心用户界面中的有很大不同。</p> <!--<p>对于iOS用户体验的这些微妙的组成要素,我们必须逐一分析并加以理解,才能明白是什么原因让这个系统能够如此的简洁易用并符合用户直觉。对于界面空间模型的认知,可以帮助我们从更深的层面对iOS的用户体验进行观察。</p>--><h3 id="a2"> 简洁易用</h3> <!--<p>要更好的理解iOS用户体验原理,我们必须对很多重要设计方案背后的那些设计理念做以了解。虽然苹果的人机界面设计规范在这方面做过一定的介绍,但我们最好还是花些时间来看看这些概念是在哪些具体的地方以怎样的方式体现出来的。</p>--><p>iOS人机界面设计规范中的很多重要内容都是围绕着设计主旨与设计模式方面的话题展开的;而其中所体现出来的最主要的设计思想就是&ldquo;简洁&rdquo;。</p> <p>&ldquo;简洁&rdquo;的概念,就它字面的意思来看,似乎很容易在设计中加以实现。但是要在一个具有高度复杂性的交互系统当中实现这个目标,其实是一件很困难的事。可以说,简洁的是产品给用户带来的感受,而不是创造这种感受的过程。这种体验背后所蕴藏的复杂理念与技术方法是用户在人机交互过程中难以直接发现的。</p> <p>接下来,我会试着将 &ldquo;简洁&rdquo;的设计思想拆解成一系列设计原则并加以分析。需要说明的是,我们将要看到的这些原则,在iOS人机界面设计规范中并没有被明确的讲述到。我所做的是将规范中的一些关键内容进行抽象处理,使这些理论具有更好的普遍适用性和指导性。</p> <ul> <li> <strong>精简导航结构</strong>:对导航结构进行精简,去除那些会分散用户注意力的多余条目。要避免使用过于复杂的非线型导航结构。通常,单一路径的线型导航操作更适合iOS简单直接的交互风格。</li> <li> <strong>将界面划分为不同区域</strong>:在设计过程中,试着以区域为单位,将界面中的各种交互元素按照不同的内容与功能逻辑进行划分。对用户来说,逻辑区域才是主要的交互对象。</li> <li> <strong>控制交互元素的数量</strong>:任何时候都要记得控制界面中的交互元素数量。对于复杂的应用,可以试着将功能部署在不同的界面中,并对它们进行分组。</li> <li> <strong>保持交互元素的简洁</strong>:界面当中出现的交互元素的种类也不要过多,以避免用户产生迷惑。在输出形式上,可以通过短标签文字或小图标使交互对象更加容易辨识。</li> <li> <strong>让系统做更多的事</strong>:很多应用都会把管理方面的功能集成到iOS的&ldquo;设置&rdquo;当中,这样可以有效的降低应用本身的复杂度。</li> <li> <strong>隐藏界面元素</strong>:我们可以很多情况下将某些控制元素隐藏起来,当用户需要使用相关功能的时候,通过简单的手势就可以将它们调出。关键是要提供一种机制,让用户明白这些控制元素的出现是暂时的,当它们隐藏起来的时候,又可以通过怎样的方式让它们呈现出来。</li> <li> <strong>随用随到的功能</strong>:努力做到只在流程需要的地方提供相应的功能,不要让所有的功能都成为全局性的,否则界面的复杂度将大幅度提升。</li> <li> <strong>不要过分强调品牌认知</strong>:没有必要反反复复地向用户灌输品牌信息。在应用的使用流程中,找到一个最合适的点,将品牌信息进行展示,然后淡化它的存在,只留一个入口给用户,当他们需要了解品牌相关信息的时候,确保可以访问到。</li> <li> <strong>状态的维持与恢复</strong>:不能假设用户会连贯地使用应用直到完成任务目标。移动设备的用户通常习惯于多任务操作,当他们正处于某个任务流程当中时,很可能会反复地退出和重新进入这个应用。所以我们必须保证,当用户暂时离开的时候,应用的当前状态是可以得到维持的;当他们回来之后,流程仍可以恢复到暂停之前的状态,并继续下去。</li> <li> <strong>保存用户输入的内容</strong>:与前面一点类似,对于内容创作类的任务来说,不仅需要让当前的内容状态在应用被退出之后得到维持,即使没有退出,也要通过自动保存等方式来确保该应用的其他功能流程不会造成用户已输入内容的丢失。</li> <li> <strong>避免过多的手势操作</strong>:不要让太多的功能必须依靠独特的手势才可以进行交互操作。如果一款应用要求用户必须学习新手势,并充分理解和记住它们的作用,那么它将很难被广泛接受。</li> <li> <strong>对等级化信息结构的层级约束</strong>:导航的等级结构深度必须受到合理的限制。想要将层次过多的导航结构设计的易于理解、便于操作,虽然并非不可能,但挑战是巨大的,我们要考虑的因素包括屏幕定向方式对界面布局的影响,以及在过多的层级中通过线型方式沿着单一路径逐层浏览所产生的乏味与厌倦感等。</li> <li> <strong>应用的模态特征</strong>:用户一次只能对一款应用进行操作。即使多任务栏显示当前系统中正运行着多个应用,用户也仍是需要在它们之间进行切换,逐一使用。至少现在,iOS中还没有真正的多应用共存视图模式,也许将来我们会在iPad这样的大尺寸设备中看到类似的功能。</li> </ul> <p>这些设计原则彼此之间并不是互相孤立的,它们会相辅相成的作用于产品的简洁特质当中。</p> <p>这些设计原则中同样存在一些弊端。以&ldquo;隐藏界面元素&rdquo;为例,虽然这种方式可以有效的降低界面复杂度,但从另外一方面来说,它有可能对用户的认知行为造成额外的负担。当某些元素处于隐藏状态的时候,用户必须去搞清楚它们究竟在哪里,是怎样跑到那里去的,自己应该通过怎样的方式才能让它们回到界面中。如果调出的方法只涉及一些简单的操作,那没什么问题;一旦必须通过复杂的交互行为才可以做到的话,这将给用户带来不小的麻烦。</p> <p>另外,当界面中的交互元素过多的时候,它们的标签文字也会造成问题。这些文字的显示同样是需要空间的,而且只有当周围的空间足够大时,它们才容易被辨识。所以很多时候我们会发现,即使在设计过程中为标签文字保留了足够放置它们的空间,整个界面给人的感觉依然是复杂混乱的<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> <!--<p>苹果在人机界面设计规范中强调了高密度的信息与功能的重要性。文中建议,应用的作者们 &ldquo;对于用户输入的任何信息,都要力争在信息或功能上做出最大程度的反馈。这样,用户就会对进程有所感知,而不会误认为程序发生了延迟。&rdquo;我认为,苹果所要表达的,是希望应用程序可以向用户提供具有连贯性的交互体验,避免用户在产品使用过程当中产生负面感受<a class="eLink" href="http://beforweb.com">。</a></p>--><h3 id="a3"> 第二章总结</h3> <p>在本章里,我们对那些定义了iOS用户体验的基础要素进行了全方位的分析。从中我们可以看到,对于iOS这样简洁易用并且符合用户感知的系统平台,其背后蕴藏着多少看上去互不相关的设计理念与技术方法。</p> <p>相比于传统计算设备中的隐喻化系统环境,iOS用户界面的设计理念更倾向于功用与效能,而这一点对于iPhone这样的小尺寸设备来说尤为重要。iPad所面向的则是更加闲适化的需求,娱乐性的重要程度超过了速度与效率;在它身上并不存在传统移动设备中关于效用与隐喻的历史遗留问题。</p> <p>&ldquo;直接操纵&rdquo;的理念是触屏交互方式的基石。用户通过触摸的方式直接控制界面中的交互对象,完成某项任务。在整个过程中,输入方式与交互对象的介质距离是如此的近,以至于用户难以察觉到虚拟的交互对象与现实的操作行为之间的屏障。</p> <p>手势将触屏交互方式的潜质发挥到了新的高度,多点触摸的操作模式已经超越了直接操纵理论所定义的基本输入方式的范畴。</p> <p>Home键是iOS设备中唯一一个用于操作用户界面的物理按键。它在操作方面具有一定的局限性,但同时,它也在整个iOS交互模型的导航方面扮演着重要的角色。</p> <p>简单易用、符合用户感知的空间模型,是构成iOS用户体验的关键要素。而空间模型本身,则是由具有高度一致性的视觉交互方式,以及提升了交互元素行为可预见性的动画过渡效果等方面的因素所定义的。</p> <p>保持简洁的哲学理念是iOS背后诸多设计决策的重要驱动力,正是这些决策使得iOS成为了一个易用易理解的系统平台。iOS人机界面设计规范中的很多地方都体现着这方面的设计主旨,虽然这些内容之间的关联看上去并不明显,但它们所蕴含的理念与方法,在降低产品的功能与交互方式复杂度等方面的作用是彼此交织、相辅相成的。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" 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用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_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></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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" 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/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/36" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互设计</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/84" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互模型</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/85" typeof="skos:Concept" property="rdfs:label skos:prefLabel">交互空间</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 08 Apr 2012 13:10:43 +0000 C7210 69 at http://www.beforweb.com http://www.beforweb.com/node/69#comments iOS Wow体验 - 第二章 - iOS用户体验解析(1) http://www.beforweb.com/node/66 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-2.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"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第二章译文精选的第一部分,其余章节将陆续放出。上一篇:<a href="http://beforweb.com/node/61">iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览</a></p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>iOS用户体验的成功与流行不是由某个单独的设计元素或交互方式造就的,它是一种整体效应的体现。然而,要想真正理解是什么原因让iOS如此迷人,我们必须将这个整体拆解开来,逐一进行分析。接下来,就让我们对那些定义了iOS用户体验框架的基本要素进行深入解析。</p> <p>首先,我们会把注意力放在一些层面较高的问题上,包括界面外观的隐喻与效用、直接操纵的理念以及Home键。随后,我们将从界面空间模型和用户心智的角度出发,对iOS系统及应用的交互机制进行分析。最后,我们还将对iOS简洁易用的设计理念做以了解,并看一看所有这些不同方面的要素是怎样通过视觉设计统一成为一个整体的<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3 id="a1"> 隐喻vs.效用</h3> <p>相对而言,iOS系统本身是缺乏视觉隐喻性的。然而,这并没有影响交互操作方面的可感知性与易用性。我们可以从这个现象中看出,在过去的十多年中,用户本身也在发生着改变。正像<a href="http://beforweb.com/node/61">前文</a>所提到的,iPhone的物理设计,尤其是Home键,使其一经推出就引发了不小的争议;这充分体现了当时的大众和媒体所广泛持有的保守观点。不过很显然,iPhone的设计是经得起时间考验的,原因就在于,这种设计理念代表着与旧设备的分道扬镳,同时,它也淡化了与传统桌面设备之间的关联。</p> <p>iPhone用户界面的设计理念强调了&ldquo;效用&rdquo;,而非&ldquo;隐喻&rdquo;。众所周知,苹果在很久以前就已经在桌面设备当中创造出了革命性的、富含隐喻元素的图形化用户界面。这套设计方案很快也被PC所采纳,大家都沿用至今。类似&ldquo;桌面&rdquo;、&ldquo;文件&rdquo;、&ldquo;文件夹&rdquo;这样的概念都是非常容易理解的,它们以图形化的方式呈现在系统框架中,用户可以直接对这些界面元素进行操作。这样的人机交互方式已经在我们的头脑中变得根深蒂固了。在这种情况下,苹果为什么会选择通过非隐喻的方式来打造iOS呢?</p> <p><a href="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-mac-osx-leopard.jpg" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-mac-osx-leopard" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-mac-osx-leopard.jpg" style="width: 500px; height: 333px;" /></a></p> <p class="figure-caption">图 2-1 Mac OS X 10.5 Leopard</p> <p>回头看看iPhone刚刚发布的那个时代,将它与当时的同类设备进行比较,我们就会发现,更加倾向于&ldquo;效用&rdquo;而非&ldquo;隐喻&rdquo;的设计思路并非苹果所刻意创造出来的。经过了功能与导航方式的复杂演化历程,当时的智能手机和功能手机在交互设计方面已经确立了相对稳定的、更加适用于移动设备的模式。界面通常采用九宫格的形式,由各种应用图标组成,用户通过四向导航进行控制操作。这种设计方案确实很有效用,用户可以快速扫描屏幕,找到相应的应用图标,选择并执行任务;速度与效率在这里起着决定性的作用。比起相对复杂的隐喻化环境,用户在这种更加倾向于&ldquo;效用&rdquo;的界面中不必花费时间去思考各种交互元素的隐喻含义。</p> <p><a href="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-palm-treo-650-os-user-interface-ui.jpg" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-palm-treo-650-os-user-interface-ui" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-palm-treo-650-os-user-interface-ui.jpg" style="width: 300px; height: 414px;" /></a></p> <p class="figure-caption">图 2-2 Palm Treo650 系统用户界面</p> <p>所以iOS也采用了类似的做法。虽然它的用户界面缺少明显的、整体化的视觉隐喻性,但从本质上说,iOS仍然是一个高度可视化的系统。其主界面向用户呈现了一个抽象空间,代表各种应用程序的图标分布在其中。有的图标只包含一些非常简化的图案,不涉及对应用功能的描述;另外一些则相对复杂,对产品本身的功能具有一定的描述性。</p> <!--这些图标还拥有一些共同特征,包括几何形状,以及用来表示其自身可被触控的视觉表现形式。--><p>多数情况下,用户会首先根据图标的视觉外观来识别某个应用;图标下方的标签文字对于应用的识别作用只是次要和辅助性的。当用户在进行多屏切换的时候,这种行为特征将变的特别明显,他们会以很快的速度浏览屏幕中的图标,以决定是否要继续扫到下一屏。应用图标的外观特性也是iOS能够在视觉上保持简单易懂的重要原因。</p> <p>iOS设备中没有文件系统的概念,这也与其用户界面的非隐喻特质不谋而合&mdash;&mdash;没有&ldquo;文件&rdquo;,那么 &ldquo;桌面&rdquo;和&ldquo;文件夹&rdquo;这样的隐喻化元素自然就失去了存在的意义。对于不同类型的数据,iOS有它自己的一套处理方式,无论是内容的创造还是获取,数据都会作为应用程序工作流的一部分而运行。用户不需要在复杂的文件系统中进行组织和管理工作,当他们需要完成某些操作任务时,也不必在各种文件中进行繁琐的查找。每个应用都会独立地管理与其相关的内容对象,这种机制也决定了用户在iOS中对于不同类型的内容进行组织和管理的操作方式。下面是一些具体的例子,每一条都按照&ldquo;应用名称&rdquo;、&ldquo;内容类型&rdquo;、&ldquo;组织与浏览方式&rdquo;的顺序进行排列:</p> <ul> <li> 相机(Camera)&mdash;&mdash;相机胶卷&mdash;&mdash;图片队列以及可以通过横向轻扫进行浏览的单张图片模式。</li> <li> 音乐(iPod)&mdash;&mdash;媒体对象&mdash;&mdash;媒体对象列表以及旋转木马风格的视图模式。</li> <li> iBooks&mdash;&mdash;书库&mdash;&mdash;图书和文档队列,以及列表形式的浏览方式。</li> </ul> <p>类似这样的例子还有很多。尽管不同的应用在交互方式上具有很多相似之处,但它们还是会以各自独有的方式对相关的内容对象进行组织和管理。</p> <p>在这些例子中我们还可以看出,应用程序内部的用户体验模式并不像iOS系统本身的那样抽象,它们在很多时候是高度隐喻化的。通常,小尺寸设备并不适合采用在视觉上具有复杂隐喻性的用户界面。要使小屏幕中的应用界面足够吸引人,在设计上所面临的挑战还是很多的。正如我们在前文中提到的,iPhone的界面设计是以&ldquo;效用&rdquo;为优先的,但这并不意味着我们无法在应用内部实现高度隐喻化的用户界面。实际上,我们已经在很多优秀的iPhone应用当中看到了这方面的设计典范。不过,具有高度隐喻化的应用界面设计方案只有放在iPad中才能更加充分地体现出它的价值。</p> <p>iPad代表着一个全新的产品类型,在它身上并不存在传统移动设备当中关于效用与隐喻的历史遗留问题。iPad所面向的是更加闲适化的需求,娱乐性的重要程度超过了速度与效率。虽然iPad与iPhone运行着同样的操作系统,但在应用程序内部的视觉表现方式上却存在很大的不同。屏幕尺寸的差异固然是造成这种分化的主要原因,但另一方面,具有高度隐喻性的拟真界面风格也成为很多iPad应用的重要特色。无论是界面的视觉效果,还是交互操作的物理体验,这些应用都对现实中物体的行为特征进行了高度的还原。虽然这种界面设计方式在其他类型的设备中也是可行的,但iPad的特性使这种拟真效果上升到了新的高度。</p> <p><a href="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-ipad-ios-application-calendar.jpg" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-ipad-ios-application-calendar" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-ipad-ios-application-calendar.jpg" style="width: 500px; height: 158px;" /></a></p> <p>图 2-3 iPad的Calendar应用</p> <p>当应用产品还处于概念阶段时,隐喻与效用是我们必须考虑和权衡的两方面因素。不过,这两者之间并非是互相排斥、非此即彼的关系。不妨观察一下你手头的那些应用,它们的构建方式体现了怎样的理念?它们的界面和交互方式更加偏重于隐喻还是效用?通过这样的分析,我们可以更好的理解这两个概念在实际设计方案中的实现方式,并逐渐学会将这些理念运用到自己的产品当中。</p> <h3 id="a2"> 直接操纵</h3> <p>直接操纵,对于任何类型的触屏设备来说都是绝对的基础性概念。它的大意是,用户可以直接控制界面中的交互对象,完成某项任务。相对的,间接操纵就是指我们必须依赖于某种输入设备,通过移动某种指针或焦点,间接的控制交互对象。要实践直接操纵的理念,最关键的一点,就是要在交互行为中拉近输入方式与交互对象之间的介质距离,使用户难以察觉虚拟的交互对象与现实的操作行为之间的屏障。直接操纵在iOS设备的用户体验中发挥着重要的作用,很多让用户觉得新奇和兴奋的交互方式都是基于这个理念的。</p> <p>其实,用户对于&ldquo;直接操纵&rdquo;这个概念的理解是与生俱来的。因为从本质上讲,它所映射出的就是我们与真实世界之间的互动方式。现实中,我们会拖拽一个物体而使它移动,某个按钮被按下时会表现出凹陷的效果。对于这些互动,我们不需要借助任何设备或指令的控制;交互对象的反应行为也是可以预测的,并且会符合我们对于现实世界规律的认知。</p> <p>然而,要在iPhone和iPad这类实际屏幕尺寸极其有限的触屏设备中有效的实现直接操纵的理念,其中还有不少有待跨越的障碍。为了优化可用空间,当前惯用的做法是将交互元素做的尽可能的小;然而在很多时候,它们被设计的太小了,以至于破坏了可用性。所以,对于触屏设备交互元素尺寸的把握确实是具有挑战性的。目标对象越小,触摸的难度就越大,尤其对于那些在小范围区域内集中排布的控制元素,用户误操作的可能性会非常大。目标对象本身容易因为手指的遮挡而难以辨识,周围的其他元素也很容易被错误的触摸到。</p> <p>从这方面讲,想要在iPhone这种屏幕尺寸过于狭小的平台环境中打造足够健壮并且易用的触控系统,挑战将变得尤为突出。不过,我们还是可以看到一些很优秀的设计方案。最好的例子莫过于iOS自带的虚拟键盘。苹果曾经面临的挑战,就是怎样设计一款能够在如此狭小的空间内,特别是在竖屏的状况下仍然可以让用户自如使用的键盘系统。无论怎样,按键都必须做的很小很紧密,而这样又会让你很难看清刚刚按到了哪个键。那么又是怎样的原因让这套键盘可以在实际的使用过程中有效而流畅的工作呢?苹果带来的解决方案是这样的:</p> <ul> <li> <strong>针对目标对象过小的问题</strong>:当用户触摸按键时,在指尖触击点的上方,以一种放大的视觉效果弹出相应的视觉反馈。</li> <li> <strong>针对目标对象排列过于紧密的问题</strong>:基于已输入字符,动态的提供完整单词或词组的建议,方便用户直接选择,尽量减少手动输入量。另外,行内拼写纠错功能还可以帮助用户快速更改那些拼写错误的单词。</li> </ul> <p><img alt="Deconstructing-the-iOS-User-Experience-iphone-keyboard" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-iphone-keyboard.png" style="width: 465px; height: 328px;" /></p> <p>图 2-4 iPhone的虚拟键盘</p> <p>这些做法将具有高度健壮性的交互设计理念与各种复杂的技术结合了起来,有效的克服了人机工程学和可用性方面所固有的一些局限,解决了在小尺寸触屏设备中实施直接操纵的常见弊端。不过必须承认,这的确是一种风险很大的处理方式;除非你有足够的资源去创造完美的方案,优化和扩展核心交互方式,否则还是尽量避开这种棘手的情况为好。</p> <p>在直接操纵的交互环境中,用户固然需要与目标对象产生直接的互动,以改变其状态,或触发相应的功能;但在很多时候,具有变通色彩的设计方案同样是可行的。我们完全可以通过一种相对间接的方式来&ldquo;直接&rdquo;操作目标对象。例如,在某些特定的情况下,按钮确实无法做的更大,那么不妨在它周围设计一个可以起到相同控制作用的&ldquo;目标区域&rdquo;。用户可以通过对目标区域的操作来完成交互行为,而无需精确的触击到那个位于该区域中心的小按钮。进一步说,你甚至可以将目标操作区域与交互对象进行分离。这点也引出了下一个小节的话题。</p> <h3 id="a3"> 手势</h3> <p>&ldquo;手势&rdquo;两个字的用途很广泛,在不同的上下文环境中,它的含义会有很大区别。当我们谈到硬件设备通过复杂的机械原理,将人的肢体动作编译为输入信号并传入系统的过程时,这个词基本就是它字面上的意思。对于苹果来说,&ldquo;手势&rdquo;二字在更多时候所指代的是一些特殊的触控操作方法,这些方法已经超越了直接操纵理论所定义的基本输入方式的范畴。通常,这些&ldquo;手势&rdquo;需要多个触摸行为同时发生(多点触摸),以引发特定的系统响应。不过,iOS中的一些基本手势仍然属于直接操纵理论所定义的范围。其实,在抽象的层面,很多手势是大同小异的,它们只是根据上下文情景的不同而存在着微小的差别。</p> <p>下面是iOS中最常见的一些手势:</p> <ul> <li> <strong>轻按(Tap)</strong>:用来执行&ldquo;选择&rdquo;的最基本的方式</li> <li> <strong>拖移(Drag)</strong>:一个持续的触控事件;目标对象会跟随手指进行移动,直到指尖离开屏幕表面。</li> <li> <strong>快速滑动(Flick)</strong>:与&ldquo;拖移&rdquo;类似,不过行为的速度更快。最关键的一点,它是目标对象自身固有的一种行为方式。当用户结束触控行为,指尖离开屏幕表面之后,&ldquo;可滑动&rdquo;的目标对象仍然会沿着动作方向继续模拟惯性效应而前进。</li> <li> <strong>轻扫(Swipe)</strong>:用手指沿着直线刷过一定的区域。该动作本身通常不包含任何操作功能,它主要被用来触发一些隐藏的控制元素,例如使列表条目中的&ldquo;删除&rdquo;按钮显示出来。</li> <li> <strong>连续两次轻按(Double Tap)</strong>:将图片或内容放大至原始尺寸并居中,再次操作则恢复到预设尺寸。</li> <li> <strong>双指张开(Open Pinch)</strong>:将图片或内容等比放大;用户可以对双指张开的距离进行控制,以决定放大的程度。</li> <li> <strong>双指捏合(Close Pinch)</strong>:将图片或内容等比缩小;用户可以对双指捏合的距离进行控制,以决定缩小的程度。</li> <li> <strong>长按(Long Touch)</strong>:通常用来触发某种次要的控制功能,例如在可编辑文本中显示放大视图,或是使应用图标进入可被拖移和删除的状态等。</li> </ul> <p><a href="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-iphone-ios-touch-gestures-all.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-ios-touch-gestures-all" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-iphone-ios-touch-gestures-all.png" style="width: 500px; height: 275px;" /></a></p> <p class="figure-caption">图 2-5 各类触控手势(来自<a href="http://gesturecons.com/">http://gesturecons.com/</a>)</p> <p>除此之外,越来越多的新手势也开始出现在iOS当中。看看它们能否被用户和其他应用开发者迅速地接纳,是一件挺有意思的事情。这些新手势大多是对以上几种基本手势的扩展,而且更适合用作系统级别的全局导航与控制,因为这些手势并不是针对某个应用中的特定交互组件所设计的。它们大都需要多指配合操作(超过两指),这也是将它们与那些专门用于控制应用界面交互对象的标准手势加以区分的重要标志。</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>对于设计师与开发者来说,不仅iOS预设的那些标准手势可以帮助他们提升产品价值,很多&ldquo;非标准&rdquo;的方式同样是非常有用的,而且往往可以带来更加出色的交互体验。在本书后面关于&ldquo;新概念开发&rdquo;的章节中,我们将对这一点进行深入探讨。</p>--><h3 id="a4"> Home键</h3> <p>正如我们在前文中提到的,虽然Home键曾经饱受争议,但如今,它已经被广泛的接纳了。</p> <!--人们对它的使用率是如此之高,以至于在很多时候忽略了它的存在。--><p>在以前几个版本的iOS中,Home键的功能是可以被定制的,人们可以通过双击Home回到主屏幕,或是进入搜索、联系人个人收藏、拍照、iPod音乐播放等功能界面。而之后的版本中,Home的定制功能被取消,苹果显然更希望这个按键可以专门用在那些有助于提升系统导航功效的方面上。</p> <p>要理解苹果的这种思路变化,还得从iPhone本身的用途转变说起。除了使用常规的手机功能之外,用户会将越来越多的应用塞进它们的iPhone,这种趋势必然会对系统平台的支持能力提出越来越高的要求,而这也正是推动iOS不断进化的一个主要驱动力。为了满足用户在这方面的需求,设备的存储能力也在一直在提升,而另一方面,随着应用商店的成功,以及各种专业化应用程序的不断涌现,用户的需求和渴望又被进一步的扩大。苹果自然希望人们会下载更多的应用,但实际情况是,用户人均持有的应用数量超出了他们最初的预期和准备。怎样让系统对越来越多的应用程序进行有效的组织管理,并提供高效的导航方式呢?这逐渐成为苹果必须不断面对和解决的问题。</p> <p>曾几何时,在iPhone中打开一款应用是很简单的,你只需要快速浏览屏幕并找到这个应用的图标,点击进入。也许你的应用图标需要两屏才能放得下,即使是这样,你也可以快速滑动到第二屏继续寻找;最多只需几个简单的手势,我们就可以很容易的找到想要的应用。慢慢的,两屏发展到了五屏,在这种情况下,通过快速滑动前后切换屏幕的方式就开始显现出弊端了。 通常,切换超过三次之后,人们的方向感就会开始下降;一屏接一屏的应用图标在眼前快速的前后滑过,视线无法聚焦,你甚至会忘记自己正处于哪一屏,很快就会产生疲劳与挫败的感觉。</p> <!--快速滑动本来是一种可以提升易用性的手势,但这时却成了造成迷茫的罪魁祸首。--><p>随着iOS的进步,苹果的设计师们创造出了一系列优秀的方案,用来帮助用户解决安装应用过多所造成的问题。如今,我们能够通过一种可自定义的二级结构,将同类应用分组收纳。而&ldquo;多任务切换&rdquo;功能则可以帮助我们在不退出当前界面的情况下,通过多任务栏快速查看和选择最近使用的应用。另外,我们还可以通过搜索功能直接进入应用。而无论怎样,我们都可以通过Home键来快速的回到主屏幕。</p> <p>这又将话题带回到了Home键不断变化的本质上。设备的导航机制正在被赋予着越来越多的功能,相应的,Home键的重要性也在不断增强。对于简洁的iOS系统界面来说,额外的导航控制功能是不能被接受的;而应用内部的用户界面则不然。对于后者,我们必须按照人机界面设计规范所要求的那样,对各种导航控制功能进行全面而明确的考虑,并保持设计模型的一致性。如果应用界面中缺乏相应的图形化控制组件,那么在导航与定位方面的辅助功能就必须由Home键来承担了。在不同的应用情景中,Home键通常会提供以下几方面的功能:</p> <ul> <li> <strong>返回主屏幕</strong>:Home键最基本的功能,也是被用到次数最多的功能。</li> <li> <strong>进入Spotlight</strong><strong>搜索界面</strong>:当用户处于主屏幕时,单击Home键就可以进入Spotlight搜索界面。</li> <li> <strong>调出多任务栏</strong>:无论当前处于系统界面还是应用界面,用户都可以通过双击Home键来调出多任务栏中的应用切换功能。</li> </ul> <p>前面两点也可以通过快速滑动的手势来完成,不过在很多时候,Home按键的效率更高。而应用切换功能则只能依靠Home按键来调出(iOS5开始,该功能也可以通过多任务手势或是AssistiveTouch来调出)。</p> <p><a href="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-iphone-Assistive-Touch-setting.png" rel="lightbox"><img alt="Deconstructing-the-iOS-User-Experience-iphone-Assistive-Touch-setting" src="/sites/default/files/images/201203/Deconstructing-the-iOS-User-Experience-iphone-Assistive-Touch-setting.png" style="width: 300px; height: 429px;" /></a></p> <p class="figure-caption">图 2-6 AssistiveTouch</p> <p>这三点常见功能也反映出了Home键在导航控制方面的演变过程。除此之外,Home键还能提供一些系统层面的功能,它们也同样遵从着一系列清晰的设计模式。例如通过单击将设备从休眠模式中唤醒,或是通过双击让设备在锁屏状态下调出iPod音乐播放功能。这些交互过程中并不包含与导航相关的操作,可见Home键同样可以被赋予其他方面的重要功能。通过这些我们可以看出,苹果确实在iPhone的一些最普遍的需求用例中提供了很多非常优秀的解决方案。类似的例子还有通过长按Home键(3秒)进入语音控制状态,以及可以为Home键绑定三连击行为所触发的功能<a class="eLink" href="http://beforweb.com">。</a></p> <p>将来的iOS中, Home键也许会被赋予更多的用途。说不定它还会从iOS设备上消失,市面上流传的一些有趣的推测也让我们看到了这种情况最终发生的可能性。或者,它也有可能被某种非硬件的控制方式代替;相应的,原本由它触发的各种功能也可以通过一些新的手势来控制。无论怎样,我们可以放心的是,苹果会一直让iOS设备在这些方面保持进步。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" 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用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_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></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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" 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/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/80" typeof="skos:Concept" property="rdfs:label skos:prefLabel">隐喻</a></li><li class=" taxonomy-term-reference-11" rel="dc:subject"><a href="/taxonomy/term/81" typeof="skos:Concept" property="rdfs:label skos:prefLabel">直接操纵</a></li><li class=" taxonomy-term-reference-12" rel="dc:subject"><a href="/taxonomy/term/82" typeof="skos:Concept" property="rdfs:label skos:prefLabel">手势</a></li><li class=" taxonomy-term-reference-13" rel="dc:subject"><a href="/taxonomy/term/83" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Home键</a></li><li class=" taxonomy-term-reference-14" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Thu, 29 Mar 2012 02:41:24 +0000 C7210 66 at http://www.beforweb.com http://www.beforweb.com/node/66#comments iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览 http://www.beforweb.com/node/61 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-1.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"><div class="entry-intro"> <p>本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第一章译文精选,其余章节将陆续放出。</p> <p>关于本套译文分享的详情及目录结构,请参考<a href="http://beforweb.com/node/58">iOS Wow体验 - 译文分享说明</a>。</p> <p>全文由<a href="http://weibo.com/c7210">C7210</a>自发翻译(编译),并首发于<a class="eLink" href="http://beforweb.com">Beforweb.com</a>,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。</p> </div> <p>苹果公司制定<a href="http://www.apple.com.cn/developer/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html">iOS人机界面设计规范</a>(HIG,Human Interface Guidelines)的目的,是为那些刚刚进入iOS领域的设计师和开发者提供一个最权威、最可靠的起点。他们制定这套规范的方式很简单&mdash;&mdash;提供大量的基础理论知识和技术指导,帮助个人或设计开发团队在最短的时间内创建出iOS应用。</p> <p>最初,这套规范更多的是在向读者展示iOS平台带来的革命性的交互模式。当苹果刚刚开始将设备开放给第三方应用开发者的时候,他们所面临的最大挑战,就是怎样推广iOS及相关设备,使其成为一种能够切实有效地部署和运行应用程序的系统平台,从而被广大用户所接受。</p> <p>苹果于2008年夏天推出应用商店(App Store)的时候,移动设备及消费电子产品方面的专业团队已经形成了一个成熟的社区。这些团队完全可以迁移至新的iOS平台,并开始为它打造应用。然而,当时拥有成功技能和经验的人还非常少,苹果需要更多的iOS应用开发团队,需要更多优秀的应用程序,以确保他们的战略走向成功<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><p><a href="/sites/default/files/images/201203/iOS-Human-Interface-Guidelines-Introduction.png" rel="lightbox"><img alt="iOS-Human-Interface-Guidelines-Introduction.png" src="/sites/default/files/images/201203/iOS-Human-Interface-Guidelines-Introduction.png" style="width: 500px; height: 258px; " /></a></p> <p class="figure-caption">图 1-1 iOS人机界面设计规范(HIG,Human Interface Guidelines)</p> <h3 id="a1"> 历史回顾</h3> <p>与现在相比,2008年之前的移动应用显得很原始。这并非由于开发者不思进取,最主要的问题还是硬件设备在技术上的局限性。当时,所谓的&ldquo;功能手机&rdquo;的主要特色是便于携带,判断一款手机优秀与否的主要标准是看它是否足够小。于是,多数手机的屏幕都非常小,同时,它们的分辨率和颜色深度等指标都很低。另外,设备在运算能力和内存等方面的局限也很大。这些都意味着移动应用的设计和开发只能在充满制约的条件下保守地进行。所以当时,人们通常只注重应用能否正常工作,而不会太在意它的外观样式。而且,当时的移动设备市场份额非常分散,应用程序的设计师与开发者必须以某种最低配置方案为目标,才能保证应用能够兼容更多的设备。这些局限使得设计师们几乎无法在任何一款设备中打造出最理想的用户体验。</p> <p>而&ldquo;智能手机&rdquo;则带来了一些新的挑战。与普通手机相比,它们的屏幕确实更大更好,运算能力也强劲了很多,但这类设备的输入方式往往因厂商而异。当时,比较常见的输入方式包括:</p> <ul> <li> 机身侧边的滚轮</li> <li> 四向或五向导航</li> <li> 独立按键或物理按键</li> <li> 自定义按键或软按键(&ldquo;确认&rdquo;、&ldquo;返回&rdquo;)</li> <li> 手写笔</li> <li> 触摸屏</li> </ul> <p><a href="/sites/default/files/images/201203/palm-treo-pda-smart-phone.jpg" rel="lightbox"><img alt="palm-treo-pda-smart-phone" src="/sites/default/files/images/201203/palm-treo-pda-smart-phone.jpg" style="width: 300px; height: 446px; " /></a></p> <p class="figure-caption">图 1-2 Palm Treo智能手机</p> <p>一款设备可能包含上述任意几种输入方式的组合。很多时候,以输入方式为代表的交互模式已经成为某些设备的招牌。这种情况的产生,主要是因为早期的智能手机大多是由当时比较流行的PDA(个人数字助理,俗称掌上电脑)直接进化而来的。考虑到这些标志性交互方式的价值和认知度,这些手机自然而然地选择了保持PDA原有的交互特点。</p> <p><a href="/sites/default/files/images/201203/Palm-TX-handheld-pda.jpg" rel="lightbox"><img alt="Palm-TX-handheld-pda" src="/sites/default/files/images/201203/Palm-TX-handheld-pda.jpg" style="width: 300px; height: 458px; " /></a></p> <p class="figure-caption">图 1-3 Palm TX掌上电脑(PDA)</p> <p>随着功能手机和智能手机市场的日趋成熟,对于运行在这些设备上的应用软件的设计与开发工作也变得高度专业化。智能手机市场的混乱局面以及各平台之间的怪异差别,导致相关知识越来越脱离设计实践,只有少数人才能掌握。</p> <p align="left">iPhone向这一局面发起了挑战,它彻底颠覆了人们之前对于&ldquo;手机是什么&rdquo;、&ldquo;手机能做什么&rdquo;、&ldquo;手机应该怎样操作&rdquo;等方面的认知,并使得相关专业领域的人员不得不改变旧有的思维模式。</p> <p>如今,我们对iPhone和iPad这样的设备已经司空见惯了,但是别忘了,在iPhone刚刚推出的时候,其Home键与外形设计都曾引发争议。这款设备的简洁外观、相比于同类产品的大尺寸屏幕、摒弃了多数传统物理按键的设计方式等,都让它与当时的其他智能手机形成了鲜明的对比。人们立刻开始质疑Home键的功能性及可用性,但同时,也有些观点认为这个物理按键才是i最取得成功的关键因素。另外,全面触屏化的输入与控制方式也成为了热门的争论话题。</p> <p>对历史做了简要的回顾之后,iOS人机界面设计规范的本质也变得清晰起来。当我们阅读规范文档的时候,可以从其中两方面的主题当中感受到历史发展的轨迹:</p> <ul> <li> 对于iOS设计理念的阐述与分析,特别是在输入与控制等交互方式方面。</li> <li> 怎样充分利用设备平台的软硬件功能,打造最佳的用户体验模式。</li> </ul> <p>其实,这也就是规范当中&ldquo;平台特性&rdquo;这一部分存在的目的,即帮助设计师与开发者逐步了解iOS与那些他们曾经熟悉的其他平台的区别。这是很有必要的,因为如果不排除掉当时的业界产品带给他们的那些先入为主的理念与标准,那么iOS设备、系统平台及应用所能达到的高度就会大打折扣。</p> <p>这一明智的做法有效的推动了苹果的战略落实。iOS设备的地位得到了充分巩固,并一跃成为拥有巨大市场吸引力的主流平台。</p> <h3 id="a2"> 设计规范的局限</h3> <p>然而,人机界面设计规范同样有它没有做到位的地方。即使苹果很谨慎的规划着他们的设计准则与体验规范,我们还是不难发现,其中的很多内容或多或少都存在着一定程度的局限性。交互设计师也许会因为某些部分的表述过于概念化,而难以找到太多有价值的信息。规范文档中的一些推荐设计模式在抽象化方面做的不够,而且缺乏必要的基本原理描述。另外,一些关于设计方面的内容也显得有些泛泛,没能很好的从用户体验的角度深化展开。</p> <p>规范文档中一些关于设计开发流程方面的介绍,本是用来帮助缺乏经验的团队尽快入门的,但在内容方面做的有些敷衍。而且,文中描述的流程显然只适用于某些特定的需求情况,规范文档并没有清楚的给出更具综合性与适用性的方法原则。</p> <p>如果这是你第一次尝试创建iOS应用,那么这些问题其实不会对你造成太大的麻烦。苹果在规范文档中优先考虑了屏幕尺寸规格、设备定向、触屏交互方式等方面的内容。这样做的目的,是让设计与开发团队将注意力集中在&ldquo;输入&rdquo;和&ldquo;输出&rdquo;这两个对于用户界面设计方案来说最为关键的组成要素上,并由此,将iOS移动应用的设计理念进行最大化的传播。</p> <p>期待苹果提供一套全面而精准的文档资源是不太现实的,目前这套规范对我们来说已经是一个不错的起点了。换个角度来看,我们还会发现,这套规范最主要的目的,其实是最大程度的降低将设备平台开放给第三方开发者所带来的风险,以保护苹果的品牌形象及iOS设备在市场中的占有率,进而确保其持续性的成功。任何一款第三方iOS应用的成功都是苹果的成功,所以他们在这方面的长远规划是完全合理的。从表面来看,苹果是在通过规范来普及优秀的设计模式,但从品牌的保护和持久化的角度来讲,这套规范还承载着以下这些方面的战略:</p> <ul> <li> 树立文化上的威望,使消费者产生排他意识。</li> <li> 保持iOS平台与苹果品牌之间的统一气质。</li> <li> 证明其设备的价格虽然高昂,但成本投入也同样巨大。</li> </ul> <h3 id="a3"> 超越规范</h3> <p>要打造一款成功的移动应用,仅仅对于用户体验设计方面的相关问题有基本程度的了解是不够的。市场中的iOS应用一直在不断地更新换代,怎样打造出令人难以抗拒的视觉表现形式及交互方式,并通过差异化的用户体验设计让你的应用在市场中保持竞争性呢?对这方面的问题进行文档化的梳理与分析是很重要的。另外,我们能否基于人机界面设计规范所倡导的 &ldquo;外观一致性&rdquo;原则,进一步创造出更具冲击力的高度定制化的视觉体验,并将其融入到iOS设备的交互环境当中?应该怎样协调它们之间的风格差异?这类问题在眼下同样没有非常完整、准确、容易理解的答案供我们参考<a class="eLink" href="http://beforweb.com">。</a></p> <p>而这些正是本书的目的。我们要对iOS进行深入的解构和挖掘,帮助读者掌握符合iOS理念的设计思路与方法,进而打造出具有超越性的iOS应用。</p> <!--我会绕开所有涉及自定义界面外观方面的争论,专注于向读者介绍一些卓有成效的工具和方法策略&mdash;&mdash;你将学会怎样从无到有的设计出令人赞叹的应用,或是一手包揽下对一款已有应用的重设计工作。--><p>在接下来的章节当中,我们将对iOS的用户体验模式进行深入解析,一些可用性方面的话题也会被涉及到。不过,你需要知道,对一款成功的应用来说,传统的可用性概念固然是重要的基本原则,但在某些情况下,这些原则也需要根据实际的设计需求做出必要的调整。你会了解到,对设计方案的选择和决策,在很多时候其实是一种权衡的过程。</p> <p>作为本书的读者,你需要对iOS人机界面设计规范有所了解,并拥有规划和设计iOS应用的项目经验;另外,在用户体验设计方面的实际工作技能和思维方式也是很重要的。不过,即使你目前还不具备这些条件,本书仍然可以为你带来很多有价值的设计理念与实践方案,帮助你更好的把握机遇,创造出令人惊叹的iOS移动应用。</p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" 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用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_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></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" 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/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/24" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动应用</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-9" rel="dc:subject"><a href="/taxonomy/term/79" typeof="skos:Concept" property="rdfs:label skos:prefLabel">HIG</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></ul> Fri, 23 Mar 2012 01:30:27 +0000 C7210 61 at http://www.beforweb.com http://www.beforweb.com/node/61#comments iOS Wow体验 - 译文分享说明及目录 http://www.beforweb.com/node/58 <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-ios-iphone-ipad-wow-factor-app-ux-design-techniques-3-b.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="http://beforweb.com/node/58#index">查看《iOS Wow Factor》全书译文精选目录</a></p> <p>大概有的朋友已经在<a href="http://weibo.com/c7210">我的微博</a>里看到了预告,简单介绍下先。此书英文全名《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》,这名字不用翻译估计大伙也能看出个八九不离十了,全书大致的路子就是对iOS本身的设计理念及体验要素进行全方位的分析,并在此基础上探讨如何在iOS应用当中打造令人惊叹的用户体验模式。怎么叫令人惊叹呢,想想<a href="http://itunes.apple.com/us/app/clear/id493136154?mt=8">Clear</a>,基本就是那意思了。</p> <p>有朋友问了,诶你不是一直翻译博客文章么,这回怎么改翻书了呢,是太闲了么?这个真不是。事情的来龙去脉都念叨一遍的话,怕是要花费太多时间与文字,而且势必参杂进不少的负面情绪,最后即耽误了各位的时间,又把我自己性格里的糟粕勾搭了出来,想想看不划算。总之,这本来是我之前两个月与某出版社合作翻译的一本书,但中间发生了些不快,使得此事最终木有开花结果。</p> <!--我似乎一直非常善于将事情搞到难以收拾的地步,只要其中涉及到甲乙方模式的互动交流;不过可叹的是我仍旧乐此不疲。--><p>话说回来,虽然出版的事儿是黄了,但全书的内容既然已经做完,总不好浪费掉,放在硬盘里也不会长出好吃的蘑菇来,不如分享一下,故此就有了现在这档子事。在接下来的一小段日子当中,我会陆续将这本书的译文放上来。不过眼下还要针对译文本身再做几点简要的说明先:</p> <!--break--><ul> <li> 本想全书译文呈上,但我似乎无权将稿件一字不落的放上来的,否则有可能损害出版方的利益...因此在接下来的文章发布过程中,我会对自己手头的稿子做必要的删减,但不会动那些那些比较有学习价值的重要内容,另外还可能增添一些必要的链接和图片作为补充。</li> <li> 这批稿子仍属于第一轮的译稿,来自出版社的意见是,文字驾驭能力及翻译专业度有待提高,另外蛮多地方有过度演绎和发挥的嫌疑...总体上讲,意见蛮中肯,但既然出版的事情中止,我接下来也就不会再花太多时间去抠里面的问题了。所以还是一贯的那样,权当抛砖引玉,希望我所做的这些努力,至少能给各位带来一些宏观的方向感;作为一名UX圈里的翻译票友,随时欢迎各位提出宝贵意见,多多指正。</li> <li> 坦诚的讲,此书是我个人读过的原版书当中语言风格最不直白、废话最频繁、长句子最多的一本。翻译的过程致使本人产生了较为极端的厌世情节...进而很难像平时做博客一样怀着轻松愉悦甚至是放肆的心态去搞。如果各位感受到很明显的严肃、压抑、拘谨、闹心...请见谅了;就这还被说成过度演绎和发挥呢。</li> </ul> <p>现在想想看,整个这件事可以产生三个方面的积极效应。一,是可以相对自由的将内容share出来,与各位朋友共同学习,并进行更为直接的交流互动。二,是让我自己进一步看到了保持自由独立的状态以及专业玩票的心态的重要性。三,就是在能够弄到原版书的情况下,绝不再买国内的引进版来看;类似的决定蛮久之前就有做过,但当时是片面地针对译者,而现在才明白引进书在翻译方面的问题并不是由译者直接和最终决定的。</p> <p>接下来我把本书各章节的内容结构列在下面,方便各位有个大致的概念先。从下一篇开始,我们将正式展开《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》一书的译文分享运动;如果哪位看的上眼,希望转载分享的话,一如既往的欢迎,不过还是要麻烦留下这边的原出处信息,谢了。</p> <p>btw,我在这里用的&ldquo;iOS Wow体验&rdquo;这种说法只是考虑到博客标题长度一类问题而选择的折中方案,也许&ldquo;打造令人惊叹的iOS应用体验&rdquo;一类的标题会更加合适,但是有点儿长。</p> <h3 id="index"> 《iOS Wow Factor》全书译文精选目录</h3> <ol> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/61">iOS人机界面设计规范纵览</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/61#a1">历史回顾</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/61#a2">设计规范的局限</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/61#a3">超越规范</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/66">iOS用户体验解析</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/66#a1">隐喻vs.效用</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/66#a2">直接操纵</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/66#a3">手势</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/66#a4">Home键</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/69#a1">iOS的空间模型</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/69#a2">简洁易用</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/69#a3">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/71">用户体验的差异化与策略</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/71#a1">关于体验与期望的变革</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/71#a2">可用性与用户的渴望</a></h6> <ul> <li> <a href="http://beforweb.com/node/71#a3">用户的渴望</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/71#a4">用户体验策略</a></h6> <ul> <li> <a href="http://beforweb.com/node/71#a5">为自己的产品制定用户体验策略</a></li> <li> <a href="http://beforweb.com/node/71#a6">对差异化的思考</a></li> <li> <a href="http://beforweb.com/node/71#a7">了解你的用户</a></li> <li> <a href="http://beforweb.com/node/71#a8">研究竞争对手的产品</a></li> <li> <a href="http://beforweb.com/node/71#a9">引领市场</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/71#a10">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/80">杀手级的应用产品 - 为应用的上下文环境而设计</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/80#a1">移动计算的核心价值</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/80#a2">&quot;移动&quot;与&quot;便携&quot;的体验模式比较</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/80#a3">移动应用的五类需求用例</a></h6> <ul> <li> <a href="http://beforweb.com/node/80#a4">人际交往</a></li> <li> <a href="http://beforweb.com/node/80#a5">娱乐消遣</a></li> <li> <a href="http://beforweb.com/node/80#a6">基于地理位置的服务(LBS)</a></li> <li> <a href="http://beforweb.com/node/80#a7">电子商务</a></li> <li> <a href="http://beforweb.com/node/80#a8">实用效率</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/80#a9">多种功能模式的整合</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/80#a10">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/81"><br /> 利用iOS技术特性打造最佳用户体验</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/81#a1">关键性的图形技术</a></h6> <ul> <li> <a href="http://beforweb.com/node/81#a2">UIKit</a></li> <li> <a href="http://beforweb.com/node/81#a3">核心图形 (Core Graphics)</a></li> <li> <a href="http://beforweb.com/node/81#a4">核心动画(Core Animation)</a></li> <li> <a href="http://beforweb.com/node/81#a5">OpenGL ES</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/81#a6">界面外观的自定义</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/81#a7">通用型应用</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/81#a8">原生应用与Web应用</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/81#a9">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/86">交互模型与创新的产品概念</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/86#a1">&quot;令人惊叹&quot;究竟指什么?</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/86#a2">交互建模流程概览</a></h6> <ul> <li> <a href="http://beforweb.com/node/86#a3">明确需求</a></li> <li> <a href="http://beforweb.com/node/86#a4">定义需求用例与测试脚本</a></li> <li> <a href="http://beforweb.com/node/86#a5">规划产品工作流</a></li> <li> <a href="http://beforweb.com/node/86#a6">构建交互模型</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/86#a7">对于交互建模流程的深入分析</a></h6> <ul> <li> <a href="http://beforweb.com/node/86#a8">对工作流的思考</a></li> <li> <a href="http://beforweb.com/node/86#a9">交互模型的构建方法</a></li> <li> <a href="http://beforweb.com/node/86#a9">相关的技术方案</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/87#a1">打造标志性的交互模式</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/87#a2">文档化</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/87#a3">案例学习</a></h6> <ul> <li> <a href="http://beforweb.com/node/87#a4">X公司</a></li> <li> <a href="http://beforweb.com/node/87#a5">X公司的需求</a></li> <li> <a href="http://beforweb.com/node/87#a6">应用的细节</a></li> </ul> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/87#a7">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/99">操作图例与触屏人机工学</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/99#a1">对肢体动作的理解</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/99#a2">界面元素的布局</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/99#a3">反馈机制</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/99#a4">对隐藏元素的提示</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/99#a5">总结</a></h6> </li> </ul> </li> <li> <h5 class="eTitle"> <a href="http://beforweb.com/node/107">易用性与自动化技术</a></h5> <ul> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/107#a1">为什么要自动化?</a></h6> </li> <li> <h6 class="eTitle"> <a href="http://beforweb.com/node/107#a2">何时运用自动化方案</a></h6> </li> </ul> </li> </ol> <p><img alt="book-ios-wow-factor-apps-ux-design-iphone-ipad" src="/sites/default/files/images/201203/book-ios-wow-factor-apps-ux-design-iphone-ipad.jpg" style="width: 297px; height: 447px;" /></p> <div class="embed"><article id="node-287" class="node node-related-books" about="/node/287" 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用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="iOS用户体验设计" src="http://beforweb.com/sites/default/files/images/products/32.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">iOS用户体验设计</a></h4> <p><a href="http://www.amazon.cn/iOS用户体验设计-伍德/dp/B00CW9TF12/?_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></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/78" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS Wow Factor</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iOS</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/14" 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/11" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPhone</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/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</a></li><li class=" taxonomy-term-reference-8" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Tue, 20 Mar 2012 15:07:57 +0000 C7210 58 at http://www.beforweb.com http://www.beforweb.com/node/58#comments 又是为了触屏移动设备而设计 http://www.beforweb.com/node/49 <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-design-for-touch-mobile-application-iphone-android-interactive-device-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>印象当中,最近这些年的春天总是会带来让人觉得真心别扭的气候体验,雨和冷风就像催化剂一样,让生活和工作当中的人和事也变得异常凌乱,仿佛一团被咀嚼到完全失去味道的槟榔。November Rain前奏当中的钢琴旋律多少可以让心安然一些,一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。</p> <p>可脑袋一旦被拧下来,就什么也无法吃的样子了,不是吗。说正事儿吧。Designing for touch,关于这个话题及相关的文章,最近貌似已然铺到大街上了,不过我还是做我的吧。在标题里加了个不伦不类的&ldquo;又是&rdquo;二字,以示区分。内容方面应该会有些交集,但这是我自己的。</p> <p>Josh Clark老师最近蛮活跃的。在本文中,他将向我们介绍一些触屏移动设备用户界面设计当中需要注意的问题,并对iPhone、iPad和Android相关设备在触控交互体验方面的友好性进行了对比和分析。欢迎,走着。</p> <p>对于移动设备的操作系统及应用来说,判断其用户界面设计方案是否优秀的一个重要衡量标准,就是看它对于手指触控操作的友好程度。相比于桌面计算设备及相关的软件环境,触屏移动设备所具有的交互特性几乎将用户体验设计师们带入了工业设计的领域;设计方案更多是在体现着人机工学方面的原理,而不再是仅仅用来规划内容与功能的视觉呈现方式<a class="eLink" href="http://beforweb.com">。</a></p> <!--break--><h3> 拇指热区与底部原则</h3> <p>首先,我们需要了解人们通常会以怎样的方式将手指停靠在设备上。拿手机来说,普通青年们多数会使用拇指来进行触控操作,所以触屏手机的界面交互方案基本是围绕着拇指来进行打造的。</p> <p>拇指是很不可思议的,据说它是将我们与动物区分开来的重要标志之一...拇指的功能具有相当的弹性,同时也受到一定的局限。对于常规的触屏手机来说,我们可以使用拇指扫过屏幕当中的大部分区域,但其中大约只有三分之一属于真正有效的触控区域。所以在设计当中,要尽量将最重要的界面交互元素放置在这个范围当中。在右手持机的状况下,有效触控区域位于屏幕的左下方:</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-iphone-thumb-hot-zone" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-iphone-thumb-hot-zone-o.jpg" style="width: 300px; height: 634px; " /></p> <p>这也正是移动系统或应用中一些重要的工具栏或导航结构通常被放置在界面底部的原因。与此相反的是,在传统的桌面设备系统环境中,导航菜单一类的界面元素通常被放在界面顶部,无论是本地软件还是网页基本都是如此。对于我们有限的拇指作用范围来说,这种传统布局方式显然不能在移动设备的用户界面当中很好的适用。</p> <p>相比之下,左下角还是右下角的问题略显次要。我们在实际当中经常会更改左右手持机方式,想想看是不是这样,譬如对于右撇子来说,当他们正在写字或是需要同时使用鼠标操作桌面设备时,通常会将手机交于左手操作;而左撇子们则正相反。不过在多数时间内,使用右手持机的用户还是要相对较多一些。</p> <p>底部原则可以帮助我们对界面当中的可触控元素进行更好的组织。最常用的功能按键应该被放在拇指最容易触摸到的热点区域当中,而其它相对次要或是比较敏感的控制元素则应该尽量避开这个区域。以iOS中的&ldquo;编辑&rdquo;按钮来说,它通常被置于界面右上方,这个位置即可以保证它清晰可见,同时又不会被很容易的触碰到,以免发生误操作。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-iphone-list" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-iphone-list.jpg" style="width: 300px; height: 634px; " /></p> <p>另外,底部原则不仅与拇指的作用范围有关。当我们使用拇指在屏幕上进行操作的时候,手指下方的内容部分将会被遮挡住;只有将交互控制元素放在内容区域的下方,才能让这种负面效应降至最低。其实这是一条具有广泛适用性的设计原则,我们可以在很多其他类型的设备中看到这种原理的体现,例如iPod、计算器、带有实体键盘的普通手机、电子秤等,无不是内容在上,控制在下。</p> <h3> 我,机器人(Android)</h3> <p>在Android设备中,底部原则这档子事被机身下方的实体硬按键搞的复杂了些许,尤其是冰淇淋三明治之前的平台。这些硬件级的控制按键占据着底部区域,在某种程度上会与应用内的底部交互元素形成视觉上的竞争。彼此层叠在一起的软硬件工具栏会使用户在快速操作的过程中产生迷惑,增大误操作的几率;对于在两个维度上共存于拇指热区当中的软硬件按钮,它们之间的冲突几乎是不可避免的。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-android-buttons" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-android-buttons.jpg" style="width: 300px; height: 671px; " /></p> <p>固化的硬按键是无法被移除的,避免控制元素之间产生冲突的最直接的办法就是让虚拟与实体的工具栏在视觉上彼此分离,而这就意味着需要将Android应用中的相关控制元素和导航结构放置在用户界面的顶部。这自然不是最理想的解决办法,因为界面顶部离拇指热区远着呢,你要触摸其中的某个按键时,几乎会将半个手掌都覆盖在屏幕上。不过比起与硬件工具栏层叠在一起的方式来说,这种解决方案仍是利大于弊的。</p> <p>这种将重要的控制及导航元素放在顶部的做法与iOS设备的方式正相反。虽然iPhone的Home按键同样在机身底部,但它的表现形式与Android设备的硬按键有很大区别,它不会对应用界面底部的相关操作元素带来视觉上的干扰。下面的截图展示了Foursqure应用在这两个平台中的界面设计方案对比:</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-foursquare-interface.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-foursquare-interface" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-foursquare-interface.jpg" style="width: 500px; height: 508px; " /></a></p> <div class="embed"><article id="node-291" class="node node-related-books" about="/node/291" 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/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_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/36.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">贴心设计:打造高可用性的移动产品</a></h4> <p><a href="http://www.amazon.cn/贴心设计-打造高可用性的移动产品-美-Jakob-Nielsen%E3%80%80Raluca-Budiu/dp/B00DQ3HLKK/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书重点关注移动设备上的可用性,并涵盖了构建移动战略、为小屏幕设计、移动写作、可用性对比和展望未来等主题。书中内含228张高清全彩图片以表明观点...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 移动版本的网站</h3> <p>毫无疑问,当我们在移动设备中浏览网站页面时,类似的问题也会出现。我们可以将网页理解为应用中的应用,因为它需要通过浏览器这个应用程序进行输出呈现。移动平台当中的很多浏览器都会将一些常规的控制元素放在底部工具栏里,这在某种程度上又有可能与页面当中交互元素产生视觉上的冲突。所以,对于移动版本的站点来说,一个最基本的设计原则就是不要将重要的控制元素或导航结构通过CSS的position:fixed定位方式固定在用户界面底部。</p> <p>不过,与Android应用中的解决方案有所不同,对于Web页面来说,将控制元素与导航结构放在界面顶部的做法同样会产生很大问题。毕竟当前绝大多数的主流触屏手机仍属于小屏幕设备,而传统Web页面的横向全局导航结构通常由若干包含着一到两个词语的导航项组成,这对于手机屏幕来说显得太拥挤了,我们必须另想办法来解决导航栏布局的问题。</p> <p>Luke Wroblewski在Mobile First一书中提到:&ldquo;在很多移动版本的站点中,用户首先会看到一大坨导航结构,而不是内容。在移动应用的上下文环境当中,时间永远是宝贵的,流量搞不好是要花钱的有木有,你必须尽最大努力让用户在首屏中得到他们最想获取的信息。&rdquo;</p> <p>确实是这么回事。移动版本的站点,在布局方面,应该使主要内容尽量多的占据着首屏当中的空间,而导航结构则应该以某种缩略的形式出现在相对次要的位置。Wroblewski通过一个实例来倡导这个设计模式,也就是<a href="http://m.adage.com/">Ad Age的移动版站点</a>。其首屏当中,除了网站标题及最新内容列表之外,右上角的菜单按钮是界面当中唯一一个交互控制元素。当用户点击这个按钮时,导航列表才会出现在屏幕当中。看上去,整个导航列表好像是另外一个界面,但它实际上是被放置在页面最下方的,而菜单按钮只是个锚点而已。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-mobile-website-adage-navigation.jpg" style="width: 500px; height: 633px; " /></a></p> <p>Wroblewski继续发言:&ldquo;这个设计方案在首屏当中使用了最小化的导航机制(只有一个按钮链接),用户可以集中精力去阅读每个分类当中的最新文章。当他们浏览至当前页面的底部时,还可以直接通过导航列表来探索更多的内容。最棒的是,顶部的菜单按钮只是一个锚点,整个导航机制不涉及到任何会导致交互流程复杂化的元素,例如JavaScript、覆盖层或是独立的导航页面等。&rdquo;</p> <p>&ldquo;内容在上,控制在下&rdquo;的规则看上去蛮简单的,不过一旦涉及到实际的上下文环境,例如操作系统或浏览器的用户界面特性,设计师们要考虑到的情况就变的复杂了。截至目前,我们可以将讨论过的话题归纳为几点设计原则:</p> <ul> <li> 对于iPhone中的客户端应用,尽量将重要的交互对象及导航结构放在界面底部。</li> <li> 对于Android中的客户端应用,尽量将重要的交互对象及导航结构放在界面顶部。</li> <li> 对于移动版本的网站页面,尽量将导航结构放在页面底部(注意,不是当前用户界面的底部)</li> </ul> <p>这些设计原则仅限于手机的上下文环境当中,而对于屏幕规格较大的触屏设备,例如iPad来说,规则就要发生变化了。</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>拇指热区的相关规则同样适用于平板电脑,不过,由于持机方式不同,热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候,需要一手持机一手操作;坐在桌前的时,我们往往会用一只手像支架一样从侧面架住iPad,而另外一只手用来戳戳点点;坐在椅子上的时候,我们通常会将它放在膝上进行操作;而躺着或是半卧着的时候,又会将它立在腹部,一手支撑,一手操作。</p> <p>每一种持机方式几乎都对应着一种特定的热区规则,而且在每一种姿态当中,设备与我们身体的距离也有所不同。例如,站着的时候,我们会把iPad端的比较近,而躺下的时候就相对较远了。</p> <p>虽然听上去有些复杂,不过在这些上下文情景当中的交互行为还是存有一些共同特征的。首先,用来持机的那只手通常会握住机身的上半部分,因为这样最符合杠杆原理;相应的,拇指热区基本会位于屏幕的前三分之一部分,偏向左上角或右上角。其次,iPad的屏幕相对较大,用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。正像对待普通的印刷品或是Web页面那样,用户通常会首先将目光聚焦于iPad界面的顶部区域,所以我们的设计方案也要相应的在这一点上符合用户习惯。换句话说,在操作iPad的过程中,无论是目光还是手指,它们的主要活动区域都是设备的上半部分。而机身的下半部分不仅会在很多时候被用户视而不见,而且在某些特定的环境中它真的是不可见的,例如当我们躺在床上的时候,这部分很可能被衣物或被子遮挡住,实在是悲催。</p> <p>所以,与手机界面不同,在iPad及同类平板设备的应用当中,主要的交互控制对象应该被放置在界面的左上角或右上角,以便拇指可以很容易的触摸到。Instapaper和Twitter在这方面做的都不错:</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-instapaper.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-instapaper" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-instapaper.jpg" style="width: 500px; height: 738px; " /></a></p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-twitter.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-twitter" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-twitter.jpg" style="width: 500px; height: 738px; " /></a></p> <p>需要注意的是,应该尽量避免将交互元素放在屏幕顶端正中间的位置,否则用户在进行操作的时候,手掌会将很大一部分内容遮住。实际上,任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。在<a href="http://itunes.apple.com/us/app/the-daily/id411516732?mt=8">The Daily的iPad应用</a>当中,内容正上方有一个滑块,用户可以通过拖动它来前后切换文章页面。意图不错,不过当你执行这个操作的时候就会发现,自己的手掌会遮挡住文章内容,而手指则会挡住缩略图,体验弱爆了。单凭这一个地方的疏忽,这个设计方案就足够作为反例登场了。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-the-daily.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-the-daily" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-the-daily.jpg" style="width: 500px; height: 738px; " /></a></p> <h3> 又一个底部原则</h3> <p>我们可以从The Daily的失策当中了解到,对于iPad应用来说,在某些特定的情况下,控制元素还是避开顶端微妙。你可以将它们放在底部甚至侧面,只要控制元素本身及其所需的交互行为不会对内容的可读性造成影响。我们来看看<a href="http://itunes.apple.com/au/app/the-smh-for-ipad/id436270575?mt=8&amp;ls=1&amp;affToken=56102">Sydney Morning Herald&#39;s的iPad应用</a>是怎样做的。如下图所示,在该应用的界面底部有一个页码指示器,当用户对其进行拖动操作的时候,对应页面中的文章标题就会以列表的形式出现在指示器的上方,使用户不用翻页就能大致了解其他页面当中的内容。虽然文章标题列表会将页面中的内容遮挡住,但在这个交互情景当中,用户最为关注的是列表中的文章标题,而不再是原来的主要内容区。</p> <p><a href="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-sydney-morning-herald.jpg" rel="lightbox"><img alt="mobile-application-interactive-ui-design-for-touch-sydney-morning-herald" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-sydney-morning-herald.jpg" style="width: 500px; height: 753px; " /></a></p> <p>对于在不同的情况下究竟应该将控制元素放在顶部还是底部的问题,我们不妨在这里弱弱的归纳一下:</p> <ul> <li> 对于那些起到界面导航作用的交互元素(例如&ldquo;菜单&rdquo;、&ldquo;返回&rdquo;、&ldquo;关闭&rdquo;等),以及用来完成分享、收藏、编辑、删除等功能的按钮,通常可以将它们放置在界面顶部。</li> <li> 对于那些用于浏览或预览内容的控制元素来说,界面底部是最佳位置。</li> </ul> <p>所以,我们可以在很多书籍或杂志应用当中看到,页面缩略图列表通常会被放在界面底部。(可以参考之前<a href="http://beforweb.com/node/48">iPad应用的十大用户体验设计准则</a>一文当中展示的Martha Stewart Living杂志以及Pulse的设计方案)假设你正在设计一款与地图相关的应用,界面当中有一个地标托盘,用户可以将地标从这个托盘当中拖拽出来,并&ldquo;按&rdquo;在地图上的某个地方。在这个例子当中,托盘同样应该被放在界面底部,这样可以保证当用户从托盘里将地标拖拽出来的时候,地图不至于被手遮挡住。</p> <div class="embed"><article id="node-296" class="node node-related-books" about="/node/296" 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/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="为iPad而设计:打造畅销App" src="http://beforweb.com/sites/default/files/images/products/42.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">为iPad而设计:打造畅销App</a></h4> <p><a href="http://www.amazon.cn/为iPad而设计-打造畅销App-克里斯•史蒂文森/dp/B00EKPJFS4/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书强调实际可行的操作步骤,而非模棱两可的建议,包括如何产生创意、手绘App、做出原型设计、组织协作项目,以及App营销方面独家并且内行的建议。作者还向读者展示了用来做出超棒App的最新代码库、讨论了界面设计方面的抉择...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 交互对象的尺寸</h3> <p>如果说交互对象的布局位置取决于平台类型及持机方式,那么它们的尺寸则在很大程度上由手指的大小来决定。我们必须将这些交互元素设计的足够大,才能保证用户可以进行准确的辨识和触击。</p> <p>不过,要做的多大才算够呢?不妨抬起手看看自己的指尖。很多系统平台的设计规范都在这方面进行了描述,不过我个人觉得苹果做的仍是最棒的:理论上,可触击元素的最小尺寸应该为44像素(约1/4英寸或7毫米)见方。</p> <blockquote><p>The comfortable minimum size of tappable UI elements is 44 x 44 points.</p> </blockquote> <p>请注意point与pixel的换算关系在Retina屏与普通屏幕之间区别。</p> <p>在移动应用的上下文环境中,足够大的按钮不仅便于操作,而且可以让用户维持必要的注意力,避免被周围的环境所干扰。</p> <p>44像素见方的最小规格只是一种理想状态下的情况,在实际当中,合理的折中方案通常是必需的。即使是iPhone用户界面中的很多原生控件也避开了这个规则的限制。最典型的一个例子就是系统自带的键盘,其中每一个键位的高度是44像素,但宽度只有30像素;而横屏状态下,其宽度是44像素,高度则变为38像素。不过这也是苹果的无奈之举,因为怎样都必须将完整的QWERTY键盘搞到界面当中,所以必须在设计方案当中有所取舍。</p> <p>参考苹果的做法,当空间的局限使得我们确实无法实现44像素见方的设计方案时,应该尽量保证其44&times;30的最小规格。</p> <h3> 元素的尺寸与空间布局</h3> <p>上个世纪,不少人都被卡西欧的计算器手表浪费了大量的青春年华。问题不仅仅在于那些微小的按键会让戴着它的人看上去很二,最不靠谱的是,这些按键的排布实在是太紧密了。你想按5,但通常会按到8或是2;与其说是计算器,还不如叫它幸运转盘更合适些。尺寸过小的按键以及毫无间隔空间的布局,是产生这种结果的两个最直接的原因。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-watch" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-watch.jpg" style="width: 500px; height: 333px; " /></p> <p>为小屏幕设备进行界面设计的时候,这类挑战确实是我们经常需要面对的,而造成问题的根本原因却通常不是产品需求本身。无论是在计算器手表的全盛期,还是如今,我们时常会听到产品需求方翻来覆去的念叨着:&ldquo;咱就把这些东西再挪近一些吧...我只想在这个工具栏里再加一个按钮...&rdquo; 加你妹啊!</p> <p>如果我们必须在设计方案当中将交互元素排布的非常紧密,那么至少要把它们各自的尺寸尽量做大。想想iPhone原生的拨号键盘界面,或是Skype等应用。界面当中的拨号按键之间的间隔通常都很小,甚至没有间距;而每个按键的尺寸几乎可以用巨大来形容,因为这样可以有效的降低误操作的几率。</p> <p><img alt="mobile-application-interactive-ui-design-for-touch-skype" src="/sites/default/files/images/201202/mobile-application-interactive-ui-design-for-touch-skype.jpg" style="width: 320px; height: 480px; " /></p> <p>其实,无论是iPhone原生的拨号界面,还是上图所示的Skype中的同类界面,它们都在底部导航工具栏的上方放置了一些控制按键。如果以我们在前文当中提到的一些原则标准来衡量的话,这种做法其实不算得当;但是在这几个具体的情景当中,这些控制按键的大尺寸特质却可以有效的降低它们与底部导航工具栏之间的视觉冲突<a class="eLink" href="http://beforweb.com">。</a></p> <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/24" 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/14" 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/36" 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/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Android</a></li><li class=" taxonomy-term-reference-10" rel="dc:subject"><a href="/taxonomy/term/15" typeof="skos:Concept" property="rdfs:label skos:prefLabel">触屏</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, 15 Feb 2012 08:50:25 +0000 C7210 49 at http://www.beforweb.com http://www.beforweb.com/node/49#comments 台式机、iPhone还是iPad - 不同设备上网时间的统计分析 http://www.beforweb.com/node/25 <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-chart-desktop-mobile-iphone-ipad-web-devices.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>又是一周过去了。想想两年前每天早上做<a href="http://viiiix.com">CMS方面博客</a>译文的时候,最多念叨一下当天的天气啊路上的事情啊一类;如今每周搞这么一次,想对过去一周总结些什么,却发现记忆这东西真的不靠谱了。虽然只有几天,但是各种猫事、装修事、工作事、家庭事统统在头脑中纠缠在一起,只觉得自己好像一周一周的都在打仗。</p> <p>之前有朋友提到过文章风格问题,觉得每篇开头的废话偏多;其实我也觉得。不过还希望各位谅解啦,怎么说呢,&ldquo;为网而生&rdquo;毕竟不是那些专门发布技术时讯文章的知名大站;这里只是我自己的个人博客之一,页头slogan里面提到的确实是核心内容,但是作为我个人来说,还是会随便念叨些有的没的。</p> <p>那今次废话就到此为止了。本文中,作者汇总了一些具有代表性的网站(包括Read it Later、Financial Times、Linkedin等)的统计数据,图形化的向我们展示并分析了一天当中,用户使用不同类型的设备进行上网访问的时间分布情况<a class="eLink" href="http://beforweb.com">。</a>希望本文可以对涉及移动互联网领域的产品同学有些参考价值。走着。</p> <!--本来这周开始做的是一篇关于Web应用的原型设计与用户测试方面的文章;不过自己及时的预计到了这些天将有蛮多事情要折腾和花心思,所以临时改做本篇,相对精干一些。--><!--break--><h3> Read it Later的台式机用户</h3> <p>下图所显示的,是Read it Later的用户在一天24小时内使用台式机阅读文章的数量统计。 可以看到,白天的阅读高峰出现在午时,而且前后两个小时内的数据也不错。在经历了傍晚的低谷之后,统计数字在晚上9点前后达到一天内的最高峰。</p> <p><img alt="user-device-mobile-readitlater-computer" src="/sites/default/files/images/201111/user-device-mobile-readitlater-computer.gif" style="width: 500px; height: 260px; " /></p> <h3> Read it Later的iPhone用户</h3> <p>再来看第二张统计图,它显示了Read it Later的用户在一天内使用iPhone阅读文章的数量统计。可以看到4个主要的峰值:早上6点(早饭或早阅读时间),上午9点(上班途中的时间),傍晚5点到6点(下班途中的时间),晚上8点到10点(晚上休息、卧床阅读时间)。</p> <p><img alt="user-device-mobile-readitlater-iphone" src="/sites/default/files/images/201111/user-device-mobile-readitlater-iphone.gif" style="width: 500px; height: 260px; " /></p> <p>可以看出,台式机与移动设备(手机)的统计情况之间的差异非常显著。</p> <h3> Read it Later的iPad用户</h3> <p>没悬念,接下来的图片所展示的,是Read it Later的用户在一天内使用iPad阅读文章的数量统计;可以看出,统计结果与iPhone的有些许相似之处。其中,早上6点左右出现了白天的峰值。上班途中的时间点上,情况一般;下班路途上的阅读量达到甚至超过了早饭和早阅读的时间。全天的最高峰很突兀的出现在晚上8点到11点之间的时间段里,正如前面提到的,基本是晚上睡前的放松阅读时间。显然,至少在阅读文章的用例中,iPad用户在晚间非常活跃。</p> <p><img alt="user-device-mobile-readitlater-ipad" src="/sites/default/files/images/201111/user-device-mobile-readitlater-ipad.gif" style="width: 500px; height: 260px; " /></p> <h3> 新闻资讯类网站的访问设备统计</h3> <p>在<a href="http://blog.comscore.com/2011/11/the_rise_of_digital_omnivores.html">comScore的统计报告</a>中,也可以看到类似的特征。下图显示了用户使用台式机与平板电脑阅读新闻内容的时间分布情况。在白天工作时间,台式机的使用量占有绝对优势,而平板电脑的访问量在晚间休息时间达到峰值,甚至超出白天台式机的最高点。</p> <p><img alt="user-device-mobile-news-tablet-pc" src="/sites/default/files/images/201111/user-device-mobile-news-tablet-pc.gif" style="width: 500px; height: 260px; " /></p> <p>TechCrunch里有一篇<a href="http://techcrunch.com/2011/11/18/financial-times-mobile/">关于Financial Times的报道</a>。FT是英国老牌报纸,最近,他们为移动设备用户专门打造了基于HTML5的Web应用(Web App)。下图反映了其智能手机与台式机用户的访问量分布;可以看出,即使对于新上线的网站和服务,统计结果依然符合我们在前面看到的模式。</p> <p><img alt="user-device-mobile-financial-times-smartphone-pc" src="/sites/default/files/images/201111/user-device-mobile-financial-times-smartphone-pc.gif" style="width: 500px; height: 260px; " /></p> <h3> 社交类网站(Linkedin)的访问设备统计</h3> <p>这里有一张很漂亮的<a href="http://8.mshcdn.com/wp-content/uploads/2011/03/linkedin-infographic-640.png">关于Linkedin的信息图</a>,我们将其中关于访问设备统计的部分拿出来。其中,第一张图不区分设备,展示的是一天24小时内全部用户的访问量统计;第二张图则锁定移动设备的用户。可以看出,访问量的高峰出现在上午9点至下午2点之间,在这期间,设备类型主要是台式机。即使晚间移动设备的访问量达到了峰值,它还是没有超过白天的统计数字。</p> <p>至少对于Linkedin来说,我们可以得出大致的结论:人们更多是在工作时间进行访问。估计大伙对自己的工作都不怎么满意。</p> <p><img alt="user-device-mobile-linkedin-overall" src="/sites/default/files/images/201111/user-device-mobile-linkedin-overall.gif" style="width: 500px; height: 260px; " /></p> <p><img alt="user-device-mobile-linkedin" src="/sites/default/files/images/201111/user-device-mobile-linkedin.gif" style="width: 500px; height: 260px; " /></p> <p>抛开网站及服务,不同设备类型的联网行为也是有各自的显著特征的。下图显示了笔记本、平板电脑和智能手机在3G网络链接的时长与会话数方面的统计结果。</p> <p><img alt="user-device-mobile-3g-connection-traffic-patterns" src="/sites/default/files/images/201111/user-device-mobile-3g-connection-traffic-patterns.gif" style="width: 500px; height: 260px; " /></p> <h3> 使用环境</h3> <p>对于以上这些统计结果,有一种观点,认为起到决定作用的实际上是设备的使用环境。例如,对于新闻资讯类的网站,移动设备访问量在早上达到峰值,是因为人们在当时必然在路上;或者,对于平板电脑来说,晚上的访问量峰值证明人们必然是在家中。固然,这种假设具有一定的参考价值,但毕竟我们所能看到的统计数据,是以时间为考量的,环境及地理因素并没有包含在其中。我们无法肯定这种关于使用环境的假设是100%正确的<a class="eLink" href="http://beforweb.com">。</a></p> <p>如果时间足够充裕,人们完全可以在起床之后使用手机来阅读Financial Times,因为它就在枕边的床头柜上。类似这样的假设,你还能想到很多。通过这些统计数据,我们唯一可以确认的,是不同设备在一天当中不同时段的上网情况。</p> <div class="embed"><article id="node-261" class="node node-related-books" about="/node/261" 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/B00DINCMYI/?_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/05.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/移动设计-傅小贞/dp/B00DINCMYI/?_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/B00DINCMYI/?_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></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/10" typeof="skos:Concept" property="rdfs:label skos:prefLabel">移动设备</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/12" typeof="skos:Concept" property="rdfs:label skos:prefLabel">iPad</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/65" typeof="skos:Concept" property="rdfs:label skos:prefLabel">统计分析</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/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Web应用</a></li></ul> Sat, 26 Nov 2011 08:55:37 +0000 C7210 25 at http://www.beforweb.com http://www.beforweb.com/node/25#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 通过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