BeFor Web
为网而生 - 原创译文博客 - 关注移动、VR及互联网产品的用户体验设计

原创翻译

前端开发者的跨平台移动应用开发策略及工具 »

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

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

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

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

案例学习 - 响应式网站的产品需求和设计流程详解 »

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

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

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

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

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

线框原型(线框图)的本质及实践应用概述 »

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

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

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

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

怎样通过更好的用户体验促进网站转化率的提升 »

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

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

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

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

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

从网站到移动客户端应用 - 随"机"应变的用户体验设计 »

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

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

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

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

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

怎样通过UI辅助说明文字有效的提升用户体验 »

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

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

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

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

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

走出移动互联网的迷宫 - 网站移动化的方法策略 »

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

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

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

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

步步为营的用户体验设计 - 团队、影响力、协作与策略 »

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

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

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

Mozilla:计划使Firefox在后台自动更新 »

Mozilla又要从Google Chrome的游戏规则里取来一条为我所用了。

近日,Mozilla基金会的Mitchell Baker在她的博客里宣称,今后的Firefox在发现有新版本可以更新时,会在后台自动升级,而无需任何来自用户的确认输入。这样可以保证用户所使用的版本及时跟上Mozilla的开发步伐。

而这正是Mozilla在过去一直避免采用的方式。Baker在她的博客里说,这个改变其实源于用户的反馈:

过去,我们会十分小心的在版本变更之前让用户知情,这样做是为了让用户对他们的硬件环境有充分的了解和掌控。但是最近,用户们非常大声的告诉我们,那些升级提示真的太烦人了。这种情况下,后台自动升级就显得很有必要了。

Google Chrome对这种方式的实施很成功,他们可以保证客户端浏览器的版本得到及时更新,并且不需要为任何一点bug修正而打扰用户。但是Chrome的做法中有一点窍门:他们的压缩算法可以使每次更新的文件尺寸保持很小,他们的Courgette项目保证了后台升级过程不会占用过多的用户带宽。而目前来看,Firefox还没有类似的方式。希望接下来Mozilla至少可以在压缩工具、小尺寸更新等方面下下功夫。

这项举措会从Firefox 10发布之后实施,预计在2012年的年初。

通过CSS3 Media Query实现响应式Web设计 »

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

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

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

Pages