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