FANDOM


Wiki現代化:持續創新的設計


Content-is-like-water-1980

內容就如同流動的水一樣在不同的設計中呈現出不同的形狀

萬物皆有變化。一些設計保持着經典,而另外一些卻強調功能性的簡化。在構建社區的時候,如何進行設計也是非常具有挑戰性的。作為FANDOM的目標之一,就是希望將全球用戶更多關注手機使用體驗。無論是平板電腦或者是手機,用戶都可以自由查閱他們感興趣的娛樂或者遊戲訊息。粉絲希望融入流行文化之中,了解他們感興趣話題的方方面面。我們目前的頁面瀏覽量有超過60%來自於手機上的訪問。

如果需要對社區體驗做長遠的發展考慮,就必須讓用戶對設計更加滿意,才能吸引越來越多的用戶關注和參與到社區中來。任何人都知道電腦螢幕上所展示的內容並不能在一個小小的手機螢幕上全部呈現出來。而這篇文章,我們將講解一些社區所喜歡使用的編輯習慣,而它是如何阻礙FANDOM社區用戶體驗的。

導航的作用

我們無法一貫使用水平列表是由於不同的社區代碼運用並不相同,讓一些導航框變得非常長。由於Mercury的使用以及替代方法的存在,導航框在手機上並不能正常顯示。

這裡為你提供一些適用規則:

  • 如果一組文章包含了某一篇文章,那麼這篇文章的順序並不是非常重要的。如果正確分類,文章就能夠正確顯示。Mercury和首頁展示內容工具都支持分類,也適用於wiki代碼。在Mercury中,分類可以通過類似文章的形式被展示,而搜尋引擎也會通過群組文章中的鏈接對內容進行抓取,這樣用戶就可以查找到。
  • 如果一組文章中的一篇文章需要按照順序進行呈現給讀者,那麼可以使用訊息框進行呈現。
  • 如果一篇文章只和另外一篇文章有關聯,那麼可以在移動訊息框中使用<navigation>標籤比較合適。

在一些社區上,文章頂端的標籤通過子文章頁進行移動非常常見,但是對於界面設計來說就變得非常奇怪了。一些情況下,手機上的導航標籤會失效,顯示空白頁。如上所說,在需要和一篇特定文章構建關係的時候,使用訊息框會更加實用。

標籤使用

標籤如果使用適當,將能夠清晰地展示訊息的邏輯結構。但是一些社區並沒有正確地使用它。請記住,大量使用定製化代碼的社區可能無法有效地使用FANDOM的標籤<tabber>功能,但是這些規則是通用的。

標籤應該是簡單的有效的,不應該互相嵌套。如果您的社區對圖像使用標籤功能, 特別是在訊息框中,應該考慮在整篇文章中或圖片冊<gallery>中發佈這些圖片。在電腦上, 你可以看到一個非常經典的滾動圖片冊;在手機上,你將看到一個橫向滾動並且寬大的圖像列,如果帶有標題還能夠點擊進行放大。這樣做就是為用戶着想,確保使用其他工具比標籤功能效果更好。

在內容中使用標籤會導致在文章中插入多標籤內容。如果將標籤刪除,標籤下的內容應該不受任何影響。如果內容結構需要重新調整,將這部分放在文章章節下或許更實用一些。長文章沒有問題,關鍵在於使用標籤對內容進行隱藏是否有必要。

標籤展示可以在一篇文章中展示不同的內容。在電腦瀏覽器中,用戶可以自由跳轉不同的內容。在手機上,它將展示為不同的內容鏈接。雖然同樣可以查閱內容,搜尋引擎一般只會抓取這些鏈接頁面,而不是文章頁面本身。正因此,我們建議所有通過標籤展示嵌入內容的文章應該將所鏈接的文章頁面作為主文章的子頁面,它將會一直出現在文章標題欄的導航中。

數據

許多社區覺得他們的文章只有內容,並沒有數據或者訊息框。但是FANDOM認為,如果一篇文章包含標題,一張或多張圖片,以及插入一些數據內容,無論結構如何,都會被認為是訊息框。如此看來,不算手機上的移動訊息框,任何帶有標題和圖片的內容都可視為一種訊息框的表現形式,而導航<navigation>本身也被視為數據。

切分數據可以有效地維護主體框架。使用不同的訊息框模版來展示不同數據是一種非常有效的方式。就好比汽車和飛行器需要明顯區分一樣。當你的社區不斷發展之後,你可能就需要更複雜的區分,比如運動型轎車和卡車,直升飛機和客機的區分一樣。

單一的數據應該包含單一的內容。也就是說,不要讓數和字或者不同的時間格式混合在一起。

在訊息框中羅列數值是非常常見的。從數據的角度來看,wiki文本列表要比使用逗號或者分號更好地展示不同內容。雖然創建橫向列表的形式並沒有固定的樣式,FANDOM還是有推薦的方法可以使用。當條目同等重要時,列表的方式要比大量堆砌在一起有效的多。

也就是說,

| item1 = 苹果 | item2 = 香蕉

沒有下面這樣的格式好:

| item = 
* 苹果
* 香蕉

儘管視覺上看不出太大差異,但當你有大量數據需要展示的時候,系統腳本更喜歡羅列的方式,而在不同的裝置上查看內容的時候,列表的方式也更加結構清晰。列表可以避免翻譯和語言混淆等問題。當然,懂技術的設計者可以使用CSS語言更好地創建自己喜愛的方式。

圖片使用

一些用戶非常喜歡使用圖片,所以就將大量的圖片使用單一的圖片冊進行呈現。但是這樣的效果並不好,它會影響閱讀者對於有效信息的需求,無法通過一種組織框架結構來完成信息相關性的傳達。

適當地對圖片進行命名可以提高SEO排名。這樣做可以讓更多人在網上查找到你的社區。然後,即便是對所有圖片命名,一個圖片冊如果含有大量的圖片並不會解決信息有效傳達的問題。如果你的單一圖片冊有一百張圖片,命名只能起到一點幫助。那該如何解決這個問題呢?你可以不使用圖片冊,或者減少圖片的使用。將圖片直接插入到文章內容處,可以對文字起到輔助閱讀的作用。它也可以幫助用戶在手機上減少翻閱圖片的疲勞感。

這裡是關於使用圖片的幾點提示:

  • 單一的圖片不能提高SEO排名,但是可以起到輔助作用。只有充滿文字信息的文章內容對讀者來說才是有價值的。充滿大量圖片而沒有太多文字信息的網頁會被搜尋引擎視為低質量內容。
  • 通過圖片冊簡單傳達內容。請記住,一個圖片冊最好是傳達一個主題內容,並且具有強烈的相關性。在創建圖片冊的時候,也可以直接和文章標題建立聯繫。比如,「食物」文章中建立「食物/圖片冊」內容。
  • 使用簡單的語言命名圖片。只有簡單有效的文字才會被搜尋引擎更好的識別,也才會讓更多人查詢到。
  • 花些時間撰寫你的文章摘要。摘要部分的文字描述可以幫助搜尋引擎了解圖片和文字之間的相關性,就好比文字是用來描述圖片的廣告內容一樣,這樣才會讓吸引更多用戶點擊查閱。

表格

表格在FANDOM上被頻繁使用。只要使用恰當,就可以帶來非凡的效果。但是請記住,手機狹窄的螢幕並不能讓表格實現在電腦上同樣的效果。

這裡有幾點需要注意:

  • 將表格視作為數據表。
  • 在手機上進行橫向縱向試閱。
  • 使用表格最多不要超過4列,寬度最大為600px(超過這個範圍,用戶只能通過手指上下滑動才能查看全部內容)。
  • 不要使用colspanrowspan
  • 不要表格嵌套表格。
  • 表格可以根據「標題」取名。這樣命名沒有問題。
  • 當標題僅限於某行或者某列的時候,你可以使用scope="col"或者scope="row"
  • 你可以通過CSS調整表格樣式。如果你希望用戶可以在表格中簡單編輯,你可能需要盡量減少"article-table", "WikiaTable", 以及"wikitable"在Wikia.css中的使用。
  • 你也可以使用"mw-collapsed", "mw-collapsible", "noprint", "nowraplinks", "plainlinks"和"sortable"等CSS代碼結構。
  • 盡量不要在表格中使用圖片,請盡量使用文字內容。如果你一定需要使用遊戲中的某些圖標,請盡量選擇小的圖標格式。或者調整它們為22X25像素。這樣圖片就不會佔用太大空間,讓表格變得更大。
  • 不要使用模版增減新的行數。因為這樣會讓服務器不知所措,無法正常顯示錶格在螢幕上的尺寸。
  • 如果你遵循這些規則,你的表格一般都會正常顯示並且發揮作用。你還可以通過調整每行的顏色用來區分不同行的內容。

在FANDOM上的一些社區會大量使用表格。如果不是進行數據展示,請盡量減少表格的使用。這已經成為2004年以來最重要的一個互聯網內容發佈規則了。

想要構建持久的設計風格有時候需要一些前瞻性。任何社區在接下來的幾年裡都可以逐漸適應新的設計風格,讓它有效地作用於各種裝置平台,唯有這樣才能吸引更多的用戶參與到你的社區當中。將這些逐漸轉化為社區的一種新的編輯規定可以幫助你的社區更長遠地發展下去。


Chen

Chen Shen

Chen Shen於2013年加入公司,目前已離職,曾任高級社區主管,當時主要負責Fandom新產品在英文社區上的應用和測試。在加入Fandom之前,他在電視媒體和時尚行業工作多年。
除了特别提示,社区内容遵循CC-BY-SA 授权许可。