IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

SoberMa 2010-09-30 03:11:43 累计浏览 3,879 次
本机暂存
黄金分割率

    用上新版的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. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 120个优秀的水平导航设计 (累计阅读 75,627)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 流程管理与用户研究 (累计阅读 17,053)
  4. 我的 Sublime Text 2 笔记 (累计阅读 16,729)
  5. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  6. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
  7. 看看各个网站的404错误处理 (累计阅读 10,208)
  8. sns视觉设计分享 (累计阅读 9,523)
  9. 网站导航设计的6大分类 (累计阅读 9,298)
  10. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,199)