基于黃金分割率的Twitter新版頁面布局探究

0 評(píng)論 7562 瀏覽 4 收藏 7 分鐘

在Mashable上面有一篇,名字叫做New Twitter Design Based on the Golden Ratio [IMAGE],中文簡(jiǎn)譯應(yīng)該是“Twitter新版設(shè)計(jì)遵循黃金分割率(圖)”。從畢達(dá)哥拉斯到達(dá)倫·阿羅諾夫斯基,黃金比例,這樣一個(gè)被發(fā)現(xiàn)存在于藝術(shù)和建筑學(xué)每個(gè)角落的非理性數(shù)學(xué)常數(shù),已經(jīng)很久遠(yuǎn)了。而最近,它竟然成為了新版Twitter的設(shè)計(jì)依據(jù)。

順著Mashable文章,找到了Twitter的Flickr頁面,發(fā)現(xiàn)這樣的圖片和說法來自于Twitter的創(chuàng)意總監(jiān)道格·伯曼(Doug Bowman),然后通過Doug Bowman的Twitter帳號(hào)@stop發(fā)現(xiàn)了他的Flickr,并在里面找到了有關(guān)于新版Twitter設(shè)計(jì)的四張圖片。

有關(guān)新版Twitter設(shè)計(jì)的四張圖片及相應(yīng)描述如下:

新版Twitter的比例

clip_image002

對(duì)于所有對(duì)新版Twitter頁面設(shè)計(jì)比例好奇的人,應(yīng)該知道的是,我們不是隨隨便便選擇這樣一個(gè)比例的。當(dāng)然,這一比例僅適用于最窄的UI版本。如果您的瀏覽器窗口比較寬,我們將擺脫這樣的比例,擴(kuò)大您的個(gè)人信息面板,以便于提供更大的效用。但寬度最窄的地方,我們已經(jīng)在開始使用這一明智的比例。

新版Twitter的比例 (內(nèi)部)

clip_image003

這張圖用來回應(yīng)那些說上一張比例圖包含內(nèi)邊距(padding)的人。。。

新版Twitter柵格圖 (窄)

clip_image004

給那些對(duì)我們所使用的柵格系統(tǒng)感興趣的人,這是一種奇數(shù)的柵格(15列,窄版的寬度是880px)。我們的前端web客戶端團(tuán)隊(duì)在工作中堅(jiān)持規(guī)范并做得盡善盡美。盡管有幾個(gè)元素沒有對(duì)齊或者偏離網(wǎng)格,但已經(jīng)非常接近原版設(shè)計(jì)了。

新版Twitter柵格圖 (寬)

clip_image005

給那些對(duì)我們所使用的柵格系統(tǒng)感興趣的人,這是一種奇數(shù)的柵格(17列,寬版的寬度是1000px)。 我們的前端web客戶端團(tuán)隊(duì)在工作中堅(jiān)持規(guī)范并做得盡善盡美。雖然信息面板的最右側(cè)有了一丁點(diǎn)的偏移,但同樣非常接近原版設(shè)計(jì)。

關(guān)于黃金分割率,如果您之前不是很了解,請(qǐng)移步Wikipedia的黃金分割詞條。via

Twitter網(wǎng)站最近在設(shè)計(jì)方面已經(jīng)發(fā)生了不小的變化。這些變化包括頂部的搜索框和Profile、Messages兩個(gè)功能鏈接。 左側(cè)欄依然用來展示你的tweets和message信息,你可以通過點(diǎn)擊在Timeline、Favorites、Following、Followers、Lists直接進(jìn)行切換。

而右側(cè)欄現(xiàn)在變得更大,更具條理性。在這里,會(huì)展現(xiàn)你的帳戶信息,你的最后一條tweet信息,你Following的人,你的followers,最新動(dòng)態(tài)列表和建議你去follow的用戶列表。

“show more”這一用來顯示更多tweet信息的按鈕已經(jīng)不復(fù)存在了,取而代之的是,在你拉動(dòng)滾動(dòng)條的同時(shí),系統(tǒng)會(huì)自動(dòng)給你加載更多的tweet信息。

在Twitter的Flickr頁面上,Twitter的創(chuàng)意總監(jiān)道格·伯曼(Doug Bowman)用一張圖片和一段簡(jiǎn)短的話語來描述新版設(shè)計(jì)遵循黃金分割率。

對(duì)于所有對(duì)新版Twitter頁面設(shè)計(jì)比例好奇的人,應(yīng)該知道的是,我們不是隨隨便便選擇這樣一個(gè)比例的。當(dāng)然,這一比例僅適用于最窄的UI版本。如果您的瀏覽器窗口比較寬,我們將擺脫這樣的比例,擴(kuò)大您的個(gè)人信息面板,以便于提供更大的效用。但寬度最窄的地方,我們已經(jīng)在開始使用這一明智的比例。

Twitter與DeviantART、Etsy、Flickr、Ustream、Vimeo和YouTube之間新的合作伙伴關(guān)系,使得多媒體流可以直接嵌入進(jìn)去,包括在Twitter的首頁直接播放視頻內(nèi)容。

這些新的變化可能會(huì)導(dǎo)致你自定義的Twitter的背景被淘汰掉,因?yàn)樾碌脑O(shè)計(jì)是半流動(dòng)布局的。不管顯示器的分辨率怎么變化,左側(cè)欄的寬度是保持不變的,而右側(cè)欄的則是大小不一的。

1024 × 768 分辨率

1280 × 720 分辨率

1600 × 900 分辨率

新版Twitter還沒有對(duì)所有的用戶開放,如果你還看不到,不要著急,用不了太久你也會(huì)用上的。

來源:http://www.soberma.com/golden-ratio-in-new-twitter

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!