網頁排版:前菜——破格的好例子

所謂網頁設計上的「格」就是「Standard Content Design Model」,簡稱 SCDM,說穿了就是我們習以為常的兩欄、三欄式的排版法。justfont 要在本文為我們介紹網頁排版「破格」的好例子。
評論
評論

「破格」是什麼意思?

所謂網頁設計上的「格」就是「Standard Content Design Model」,簡稱 SCDM,說穿了就是我們習以為常的兩欄、三欄式的排版法。如今不論中英文的網頁,這種排版法都佔了絕大多數,導致我們有種錯覺,就是網頁上能看到的內容只能有這三種排版法。SCDM 會有今天的地位,其實是因為 SCDM 也是各類瀏覽器的預設內容呈現方式。

SCDM 不死,也沒有逐漸凋零

當 1996 年的冬天,跨時代的偉大發明 CSS 出現後,設計師們就有能力簡單快速的為內容量身訂做排版設計。理論上,這早已宣告了 SCDM 的死亡。但實際上,SCDM 到 2012 的今天還是充斥各種網頁,甚至因為部落格、社群網站的興起而更普遍。可能是為了省時間,所以就乾脆使用同樣一種版型去套所有的內容;要像設計雜誌那樣針對內容而設計排版,實在太花時間了。這也許就是 SCDM 以外的嘗試仍然很少的原因。
但如今的印刷品之所以比網頁更好讀,其實是因為內容先於排版,也就是說是針對內容來設計最好讀的 layout,而不是用同一種 layout 看所有的內容。可以看看 esquire 雜誌的例子。下面是它們的網頁版:

而以下是它們的雜誌版,來自 UX Booth

是不是差很多?他們的網站版就是 SCDM 的最佳範例:左、右、中間各有三個欄位,中間是文章,左邊是網站按鈕,右邊是外部連結與廣告。文章中的字,也就是主要的內容,就這麼被一大堆混雜的資訊擠在中間,讓讀者在閱讀時不容易專心。更不用說,這篇文章是有分頁的, 有研究顯示這麼一來會大幅降低易讀性

找回傳統排版:讓文字呼吸

雜誌的排版則是好多了,至少讓人樂意專心讀下去。在雜誌版面上,傳統的「Typography」規則再度發揮主要的設計功用:清楚分明的欄位擺設把文章與裝飾設計區分開來,對比明顯,不至於混淆視線。文字有了呼吸的空間,看起來才舒服;兩欄文字方塊設計則會讓讀者的眼睛可以自然地從上到下、從左到右掃描。總之,遵照傳統排版規則的雜誌版面就是比較好讀。雖然同樣的內容可以一模一樣的方到網頁上,但你會比較想讀哪個呢?(迷之音:搞不好網頁設計得差,是為了逼消費者去買雜誌而不是看免錢的……)

說了那麼多,該上菜了

但還好,網路一直以來都是創意人的遊樂場。隨著大家越來越重視螢幕上的閱讀,裝置的解析度也越來越高,web font 服務如雨後春筍的冒出,連中文世界都有了 justfont,目前螢幕上的內容將變得越來越好讀。以下介紹一些我們可以看齊的例子:

i love typography

i Love Typography 站如其名,是一個熱愛字型排版的網站。除了有很多字型排版方面的最新資訊,他們在各種 feature 文章都會用不同的版型呈現,而不是用萬年不變的 SCDM;而且預設的字型大小適中,讀得很舒服,背景對比也讓文字更容易辨識,雙欄設計也可以讓眼睛快速掃描。這種熟悉的閱讀質感,就好像在看雜誌一樣啊!

Jason Santa Maria

Jason Santa Maria 最有名的地方就是重新設計文章,讓排版呈現內容,而非用內容屈就排版。這個網站的「其它文章」也是特別經過設計的,用三個欄位,讓讀者可以快速地掃過年分、月份,找到他們真正需要的內容。客製化的版型還會附上截圖,讓我們更快的發現這些神奇的排版。

CRAIG MOD

Craig Mod 的設計很有趣。雖然字體偏小,但欄位間距良好,所以文字呼吸空間足夠。而且副標的擺放有助於分割欄位空間,所以讀者可以快速的掃描內容。對,網路上的使用習慣仍然是掃描,而不是閱讀,所以有副標是很重要的。

THE GREAT DISCONTENT

The great discontent 主要刊出的內容是大人物的訪談,通常是有創意有想法的藝術家或 hacker,例如截圖上的 Seth Godin。每篇專訪都用一個超級無敵大的圖片開頭,占滿整個螢幕空間,就像是剛剛的 esquire 雜誌封面一樣(沒錯,跟以往的網頁排版不一樣)。

而每篇專訪的設計其實都是採取內容放在中間欄位的版面設計;左上角的欄位是用在「about」,也就是約略介紹訪談的對象;而右邊的欄位與 about 下面的欄位會擷取訪談中的精采句子,或是相關的贊助性質廣告。quote 另外擷取出來,印在旁邊,本身就是雜誌設計的經典呈現方法,目的就是讓讀者可以立刻看出內容中特別精彩的所在。這同時也會幫助讀者更專注:也許你本來對文章沒什麼興趣,但翻著翻著看到一句打動內心的話語,就會阻止他們往下翻,回到前面,仔細地重新看起。

最後,每篇文章的網頁兩側各有按鈕,左邊的按鈕可以到前一篇,右邊的按鈕可以到下一篇。這些指標巧妙的指示讀者還有更多文章可以讀,而不必靠會混淆視聽的 sidebar 按鈕;另外,這樣的設計讓使用者不用捲動到下方,就能看到更多文章。

一起讓中文網頁變得更好讀!

接下來的數年,HTML5 跟 CSS3 的發展會讓設計師們更容易針對不同的內容設計網頁排版。雖然還有一些障礙有待克服,但是有很多工具現在都可以使用了,而如同上述,先知們已經開始行動了。搭上這股潮流, justfont 非常希望能在中文網路的環境推廣這些知識,讓網頁更好讀,也期待正在看這篇文章的大家,不論是網頁設計師或工程師,都能夠留意網頁排版的問題,一起合作,讓好讀的內容可以更方便、更普及。
這篇文章只是前菜,在接下來的文章中,我們還會深入探討如何網頁排版的技術細節,尤其是如何把傳統的排版知識引進到新媒體上。想關心這個議題, 歡迎追蹤 justfont blog!


飛宏科技推出業界最高功率密度電競筆電電源-280W GaN 充電器

飛宏科技新推出專為電競筆電設計的 280W GaN 高功率電源充電器,結合電路設計與製造工藝之最,帶給終端使用者前所未有小型化、輕量化、與頂規化的使用體驗。
評論
Photo Credit:飛宏科技
評論

飛宏科技在 2021 年底推出全新 280W GaN(氮化鎵)高功率電競筆電電源,超緊湊尺寸 160*69*25mm(276cc)與 700g 輕量化設計,使其功率密度突破業界多年來設計極限,達到眾所期盼的 16W/in3(1W/CC) ,因而相較一般市面販售相同輸出功率產品,體積縮小約 50%,重量減輕約 30%,大小重量相當於一般 180W 電源。

飛宏科技這款電競電源的設計研發—電路上結合了高效率拓樸結構、零電壓零電流軟切換技術、新型 GaN 半導體元件、與自主開發數位控制機制等技術;工藝上則採用了 3D 零件配置與佈線技巧、功率模組設計、及獨特 GaN 生產製程管控,最終成就了品牌客戶與終端使用者所冀求真正輕、薄、窄、小的高功率充電器,為電源業界與電競市場帶來突破性的研發創新亮點。

Photo Credit:飛宏科技

安全可靠 280W GaN 頂級規格充電器

飛宏科技表示,目前市面上所謂的 GaN 電源都著重強調在所謂的小型化,但往往都忽略電源設計更應重視安全性、可靠度、及滿足終端使用者真實的使用情境。飛宏科技此款新小型化電源已取得各項國際安規認證包括 IEC/EN/UL 60950-1 & 62368-1、CCC(5000m)及電磁相容(EMC) 認證包括 EN55032 Class B EMI & EN55024 EMS 等規範。

此款電源更是針對高階電競筆電應用需求如:支援高階處理器及顯示器的瞬間峰值功率拉載、玩家日以繼夜的重度使用、酷炫輕薄的外型、與輕巧好收納及攜帶方便等,同步提供以下的頂級規格及功能:

● > 95% 滿載轉換效率與 < 0.2W 空載待機損耗

● 560W(200% 額定功率)瞬間峰值功率輸出

● 3 年/26,280 小時,滿載高溫下長壽命保證

● 五種數位化安全保護機制

● 2 公尺輸出線上不需加任何 EMI 磁芯輔助即能通過 EMI 認證

● < 150uA 低漏電電流

電競筆電首選  極緻設計之展現

近年來電競筆電產業蓬勃發展,品牌廠商無不卯足全力導入最新軟硬體技術與材料來提升性能,使產品設計上能不斷推陳出新,以滿足電競玩家挑剔與追求極緻體驗的渴望,唯在配角「電源充電器」上無太多創新,而導致玩家也只能默默接受彩盒中所附帶大而笨重的電源。

飛宏科技新推出這款專為電競筆電設計的 280W GaN 高功率電源充電器,結合電路設計與製造工藝之最,突破過往的設計瓶頸與極限,可充分帶給終端使用者前所未有小型化、輕量化、與頂規化的使用體驗。

本文章內容由「飛宏科技」提供,經關鍵評論網媒體集團廣編企劃編審。