社区中心
Advertisement
Breakpoints-blogheader

變更前與變更後


大家好,在去年提出的文章頁界面雛形版本中,我們測試了許多項目,並且獲得非常多的反饋,這對我們要如何進一步走有很大的指引作用。雛形版本讓我們了解一些可行和不可行的事項。(例如把右側欄位整個拿掉會對畫面造成破壞)。我們仍會持續努力對於文章界面作出逐步改進,但我們的計劃是要分別集中面對各個問題,這個進程會和一月時提到的全球導航欄的變化類似,但可能會比預計要花更多的時間完成文章界面的更改。


要面對的第一個問題,就是在Wikia的彈性界面上增加換行的斷點(breakpoints)以及相關的字體更改。字體更改只有在最大的斷點時才會出現,我們稱之為 大銀幕桌上電腦(Desktop XL),目前它的定義是顯示寬度大於1575px。以下的圖片冊顯示了在大銀幕桌上電腦界面大小中的改變。你可以藉此來了解我們將對斷點和字體作出怎樣的更改。

斷點[]

這是一個從彈性(fluid)的界面,轉變為有較明確的斷點,使得顯示的樣子較可預測,也讓一個模板在頁面上破裂或變形的可能性減小。斷點的目的是讓網站仍然有一定的彈性適用於不同的銀幕,其大小由瀏覽器的viewport來定義。請注意捲軸列不會被計入銀幕大小。

以下是斷點以及其相對應的銀幕寬度:

斷點設定 內容區域寬度 最小銀幕寬度 最大銀幕寬度 在桌機、平板電腦流量中的比例
平板電腦直立模式(Portrait) 768 px 768 px 1063 px 16,17 %
平板電腦橫置模式(landscape) 1024 px 1024 px 1083 px 49,60 %
桌上電腦 1084 px 1084 px 1594 px
大銀幕桌上電腦 1238 px 1595 px 34,23 %

字體[]

我們希望集中目標於可讀性,以及適合於一般現在用戶最佳體驗的每行長度。在Wikia現在,只有行的長度會變化,行高和字體大小不會變。而在現在的字體更改下,在大銀幕桌上電腦的斷點設定之下,字體大小和行高都會更改,你可以看以下的表格了解細節。在一般平板電腦/桌機的斷點設定之下,文字大小就是目前Wikia預設的大小。只有在大銀幕桌上電腦會作更改。

以下是各種斷點設定下的字體變化:

一般桌上電腦/平板電腦 大銀幕桌上電腦
(字體大小/行高)
H1 - 標題 28 / 28 34 / 34
H2 - 標題 20 / 22 28 / 30
H3 - 標題 17 / 22 22 / 24
H4 - 標題、引文 15 /22 20 / 28
內文 14 /22 16 / 26


我們目前的想法是只將這些變化用在標題, 內文與一般引文上。有一個問題是,如果一些模板沒有填寫正確的class,可能會因此啟用字體變化而破壞了模板。我們已經列出了一些可能的問題、發生原因,以及建議的解決方式,大多數的問題應該可以藉由給予模板適當的class名稱或調整wiki的css而解決。這個列表會放置在這個幫助頁面,且會隨着我們以及像你一樣的用戶使用新界面的經驗,不斷更新。

如何看到新的斷點設定以及字體[]

如果你想要看看新的變更在你的沙盒或wiki上會變成怎麼樣,你可以使用查詢的代碼,看一下以下提供的不同的預覽用的代碼。


預覽斷點設定和字體變更:
在網址之後加上 ?oasisbreakpoints=1&oasistypography=1
例如: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1


2015年5月21日新更新[]

為了解決一些bug,將斷點設定作了修改,設定的數據將桌機變為1084px,大銀幕桌機變為1595px,博客和幫助頁面也作了修改。


最近更新: 斷點設定的最近更改在美國西岸5月19日,東亞時間20日開始在所有站點生效。如果你發現了什麼問題,可以先查詢幫助頁面看是否有解決的方法。如果沒有,請使用評論或Special:Contact來告訴我們。

Advertisement