BeFor Web

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

连续5天的休假业已开始，于是怎样都觉得今天是元旦的样子。天气倒是不坏，可屋里还是会冷的让人站不是坐不是，每到冬天便会一堆牢骚着怀念起北方的暖气，那是怎样的一种幸福呵。

然后呢，之前在微博也念叨过，读到几篇Xcode科普文章，第一反应就是搬来噜。我一直是这样认为的轰：希望能够看掉几篇科普文章就掌握iOS开发基础，这确实不是件很现实的事，但只要你想向目标迈进，俺们就一步一步的向前走。看过文章，觉得有所了解，具体工作还是留给开发，那也合情合理；有了些心得，觉得有兴趣有欲望进一步学习，以求真正掌握开发技能摆脱该死的束缚，则再好不过。我要在这里做的，就是把更多信息分享给更多设计师，让大家看到更多可能性。

今天的这篇，不涉及任何代码编程，纯粹通过大量图片与少许说明来展示实践方式；作者还提供了该案例的完整项目文件，我们可以边参考边学习。我个人建议，可以先读一遍我们之前的“设计师应该了解的iOS应用开发基础知识”一文，对相关的一点点理论知识有所认知，然后再跟着今天这篇文章进行实践。那我就不多念叨了。

这里进入译文。过去几个月里，我每天都早上7点起床，然后持续工作到晚上7点，为的就是既能把我自己的应用Ripple搞出来，同时又能保住我在Carshare.hk的全职工作。这个月里，我整个人都扑在iOS的体验设计上了，我的挑战有两点：确保上面说的两个应用在年内发布，并且在这些项目中同时扮演设计师与前端开发的角色。

我发现一事儿，就是最近这些年，每到入职一个新公司的时候，听得东西往往会比多数时候听得更重更金属些，此时以Slipknot和大敌为代表，所爱的东西也会更黑一些，激烈而凶猛的黑，并非Grunge所带来的那类绝望而压抑的黑。

话说这是一个难得的不用把工作带回来做的周末，加之昨天又过了个酒精+尼古丁+Rock N' Roll的周五放纵之夜，今天整个人有点倦怠；天气也阴晦着，毫无违和感。最近也许会做几篇与OmniGraffle相关的话题，希望能给用的着的朋友们带来些参考；今天是一篇很基础的入门小文。走起吧。

这里进入译文。OmniGraffle是一款相当全面的工具，用途很广泛，不过今天我们主要侧重在了解怎样使用它来制作线框图。我(英文原文作者)个人在这方面尝试过很多软件，坦诚的说，没有一款是真正完美的，包括OmniGraffle，但它在综合能力及效率方面的表现确实是最让我满意的。

不过首先，我还是想提及OmniGraffle的两点不足。一是它并不擅长于生成完美的可交互原型，当然，你还是能够制作可点击的界面原型的，譬如在某些情况下显示或隐藏某些图层，或是切换界面等等；另外一点就是这款软件只能运行在Mac当中。

印象里，似乎最近地震的消息蛮多的，世界各地；前面一周的天气也是大起大落的赶脚，很热接下去又很冷。

我很高兴自己接下来可以投入一个绝对以移动产品为主的工作当中了，终于。这事儿可是真心盼了好久，却始终因为各种原因无法实现。那么，在这里感谢所有有意无意帮助我走进这个阶段的人吧，无论你们是否可以看到。对我来说，每年的春天总会或多或少或大或小的发生些能够让自己记住很久的事情，今年在工作上的进化算是不错的一笔。

不多念叨了，进入本周译文。我个人觉得很受益的一篇文章，作者总结了自己过去几年中在移动产品可用性测试的工作里获取的一些实践经验，或是说小贴士小方法，值得借鉴。走起。

这里进入译文。如果你不大熟悉移动应用的可用性测试，没关系，这事儿没你想象的那么困难；不过移动应用与传统网站产品在可用性测试方面确实有一些关键的区别需要我们注意。

过去的几年当中，我(英文原文作者)为不少移动产品做过测试，从戒烟应用到移动版的车辆保险网站，其中既包括在实验室使用复杂设备进行的测试，也包括在各种实境化的条件下进行的非正式测试。在本文中，我将为各位分享一些经验心得，希望能帮诸位在实际工作中节约时间，提升效率。

似乎真的没发生什么，也就是玛雅人过了个年。本周的更新如约和大家见面，视觉方面的一篇悠悠闲闲的小文章，关于扁平化与拟物化风格的讨论。

我个人对这方面的话题是蛮关注的，偶尔在微博上弱弱的念叨两句，也会有不少朋友来发表各自的看法，确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的，其中有些比较公允务实，有些则比较偏颇；所谓偏颇，也就是片面表达某种风格一定比某种风格更好，以及好在哪里。说真的，都有一定的道理，都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢，你到底觉得哪种好呢？我要说的是叭，在我看来这个事情里的的确确不应该存在哪个强于哪个的争议，因为它根本就不是个非黑即白非美即丑泾渭分明的问题；脱离了实际产品的上下文环境，脱离了产品功能与目标用户群类型之间的关联，所谓好与不好的命题压根就不成立。

说的具体些，远的不讲，单说Beforweb这边的视觉风格，除了每篇文章的图标以外，可以说是彻彻底底的扁平化了(当然，细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框，这个不算数...)，但如果有人说我是扁平风格的卫道者的话，我会很不开心，因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面，最典型的包括语音备忘录、iBooks、iPad里的日历等等，它们的界面让我觉得亲切自然，让我可以在冰冷的电子设备当中找到现实生活的真实感，就这么简单。

一大早又梦到了南开中学。一如既往的回到那里见了老朋友，然后一起去后街淘打口磁带和杂志。梦境中的情节没有让当时的自己感到哪怕一点点的时空穿越，只觉得一切都很真实而正常，反倒是醒来之后感到眼前这一切有些突兀，空白了几秒才想起自己正躺在哪里。

静的几乎连小猫睡觉时喘息的声音都能听的到。把这篇译文放上来，然后去放放空。回头看看一直以来做的内容，似乎能够发现自己所走的路径，也能够回忆起在某些时间段内发生了什么，导致自己关注的方向产生了怎样的微调，blah blah...没有欲望多说什么，觉得什么东西关闭掉了的样子。进入正文吧，小小的一篇东西。

谁都会画线框图。当我(英文原文作者)的朋友们谈到自己的产品idea时，我会鼓励他们拿起纸和笔，通过草图来交流想法。他们觉得这种做法很棒，可以帮他们把头脑中的想法落实到实际当中。

真正的用户体验设计师并不是由画线框图的能力所造就的，更重要的是，他们懂得怎样处理回馈信息，怎样验证想法，他们懂得做调研和迭代。他们知道草图和线框原型只是整个设计流程当中的一小部分，它们是调研工作的结论产出，是用来做沟通的信息载体；它们有可能被放到演示文档当中供产品、设计、技术开发等相关人员进行交流沟通，也有可能以高保真或纸面原型的形式被用作可用性测试。

五年时间转瞬即逝，在自己小窝的最后一个周末；眼看着家当和心情都被打包的差不多了，整个人却终于感冒发烧腹泻垮了下来，这是闹哪样呢。所幸本周前面几天可以抽出些时间做掉这篇译文，今天发掉先。接下来的两个月，大概要集中业余零散精力放在一本iOS书的翻译上了；希望还能有些时间分给这边。杂七杂八就到这里，我们直接进入正文——草图原型实战技巧，没有务虚的大道理，每个内容要点都很实用。走着。

在如今的用户体验及产品圈子里，越来越多的人开始了解到草图及相关的原型工作对于整个设计流程的重要意义；不过在实际工作中，真正会拿起纸和笔的人貌似不是很多。作为一名用户体验设计师，我(英文原文作者)每天都会画草图，我还霸着办公室的一整面墙，在上面铺满草图，标注着各种上下文情景脚本。

确实，使用电脑中的原型设计软件代替纸和笔，在很多时候是一种省时省力的做法，不过从可视化与实体化的角度来看，这并不是最好的解决方案。当你正在构思网站页面或是移动应用的布局，琢磨着功能流程及上下文情景脚本的时候，拿起笔画画草图才是更加直接有效的方式——它可以帮助你集中精力解决眼前的问题，尽情的勾勒各种想法，而不必为工具软件的使用方法或功能限制等方面的因素分散注意力。

很多文章都会告诉你草图这东西有多给力，但是基本不会从实战的角度进行深入而细致的讲解；本文则不然，我会实打实的从具体执行的角度，向大家介绍一些常用技巧及其背后的道理，这些都是我和其他很多用户体验设计师在每天的工作中所要用到的。

最近一阵有些难以抑制的脑痒手痒，阅读和码字的欲望也渐增；却受时间精力等绝对客观因素所限，不得不维系一周一篇译文的频率，感觉多少有那么点沮丧和无奈。

关于本文，其实在标题上犹豫了蛮久。这篇内容是新书A Practical Guide to Web App Success的第15章；主题显然应该在Web应用方面，但是本章单独拎出来看的话，却又适用于各种常见类型的Web产品。whatever，不矛盾。作者Dan Zambonini在本文中将向我们阐述Web应用在原型阶段的设计与测试工作的重要性，并从实际执行的角度出发，介绍一些经验方法和常用工具。走着。

产品在原型阶段的设计与测试工作，是决定一款移动应用能否成功的重要因素。提到原型设计和用户测试，人们往往容易产生厌倦与回避的感觉。这也不奇怪，在很多实际项目中，这方面的工作似乎就是“随意性强”，“耗时”，“高成本”一类的代名词。

不过在我看来，它们其实是整个设计流程里最重要的环节。无论你或你的团队在用户界面视觉设计等方面有多高的造诣，我都建议各位对原型环节的相关工作提高重视。基于高保真原型的用户测试，可以让很多关于需求、功能、界面设计等方面的潜在问题尽早暴露出来；这类问题往往直接关乎着产品的成败。

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

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

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

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

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

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

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

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

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

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

家里小猫生病，从周二开始一直折腾到现在，仍在治疗与观察中。几年来经历过几次这样的状况，虽然每次都会恢复健康平安，但一旦再次置身这样的过程里，怎样也无法停止焦虑与担心。除了尽心尽力以外，能做的只有不断祈祷，期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章，也因为这样的状况而拖沓了多日；一方面没时间，一方面没有任何心力的感觉。不多说了，我们来看今次的译文。

如今的设计圈子里，线框原型(线框图)这个词正在越来越多的被提起。过去几年中，在软件和Web设计等相关行业里，线框原型得到了迅速的普及，同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲，使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢？最近，我(原文作者)与一些设计专业的学生进行了交流，他们问到不少关于线框原型的问题。通过这些问题，我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中，这个概念包括很多涉及视觉设计方面的因素。更糟的是，他们甚至不愿意去做线框原型方面的事情，他们只知道这是流程中的一个需要执行环节，却不明白它的重要性。这事弄的我相当郁闷，最初，我觉得这搞不好只是个例而已，但通过对行业内的现状进行观察，我逐渐发现，线框原型在很多项目流程中的执行情况真是够惨不忍睹的；原因来自很多方面，包括客户、设计新手、产品决策者等等。