BeFor Web

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

眼下是较为宁静的周日下午(但这篇没打算周日发)，滚石和Led Zeppelin一张一张的放着。别说我老了，10多年前同样是在听这些，特别是在没有多余的精力可以发泄或是没有特别负面的情绪需要抑制的时候。老东西总是最有沉淀感和安全感的，毫无疑问。

正坐在沙发正中间，左右一边一只喵，都盘成个团安静的睡着；从10.1假期把推推从医院接回家开始，每天基本没有晚于6点起床了，加之这一两个月学车的频率也变高了，周末也便是同样的起床时间。搞得这样的下午恍恍惚惚的像是每一个感官都要逐渐睡去的样子了。据说人在将睡未睡的时候，脑波是最利于记忆和创造什么什么的，真真么？倒是记得好多年前以设计博客模板为职业的时候，有几次在睡着之前好像突然看到些特别赞的页面，但接下来要么是没办法让自己醒来，要么是起来试图描画出来的时候又寻它不见了；挺奇妙的。

那么不多说了，和上周的15个响应式前端设计框架同属一个系列，时间较新，用的到的朋友可以看看有无所需。以下文字内容均来自原汇总帖。

你会发现，随着响应式Web设计的不断成熟，各类框架也变得越发健壮和可靠。也许是受到了Bootstrap、Foundation和Gumby的影响，如今很多新的框架都开始向一体化多功能的模式进化，它们提供了更多的功能，同时会包含可复用的组件和模块，例如图标、对话框、页码导航、面包屑、导航栏等等。

当然，不是所有的框架都塞入了大量的功能，有些只是简洁的提供了固定布局的基础。接下来是15个最新的响应式框架。

不年不节不周末的，临时加演一篇资源帖。响应式框架，偏前端的同学可能会有所欲求。

之前念叨过，但凡资源帖，多数是自己眼前用的着的东西，才会趁自己搜罗的机会汇总一下放到这边。话说回来，根本也没做过几篇的样子，印象里有iOS7免费设计资源汇总和iOS设备及界面模板免费资源汇总吧。这次拿来15个响应式前端框架；声明，我自己没用过，做这事起初只是为了我们自己有可能的项目收集有可能的素材和解决方案而已。如果您需要，可以挨个访问过去了解详情，也可以直接从Github获取，我最多算个牵线儿的，不做任何support方面的工作，还请理解了。

不多说了，直接上货吧。

大家中秋节过的都好吗？有吃到五仁月饼没？有靠在窗前吹着凉爽的晚风仰望明月没？各位当中有赛亚人没？...

其实我过的并不好，准确的说不是我，而是家里的喵又开始出健康问题了。两年前差不多这个时候，两只喵轮流生病，有些东西也零零散散的记录在了那一两个月的文章里，有时自己回头看看仍会觉得揪心；而眼下似乎又到了那样的日子。明天去看医生；真的好希望是自己代替它们生病，至少我可以知道自己哪里难受，知道去医院做检查，知道吃药和治疗，而喵身上发生这些事情则需要人付出非常多的时间精力来确保执行。

中秋的第二篇“灵感激发”类内容。上次看了18个极简风格的家庭办公室，今天回到屏幕前，看一些不错的响应式设计案例。其实我不太喜欢拿响应式设计的东西出来说事儿，Beforweb这里刚刚起步的时候做过几篇，仅此而已了。不多说了，进入正文，希望有需要的朋友能找到些参考价值。

我正在采用卧佛的姿态倒在沙发上打着这些字，脚和傻喵的脚互相抵着，电视里放着过把瘾，方言和杜梅离婚了。话说这俩字在这个周末是热词了吧。说真的，人家的事我们似乎压根管不着，只是周五那个雷雨交加的晚上，多少人都堵在路上和地铁上，一切都显得那么怪异与不真实；不知为什么，那晚虽然黑压压的，我印象里的各种东西却像是被闪光灯照着一样空洞的明亮着。

这周拿来一篇InfoQ做的Josh Clark访谈，译文稍长，相对务虚，左顾右盼，畅想未来；其间Josh谈到的话题包括移动应用界面设计、响应式设计、交互模式与隐私、传感技术、和智能手表等话题，有兴趣的朋友可以稍作阅读。今天不多说废话了，开始正经的。

这里进入译文。移动设备的崛起带来了用户界面设计的变革。除了我们所熟悉小尺寸触屏设备之外，物联网的概念也逐渐浮出水面，随之而来的是更多新设备类型；相应的，我们在设计内容输出格式以及诸如语音和手势这样的自然化输入模式的时候，需要考虑的问题以及要面对的挑战就逐渐多了起来。

Josh Clark——业界知名的用户界面设计顾问，《触动人心 - 设计优秀的iPhone应用》的作者——时常在全球各地的设计开发大会中发表关于界面设计的现状及未来的见解。今天，我们(InfoQ)有幸与他面对面就这些问题进行交流探讨。

又是一周过去，宅的日子越过越精炼，连续多日每天读一本书，到了晚上就觉得大脑好像变成了一个卡通形象，就是那种仰面朝天躺在地上四肢无力动弹不得只剩下喘气的小人儿的样子。剩下未读的书不多了，又该补货了诶。来看本周的译文呗，有点长，主要是图多。

这里进入译文。我(英文原文作者)时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中，有人提到这样一个有意思的问题：

我们可以首先专注于提升产品的愉悦性，然后再考虑可用性等其他方面的问题吗？

这个问题立刻让我联想到“形式追随功能”这句话，所以我还是倾向于功能与可用性优先的方式。

不过必须承认，这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作，首先聚焦于体验的愉悦性，然后再将整个方案“拉”回到一个约束框架中，使它最终成为一个切实可用的产品？

无论我们的实践方式从哪个角度出发，有一点是无疑的：任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品，并且希望为其注入更多能够让用户在情感上为之吸引的元素，那么你应该做些什么呢？应该从何处入手？下面是我的十个建议，希望能够帮你有效的提升网站或应用产品的体验愉悦性。

几分钟前，还在睡梦里眼巴巴看着一种类似奶黄包的食物在微波炉里转悠，接下来便是刺耳的门禁电话声；瞬间从梦中惊醒，花了不到半秒思考并叨咕出“猫沙”二字，然后下床猛穿衣服，同时听到扛着20公斤猫沙的送货师傅那沉重的脚步愈来愈近...他来了！

然后我就坐在这整理了一下昨天做的差不多的译文准备发到博客上了，脑子里依然想着梦中那好像奶黄包一样的食物。前面几天，发布了一期导读，在里面搜罗了些设计作品集的参考资源，当时也提到要做相关文章来着，今天这篇便是了。说到这我又想起来，那篇导读的受欢迎程度真的有些超乎我想象，微博上转发的也比其他都多些...看来到了这时节，大家都有心更上一层楼了叭。闲话聊到这，进入正文呗。

如今，创意行业掀起的风浪比以往任何时期都更加猛烈，其中的竞争也越发残酷，作为设计师，想要脱颖而出已经是很困难的事情了。如果你还没有自己的设计作品集，那么情况对你来说也许会更加严峻。

从最基础的层面上讲，设计作品集就是你自己的广告，它可以告诉世界：“嘿，我在这！看看我能做的东西叭！” 除此之外，作品集也是你的名片和画廊，是你展示能力、技巧、项目经验的地方；同时，你还可以通过它来表达接下来打算做什么事情。对我(英文原文作者)个人来说，作品集还决定着人们是否会给我一份工作offer，或是找我合作项目。

作品集有着不同的展现形式，包括在线和印刷册等等，它们所具有的一些精髓是共通的；本文中，我们将把注意力集中在在线作品集这个方面。

感觉已经连续下了九百多天的雨了，身上也仿佛即将生出苔藓与蘑菇。Down your sister's rain...淡定着，说正事儿。本篇译文其实在春节之前就有所着手，不过期间连续看到了几篇更想做的，于是相当没有节操的见异思迁了。今次恰逢母难日，抓紧时间补回来。走起。

随着技术的进步，Web设计的理念与技法也在不断发展。设备种类越来越多，带给我们的挑战也越来越大。怎样以最合理的方式使设计方案能够最大程度地适应各种设备的性能与规格属性，这是我们在工作当中必须考虑的问题。

面对这样的挑战，我们一方面会觉得自己曾经熟悉的工作领域突然充满了未知感，而另一方面，一直普遍存在的那些旧问题也依然摆在面前。我们是否需要花费全部精力用来解决各种新旧细节问题，还是可以从宏观上寻求一些具有指导性质的“真谛”？

Web设计的历史过于短暂，要想弄明白一些大道理，我们不妨将视野放远些，让思路跨越设计的范畴。其实，我们真的可以从那些看上去与设计没有多大关联的领域中找到一些抽象化的、更具普遍意义的思路和模式，以帮助我们解决自己的问题。心理学和音乐等都是我们可以加以研究和探索的对象。接下来，就让我们一起了解一下巴赫与当前Web设计所面临的挑战之间的关系。巴赫诶。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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