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

UI

iOS7体验报告 - 关于视觉风格、界面结构、字体、动效和可用性 »

好热的一周,似乎只凭视觉就能感到温度了;特别是中午,出去觅食的时候,周身都是被火焰包围的赶脚,但我却很开心,不知为什么。我从来都很喜欢夏天,穿衣脱衣也不像冬天那么麻烦,可以省去很多时间。

最近似乎在微博上念叨过多次,我开始爱上iOS7了,爱上它的各种细节,当然不包括那些过分艳丽、缺乏坚决的内置应用图标。今天这篇文章的性质,印象里在Beforweb这边还真没有先例;从前所有文章都是关于怎样做某些事情,而这篇纯粹是作者的体验报告。个人感觉还算中肯,我能在里面找到一些共鸣;不知其他朋友会有怎样的体会。正文走起吧。

这里进入译文。新版本的iOS进行了彻底的重设计。相比于过去栩栩如生的拟物化界面风格,它走向了另一个极端——光洁的令人震惊。一向以精益求精著称的苹果,这次似乎无法履行自己的诺言了。乍看上去,应用图标有些令人难过,用户界面缺乏结构,所有东西都给人一种未经打磨的感觉。

实际上,iOS7并不那么差劲,远远不是。

费兹定律与移动应用界面设计 »

说天热吧,回头看看房间里面窗帘还在随风起伏,灯也关着,于是想到了X档案。最近看的有点多,以至于很多时候会想到。话说去年这个时候是第二遍看Lost,也是蛮进入状态的;正好当时6月份去三亚,坐飞机还忐忑来忐忑去的,你想,海南那里,也是个岛。

然则又是忙碌的一周过去了,评审、迭代、封板,如释重负,下周开始继续新的轮回。周五晚上和之前在点评的同事们小聚,看着大家在那里,一起叽叽喳喳的八这八那,便时不时的有种穿越的赶脚,好像转过天来还可以和他们一起上班一起吐槽似的。真的好开心,一点也不想结束。

又然则今次想唠叨的闲话还有些的样子。譬如上周日花了一下午录了点新段子嘛,一轨一轨的可纠结了;接下来一整周都会想到10年前这个时候录demo,主琴从来都是一遍下来,完全不用分段去录,如今简直是没出息到家了。决定明天还是尝试着连续录音吧,当作挑战好了;但想想看挑战的目标竟然是自己10年前轻车熟路的东西,也不禁黯然神了个伤了。那么闲话就到这里吧,进入今天的正题好了。

这里开始译文。费兹定律(Fitts' Law)是人机交互理论当中的一条基本原理,在约莫60年前被提出。对于传统桌面端设备来说,这条定律是非常重要和关键的;不过如今,受到移动设备大潮的影响与推动,很多传统交互设计原理在新兴平台当中都有着不一样的呈现,费兹定律的运用方式是否也与过去相同呢?

在本文中,我们将一起了解一下费兹定律的基本原理和组成要素,然后来看看怎样在移动应用的设计当中对其进行恰当的运用。

应用推广站点的最佳设计实践及优秀范例 »

上周没做更新,实在忙了些许,所以道个歉先。其实这周末同样把工作带回家了,不过都压缩在明天吧,希望能尽量多的搞定;今天还是照常把博客更新起来。

眼下正用电视放着上周的Slash末日之爱现场。是的,周二,本小博主去现场看了,也在微博上发了些照片。这是我等了将近20年的Live,真正来到眼前时却有些不大敢相信是真的了,当时唯有靠不停的摇着喊着跳着跟周围的人挤着才能提醒自己真的是身临其境了。不过后果就是接下来的几天脖子都直不起来,多多少少有些没精神。对我来说这辈子必看的现场还真不是很多,活到30岁算是实现了第一个也是最重要的一个。好吧,说正事儿喽,今次是关于App推广站点的话题。

这里进入译文。人们对于应用产品的需求总是没够的,毕竟,这些小东西可以让我们的生活变的更加简单快捷,它们帮助我们记住事情,寻找信息,发现身边的事物,结交各种有意思的人。

应用类产品迅猛而持续的发展趋势无需多言,当人们需要一款软件时,无论是用在iPhone、安卓,还是在MacBook上,他们通常都会面对非常多的选择。应用在让人们的生活变的更轻松的同时,也越来越容易被创建。

要打造一款成功的应用,你需要做的再也不只限于产品自身的设计与开发,营销推广方面的工作同样是非常重要的,其中最典型的做法就是创建产品推广页面或minisite,向人们介绍你的产品。曾几何时,所谓的“介绍”就是告诉人们这个产品是个什么东西,你为什么需要它,等等等等,和其他传统行业的产品介绍网站没有多大区别。不过在我(英文原文作者)看来,这里还是有些很关键的区别和技巧的。本文中,我将和大家分享五点应用推广页的最佳设计实践,以及若干非常不错的设计范例。

提升产品体验愉悦性的十个方法 »

又是一周过去,宅的日子越过越精炼,连续多日每天读一本书,到了晚上就觉得大脑好像变成了一个卡通形象,就是那种仰面朝天躺在地上四肢无力动弹不得只剩下喘气的小人儿的样子。剩下未读的书不多了,又该补货了诶。来看本周的译文呗,有点长,主要是图多。

这里进入译文。我(英文原文作者)时常和其他设计师讨论到产品愉悦性的话题。在最近的一次聊天中,有人提到这样一个有意思的问题:

我们可以首先专注于提升产品的愉悦性,然后再考虑可用性等其他方面的问题吗?

这个问题立刻让我联想到“形式追随功能”这句话,所以我还是倾向于功能与可用性优先的方式。

不过必须承认,这种通过理性分析入手的“传统”设计思路或多或少会让我们失去一些在创意上实现突破的机会。也许我们可以从“有趣”这个角度展开设计工作,首先聚焦于体验的愉悦性,然后再将整个方案“拉”回到一个约束框架中,使它最终成为一个切实可用的产品?

无论我们的实践方式从哪个角度出发,有一点是无疑的:任何一个成功的设计方案都必须以产品功能的可行、可用、可靠为基础。假设你已经有了一款可用的产品,并且希望为其注入更多能够让用户在情感上为之吸引的元素,那么你应该做些什么呢?应该从何处入手?下面是我的十个建议,希望能够帮你有效的提升网站或应用产品的体验愉悦性。

“无限滚动加载”适用于你的产品吗? »

在家一天天宅着,倒仍然能对周六周日有清晰的概念,也真是个奇迹。

今天带来一篇关于无限滚动加载的简短译文。其实这事儿,以前在微博上也吐过一阵的槽,印象最深的就是有次在一个什么网站上想点页脚里的“关于我们”,真心点不着,每每要点的时候上面自动加载的内容就顶下来,没完没了...当时就愤恨的琢磨着你们要这页脚有毛用啊?这次看到这篇文章,觉得里面有不少能引起自己共鸣的内容,所以拿过来做,希望也能给各位朋友带来些有用的东西吧。走着。

这里进入译文。怎样通过更友好的方式来呈现一系列的数据内容,包括文章、链接、图片、搜索结果等等——对于设计师来说,这不是一件很轻松的事。在这方面,页码导航(pagination)是一种经过时间验证的、还算值得信赖的解决方案。

不过最近几年,我们可以发现越来越多的网站开始使用无限滚动(infinite scrolling)的方式来呈现内容了——当用户浏览到页面底部时,传统意义上的“下一页”数据会自动加载,并输出到当前页面中。

对于某些类型的网站或移动应用来说,无限滚动确实是一种不错的模式;但在在某些情况下,它也会造成灾难性的后果。

从错误中汲取经验 - 我们在打造Buffer的过程中所学到的 »

呼啸了一夜的狂风到了白天几乎彻底消逝,刚刚还见到阳光映在窗帘上,现在又满眼乌云的样子了。其实想想看,如此荒诞的天气似乎已然要成为常态了吧。

宅起来的第二周还是第三周?没什么概念的样子。只是确定EVA又看了一遍,About Face 3仍在读着,另外时不时的与旧友或同事碰头吃饭,互通有无。有毛,全是无。说正经的,今天的译文中,Buffer的两位创始人为我们带来了一些基于实践的经验总结;一起来看看能够从他们曾经犯过的错误当中学到些什么东西吧: )

这里进入译文。Buffer是一款帮助你在Twitter、Facebook等平台上更高效的发布内容的应用,到目前我们已经有超过50万的用户了。两年前刚刚开始打造这个产品的时候,我们就已经做好了充分的思想准备去面对各种挑战,包括设计开发过程中会遇到的障碍以及可能犯的错误。

我们始终觉得,在项目当中犯错是在所难免的;只要能够从中学到一些东西,这些错误就能引导我们向正确的方向前进。从某种程度上讲,将我们的产品一点点推向成功的也许正是一路上所犯下的那些错误。

你的产品需要设计规范吗? »

明天就是春节了叭。现在这些话是在2月8日晚间写下的,先给各位拜年喽。陆陆续续的几乎下了两天的雪,现在看看窗外,谈不上银妆素裹,却也黑白分明。雪在夜晚的时候确实显得比白天要白亮一些呢,嗯?

不知春节假期里还有多少朋友会看看文章什么的;我自己来说,除了一两件比较重要的、可能占据每天很多时间的事情以外,剩下就只想看书和玩老游戏了。玩老游戏,这可是假期的特别节目,尤其是春节假期;此传统可以追溯到高中的时候,印象里那时年三十晚上是以玩街机模拟器为主,The Punisher啊恐龙快打啊一类;而如今所谓的老游戏基本就是使命召唤1到4了。

闲话念叨到这,进入正文,关于设计规范、风格指南的话题。就我个人的经历来说,从零开始创建设计规范其实不是易事,包括公司和产品的实际情况、规范的目的、面向的使用者、开工的时间点等等因素都是需要充分考虑的,而且很容易在过程当中跑偏,产出一些并没有实际参考价值的、单纯为了规范而创建的规范。接下来我们一起看看这篇译文,看看作者的一些看法和建议,还有一些不错的范例。走起。

不是所有的网站或移动应用都需要设计规范。你表弟的博客就未必需要,你邻居自己搭建的用来卖猫草的小电商网站也不那么需要,当然这也要看他能卖掉多少,能做到多大规模。

移动应用的空状态界面设计 »

其实我到现在还不清楚哪天正经过年呢,就知道快了,因为公司里的人走掉蛮多了的样子。不,这真的不那么像过年的时节,天气暖和的好像春末夏初,在天台抽烟时甚至会发现成群结队的小飞虫在翩翩起舞。

这都哪跟哪呢。实际上,无论工作还是生活,似乎任何正处于正常进行当中的事情都会让自己产生“过年之后再认真继续”的赶脚,一些需要上手开始做的事也准备“过年假期里再开始搞叭”这样;自己的一些项目、理想中的作品集、一些要读的书、一些想玩的游戏...大体都是这样,其实我眼下把这篇发布出来之后就拿出几个小时把想做的事情猛做一通也不是不可以,但似乎总是想寻找一个大部头的时间;不知是否是拖延症的借口;实际上我不认为自己有这毛病,真的。打住,我们进入今天的正文,关于移动应用的空状态界面设计;虽然文中的示例都是iPhone应用,不过道理应该与平台甚至设备类型无关。(btw,用微信的朋友们可以添加一下Beforweb了呗,点击侧边栏头上第二个图标就会出现二维码)

“空状态”是指移动应用界面在没有内容或数据时呈现出的状态。长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道。也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格。

要想打造完美的整体体验,作为设计师,我们不能放过任何一个用户有可能接触到的界面状态。空状态界面大致包括三种类型:初次使用、用户清空数据、出错。下面,我们就来一同了解一下这三种情境所对应的相关创意要素与注意事项。

“即将上线”页面的设计原则与创意要素 »

周五抽烟时我说,心里的感觉就像是一个时代结束了。一位同事说,只是又到了开始翻开新的一页的时候而已。是的,的确是这样。

现在耳边放着Radiohead在不插电专辑中翻唱的Wish You Were Here,不知这是一种淡定还是麻木,亦或是大脑自作主张的帮助我屏蔽掉了心中的某些感觉,让我只需安静的处于这一切的现场而忘乎所以。

想到另外一位同事所说:“我真的只想安安心心的做做设计,做自己喜欢的这些东西”...到这里我几乎不知该怎样才能继续写下去了...我有幸能和你们一起度过一段值得珍惜和回忆的时光,我永远不会忘记;我们对得起“设计师”这个头衔,而他们不是。

今天开始在微博里对苟延残喘着的每一天做留念,可我甚至不知道自己是在纪念些什么混账东西。一想到这些就无法停下,这简直要了我的命,接下来还是进入本周译文的正文叭=)

“即将上线(coming soon)”页面是互联网当中一个相对较新的概念,过去很长一段时间里,每当有新产品新业务准备就绪时,今天还什么都没有,转天它就突然出现在线上了。

如今,互联网及移动应用领域的营销推广策略发生了一些转变,要想将产品有效的推入市场,我们通常需要做足“预热”工作。这也正是“即将上线”页面的由来。

你可以在网络上找到很多这方面的优秀设计案例;而今天我(英文原文作者)希望能够和大家一起更深入一步的对“即将上线”页面的设计原则及重要创意要素进行了解和分析。

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

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

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

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

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

Pages