Gamepedia帮助Wiki
Advertisement

FandomMobile是我們向Gamepedia推出的新的移動端網頁介面體驗,此功能將在實驗期(從2020年12月15日開始)之後從2021年1月14日開始啟用。

這是我們在Fandom與Gamepedia wiki之間實現統一體驗邁出的第一步(即之前所說的統一社區平台的「第二階段」),利用了兩個站點為管理員、編輯者和讀者所提供的成功元素。對平台的整體體驗來說,你的意見會影響我們的開發流程,所以如果有什麼意見的話請務必提出來讓我們知道。

需要注意的是,FandomMobile使用了另一套與舊移動端外觀不一樣的檔案集。若遇到任何自訂問題,請聯繫wiki主管。

若你的wiki仍未接收到FandomMobile介面體驗,但你又想測試,你可以在移動端打開你的個人資料頁,然後點擊頁面下部的開關來開始測試。可以使用相同的開關選擇退出尚未加入新介面體驗的wiki。

背景[]

移動端是新設計過程中最直接的切入點,主要原因有兩個:

  • Gamepedia的介面體驗本身就基於MediaWiki的移動版外觀,這為我們提供了打造移動端體驗的最堅固的技術基礎。
  • 此改動的最終影響會影響的很大一部分使用者,因為每個月我們的網路流量中平均下來有56~64%的請求來自移動設備。

雖然這些設計同樣為移動端編者的編輯體驗有所增強(其實Fandom wiki上用UCP移動編輯的使用者還在增多),但是其實主要的好處還是在可讀性,無障礙,和所有移動端的網頁效能這些方面。桌面版設計還需要更長一段時間來完成,之後你會有機會為即將到來桌面版設計提供早期意見回饋。

FandomMobile利用了Gamepedia的移動端基礎,基於MediaWiki本身擁有的移動端外觀和MobileFrontend擴展。透過採用這個方案,我們會獲得很多好處,比如……

  • 與桌面介面體驗共享大量代碼
  • 接收來自維基媒體基金會的更新
  • 與Fandom自有的移動端外觀相比更好的效能
  • 支持所有MediaWiki命名空間

在此基礎上,我們同時能夠帶來Fandom設計的移動端增強功能,例如……

  • 移動化資訊框
  • 新的對移動設備顯示更友好的圖庫
  • 對移動設備顯示更友好的表格

在構建FandomMobile時,我們回顧了多年來收到的Fandom和Gamepedia使用者關於移動介面體驗的意見回饋,然後與整個公司的有關人士對設計進行反覆討論,最終產生了你現在正要測試的東西。在這些意見回饋和對話中經常出現的主題是從桌面端切換到移動端時,某些元素轉換的體驗很差,尤其是圖片,資訊框圖片的剪裁,圖庫布局,圖像說明等。這些元素原本呈現的方式使得讀者的體驗極差,但同時並不能被編輯者自行修正,因此必須由Fandom來幫忙解決。

讓我們來看看一些設計模型吧。需要注意的是以下內容不是最終實現,只是一些在設計軟件中使用了不匹配的占位符內容,在12月測試版上線之前建立出來的圖像。


移動版的亮色模式和暗色模式[]

FM Light and Dark.png

我們早就知道你們想要一個亮色模式和暗色模式的選項,對吧。我們同意。這其實也是一個可讀性相關的東西,而且我們現在終於要實現這個功能了。在Gamepedia上,於桌面版使用HydraDark外觀的wiki將在其新的移動介面體驗中看到Gamepedia的暗色模式。

具體的方案還處於實現之中,因此我們真的希望你們在這個問題上提供你的意見回饋:你是希望由wiki決定的暗色模式/亮色模式還是由使用者參數設定來決定呢?請務必讓我們了解你的想法!

全域導覽列[]

FM Global Nav.png

關於全域導覽列,我們希望搜尋欄不僅可以提供搜尋功能,還可以幫助探索與這個wiki和平台相關的其他選項。我們考慮的具體的案例包括搜尋wiki內容,探索wiki內容,和存取全域連結。目前展示了兩個選項,一個是上方你可以看到的在搜尋欄上方顯示全域連結,在其下方顯示探索選項,另一個是在搜尋下方與探索選項上方顯示一個全域連結面板。我們選擇的選項是兩者中的佼佼者,並且最尊重使用者的意圖,即搜尋wiki。你可能還會注意到有一個本wiki/所有wiki選項。我們在搜尋功能上的測試結果表明提供這個選項更符合使用者體驗,但是我們依然在收集數據與意見回饋來最終確認這個功能的具體實現應該是什麼樣的。目前來說,此選項預設設定為本wiki。

本地導覽列[]

FM Local Nav.png

關於本地導覽列,我們希望使用者能夠以一種不被干擾的方式存取管理員在主導航中加入的內容,從而使他們能夠儘可能地得到他們所需要的內容。此處的變更是一個在全域導覽列下方顯示的新的部分,其中提供了社區名稱和打開本地導覽列的入口點。在使用者向下滾動頁面的時候,本地導覽列和全域導覽列會融合成一個整體,在繼續向下滾動時便可以不受打擾地存取wiki的主要頁面和本地導覽列,甚至搜尋(會打開全域導覽列)。

目錄[]

FM Table of Contents.png

正如你所知,文章的目錄(Table of Contents,ToC)是介面的重要組成部分,用於傳達內容概要,顯示內容的組織方式和導航內容。在移動端,目錄的導航作用就更重要了,但是作為內容概要的作用就有些阻礙使用者瀏覽,尤其是當目錄比較長,使用者不斷地往下翻來查看實際內容的時候。為了解決這個問題,我們探索了以下三個方案:

  1. 目錄作為文章頁面的一部分,放在資訊框和簡介的下面
  2. 浮動的目錄欄,隨著使用者滾動而移動
  3. 浮動的目錄按鈕,隨著使用者滾動而移動,並且在點下的時候會調用目錄欄

Growth團隊和設計團隊在這些選項上傾注了很多心思,最終決定選擇第三個選項,因為它增加了目錄作為導航的實用性,同時也使使用者在閱讀時更易於存取。就如何在圖示和位置方面實現這一點,我們從wiki主管和內容團隊成員獲得了很多意見回饋,因此,我們也希望聽到你對此的意見回饋!

此外,我們正在探索將這個功能的名稱從「目錄(Table of Contents)」變更為「頁面內容(Page Contents)」的想法,以使其與維基百科和其他站點更加一致。

圖庫[]

FM Gallery.png

關於圖庫,我們聽到了解決關於Fandom的圖庫在移動版上的兩個主要問題的呼聲:缺失提供必要上下文的圖像描述和鑲嵌布局導致的圖像優先級混亂。和目錄的改進一樣,我們又嘗試了三個設計選項:

  1. 豎直可滾動的圖片列表,寬度固定而高度可變,圖片下方顯示圖像描述
  2. 豎直可滾動的兩欄圖片的鑲嵌式布局,寬度固定而高度可變,每個圖片下方顯示圖像描述
  3. 豎直可滾動的兩欄圖片的鑲嵌式布局,寬高固定,每個圖片下方顯示圖像描述

工作組最終選擇了第二個選項,你可以在上方圖片中看到那些設計稿,很滑稽地居然把Dota 2的圖片和權力的遊戲的圖像描述搭在了一起。第二個選項提供了圖片數量和圖片質量的最佳融合,既不會因為固定高度而必須被迫把圖片剪成一模一樣的高度,同時也可以讓圖片並排顯示。你也可以看到,圖像描述處於很高的優先級,這是由使用者意見回饋決定的。

Lightbox[]

FM Lightbox.png

關於lightbox,我們希望確保使用者可以看到更大的圖像,查看圖像描述,快速導航到其他圖片,並且看到關於許可協議的資訊(若相關)。這種體驗目前Gamepedia根本不存在,Fandom上也只有一點點實現。與其把使用者送到另一個頁面來看許可協議,正如我們最初探索的那樣,選擇透過按下資訊按鈕後的彈出式窗口呈現許可協議資訊,以減少查找此資訊所需的頁面存取次數的方法會更好。與圖庫的功能增強組合到一起,我們認為這絕對是圖片瀏覽的重要改進,而對於那些有很多靜態圖像,畫面截圖和藝術作品的社區來說就更重要了。

自訂[]

表達自己社區的獨特身份對於社區本身來說至關重要,但在Fandom和Gamepedia上的呈現方式有很大的差異。對於Gamepedia wiki,相比較於桌面端,移動端的自訂選項相當受限,但是我們希望確保可以在社區表達與良好的使用者體驗之間取得平衡。為此,到目前為止,控制Gamepedia移動端外觀的JS和CSS檔案會被鎖定為只允許wiki主管以上使用者群組編輯,且小工具會受到限制。若遇到任何自訂問題,請聯繫他們。

統一Fandom和Gamepedia之間的主題體驗仍處於內部討論階段,因此我們暫時限制了自訂的範圍。

收集意見回饋[]

關於提交測試版體驗的意見回饋,請聯繫wiki主管、提交工單或在我們的官方Discord伺服器上聯繫我們。我們歡迎你關於未來移動端wiki介面的想法與建設性批評!

Advertisement