Be For Web - 网格系统 http://www.beforweb.com/taxonomy/term/63 en 简洁至上的Web设计 - 创意要素及设计技巧 http://www.beforweb.com/node/57 <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-clean-simple-web-design-element-tips-techniques.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>这周有两大喜事。一是终于不用每天回家一直泡在iOS Wow Factor一书的翻译工作当中了,具体情况会在接下来一篇文章当中进行嘀咕。第二是公司UED新总监的到任。看到了一些希望在里面,这两件事都是如此。我们来看正题吧。</p> <p>简洁,不等于简单。这与弹琴是一个道理,你也许有能力弹得很快,但你并不需要在所有地方都弹得这么快。在很多时候,让速度慢下来反而比弹得飞快要来的更加困难。实际上,味道往往最能体现在从容自然、舒缓平淡的韵律当中。接下来进入原文作者人格;我发现自己在很大程度上就是一Dummy System来着。</p> <p>简洁的Web页面设计风格是当前圈子当中的风潮之一。在本文中,我们首先将对这类风格当中的那些最具代表性的组成要素进行分析,随后,我(英文原文作者)还会向各位分享一些工作中的实战技巧。</p> <!--break--><p><img alt="clean-web-design-elements-tips-showcase" src="/sites/default/files/images/201203/clean-web-design-elements-tips-showcase.png" style="width: 500px; height: 182px; " /></p> <h3> 简洁风格的创意组成要素</h3> <h4> 固定宽度的页面布局结构</h4> <p>花时间观察<a href="http://sixrevisions.com/design-showcase-inspiration/50-beautiful-clean-and-simple-web-designs/">一些简洁风格的网站</a>,你会发现它们当中的绝大多数都有用到经过良好规划的网格布局系统。如果哪位朋友对网格布局还不大了解的话,可以设想一下,在着手进行实际的视觉设计工作之前,使用辅助线将页面划分为若干等宽的列,通过这种方式对页面结构及元素的布局进行更精准的规划。网格布局可以使设计方案当中的信息结构更加清晰,在视觉上具有强烈的节奏感与一致性。</p> <p><img alt="clean-web-design-elements-tips-grid" src="/sites/default/files/images/201203/clean-web-design-elements-tips-grid.png" style="width: 500px; height: 267px; " /></p> <p>固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子,虽然<a href="http://www.creativereview.co.uk/">Creative Review</a>当中的页面布局会根据内容类型的不同而有所区别,但我们能够感受到的浏览体验却是相当连贯的,因为这些页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和About页面:</p> <p><img alt="clean-web-design-elements-tips-creative-review" src="/sites/default/files/images/201203/clean-web-design-elements-tips-creative-review.png" style="width: 500px; height: 725px; " /></p> <p>对于在线杂志或报纸一类需要呈现大量内容的网站来说,要打造简洁的页面设计方案则更加困难。不过英国的<a href="http://www.guardiannews.com/">卫报(The Guardian)</a>以及一些同类型的在线报纸站点倒是向我们展示了通过固定宽度的网格布局实现简洁设计方案的可行性:</p> <p><img alt="clean-web-design-elements-tips-magazin-newspaper-guardian" src="/sites/default/files/images/201203/clean-web-design-elements-tips-magazin-newspaper-guardian.png" style="width: 500px; height: 445px; " /></p> <p class="eNote">配色有些许凶残么&mdash;&mdash;译者<a class="eLink" href="http://beforweb.com">C7210</a>注。</p> <p>如果不使用固定宽度的布局方式来组织这些内容,几乎可以说,首页将会乱的一塌糊涂。然而,在网格布局的帮助下,模块之间的留白及层次关系都相当清晰,整个内容结构的健壮性得到了提升。</p> <p>下面两篇文章(英文)可以帮助你更好的理解与实践网格布局的概念:</p> <ul> <li> <a href="http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/">A Brief Look at Grid-Based Layouts in Web Design</a></li> <li> <a href="http://sixrevisions.com/web_design/the-960-grid-system-made-easy/">The 960 Grid System Made Easy</a></li> </ul> <p class="eNote">也不是什么新概念了,国产好文章也蛮多,有欲求的同学可自行觅食&mdash;&mdash;译者<a class="eLink" href="http://beforweb.com">C7210</a>注。</p> <h4> 良好的文字排印</h4> <p>良好的文字排印方案往往可以对简洁风格的页面设计起到事半功倍的推进作用。</p> <p>对字体数量的限制是这其中的一个关键因素。如果在同一套设计方案当中运用了过多的字体,它们彼此之间就会产生视觉上的竞争与冲突,这无疑会使页面变得凌乱不堪,用户的阅读连贯性也会受到极大的破坏。</p> <p>看看那些设计优秀的网站,你会发现它们通常只会用到一到两种字体,并在此基础上通过不同的字号、字色、粗细、间距等属性来体现出内容的层次结构。</p> <p>在这方面,<a href="http://www.nytimes.com/">纽约时报</a>(The New York Times)与<a href="http://www.themavenist.org/">The Mavenist</a>都是不错的例子。</p> <p><img alt="clean-web-design-elements-tips-new-york-times" src="/sites/default/files/images/201203/clean-web-design-elements-tips-new-york-times.png" style="width: 500px; height: 405px;" /></p> <p><img alt="clean-web-design-elements-tips-The-Mavenist" src="/sites/default/files/images/201203/clean-web-design-elements-tips-The-Mavenist.png" style="width: 500px; height: 382px;" /></p> <p>这两个站点用到的字体都不超过两种,但它们的设计方案都比较充分地利用了字体各方面的属性特质,使得整个页面当中的信息层次非常鲜明。</p> <p>除了字体以外,行间距(line-height)也是文字排印方案当中的一个关键性因素。使行与行之间保持足够的空间,文字段落就能变得更加易读,当用户阅读到一行文字的末尾时,也可以很轻松的将目光转向下一行开头的位置。我们可以在样式表当中通过line-height属性对行间距进行调整。</p> <p>此外,对于每一行当中的文字来说,字间距(letter-spacing)也是我们需要考虑到的细节问题。合理的字间距可以为文字带来更好的呼吸感。</p> <p>关于文字排印,也有些不错的文章(英文)推荐一看:</p> <ul> <li> <a href="http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/">A Basic Look at Typography in Web Design</a></li> <li> <a href="http://sixrevisions.com/css/css-typography-01/">CSS Typography: The Basics</a></li> <li> <a href="http://sixrevisions.com/css/css-typography-02/">CSS Typography: Techniques and Best Practices</a></li> <li> <a href="http://sixrevisions.com/css/css-typography-03/">CSS Typography: Examples and Tools</a></li> </ul> <h4> 简化的配色方案</h4> <p>在印刷领域,设计方案所用到的颜色数量通常会受到各种现实问题的限制,譬如项目的预算只允许设计师使用两种颜色来设计海报。类似这样的情况是很常见的,设计师们时常会因为这些局限而感到相当的闹不住。</p> <p>而Web设计领域当中却不存在这类问题,如今,多数显示设备所支持的颜色数量都庞大的不亦乐乎。从技术上讲,我们可以随心所欲地打造各种花里胡哨五彩缤纷的设计方案,然而这样的实践方式显然会与简洁至上的设计目标背道而驰。很多经典的案例当中只会用到两种颜色, 即某个明度的灰色外加一种有彩色。其中的有彩色会用在最为关键的页面元素上,例如重要的链接或页头当中的交互对象。从某种角度来说这种极简的配色方案具有一石二鸟的作用,一方面,它无疑会对简洁视觉风格的构建起到至关重要的作用,同时,这类方案还能有效的提高页面元素之间的对比度,使那些重要元素得到最大程度的突出。</p> <p>AisleOne的配色方案称得上是这方面的典范:</p> <p><img alt="clean-web-design-elements-tips-a1" src="/sites/default/files/images/201203/clean-web-design-elements-tips-a1.png" style="width: 500px; height: 382px; " /></p> <p>Fuzzco则更为极端的只用到一种颜色:</p> <p><img alt="clean-web-design-elements-tips-fuzzco" src="/sites/default/files/images/201203/clean-web-design-elements-tips-fuzzco.png" style="width: 500px; height: 405px; " /></p> <p>好么?我个人持保留意见&mdash;&mdash;译者<a class="eLink" href="http://beforweb.com">C7210</a>注。</p> <p>另外一些成功的简洁设计方案当中,虽然用到的颜色数量会超过两种,但整体的配色风格依然趋向于保守,而且用到的颜色多数是比较中性的。我们来看看<a href="http://www.thrivesolo.com/">Solo</a>:</p> <p><img alt="clean-web-design-elements-tips-solo" src="/sites/default/files/images/201203/clean-web-design-elements-tips-solo.png" style="width: 500px; height: 383px; " /></p> <p>正如文字排印方式与信息传达效果之间的关联作用,配色同样不仅是选取一些好看的颜色那么简单,优秀的配色方案可以通过正确的视觉基调将网站当中的内容更加有效地呈现出来。以<a href="http://notologist.andphil.com/">Notologist</a>为例,明亮、互补的颜色搭配使得内容信息及它们之间的关联得到了非常自然的体现,页面整体风格非常简洁直白,同时又不失活力。</p> <p><img alt="clean-web-design-elements-tips-notologist" src="/sites/default/files/images/201203/clean-web-design-elements-tips-notologist.png" style="width: 500px; height: 382px; " /></p> <p class="eNote">但我不喜欢这个页面中的黑色导航&mdash;&mdash;译者<a class="eLink" href="http://beforweb.com">C7210</a>注。</p> <h4> 一致的图片样式</h4> <p>如果同一个网站当中的图片(照片、插画、图表等)样式差别很大,你会觉得焦虑么?反正我会。</p> <p>对于内容当中有可能包含很多图片的网站或页面来说,要落实简洁至上的设计思路,其中最关键的一点就是要通过和谐统一的样式风格将这些视觉元素呈现出来。</p> <p>举例来说,IBM的<a href="http://sixrevisions.com/web_design/elements-clean-web-design/">智能星球运动</a>(Smarter Planet campaign)涉及到多个方面的主题,与其相关的印刷品、插画、图表、人机互动素材等都遵从着同一套方案标准,包括几何框架、线条风格、色彩饱和度等。无论是在网站,还是在平面媒体中,相关主题的视觉表现形式都具有高度的一致性。</p> <p><img alt="clean-web-design-elements-tips-ibm-smarter-planet" src="/sites/default/files/images/201203/clean-web-design-elements-tips-ibm-smarter-planet.png" style="width: 500px; height: 342px; " /></p> <p>在<a href="http://prote.in/profiles">Protein</a>中,艺术家们的照片并不是统一拍摄的,但从视觉效果上看,无论构图、景深还是光影等方面,这些照片都具有相似的表现。图片个体之间在视觉上的一致性,可以使页面体现出良好的整体感。</p> <p><img alt="clean-web-design-elements-tips-Protein" src="/sites/default/files/images/201203/clean-web-design-elements-tips-Protein.jpg" style="width: 500px; height: 382px; " /></p> <p>不过在很多情况下,我们确实难以对页面里的图片表现形式进行有效的管理。一方面,用户上传的图片是难以控制的,另外,对于新闻网站或博客来说,也不可能因为表现形式的问题而舍弃具有重要内容价值的图片。另外,客户也未必有预算去支持图表或插图的重新绘制,设计师必须利用现有资源办事儿。在这类情况当中,可以试着通过边框或类似的元素对图片进行修饰,这样做至少可以为图片增添一种统一的视觉属性。</p> <div class="embed"><article id="node-297" class="node node-related-books" about="/node/297" 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/B004I91HCY/?_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/43.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/简约至上-交互式设计四策略-科尔伯恩/dp/B004I91HCY/?_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/B004I91HCY/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书介绍交互式设计的技术与技巧,讲述如何从目标用户的需求和期望出发,结合人类本身的心理特征和行为特点,用最简单的方法创建易用、有效而且让用户愉悦的设计。书中阐释了合理删除、分层组织、适时隐藏和巧妙转移这四个令交互式设计成果最大程度简单易用的策略...</a></p> </div> </div> </div></div></div></div></section><span class="tag-title">相关书籍推荐</span></article></div> <h3> 设计思路与技巧</h3> <h4> 先复杂,后简化</h4> <p><img alt="clean-web-design-elements-tips-simplify" src="/sites/default/files/images/201203/clean-web-design-elements-tips-simplify.png" style="width: 500px; height: 182px; " /></p> <p>在页面设计的过程中,我们必然要将各种界面元素一点点的放置在页面里。为了打造简洁的设计方案,很多设计师通常会在这种时候有所顾忌,下不去手。这会导致整个流程当中缺乏必要的探索性,而且最终的设计方案往往会让人感到苍白与空洞,而非简洁。大家多多少少应该都有所体会,如果运气好的话,探索过程中的那些happy accident往往能带来预想不到的惊艳效果。</p> <p>所以,我们不妨试试先复杂,后简化的思路。在设计流程初期,不要对界面元素的数量进行刻意的限制,同时尽量多尝试一些不同的布局方案,直到需求所需的内容及功能元素全部就位,然后开始简化工作。</p> <p>问一问自己,&ldquo;有哪些元素是真正需要放在这个地方的?&rdquo;,试着移除一些辅助性的元素,观察局部或整体页面结构是否因此而受到破坏,如果没有,那么扔掉蛮好。</p> <p>各位大概有听到过&ldquo;80%的产出源自20%的关键性投入&rdquo;这个说法(80/20法则),我们同样可以将这个理论运用到设计工作当中。很多情况下,页面整体设计方案给用户带来的体验感知是以其中一小部分关键元素为根基的。对于这类元素,我们要有足够的辨识能力,并围绕它们进行主要的设计工作,同时对其他元素进行合理的简化。</p> <p>这当中还有一个比较实用的小方法。我们可以找来一些与项目无关的&ldquo;局外人&rdquo;,对当前的设计方案进行评估。在这个过程中,向他们解释每个界面元素本身及其视觉表现形式的作用和意义。如果你发现自己对于某些元素无法给出除了&ldquo;看上去很酷&rdquo;、&ldquo;其他网站也是这样做的&rdquo;以外更具说服力的解释,那么就考虑对它们进行简化或是移除吧。</p> <p>在经历了这样一个过程之后,最终留下的页面元素就是能够帮你构筑最简设计方案的素材。</p> <h4> 微调,再微调</h4> <p><img alt="clean-web-design-elements-tips-tweat" src="/sites/default/files/images/201203/clean-web-design-elements-tips-tweat.png" style="width: 500px; height: 182px; " /></p> <p>道上的朋友们觉得我总是喜欢没完没了的折腾设计方案,我真心觉得这种评价是对我的赞扬。</p> <p>在我看来,设计流程从来没有真正结束的时候,我们总是可以将方案朝着正确的方向再推进一点。说正经的,在这方面,问问那些和我合作过的设计师或实习生,他们会告诉你,跟着我干是多么苦逼的一件事儿。我估计也是,当我让他们在一些阴影的细节上修改了12次以上的时候,基本没人会觉得有意思了。</p> <p>正像我们在前文当中了解到的,&ldquo;简洁&rdquo;是由界面布局、文字排印、配色方案、元素外观等多方面要素协同构成的综合体验效应。所以,在整个流程中,花费大量时间在每个方面的细节当中进行纠结是必需的,这能怪我么?这里增大点行间距,那里的外边距减小两像素,把边框线的颜色由#EEE改为#DDD...这样的改动听上去并不重要,但当所有这些微调共同作用在页面整体上时,细微的差别所累加起来的综合效应就会变得非常明显。</p> <p>所以,微调吧,然后再微调些些。很多时候,在一个细节当中的调整还会引发另外一处的修改需求,有时甚至会对整个设计方案的方向造成影响。不怕,耐心些,简洁至上的设计目标需要我们付出的绝不会像最终成品看上去的那么简单轻松。</p> <h4> 大局观</h4> <p><img alt="clean-web-design-elements-tips-big-picture" src="/sites/default/files/images/201203/clean-web-design-elements-tips-big-picture.png" style="width: 500px; height: 182px; " /></p> <p>我前半辈子主要是一名印刷设计师。说是印刷,其实自己做了很多打印工作,因为每天在工作当中都会反反复复地将各种稿件打印出来并钉到墙上。久而久之,几面墙上都钉满了各种视觉方案的打印稿。</p> <p>在改行做Web设计之后,我果断不打印了,因为我觉得最终产品只会上上线而已,完全不会涉及到出版印刷一类的问题。于是在很长一段时间内,几个墙面都是空空如也的。不过慢慢的我却开始怀念起过去的日子了。将项目当中的设计稿一张张的打印出来并钉到墙上,这种简单直白的组织方式其实可以给我们带来一种很明显的大局观,使我们能够站在全局的层面上对页面进行观察和评审,并有可能发现更多可以被简化的细节元素。</p> <p>相比之下,在Photoshop或Illustrator中通过切换图层来对比视觉稿的方式就会让我们的视野受到很大的局限。所以我建议各位好好利用一下纸张及墙面,通过这种方式来发现不同页面的设计方案在一致性等方面的缺陷,去除有可能影响到简洁方案的不和谐因素。</p> <p>对不住了环境,对不住了大树。</p> <div class="embed"><article id="node-298" class="node node-related-books" about="/node/298" 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/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23"><img alt="一目了然:Web和移动应用设计通识方法(第2版)" src="http://beforweb.com/sites/default/files/images/products/44.jpg" /></a></span> </div> <div class="content"> <h4><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">一目了然:Web和移动应用设计通识方法(第2版)</a></h4> <p><a href="http://www.amazon.cn/一目了然-Web和移动应用设计通识方法-赫克曼/dp/B007IQN00G/?_encoding=UTF8&amp;camp=536&amp;creative=3200&amp;linkCode=ur2&amp;tag=c7210-23">本书深入阐述了如何设计出简单易用的基于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></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UI</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel">简约设计</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel">网格系统</a></li></ul> Fri, 16 Mar 2012 09:18:01 +0000 C7210 57 at http://www.beforweb.com http://www.beforweb.com/node/57#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