BeFor Web

为网而生 - 关注互联网及移动端产品的用户体验设计

在新家一点点安顿了下来，不过心里还是缺乏踏实的方向感；猫猫们也都有些瞻前顾后草木皆兵的样子，有待继续习惯；希望大家都好好的。话说眼前的这篇候选文章貌似已然有同行做过译文，不过正像 “关于BeForWeb”中所说的，我只挑那些我喜欢的 、对我自己有学习和收藏价值的内容来做译文，其他方面的因素和我没有半毛钱的关系。不多说，直接进入正题。

在人际关系中，良好的第一印象是非常重要的，人们愿意在彼此身上寻求信任与诚实，并期望在接下来的经历中重现和增强这些好感。同样的道理也体现在移动应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间持久信任关系的过程中，“设计”扮演着极其重要的角色。

在用户的期望中，移动应用应该是准确、友好和高效的。然而，移动设备自身的局限性确实为产品的设计带来了不少挑战。要打造值得信赖的移动应用用户体验，产品在性能方面的表现是极其重要的关键因素。

本文中，我们将对移动应用的设计与性能表现之间的关系进行讨论，并了解七个相关的设计准则。这些准则都是我们(英文原文作者)团队在各类移动应用实际项目中逐渐总结归纳出来的 ；希望它们同样可以帮助大家在落产品实需求的同时，从性能的角度更加合理的规划设计方案。

整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里，倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西，不然钟表怎么会走的那么快，一点儿也不愿停下等等我的样子。一切都会好起来。

独白终了，进入正题。最近两篇译文都有涉及框架和跨平台方面的话题：前一篇中，我们了解了一些用于移动应用开发的前端框架工具；今天这篇的立足点偏向设计开发流程的上游，它将向我们展示怎样使用Foundation框架快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型。下面开始正文部分。

开门见山的说，作为网页设计和开发人员，我们面临着以下几个严峻的问题：

• 每天，人们用来上网的设备种类和数量都在不断上升。
• 为每种设备设计开发不同的界面是不可能的。
• 即使你专门为某些设备定制打造，这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕，大家一起面对并解决问题。其实，不同类型的设备及屏幕的这个问题，很早以前就开始存在了，只是多年来我们一直忽视这个状况，一厢情愿的守着960像素的网格系统。

愉悦的周五，早些回到家，冲澡吃饭照顾猫咪家务完毕已然超过九点的样子。登录博客后台，进入编辑页面，才觉得些许轻松安逸。不坏，一天里能有这么一会沉浸在这样的感觉里，足够了。

在之前的一篇文章中，我们曾经讨论过，对于交互和视觉设计相关职能的从业人员来说，从传统Web行业向移动应用领域转型的过程中需要学习和注意的问题。这篇文章中提到过“混合型应用”的概念，以及与之相关的两本开发指导书籍。今天这篇文章的英文原文，就是来自这两本书的作者——移动应用开发者Jonathan Stark。

本文中，他将站在传统Web前端开发人员的角度，为我们介绍一些在实际项目案例中总结出来的移动应用开发方法策略，以及几类具有代表性的用于打造跨平台移动应用的前端开发工具。

各位前端开发相关职能的同行们，扩展视野、提升技能、随“机”应变的时机已然成熟；衷心希望本文可以成为推动大家事业进步发展的一个催化点。不多说了，我们来看正文。

今次的译文中，我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主，本篇则围绕一个实际网站案例展开，从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。

本篇的部分内容要点会与之前几篇产生交集；我们会在这些地方提供相应文章的入口，便于深入参考阅读。接下来进入正文。

根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。

通过响应式的设计开发方式，我们可以使网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。

如果你对响应式Web设计还不大了解，可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章，全方位预热一下。

平日的工作忙碌了些许，疲劳因素让每晚散碎的时间显得更加吃紧；赶上这样稍微有点篇幅的文章，做起来就有些迟缓了，哼哼唧唧的翻译了将近一周。

话说，又是以移动应用为主线的文章，这是闹哪样呢。但也不至于和本小博客的主旨相悖；网站产品移动化，设计思路移动化...在移动互联网汹涌的大潮面前，这是合情合理的趋势，也是我们在用户体验设计相关的日常工作中越来越多需要面对和学习的。

如果你一直以来从事着相对传统的交互、视觉等方面的Web设计工作，而如今开始打算扩展视野、提升技能、随“机”应变，做一名移动互联网的弄潮儿...那么本文很适合你阅读。相关领域中的几位牛人会在接下来的时间里带给我们一些很实在的经验之谈。全文大致分为三个主题：

• Web设计师需要学习哪些知识和技能，才能进入移动应用的设计和开发领域？
• 从设计的角度讲，移动客户端应用与传统网站页面之间的主要区别在哪里？
• 怎样提升移动客户端应用的用户体验？设计师需要特别注意哪些？

开始进入正题。现如今，到处都有人在谈论移动应用方面的话题，从视觉外观到交互体验，这个那个的不亦乐乎。实际的统计数字也是蛮惊人的。最近，一份来自Flurry的研究报告显示，用户(美国地区)每天使用移动应用的时间，平均下来是81分钟，已经超过了平均74分钟的上网时间。

导读时间。总觉得导读文摘这个词儿用的有些别扭，不过语义上来说又没什么不妥。不琢磨了。

从今天读到的文章里挑出那么6篇放上来，都是最近比较关注的一些方面：

• 谷歌推出新的Web编程语言Dart
• 不拘规范的iPhone优秀应用设计细节
• Web产品到移动产品的设计变化
• Shark(鲨鱼)：3G时代的轻邮件
• 给移动互联网创业公司的六条建议
• 学习腾讯的产品管理之道

十一长假已然过去了一大半。今天倒真是晴朗的不行，向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生，对每年的几次长假就无比珍惜，想方设法让每一天都尽量过的饱满一些；夜里闭上眼，满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。

OK开始说正经的了。在之前一篇译文中，我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题，我们将从前文介绍过的“弹性布局结构”这方面出发，通过一个具体的实例来深入学习。

如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

开始第一篇。老规矩，先无聊的谈论天气一类的话题。十一长假，天气也终于开始有些秋天的味道，坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始做Joomla文档翻译的；长假好时光，总会可以抽出一两天，安静的窝在家里做做博客、学做些新东西，简直没有比这更舒心的事情。

说正事儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！...)，今天放上的这篇几乎花掉了两天的“闲暇时间”；对耐力是个考验，努力提高喽。废话结束，here we go.

眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle...各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？

在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。

响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。