BeFor Web

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

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

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

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

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

若干年下来发现一规律：无论周末还是节假，只要是可以从头到尾在家休息的日子，起床未必会比平日晚许久，做事的强度与密度也不一定次于平日的工作。这是一种纯粹的主动。平日早上那种对懒觉和闲适的迫切的渴望，一旦可以实现，其实反而不在乎了；这些渴望，大概只是对无法按照主观意愿自由安排时间的一种无奈和反感吧。

说是这样说，但貌似蛮久没有周末两天都可以完整在家休息和做做事了，培训、贷款、装修一类公事私事绵延不绝的；也说不好眼下是疲劳呢，还是一种兴奋与憧憬。总之整体感觉还不算坏。

废话不多说了。本次的译文回归到传统Web方面，涉及可用性、用户体验及转化率的话题。走着。

对电子商务网站来说，可用性和用户体验的改善，对转化率的提高是有显著效果的。所谓的改善，不仅包括更好的视觉效果与内容架构，更重要的是，怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息，与潜在客户进行有效的沟通。

通过本文，你将了解到，为产品创建着陆页面时需要注意哪些涉及用户体验和可用性方面的因素，包括怎样使用户的注意力集中在最重要的信息上，以及怎样通过视频、用户打分等方式，有效提升转化率。

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

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

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

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

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

导读文摘节目时间。老规矩，选出6篇值得一看的新闻资讯或观点论述，无论网站产品还是移动应用都有涉及，就当作一顿精简而营养全面的下午茶点吧。

• Adobe发布iOS与Android版PDF阅读器Adobe Reader
• GuruDigger - 帮助靠谱的互联网工程师找到志同道合的技术合作伙伴
• Chime.in - 和用户共享收益,为挑战传统社交媒体而生
• 单一功能的应用程序是否给我们更好的用户体验？
• 轻博客浅析
• 简约主义设计：少就是多

周日宅在家，睡到自然醒，晒晒太阳吃吃喝喝做做内容再玩点老游戏，一天圆满的很。

今次译文的主要话题，是怎样合理的设计和使用UI元素的辅助说明文字。姿态上侧重于拿传统的网站页面说事儿，但从理论上讲同样适用于移动应用方面。

本文的原作者Connie Malamed，著有Visual Language For Designers一书，貌似国内还没有做过引进。她的博客中有不少关于视觉设计方面的优秀文章值得阅读学习。接下来我们进入正文。

用户在网站中的行为具有高度的目标驱动性。人们总是有目标要去完成，无论是购物结算、寻找问题的解决方法还是单纯的浏览内容信息。因此，用户体验设计及UI设计的一个重要使命，就是通过合理的设计元素，帮助和引导用户完成特定的行为。譬如，如果你在设计一个用来将商品放进购物车的按钮，那么增加一定的阴影效果会使按钮看上去更加突出，有利于让用户明白这是一个可点击的按钮元素。

除了这些视觉元素的常用处理方法之外，我们时常需要为UI元素增加一些辅助说明文字，帮助用户了解它们的作用，引导用户在正确的地方执行正确的操作。

继两篇关于响应式Web设计的译文之后，再来搞一篇“网站移动化”方面的。琢磨着自己大概是无论穿着什么鞋都打算趟趟这摊浑水的样子了。

今次篇幅不长，在我看来，本文更像是当老板或产品决策者无论穿着什么鞋都打算趟趟这摊浑水时，作为项目执行者，尤其是用户体验设计团队，所能给到的建议和方法参考。正像前面那篇“步步为营的用户体验设计 - 团队、影响力、协作与策略” 一文中提到的：“其实，‘用户体验设计’并非用来获取答案，它应该为项目执行方式的选择提供建议，或是为更好的设计开发流程创建架构。”OK走着吧。

眼下，移动互联网正扮演着越来越重要的角色，无论开发者还是普通用户，几乎所有人都在谈论它。传统互联网用户所习惯的那些访问内容、使用服务的交互方式正在被智能手机、平板电脑等设备迅猛的改变。作为线上内容及服务的提供者，我们必须尽快进入这个新兴市场，学习新的游戏规则。

愿望是好的，“移动化”的方式却会时常让人找不着北。究竟应该怎么做？开发一款iPhone或Android应用吗？还是为网站专门搞一套或N套适用于不同移动设备的设计方案？最重要的莫过于首先对自己产品的内容及功能进行正确定位，对移动化需求的程度进行合理的评估；在此基础上，尝试最适合自己的移动化方式。目前，有一些比较常见的思路可以供我们参考选择：

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

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

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

十一长假终于还是以不可阻挡之势猛然的过去了，这次的假期综合症预计要持续到过年的样子。下班回到家切换角色至文字工作者，安静安心的做些内容。

说到假期综合症的问题，倒是突然想念叨念叨。根据自己多年来的经验，如果觉得整个人的精神处于疲劳涣散游离低靡...的状态，却有工作一类必须去完成的话，可以琢磨琢磨那句话——“气聚则神凝”。试着拿起一本书或杂志，排除杂念，放松心情，逐行逐句的阅读下去，将思路投入其中；过不多久就会发现心境中有一种正面的平和感，精神好像随着思维的集中而凝聚起来有了力气。你甚至会希望手头有些事情可以做，好让自己保持这种“气聚神凝”的节奏。

说正经的了开始。之前搞了两篇响应式Web设计方面的译文，包括响应式Web设计的概念、组成要素及基本的实现思路，以及怎样通过CSS3 Media Query进行设计开发；今天换个口味，来点儿务虚的。本文作者从一名用户体验设计团队leader的角度出发，简要介绍了UX设计相关工作在公司内部是怎样步步为营的从无到有展开的。没有不切实际的大道理，也没有什么技术细节的讲解，通篇更像是作者对工作中典型阶段的回顾与总结，包括团队组建、理念及影响力的培养、部门协作、项目介入方式等方面。废话不多说，走着。

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