個案研究 1:31THREE

為了知道那些高手葫蘆裡賣的是什麼膏藥,從這篇文章起會依字母順序,開始分析一些自己蒐集的、外觀非常簡潔漂亮的部落格或網站。這些網站都是從 Smashing Magazine 這個關於網站設計的超棒部落格蒐集而來。

這次要分析的是 31THREE 這個部落格。進入後,映入眼簾的是這個畫面:

01-0-first

網站整體外觀

01-1-color利用 Firefox 的 Web Developer 外掛,得知其色域如左。除了灰階色系外,其色調就是以 #3a5e8c 的藍綠色、#8dc4c7 的淺藍綠色,以及其他棕色系與米白色系為主。背景色為 #f8f4e8 、色域中第二淺的米白色。

藍綠色給我的感覺比較偏冷,這種偏冷的感覺似乎藉由米白色以及棕色予以稍微中和。

同樣利用 Web Developer 看其 CSS,得知其使用的字體為「Helvetica Neue」、HelveticaArial,以及 Sans-serif。這一系列都是屬於無襯線黑體字型(筆劃尾端沒有像 Times New Roman 那種修飾,這種襯線字體就是明體),使得內容可讀性較高。這也是一般較常使用的字體。

中間分隔的那條漸層灰線是是一條 950 x 12 的細長條圖,再利用 background-repeat: repeat-y 將其作 Y 軸延伸。

左側標頭的標題與右側作者介紹的標題對齊,且左側第一篇文章標題也與右側「Side Links」對齊。

總體而言,外觀給人的印象是專業、理性。

標頭

標頭的外觀如下:

02-0-header

整個標頭有相當多留白,營造一種高級的氣氛。「Weblog」採用某種看起來較為古老的襯線體,為一張圖。左側有兩欄,分別是文章分類及熱門文章,讓瀏覽者可迅速得知這網誌的走向,欄位左側有淺淺的灰線;右側則是作者簡介,外加一張照片,讓瀏覽者馬上認識作者是誰。

再來,我們看標頭部位的背景。

01-2-html_bg

除了其將色彩「往下刷」的漸層感外,特別值得一提的是其大小為 2099 x 215。為何需要這麼長的背景?我只想到這會不會是為了作者或某些使用者的雙螢幕服務。此外,這種往下刷的漸層感也在底下另一地方重複出現,幾乎成了這網誌最大的特色,不過也將其變得稍微複雜。

接著,我們看標頭部位的導覽條,分左側及右側兩部份介紹。

02-2-headerbar

沒有標識圖(logo),只有名稱,以及一行斜體綠色襯線體字的介紹,同樣有助於營造理性的氣氛。

02-3-navigation

全都是圖,而不是文字。前景區塊文字是白色,背景區塊文字是灰色。用以區隔的直線很特別,從最上面延伸至字體基線。

左側

01-3-column_fade首先提的就是左側文章內容所在的背景。它只放在右下方,用來結束中間的漸層灰線,漸漸與背景色融合,且還使用了 min-height CSS 屬性來強制規定左側最小高度,約等同於右側欄位高度。

再來分析文章區塊。

03-1-content

文章標題是 Georgia、「Times New Roman」,以及 Serif 等襯線字體,與內文字體不同。連結有底線,底線顏色與字體顏色不同。文章的 metadata 不同於一般的設計,而擺在文章底部,用兩條斜線「//」區隔。

最特別的地方,在於每篇文章都有一個專屬圖片,大小為 128 x 128,有 1px 邊框。03-2-comment_bg

而在文章回應部份,作者的回應用右邊這張圖做區隔,這種「往下刷色」的樣式與標頭背景相同。

右側

分為三部份,有「Side Links」、「Authentic Jobs」,以及「Recommended」。最值得一提的是「Authentic Jobs」這部份,尤其是其分頁條。

04-2-job_tab

它利用了三張圖片,分別是背景、前景區塊、背景區塊,一樣用漸層方式來設計。而且利用 JQuery tabs,切換分頁時不需等待,且還會 fade-in / fade-out 顯示。

04-3-recommend

此外,就是「Recommended」的三個區塊,其文字皆不會超過文繞圖的範圍。

 

結尾

05-footer

結尾設計非常簡單。

 

其他 CSS 屬性

網站所用的大小單位不是 W3C 推廣的「em」,而是一般人較常使用的「px」。em 讀為字母的「M」,是一種相對於母區塊的大小;若母區塊的字體大小為 16px,則若子區塊字體大小為 1em,代表其大小就是 16px。

在 body CSS selector 中有三個屬性值得一提,分別是 font-variantfont-size-adjust、以及 font-stretch

  • font-variant:若指定為 small-caps,則所有的小寫字皆顯示為大寫,但會比大寫字略小一些。預設是 normal。Demo 按我

  • font-size-adjust:小寫字母 ‘x’ 的高度與字體大小高度的比率稱為該字型的「外觀值」(aspect value)。若字體外觀值為 0.58,代表當字型大小為 100px,則小寫 ‘x’ 的大小為 58px。若外觀值較高,則當字體大小較小,會比外觀值低的字型較清楚可讀。

    若為 font-size-adjust 指定一個值,則其 font-size 就等於 font-size-adjust/aspect value。預設是 none。Demo 按我

  • font-stretch:將字體變寬或變窄。有 wider、narrower、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded 幾種值可供選擇。預設是 normal。

 

自以為有缺點

  1. RSS 訂閱圖片太不明顯,應該擺在右側上方較恰當。
  2. 文章的 metadata 應再設計得漂亮一些。

暫無回應 ↓

現在還沒有回應耶…看到下面的表格,你知道該怎麼做吧?

留下你的足跡