IT技术博客大学习 共学习 共进步

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

SoberMa 2010-09-30 03:11:43 浏览 3,723 次
黄金分割率

    用上新版的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。国人的素质和浮躁啊,唉。。。

建议继续学习

  1. Twitter/微博客的学习摘要 (阅读 12,084)
  2. 别得瑟了,你很可悲! (阅读 7,803)
  3. Twitter架构图(cache篇) (阅读 5,982)
  4. PHP for Twitter OAuth 教学演示 (阅读 4,644)
  5. Twitter新员工的入职过程是怎样的? (阅读 4,483)
  6. Twitter“鲸鱼”故障技术剖析 (阅读 4,002)
  7. 继续说说新版Twitter设计方面的事儿 (阅读 3,464)
  8. Twitter系统运维经验 (阅读 3,304)
  9. SNS背后的科学 (2) ―― 割裂的Web和割裂的Twitter (阅读 3,301)
  10. 新版twitter背后的技术 (阅读 3,202)