BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

用户体验

十条设计贴士,帮你塑造更好的iOS应用整体体验 »

2013年的第一篇,也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪,印象里在1号之后就没见过太阳的样子了;倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King,还真有那么点迷离。

假期中间回去金山海边爸妈家,温度更低,风雪更大,这种季节没什么人还会到海边溜达了,沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了,彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志,比如Music Heaven啊通俗歌曲啊这些;拍了照片放到微博上,立刻有朋友评论说我完全暴露了年龄,哈。

这次选取了Computer Arts官网当中的一篇小文章。CA,国内叫做“数码艺术”,记得没错的话我是从2006年3月开始购买的,那阵子算是刚刚进入Web这个行当叭,看什么都新鲜,发现这本杂志之后简直就忘乎所以了,无论是内容还是杂志本身的排版设计都让我无法自拔...不过到了09年之后就不怎么买了,感觉它变了...怎么变的我也说不上,总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章,所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士,帮你塑造更好的iOS应用整体体验。

btw,其实这次的图标我不是很喜欢,冷冰冰的赶脚,不过其他几个备选的还没这个顺眼呢。

50个小时的可用性测试带给我的启示 »

今天下了好大的雪。上海这地方要积雪不是很容易,印象里只有2008年初的那次;更多时候即使漫天飞扬着雪花,最终还是好像下了场雨一样的到处是水。

所以每到冬天的这种时日,就会想到小时候在北方的样子。高三那年入冬之后,喜欢在每个周六的晚上花一个小时左右的时间在外面骑车或是溜达,而且每逢这种时候只听枪花的Use Your Illustion 1,最后在听到Dead Horse或是Coma的时候回到家;若是遇到雪天,则必定是Metallica的黑专辑。走在积雪上面,路上没什么人和车,夜晚很黑,但雪被路灯映照的很白很亮,那样的情景在当时觉得好像做梦一样,如今回想起来却好像可以伸手抓住一样,有种温暖的感觉。

说着说着还有点入神了;此时此刻是现实当中上海的晚间,外面依旧飘着雪,落在地上蛮尴尬的化去了。打住叭,来看这周的译文。原文作者总结了过去一年当中在一些项目的可用性测试里得到的经验收获,虽然有些东西看上去像是老生常谈,但经过实践检验之后所提炼出的要点也许正是我们平时自认为精通但很容易忽略掉的;至少我自己是这样的赶脚。走着叭。

2012年里,我(英文原文作者)在TH_NK里大约花费了50个小时用于可用性测试,其余的时间则主要用来进行实际的设计工作,或是与客户、开发者、分析人员等进行沟通。在这些可用性测试当中,经过对被测者行为的观察以及与他们面对面的交流,我对一些一直以来虽有所了解、但在实际工作中却时常会忽视掉的设计原则有了更加贴近实践的认知,另外也发现了一些从前没有想到过的问题。时值岁末,我将这些经过实践验证的设计要点作以小结并分享给各位,希望能够为大伙来年的工作带来一定参考和借鉴的价值。

关于扁平化界面风格的设计美学讨论 »

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

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

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

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

表单设计与转化率的提升 »

话说这一周好像就没几天的好天气,目前正在下雨,大冬天也没个暖气什么的...16号了诶,还有一周,希望下周这个时候我们依然可以在博客当中见面。快要到总结过去展望未来的时候了,最近在工作中频繁而剧烈的刷三观,整个人一坐那儿就感觉懵懵懂懂的,一会笑一会愁;我赶脚这日子是到了不变不行的地步了。

说到这到突然想起来,之前在微博上也有求助过,今天再来一发叭:我和一名优秀的UI设计同学做了个小App,东西不大,有点儿意思...卡在开发阶段,希望寻找一名上海本地的iOS开发者共同推进项目;东西不复杂,有项目经验的开发者应该可以搞定;目前确实难以提供实质性的回报,只求彼此有缘对路,一步一个坑的迈向未来。有兴趣的同学可以到我的微博私信一下,或是通过coda7210这个gmail邮箱联系;成不成的大家聊聊交个朋友也好=)  那么开始今天的译文叭,关于表单设计与转化率的提升。

无论是用于注册、支付还是联络,我们总是需要通过表单来获取用户的信息。不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮。这里面原因有很多,例如表单篇幅太长、不大友好、不那么值得信任,或是用户还没真正准备好进行交易等等。

这种情况每发生一次,我们就失掉了一个潜在用户。怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战。站在用户的角度,我们可以将问题分为四个方面。

案例学习 - 我们在设计iPhone应用时犯过的错误 »

首先给大伙儿道个歉,上周这边发生了些问题,网站挂了一阵子。一顿折腾,目前算是初步恢复了,不过评论方面的模块还没有打开,需要再捣鼓捣鼓,希望谅解。再次感谢在微博上给我加油和鼓励的朋友们,还有默默关注和支持Beforweb的各位。

另外,上周网站挂掉之前,有位朋友留下一条评论,内容大致是同样喜欢SmashingMagazine的东西,喜欢做做译文一类;由于恢复数据的时候使用了前面几天的备份,所以这条评论蒸发了。希望这位朋友可以看到这些,特别向您道歉了。

那么开始本周译文叭。又是一篇移动应用设计方面的实战案例,我个人很喜欢,真人真项目真事儿,更具实践价值。走着。

今年,我们(英文原文作者及团队)发布了FreshBooks的第一款iPhone应用。从前我们的产品一直是通过Web端应用的方式提供服务的。这次,我们把iPhone应用的设计开发过程看作一张空白的画布,尽力在其中实现一些新的功能概念和设计想法。在这个过程中,我们着实学到不少东西。

一个文本框搞定信用卡相关信息的输入 »

大家周四下午好。打破每周日上一篇译文的规矩,临时来一发。今天刚刚看到的东西,很简短的图文,介绍了一个蛮赞的交互模式,于是把拿来把译文做掉,特别推荐给交互设计师们。走你!

移动应用的设计师们一直在努力降低用户的输入量。屏幕太小了,手指无法精准触摸,输入过程中产生错误简直是家常便饭。输入量是无法被无限制的降低的,很多时候我们更需要考虑的是怎样使输入变得更加容易。

输入蒙板是一种限制内容格式、避免输入错误的方式。举个例子,我们可以使电话号码输入框只接受数字内容,而不对其它任何类型的字符做出响应。所接纳的数字也可以被限定在某个范围或模式当中。不过,输入蒙板的功能不仅限于防错,它同样可以被用在更加“积极”的地方,例如将多项输入内容合并为一个逻辑序列,使用户不必在多个输入框中来回切换。

最近我(英文原文作者)在Square的iPhone应用(Square Wallet)当中见到的输入方式就蛮有意思的,用户在一个输入框当中就可以完成信用卡类型、卡号、有效期、CVV号(卡片背后的3位数字)和邮政编码的填写。

真人之间的交流 - 通过手绘元素提升产品的个性与亲和力 »

这周天气状况很丰满,前面连下三天的雨,周六难得晴了一天,今天又阴晦肃杀了下来。

其实每篇开头这些碎碎念都是在译文做到尾声时根据当时的状况而写下的。这周的译文偏向视觉方面,具体说就是关于手绘手写风格的视觉元素在产品当中的运用方式的。刚刚做到最后“切莫滥用”的部分,就有朋友在微博上针对我零星发出的预告表达了自己的观点,挺好,那我也就顺便再唠叨两句。

对于类似这种“看多了索然无味,中文字的手绘效果识别度又很低,现在看到这样的新手帮助一律立即关掉”的评论,还有之前所收到的一些朋友包括一些“老师”的反馈,我要说的是叭,我挑来做翻译的英文原文,在我自己看来,多数是针对一些比较完美而理想的标准进行的方法论述或经验总结,然则每个团队每个产品所在的实际情况必然是不同的,作者将这些经验见解分享给我们,就是为了让大家在一个相对“正确”相对“理想”的方向上,根据各种实际因素进行调整而落实到实践中。理论陈述、经验分享、方法归纳,这些东西按照理想了来做是没问题的叭?能否以合适的方式加以吸收并以合适的方式运用在你自己的工作中,那是你们自己的问题好吗,亲?只要有点什么不错的设计思路,一群无脑产品就会立刻拿来一股脑的哪哪都给用上,这不是设计思路的问题而是人的问题好吗,亲?

就这样叭,不多聊了,还是那句话,我就是一玩家,我做我喜欢的东西,如果这些文章偏巧能对您的工作学习有帮助,那再好不过,如果不是这样,我也不会觉得有丝毫遗憾的。正文叭。

移动应用的十项设计原则及小提示 »

有好天气和好梦的周末,简直就是对自己能活下来一周的奖励和鼓舞。我看猫,猫看鸟,鸟在晒太阳,简直像画中的情境,美好总是这么不真实。

本周小译文,偏向于设计意识形态的培养。在我个人看来,阅读资料分为两类,一是具体操作指导性质的,另外就是这种建立思维框架、培养思维模式性质的。这两类文章,我基本上是交替看,交替做译文到这边的样子叭。不多说了,进入正文;今次的图标调皮了。

移动设备与传统桌面设备虽然都被成为“计算设备”,但它们之间的差异是显而易见的:移动设备的屏幕要小很多,无线网络链接方面会有不稳定,电池续航能力较弱,等等。这份“弱点”清单可以列的很长,但如果你因此认为移动设备就是降级版的计算机,那同样是错误的看法。

实际上,从其他一些角度来观察,移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备,它们会一直陪伴在你身边,让你随时随地都可以接入互联网获取所需的信息;它们身上还有传统设备所不具备的很酷的功能,包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验,总结出了移动应用界面设计的十条原则及小提示,在这里与大家分享,希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。

移动应用的成功准则 - 从产品概念到市场推广 »

几天的风风雨雨似乎在这个周日的上午逐渐褪去了,现在整个书房几乎要被阳光铺满了。如果阳光能发出声音,想必满屋子都会是轻盈精巧的小旋律了。

又是一篇我自己非常受用的文章,长是长了点,拿来把译文做掉,分享给大家。特别是后面关于市场推广的部分,我很喜欢;即使在环境如此恶劣的这片土地上,仍然希望至少能够通过自己的一点努力为大家的生存环境带来一丝正能量。进入正文叭。

多数应用产品会走向失败。残酷的现实甚至让很多不抱希望的设计师和开发者们开始认为,只有运气足够好,才能在App Store当中获得成功。

这种想法就像用来缓解失败痛苦的麻醉剂,其实蛮危险的。痛苦不是坏事,痛苦才有救,才能让人看到问题所在。如果我(英文原文作者)的应用失败了,我会首先在产品身上找原因,而不是毫无意义的埋怨那些我们控制能力以外的因素。大家所处的环境是相同的,为什么不想想看来自tap tap tapTapbots的家伙们为什么就能一再获得成功呢?

本文所归纳出的"移动应用成功准则",内容涉及产品概念、设计、开发、市场推广这四个方面。必须承认,在现实当中,我们其实很难完美无暇的将这些准则落实到位,但有一点是肯定的:沿着正确的道路向正确的目标努力前行,你能获得成功的几率将增大很多;我们可以依靠的绝不只有运气。另外,虽然本文当中的相关内容及案例都是以iOS为例的,但其中的道理同样适用于其他平台。

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

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

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

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

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

Pages