BeFor Web

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

在本书后面的章节中，我们将深入探讨那些可以为iOS应用带来独特交互效果的理念与方法。不过在那之前，我们还需要再花些时间对iOS用户体验中的一些尚未成文的方面加以解析。

在iOS交互模型的最底层，有一个“空间”的概念，用户就是在这个空间中前后行进，完成各种目标任务的。我们可以把这个概念想象成一个微小的宇宙，里面囊括着全部的系统功能及应用程序。与真实世界相仿，这个宇宙也有它自己的规则和限制，它所固有的属性会作用于其中的万物。

了解了这个交互空间中的基本原理之后，我们不仅能够打造出更加卓有成效的产品设计方案，甚至还可以冲破这个空间的限制，自己创造全新的规则。

iOS用户体验的成功与流行不是由某个单独的设计元素或交互方式造就的，它是一种整体效应的体现。然而，要想真正理解是什么原因让iOS如此迷人，我们必须将这个整体拆解开来，逐一进行分析。接下来，就让我们对那些定义了iOS用户体验框架的基本要素进行深入解析。

首先，我们会把注意力放在一些层面较高的问题上，包括界面外观的隐喻与效用、直接操纵的理念以及Home键。随后，我们将从界面空间模型和用户心智的角度出发，对iOS系统及应用的交互机制进行分析。最后，我们还将对iOS简洁易用的设计理念做以了解，并看一看所有这些不同方面的要素是怎样通过视觉设计统一成为一个整体的。

苹果公司制定iOS人机界面设计规范(HIG，Human Interface Guidelines)的目的，是为那些刚刚进入iOS领域的设计师和开发者提供一个最权威、最可靠的起点。他们制定这套规范的方式很简单——提供大量的基础理论知识和技术指导，帮助个人或设计开发团队在最短的时间内创建出iOS应用。

最初，这套规范更多的是在向读者展示iOS平台带来的革命性的交互模式。当苹果刚刚开始将设备开放给第三方应用开发者的时候，他们所面临的最大挑战，就是怎样推广iOS及相关设备，使其成为一种能够切实有效地部署和运行应用程序的系统平台，从而被广大用户所接受。

苹果于2008年夏天推出应用商店(App Store)的时候，移动设备及消费电子产品方面的专业团队已经形成了一个成熟的社区。这些团队完全可以迁移至新的iOS平台，并开始为它打造应用。然而，当时拥有成功技能和经验的人还非常少，苹果需要更多的iOS应用开发团队，需要更多优秀的应用程序，以确保他们的战略走向成功。

最近翻了本儿书，现在准备共享出来，就是这么个事儿。

查看《iOS Wow Factor》全书译文精选目录

大概有的朋友已经在我的微博里看到了预告，简单介绍下先。此书英文全名《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》，这名字不用翻译估计大伙也能看出个八九不离十了，全书大致的路子就是对iOS本身的设计理念及体验要素进行全方位的分析，并在此基础上探讨如何在iOS应用当中打造令人惊叹的用户体验模式。怎么叫令人惊叹呢，想想Clear，基本就是那意思了。

有朋友问了，诶你不是一直翻译博客文章么，这回怎么改翻书了呢，是太闲了么？这个真不是。事情的来龙去脉都念叨一遍的话，怕是要花费太多时间与文字，而且势必参杂进不少的负面情绪，最后即耽误了各位的时间，又把我自己性格里的糟粕勾搭了出来，想想看不划算。总之，这本来是我之前两个月与某出版社合作翻译的一本书，但中间发生了些不快，使得此事最终木有开花结果。

话说回来，虽然出版的事儿是黄了，但全书的内容既然已经做完，总不好浪费掉，放在硬盘里也不会长出好吃的蘑菇来，不如分享一下，故此就有了现在这档子事。在接下来的一小段日子当中，我会陆续将这本书的译文放上来。不过眼下还要针对译文本身再做几点简要的说明先：

印象当中，最近这些年的春天总是会带来让人觉得真心别扭的气候体验，雨和冷风就像催化剂一样，让生活和工作当中的人和事也变得异常凌乱，仿佛一团被咀嚼到完全失去味道的槟榔。November Rain前奏当中的钢琴旋律多少可以让心安然一些，一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。

可脑袋一旦被拧下来，就什么也无法吃的样子了，不是吗。说正事儿吧。Designing for touch，关于这个话题及相关的文章，最近貌似已然铺到大街上了，不过我还是做我的吧。在标题里加了个不伦不类的“又是”二字，以示区分。内容方面应该会有些交集，但这是我自己的。

Josh Clark老师最近蛮活跃的。在本文中，他将向我们介绍一些触屏移动设备用户界面设计当中需要注意的问题，并对iPhone、iPad和Android相关设备在触控交互体验方面的友好性进行了对比和分析。欢迎，走着。

对于移动设备的操作系统及应用来说，判断其用户界面设计方案是否优秀的一个重要衡量标准，就是看它对于手指触控操作的友好程度。相比于桌面计算设备及相关的软件环境，触屏移动设备所具有的交互特性几乎将用户体验设计师们带入了工业设计的领域；设计方案更多是在体现着人机工学方面的原理，而不再是仅仅用来规划内容与功能的视觉呈现方式。

又是一周过去了。想想两年前每天早上做CMS方面博客译文的时候，最多念叨一下当天的天气啊路上的事情啊一类；如今每周搞这么一次，想对过去一周总结些什么，却发现记忆这东西真的不靠谱了。虽然只有几天，但是各种猫事、装修事、工作事、家庭事统统在头脑中纠缠在一起，只觉得自己好像一周一周的都在打仗。

之前有朋友提到过文章风格问题，觉得每篇开头的废话偏多；其实我也觉得。不过还希望各位谅解啦，怎么说呢，“为网而生”毕竟不是那些专门发布技术时讯文章的知名大站；这里只是我自己的个人博客之一，页头slogan里面提到的确实是核心内容，但是作为我个人来说，还是会随便念叨些有的没的。

那今次废话就到此为止了。本文中，作者汇总了一些具有代表性的网站(包括Read it Later、Financial Times、Linkedin等)的统计数据，图形化的向我们展示并分析了一天当中，用户使用不同类型的设备进行上网访问的时间分布情况。希望本文可以对涉及移动互联网领域的产品同学有些参考价值。走着。

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

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

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

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

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

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

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

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

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

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

十一长假已然过去了一大半。今天倒真是晴朗的不行，向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生，对每年的几次长假就无比珍惜，想方设法让每一天都尽量过的饱满一些；夜里闭上眼，满脑子就都是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，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。