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

线框原型

十佳应用的故事(1) - 想法、产品定义与交互设计 »

眼看着进入8月下旬,天气相比前面几周有所凉爽;所谓凉爽,也只是高温从40来度降到36、7度的样子。

刚刚过去的几天怕是要成为人生回忆当中的经典之一了。依次看掉Metallica和Korn的现场,回想起来,有好多像梦一样不那么真实的情景在里面:夏季的夜晚、暴躁的吉他音墙、灯光、嘶喊、摇摆、泪水、满眼的黑T恤和金属礼、散场后打不到车而坐在路灯下抽烟到半夜...然而,如果要我判断,是现在这样安静的坐在屋里吹着空调做博客更像真实的存在,还是那些回忆里的东西更像,我真的难以回答。

想吃曼妥思了。说正经的。本周及接下来一周的话题,原文来自Jeremy Olson,北卡罗来纳州大学生一枚,Languages的作者。关于产品是如何从想法概念开始最终走向市场,他所谈到的一些经验和实践方法,值得借鉴。

这里进入译文。之所以写这篇文章,是因为我相信,相比于失败,我们能从成功当中学到更多。爱迪生在发明电灯泡的过程中经历了数千次的失败,如果我们仍然要基于各种试验和错误来重新发明灯泡,那简直是愚蠢的。怎样从成功的产品中汲取经验?如今我们有了完整的实践模型。

移动应用产业当中有非常多的闪光点。虽然我很想说我的成功源于自己的才能,但事实并非如此。经过对那些在App Store当中获得成功的独立开发者的反复学习,我掌握了一些用来获取成功的基本原则和实践方法;我也希望这篇文章可以帮助各位读者学到同样的东西。

UX基础 - OmniGraffle新手指南 »

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

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

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

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

让用户体验设计的前期交付物更加可视化 »

前几天在我的微博里转了一段话:“我们每个人看起来都履历光鲜,在大公司时都能力挺强,工作顺风顺水的...笼罩在大公司光环之下,谁都会觉得自己牛逼。所以,请褪掉任何光环和过去的认知,如果你没有尝试过一次从0而起的创业,你的牛逼脆弱而苍白。”

一直以来,都觉得自己尚未具备真正的创业所需的能力、见解、经验、资源。我想这一认知还算客观务实。不过从来也没有停下在工作之外做些事情,包括beforweb这个博客,还有一些自娱自乐的小项目。这些行为背后的真正动机,我自己也没有完全了解,但有一点很清楚——相比于平日的工作,这些事可以让自己对产品以及与之相关的各种方式方法进行更全面的接触、学习、执行和控制,这是我所要的。

突然意识到再这样念叨下去就要扯远了,还是说正经的叭。本周译文,关于提升设计交付物信息传达能力的话题;之前有些文章也有涉及到这方面。每每看到这样的文章,就会觉得实际工作中那些看似正常正确的事物当中总还是有提升质量和档次的空间;文中的一些做法,觉得叭,可以试试。进入正文我们。

在实际的用户体验设计工作当中,作为设计师,我们的一些产出在信息呈现方式及沟通效果等方面做的其实不算理想,尤其是那些涉及到用户角色定义、信息架构分析、功能流程规划的文档。怎样将这些交付物打造的直观易懂,使它们具有更强的沟通能力,这同样是我们必须思考的问题。

移动应用设计案例 - 打造初创型产品的用户体验 »

又是天气不错的周末,不冷不热,一年里最舒服的一些时日了叭。感觉自从十一长假结束之后有些东西就变掉了,自己熟悉的很多事情、很多感觉,都像是在头脑里向后退去了一层,要努力去抓才能让它们回来的样子诶。也许只是阳光泛滥了太久的缘故。

好叭。今次的译文是我最喜欢的一类小菜,篇幅简短,实战性强。原文作者,来自Frog的一名交互设计师,讲述了她与朋友在共同设计开发拼车服务Ridejoy的iPhone客户端的过程中所遇到的一些挑战以及相关的解决方案。前戏到这里,进入正文。

Ridejoy拼车服务在Web端上线运营了几个月之后,大家对当前的用户基础有了比较清晰的认知。而对于Ridejoy的iPhone应用来说,我们希望它不仅仅是网站的移植版本,它所能带来的应该是更符合移动上下文环境的全新用户体验。

基于这样的产品思路,我们识别出了三个关键性的挑战:

  • 怎样鼓励驾车者及搭乘者发布更多的信息?
  • 怎样快速有效的帮助驾车者及搭乘者进行匹配?
  • 怎样促进那些已被匹配的驾车者及搭乘者更有效的完成约定?

优秀的用户体验设计师应该做好的五件事 »

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

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

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

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

十个方法,让你的线框原型更具沟通能力 »

虽说是每周一篇译文,不过这事儿确实不能算是非常容易。从阅读,到筛选,到试译,到最终确定本周的文章并完成译文,主要还是依靠每天抽些时间来做。还好,毕竟是自主行为,爱过,也仍在爱着,这就是UX从业者兼翻译票友的节操有木有。默,我们进入今次的正文。

我(英文原文作者)参与过很多产品的线框原型设计,包括我自己独立完成的,还有与其他设计师、产品经理甚至是业务分析人员一起合作的。这很棒,因为在这个过程中我见识到了很多优秀的项目。不过慢慢的我也发现了一些问题,一些大家时常会在原型制作过程当中忽略掉的要素;如果能注意并解决掉这些问题,我们的交互设计产出物就可以发挥更大的实战价值。

下图所展示的是一个很典型的例子,我们通常会将这种风格的线框稿交付给相关同事来跟进视觉设计或原型测试的工作

Web应用的成功之路 - 产品早期的原型设计与用户测试 »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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