基于黄金分割率的Twitter新版页面布局探究

黄金分割率

用上新版的Twitter已经有一段时间了,个人在使用的过程之中感觉较之旧版在体验方面有了较好的提升。只是感觉比之前的版本好用,但是具体体现在什么地方,体现在哪些细节之上,还一下子真的说不出来。

刚刚在看Mashable上面最新发布的一篇文章,名字叫做New Twitter Design Based on the Golden Ratio [IMAGE],中文简译应该是“Twitter新版设计遵循黄金分割率(图)”。新版Twitter的设计是基于黄金分割率的!真的是太有才了!

由于之前看过基于黄金分割率进行网页布局设计的相关文章,并曾构想并尝试过按照这样的定律去进行网页栅格化布局,因而对这一文章非常感兴趣。索性溯本求源,查找源头信息,一探新版Twitter设计背后的奥秘。

从毕达哥拉斯到达伦·阿罗诺夫斯基,黄金比例,这样一个被发现存在于艺术和建筑学每个角落的非理性数学常数,已经很久远了。而最近,它竟然成为了新版Twitter的设计依据。

顺着Mashable文章,找到了Twitter的Flickr页面,发现这样的图片和说法来自于Twitter的创意总监道格·伯曼(Doug Bowman),然后通过Doug Bowman的Twitter帐号@stop发现了他的Flickr,并在里面找到了有关于新版Twitter设计的四张图片。

有关新版Twitter设计的四张图片及相应描述如下:

新版Twitter的比例

新版Twitter的比例

对于所有对新版Twitter页面设计比例好奇的人,应该知道的是,我们不是随随便便选择这样一个比例的。当然,这一比例仅适用于最窄的UI版本。如果您的浏览器窗口比较宽,我们将摆脱这样的比例,扩大您的个人信息面板,以便于提供更大的效用。但宽度最窄的地方,我们已经在开始使用这一明智的比例。

新版Twitter的比例 (内部)

新版Twitter的比例 (内部)

这张图用来回应那些说上一张比例图包含内边距(padding)的人。。。

新版Twitter栅格图 (窄)

新版Twitter栅格图 (窄)

给那些对我们所使用的栅格系统感兴趣的人,这是一种奇数的栅格(15列,窄版的宽度是880px)。我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。尽管有几个元素没有对齐或者偏离网格,但已经非常接近原版设计了。

新版Twitter栅格图 (宽)

新版Twitter栅格图 (宽)

给那些对我们所使用的栅格系统感兴趣的人,这是一种奇数的栅格(17列,宽版的宽度是1000px)。 我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。虽然信息面板的最右侧有了一丁点的偏移,但同样非常接近原版设计。

关于黄金分割率,如果您之前不是很了解,请移步Wikipedia的黄金分割词条

PS.写完这篇文章的时候,发现标题为“Twitter新版页面比例遵从黄金分割定律(图)”的文章已经在各大网站疯狂转载了,而内容不用看也知道是千篇一律的,来源应该是Mashable的文章,而翻译,真的不敢苟同,明眼人一看就知道翻译此文的人根本不懂或者不用Twitter。国人的素质和浮躁啊,唉。。。

2010-09-28 分类:交互体验 内容分享 用户体验 作者: 8 条评论

PPT分享:成为UX团队的一员

Being a UX Team of One

最近一直在看书,内容涉及项目管理、设计、前端、交互、可用性等各个方面,也算是利用闲暇时间给自己充充电吧。

这几天在看的是一本叫做《A Project Guide to UX Design》的书(中文译本《UX设计之道——以用户体验为中心的Web设计》),其实这本书到手已经有一段时间了,刚到手的时候一直也有在看,只是由于前面讲的都是项目管理方面的内容,而且老外的讲解过于繁文缛节,再加上翻译的水平有限,看了没多少就给随手放到一边了。

前几天看完关于可用性测试方面的新书《Rocket Surgery Made Easy》(中文译本《妙手回春:网站可用性测试及优化指南》)之后,又把这本书翻了出来读,读到后来发现后面的章节其实写的蛮好的,内容涉及用户研究、人物角色、搜索引擎优化、网站地图、任务流程、线框图、原型制作、可用性测试等各个UX交互设计环节。相信细细研读下来,对于个人的UX修养来说还是有所帮助的。

今早在读线框图章节的时候,文中推荐了Leah Buley的《How to Be a UX Team of One》。到公司后特意找来这个PPT看,同时顺路到Leah Buley的Blog转了一圈,发现书中给出的Slide是2008年的,而Leah Buley在参加2009年SXSW嘉年华的时候有一个更新版的Slide,名字叫《Being a UX Team of One》。

虽说这样的一个Slide是英文的,但是结合里面的插画,细细揣摩还是能看明白的,推荐给致力成为UXer的每一个人。

如果您还不知道UX为何物,请移步用户体验到底是个什么玩意儿

2010-09-10 分类:杂七杂八 作者: 12 条评论

Sevinoma:对于这个世界无话可说,干脆不说

两周前的一次聚会上,有幸认识了海潮,更有幸听他现场演唱了自己的几首歌曲,而其中印象最深的是一首名叫《sevinoma》的歌曲。这首歌,借用海潮的话说,是世界上唯一一首没有歌词的歌曲。也是对于这个世界无话可说,干脆不说的力作。

整首歌曲配合动画观看更有意境之美。动画的故事梗概大致如下:(via 豆瓣)

一朵花心里长出了SEVI,一朵花心里长出了NOMA。相遇然后相爱,相爱然后分开。这就是《sevinoma》这首歌里讲的故事。

sevinoma以流畅美好的旋律,以一种自由随性的方式,将人们关于爱情和幸福的思考哼唱了出来;以最原始最简单的词汇,讲述我含泪的心。

抽身离开那个潮湿巨大的森林,离开熟睡的NOMA,一扇透明的命运之门在身后重重关上,可惜SEVI并没有及时听见那巨大的响声。多象年轻时候的我们自己。

幸福就是这样的东西,在它没有被得到以前,在我们失去它以后,才会以分外可贵的面目呈现出来。

sevinoma,在变回小小种子,开始下一个轮回之前,我呼唤着你的名字。她象甘泉一样在我心里流淌,尽管此刻,我再也没有力气朝向你的方向。

因为这首歌没有歌词 发音大概是这样:(via SongTaste)

sevi sevi no ma , o sai ne wong sei ya

sevi sevi no ma , o sai ne go fei ya

ao v the sei so my fa the ,ao v the sei sai my gong na

ao v the sei sai my feng na ,ai ya ai ya ai ya.

sevi sevi no ma , o sai ne ko fei na

sevi sevi no ma , i sai de ko my na

ao sai de ko nai ne fan na . ao sai de vi dou mo fai na

ao sai ne vi tai de go na , ai ya ai ya ai ya

ai said gu vi sa nou fei ya , ao said wei jiu ga na

ao said vi jiu ga nou fei san mou fa sevi ya

sevi sevi no ma , o sai ne my gai ya

ao sai de vi jiu de fai na , ao sai de yu jiu de fai na

mao vi dou u de ai de gou na , ai ya ai ya ai ya

ao said vi sei fa nou fei ya , ao said vi sei da ya

ao vi de gou fei fa nou sei shine mou san fang fei ya

ao sai de vi jiu ga nou fei ya, ao sai de vi jiu ga na

ao sai de vi jiu ga nou fei san mou fei sa fei ya

a yi ya ~

ao sai de vi c fa nou fei ya , ao sai de vi sei da ya

ao rei de gou fei fa nou sei shine mou san fang fei ya

sevi sevi no ma , o sai ne wo(g) sei ya

sevi sevi no ma , o sai de ko mei na